UI設(shè)計中引導(dǎo)頁設(shè)計指南

　　一個好的引導(dǎo)頁設(shè)計會給用戶留下良好的第一印象。也可以降低用戶的學(xué)習(xí)成本，快速上手產(chǎn)品并了解新增功能，避免用戶使用過程中的迷茫，減少誤操作，是提升產(chǎn)品體驗的必要手段。今天AAA教育郭老師就針對UI設(shè)計中引導(dǎo)頁設(shè)計指南進行簡單的說明。
 

　　1、需求分析，提煉關(guān)鍵詞
 

　　需求內(nèi)容：新用戶引導(dǎo)頁面，展示產(chǎn)品新功能，符合整體設(shè)計風(fēng)格。
 

　　產(chǎn)品文案：
 

　　海量圖書一網(wǎng)打盡
 

　　影視原著、猜你喜歡、全網(wǎng)熱議
 

　　不讀書也給你好看
 

　　書評互動、專欄文章、福利活動
 

　　仔細一看，此文案對仗工整，讀起來朗朗上口，幾乎無可挑剔…
 

　　讀了一遍又一遍，發(fā)現(xiàn)文案表現(xiàn)的重點比較多而且分散，沒有明確具體功能點，難以形成整體的畫面感。為避免信息傳遞偏差，減少不必要的改稿要求，我們有必要和產(chǎn)品經(jīng)理溝通文案。主次文案只是表達的工具，明確要達成的功能目標(biāo)才是重點。
 

　　第一張圖的主題：重點在于展示海量書籍，并且用影視書來拉近和用戶的距離;其次是一個產(chǎn)品特點猜你喜歡推薦功能;評論互動的氛圍也需要烘托一下。
 

　　提煉關(guān)鍵詞：書多、影視
 

　　第二張圖的主題：重點展示發(fā)現(xiàn)頁的新功能專欄和評論互動，其次是優(yōu)惠券相關(guān)的福利活動。
 

　　提煉關(guān)鍵詞：互動、福利

 

　　接下來所有的視覺設(shè)計都圍繞這兩個主題，也就是產(chǎn)品經(jīng)理想要表達的關(guān)鍵點。
 

　　2、讓主視覺準(zhǔn)確表達關(guān)鍵詞
 

　　在這個過程中，經(jīng)常會出現(xiàn)設(shè)計稿表達的意思和產(chǎn)品經(jīng)理心中的畫面相距甚遠，不同的設(shè)計師針對一樣的文案也會設(shè)計出完全不一樣的方案，大部分原因是畫面表達的關(guān)鍵詞有偏差。前面的關(guān)鍵詞提煉已經(jīng)幫我們大概確定了畫面的中心含義，接下來怎么辦呢?

 

　　我們上小學(xué)一年級的時候都做過經(jīng)典的看圖作文，重溫一下美好的童年~~~看圖作文一般都會給一張圖畫，然后一個明確的標(biāo)題。圖畫結(jié)合標(biāo)題，作文的內(nèi)容基本限定在一個范圍內(nèi)，只要不出現(xiàn)大的理解偏差，一般不會跑題。也就能寫出來合格的作文。
 

　　看圖作文的流程: 圖片—關(guān)鍵詞—寫作文
 

　　順序反過來，就是引導(dǎo)頁設(shè)計流程：文案—關(guān)鍵詞—圖片
 

　　這樣就可以確定下來兩張引導(dǎo)頁的框架：

 

　　3、確定視覺風(fēng)格
 

　　常言道：知己知彼，百戰(zhàn)不殆。站在巨人的肩膀上才能看得更遠…相信你每次做設(shè)計的之前就已經(jīng)了解過大部分的同類競品。根據(jù)視覺表現(xiàn)風(fēng)格分類概括，功能引導(dǎo)頁基本可以分為四大類：

 

　　情景類——表現(xiàn)力豐富，把握難度較高，設(shè)計周期長。
 

　　抽象類——抽象展示功能點，不依賴頁面，靈活但表意寬泛。
 

　　示意類——對頁面的功能模塊概括展示，簡潔清晰，個別頁面適合
 

　　截屏類——主視覺為實際截圖，表達準(zhǔn)確，簡單穩(wěn)定。
 

　　綜合考慮后選擇了抽象類的視覺風(fēng)格。
 

　　視覺風(fēng)格要和品牌風(fēng)格一致，產(chǎn)品的每個部分傳達給用戶同樣的品牌形象，就可以加強品牌在用戶心理的認(rèn)知。必要的時候也需要和產(chǎn)品經(jīng)理討論用哪種設(shè)計風(fēng)格更貼合產(chǎn)品的氣質(zhì)。如果前期沒有確認(rèn)好視覺風(fēng)格，在頁面繪制完之后評審發(fā)現(xiàn)風(fēng)格上的問題，會導(dǎo)致大量的修改甚至推倒重做，影響進度和效率。
 

　　4、手繪草稿
 

　　手繪草稿成本低廉，實現(xiàn)迅速。草圖不需要看上去很漂亮;只需要表達出想法，引發(fā)討論和催生想法即可。這一步非常重要，可以對初稿有基本的把握，減少反復(fù)修改。堅持手繪草稿設(shè)計，原創(chuàng)能力會有較大的提升。
 

　　多版本草圖嘗試，思路會非常多且清晰。如果時間充足可以整理出最終版。

 

　　5、軟件繪制
 

　　草圖的勾畫不能占用太多時間，基本確定好之后進行軟件繪制，過程中還可以隨時進行調(diào)整。
 

　　下面是根據(jù)草圖進行的繪制，前期可以用單色，把注意力集中在構(gòu)圖和形態(tài)上，好的基礎(chǔ)會給之后的工作減少阻力。

 

　　在選取顏色的時候，可以選取和自身產(chǎn)品相關(guān)的色調(diào)，也可以大膽配色，這取決于通過色彩傳達的情緒和品牌感。在這里我的配色方案主要基于產(chǎn)品的主色和輔助色的變化延伸。
 

　　6、增加質(zhì)感和調(diào)整細節(jié)
 

　　兩張圖基本設(shè)計完成，根據(jù)畫面情況再做一些加減法。
 

　　在畫面上我們可以通過增加紋理等技法使畫面更有質(zhì)感，在陰影部分可以增加雜色，豐富畫面的細節(jié)。比如可以給人物加一個陰影，給手機增加一些光線，加一些若影若現(xiàn)的背景等等。

 

　　7、動效設(shè)計
 

　　調(diào)整完成之后，使用動效軟件加一些細微的動效讓畫面更加生動，前提是需要和開發(fā)討論動效實現(xiàn)方案。
 

　　引導(dǎo)頁重在強調(diào)產(chǎn)品的核心功能與優(yōu)勢，上一頁與下一頁啟到承上啟下的作用，好的視覺配上動畫會使引導(dǎo)頁更加生動有吸引力。
 

　　總結(jié)
 

　　如果你做引導(dǎo)頁的時候不知道如何下手，可以嘗試一下這個思路。其實大部分設(shè)計工作都可以用這個思路去完成，希望這篇文章能夠給予更多新手設(shè)計師一些靈感和幫助。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。