網(wǎng)頁(yè)設計中如何系統的畫(huà)原型
設計在剛進(jìn)行原型設計的時(shí)候，不具備系統的思考框架。往往缺少某步操作流程、頁(yè)面，控件或者是沒(méi)思考好用戶(hù)的需求及頁(yè)面設計的目的，或是整個(gè)頁(yè)面在用戶(hù)體驗上十分粗糙。
那如何從哪些方面系統地去畫(huà)原型?在實(shí)踐與學(xué)習之中，鄭州清新教育鄭州網(wǎng)頁(yè)設計培訓的老師總結為3個(gè)步驟。
一、需求
首先，需求，即什么人在什么場(chǎng)景下為了什么目的使用什么功能。這里要注意要綜合用戶(hù)和我們的需求，并將其融入到產(chǎn)品設計中。比如用戶(hù)喜歡在新年期間聽(tīng)取吉祥話(huà)，求到幸運簽;而我們希望透過(guò)這個(gè)活動(dòng)促進(jìn)用戶(hù)分享，進(jìn)而提升品牌曝光率。所以落實(shí)在產(chǎn)品設計中便是流程的趣味性及分享機制的設計。
二、入口
其次，入口，即用戶(hù)從哪些地方獲知我們的活動(dòng)，或者說(shuō)用戶(hù)從哪些地方進(jìn)入活動(dòng)頁(yè)面。這里要注意收集及窮盡入口，設計時(shí)不要有遺漏，讓技術(shù)能夠完整開(kāi)發(fā)，測試人員能完整測試，保證活動(dòng)的傳播效果。在自己實(shí)踐中，因為在入口處只粗糙交代了幾個(gè)，導致在項目后期開(kāi)發(fā)及測試對入口存在不該有的疑惑點(diǎn)。
三、設計
最后，設計。清楚知道需求與入口，但還是不太知道怎么下手原型，其實(shí)出在幾個(gè)問(wèn)題上：
不知道流程怎么畫(huà)。
不知道頁(yè)面怎么設計。
不知道控件怎么設計。
不知道用戶(hù)體驗方面怎么設計。
我用一句話(huà)介紹我的設計思路：從步驟到頁(yè)面，從元素到控件，進(jìn)行后續設計。
1、從步驟到頁(yè)面
描繪業(yè)務(wù)流程及用戶(hù)操作流程→ 將流程轉化為頁(yè)面。首先，怎么去描繪流程?我將其分成兩點(diǎn)：
(1)業(yè)務(wù)流程
首先，我們需清楚線(xiàn)下場(chǎng)景，明確其中有哪些人物參與哪些任務(wù)。然后回歸線(xiàn)上，利用系統替換其中的角色。比如，線(xiàn)下用戶(hù)求簽的場(chǎng)景中，人物包括用戶(hù)及解簽人，任務(wù)包括搖簽，出簽及解簽。系統可以替代解簽人的角色及其任務(wù)。
(2)操作流程
先明晰用戶(hù)操作的主流程，然后再去窮盡分支流程。不要過(guò)早地陷入分支細節中，而忽視了主流程的清晰性及簡(jiǎn)潔性，深深打擊用戶(hù)體驗。
然后，怎么將流程轉化為頁(yè)面呢?
將流程命名為頁(yè)面。比如進(jìn)入活動(dòng)首頁(yè)—填寫(xiě)信息—獲取結果可依次命名為落地頁(yè)-編輯頁(yè)及結果頁(yè)。
明確頁(yè)面目的。好比結果頁(yè)要引導用戶(hù)分享。
2、從元素到控件
填充元素 → 轉化控件 → 頁(yè)面流轉
填充元素：圍繞任務(wù)設計元素輔助用戶(hù)完成任務(wù)。比如：編輯頁(yè)的任務(wù)是填寫(xiě)信息。所以應具備可填寫(xiě)信息的元素;為了讓用戶(hù)簡(jiǎn)單順利完成任務(wù)，還需加引導元素。轉
轉化控件：將元素轉化為一個(gè)個(gè)控件比如點(diǎn)擊按鈕，文本框等。比如根據“填寫(xiě)信息”設計文本框;根據“引導元素“設計動(dòng)畫(huà)等。
頁(yè)面流轉：通過(guò)控件描繪頁(yè)面跳轉的關(guān)系，將各頁(yè)面通過(guò)連接線(xiàn)連接起來(lái)。好比點(diǎn)擊編輯頁(yè)的確認按鈕，用戶(hù)進(jìn)入結果頁(yè)。
3、進(jìn)行后續設計
包括視覺(jué)邏輯以及功能預見(jiàn)性。這里就簡(jiǎn)單提一下：
視覺(jué)邏輯：通過(guò)上述設計步驟后，頁(yè)面就是一堆元素累積的大雜燴。所以需要有清晰的視覺(jué)層次以及良好的視覺(jué)流結構。
清晰的視覺(jué)層次：通過(guò)組織讓用戶(hù)意識到元素間的相關(guān)性，通過(guò)突出元素將用戶(hù)引導到重要的元素。良好的視覺(jué)流結構：視覺(jué)焦點(diǎn)的設置不宜過(guò)多，導致用戶(hù)視覺(jué)不斷跳躍。
功能預見(jiàn)性：要讓用戶(hù)看到就知道如何操作。
- 2018-03-13平面設計中的意境之美如何營(yíng)造
- 2018-03-10網(wǎng)頁(yè)設計中的css用法特點(diǎn)注意事項
- 2018-03-09網(wǎng)頁(yè)設計師必須要學(xué)習的視覺(jué)層級技巧
- 2018-03-08響應式網(wǎng)頁(yè)設計的9項基本原則
- 2018-03-05室內裝修進(jìn)度計劃表如何安排時(shí)間
- 2018-03-04網(wǎng)頁(yè)設計常用的技能手法：色彩疊加
- 2018-03-02平面設計作品如何更好的利用插畫(huà)
- 2018-02-28室內家居裝修設計方案如何制定
- 2018-02-23室內家裝設計如何影響你的心情
- 2018-02-22設計師如何更好的獲取靈感
- 2018-02-21網(wǎng)頁(yè)設計手機移動(dòng)端設計稿寬度多少
- 2018-02-21建筑設計與室內設計如何更好的結合
- 2018-02-11室內裝修設計中如何分辨承重墻與剪力墻
- 2018-02-08人工智能網(wǎng)頁(yè)設計的特點(diǎn)和優(yōu)勢
- 2018-02-052018年較新流行的網(wǎng)頁(yè)設計趨勢
- 求學(xué)問(wèn)答專(zhuān)業(yè)答復，快速響應
- 電話(huà)：0371-63218905
- 手機：13613841515
-
QQ：
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16
