課工場課件移動端p2p網(wǎng)站鄭講座

1、P2P金融網(wǎng)站-首頁UI設(shè)計(經(jīng)驗分享)主講：鄭中原課前準(zhǔn)備各位童鞋們可以在此下載素材：素材網(wǎng)址： 交流學(xué)習(xí)老牛君將和各位童鞋們在此交流：UI技術(shù)交流群：UI/UE設(shè)計學(xué)院1群：283965307（已滿）UI/UE設(shè)計學(xué)院2群：489380979UI/UE設(shè)計學(xué)院VIP群：購買課程后自動添加UI技術(shù)交流貼吧： 學(xué)習(xí)時間上課時間：周六、周天全天：上午10：00-11：00下午2：00-3：00鄭中原80后資深UI設(shè)計師 8年工作經(jīng)驗曾任高級設(shè)計、設(shè)計經(jīng)理等職務(wù)。精通平面設(shè)計/UI設(shè)計/漫畫繪本/flash動畫等專業(yè)。2013年注冊自己的興睿達(dá)廣告有限公司，開始創(chuàng)業(yè)。項目經(jīng)驗頗多，主營業(yè)務(wù)為網(wǎng)站建

2、設(shè)，H5開發(fā)，APP，微信平臺搭建運(yùn)營為主，同時涉及：平面設(shè)計，VI，動畫，漫畫、封面、廣告施工等。服務(wù)對象有：華為、中國平安、中國人保財險、政府機(jī)構(gòu)、方正集團(tuán)、百度、瑞思教育集團(tuán)、巨人教育集團(tuán)，騰訊視頻，星光童星學(xué)院，北大醫(yī)院，金融行業(yè)，大眾汽車，博苑教育集團(tuán)，中國建筑科學(xué)研究院，武漢體育總局，中國少兒出版社等。 UI具體參與項目：金投手 民信貸 華夏銀行龍舟計劃 皇家米洛奇 萬茗堂官網(wǎng) 榆垡水務(wù)網(wǎng) 華為MBB 2020發(fā)布會 突破電氣P2P金融-首頁UI設(shè)計同行業(yè)網(wǎng)站分析對比流行趨勢案例操作演示及講解配色的定位扁平圖標(biāo)的應(yīng)用功能區(qū)劃分方式P2P是個啥設(shè)計步驟頁面原型分析概念P2P金融又叫P

3、2P信貸。其中，P2P是 peer-to-peer 或 person-to-person 的簡寫，意思是：個人對個人。P2P金融指個人與個人間的小額借貸交易，一般需要借助電子商務(wù)專業(yè)網(wǎng)絡(luò)平臺幫助借貸雙方確立借貸關(guān)系并完成相關(guān)交易手續(xù)。借款者可自行發(fā)布借款信息，包括金額、利息、還款方式和時間，實現(xiàn)自助式借款;借出者根據(jù)借款人發(fā)布的信息，自行決定借出金額，實現(xiàn)自助式借貸。 思考問題：為什么要先知道概念？ ？P2P是個啥？原型參考同行功能區(qū)構(gòu)圖色調(diào)定位細(xì)節(jié)處理圖標(biāo)設(shè)計具體的設(shè)計步驟首頁整體框架網(wǎng)站整體分為頂部、導(dǎo)航區(qū)、內(nèi)容區(qū)及底部頂部、導(dǎo)航區(qū)、底部三部分為固定排版，在用戶訪問過程中，所有頁面的以上三

4、個區(qū)域均位于固定位置頂部：400電話、客戶端下載入口、登錄入口、注冊入口登錄及注冊：如已登錄，則顯示為賬戶名稱、消息中心及退出入口如未登錄，則顯示為登錄及注冊入口，點擊后進(jìn)入相應(yīng)頁面導(dǎo)航區(qū)：logo，投資入口、融資入口、個人中心入口logo:點擊logo，跳轉(zhuǎn)至網(wǎng)站首頁投資入口：點擊我要投資，進(jìn)入項目列表，默認(rèn)為金擔(dān)保項目列表融資入口：點擊我要融資，進(jìn)入融資申請頁面?zhèn)€人中心：點擊我的賬戶，如未登錄，則進(jìn)入登錄頁面，登錄成功后跳轉(zhuǎn)至個人總心；如已登錄，則直接進(jìn)入個人中心內(nèi)容區(qū)隨用戶訪問的頁面不同更換不同的內(nèi)容底部：版權(quán)信息，公司名稱，備案信息，及部分主要聯(lián)系方式，具體信息待金融提供頁面原型的分析

5、焦點圖最多5張，點擊翻頁時自動切換，默認(rèn)5秒自動播放下一張，在最后一張時，繼續(xù)自動播放則跳轉(zhuǎn)回第一張。焦點圖點擊后，頁面跳轉(zhuǎn)至焦點圖配置的地址。業(yè)績優(yōu)勢、安全保障、新手指南、產(chǎn)品介紹、業(yè)務(wù)模式、關(guān)于我們采用塊圖展現(xiàn)優(yōu)勢，點擊后進(jìn)入各自頁面同行業(yè)網(wǎng)站分析對比導(dǎo)航banner投資列表實力底部導(dǎo)航導(dǎo)航一般logo在左側(cè)，導(dǎo)航切換的顏色以logo主色調(diào)為準(zhǔn)導(dǎo)航上邊配功能欄，功能欄要和logo導(dǎo)航位置有明顯顏色區(qū)分，功能欄高度一般為：24-40px之間為佳；字體以微軟雅黑為主要字體，顏色為深色，不要用純黑，或以網(wǎng)站LOGO色進(jìn)行延展；導(dǎo)航字體點擊效果可以變色或者色塊下劃線等來區(qū)分熱點圖標(biāo)的顏色反差要大，

6、這樣更容易引起注意：多半以紅色橙色為主（紅橙系列為警告色），或以平臺的反色進(jìn)行加以提示。banner1.色彩圖標(biāo)多以扁平化為主2.顏色對別比較明快3.重點標(biāo)題突出4.功能性一般以注冊登錄為主，新手紅包等吸引眼球的活動為主；配以掃碼和手機(jī)APP下載功能連接按鈕實力1、以圖標(biāo)文字標(biāo)題及說明為主要展示形式2、圖標(biāo)圖形以扁平化及簡單線條色塊方式展現(xiàn)（色塊最好以單色為主）3、間距不要過于緊湊要留有呼吸的空間4、注意線條之間的分隔作用5、鼠標(biāo)滑過之后交互效果以彩色或者點亮形式為主要，滑過效果要明顯6、標(biāo)題字與說明文字之間的大小比例要大于2：1，顏色深淺有一定區(qū)分投資列表123功能以投資項目列表為主要功能模

7、塊，這個模塊當(dāng)中，有幾個需要重點突出的部分：年化收益（用戶的回報）期限（投資時長）進(jìn)度（百分比數(shù)據(jù)圖）狀態(tài)（投資按鈕）按鈕（不同顏色區(qū)分當(dāng)前標(biāo)的的投資狀態(tài)）特別重點：新手專享（為剛剛加入平臺的用戶一項特權(quán)，或叫獎勵）線框的使用：虛線與實線使用的恰到好處可以讓整個文字部分區(qū)分比較明顯而不顯死板（在目前P2P中盡量不要用虛線）色塊的應(yīng)用：標(biāo)題后面有的是一些“優(yōu)、實、保、信、抵”這類的單獨文字，這些是對該項目的保障方式說明，可以用色塊包含文字來重點突出，字體做反白效果底部網(wǎng)站底部信息主要以關(guān)于我們、快速導(dǎo)航、友情鏈接及版權(quán)信息為主：網(wǎng)站底部會采用重一點的顏色進(jìn)行表示，以體現(xiàn)平臺的根基扎實。電話不可少

8、，根據(jù)大數(shù)據(jù)分析來看，用戶在找不到聯(lián)系方式時會自然的拉到最底部。目前微信平臺受大眾青睞，關(guān)注微信不可少。流行趨勢B. 趨勢繼續(xù)持續(xù)2到4年左右D. 文化跨越時間和時代，具有連續(xù)性且持續(xù)下去 FadMaga TrendC. 大趨勢持續(xù)20年左右TrendCultureA. 流行短期出現(xiàn)6個月到1年左右，然后又消失研究步驟 收集歸納提煉總結(jié)轉(zhuǎn)化功能區(qū)之間的劃分方式此案例我們采用灰底色白色塊區(qū)分各功能區(qū)域間距沒有具體規(guī)范，但是要保證各版塊之間有呼吸的空間，不能過于密集盡量不要采用虛線的劃分形式如果采用線條描邊的劃分方式，描邊最好是1px配色的重要性主色調(diào)配色可以以logo的主色調(diào)為基礎(chǔ)展開配色，此案

9、例Logo色為橙色，所以我們通篇采用黑白灰和橙色為主彩色色調(diào)，選擇橙色的補(bǔ)色藍(lán)綠色為輔助色，對比更強(qiáng)烈黑白灰的應(yīng)用很重要，不同的灰度可以用來劃分整體區(qū)域 。文字內(nèi)容也可以用深灰與淺灰之間協(xié)調(diào)搭配，標(biāo)題色重，文章字輕。首頁整體主色彩不宜過多，顏色過多容易雜亂，不夠大氣 。 容易擾亂投資理財用戶的判斷，也容易造成主次不明。過期或者已經(jīng)結(jié)束的項目按鈕處理應(yīng)該以灰色為主，灰色在UI設(shè)計用戶習(xí)慣中表示不能點，或者已經(jīng)結(jié)束等等扁平圖標(biāo)在P2P網(wǎng)站的應(yīng)用隨著手機(jī)端界面的扁平化設(shè)計趨勢，UI設(shè)計也迎來了新的流行趨勢。那么在P2P金融的UI里，扁平化究竟應(yīng)用到何處？首先，可以瀏覽一些國內(nèi)的大型P2P金融網(wǎng)站，大部分的banner、內(nèi)文圖標(biāo)，重點突出的部分都用扁平化來設(shè)計，包括H5頁面的效果，多以扁平風(fēng)格為主。扁平風(fēng)格大概分為幾種設(shè)計形式：純色彩色線條其他扁平圖標(biāo)在P2P網(wǎng)站的應(yīng)用1.采用扁平風(fēng)格設(shè)計，更好的解決了交互技術(shù)問題2.跟緊目前UI行業(yè)的流行趨勢3.扁平風(fēng)格視覺上干凈整潔，簡單明了 業(yè)內(nèi)知名網(wǎng)站參考我們該怎么設(shè)計？原型里有6個分類圖標(biāo)要設(shè)計：業(yè)績優(yōu)勢 安全保障 新手指南 產(chǎn)品介紹 業(yè)務(wù)模式 關(guān)于我們123課后練習(xí)按照右側(cè)原型圖設(shè)計首頁Logo可以