UI設計中引導頁設計指南

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

　　1、需求分析，提煉關鍵詞
 

　　需求內容：新用戶引導頁面，展示產品新功能，符合整體設計風格。
 

　　產品文案：
 

　　海量圖書一網打盡
 

　　影視原著、猜你喜歡、全網熱議
 

　　不讀書也給你好看
 

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

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

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

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

　　提煉關鍵詞：書多、影視
 

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

　　提煉關鍵詞：互動、福利

 

　　接下來所有的視覺設計都圍繞這兩個主題，也就是產品經理想要表達的關鍵點。
 

　　2、讓主視覺準確表達關鍵詞
 

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

 

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

　　看圖作文的流程: 圖片—關鍵詞—寫作文
 

　　順序反過來，就是引導頁設計流程：文案—關鍵詞—圖片
 

　　這樣就可以確定下來兩張引導頁的框架：

 

　　3、確定視覺風格
 

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

 

　　情景類——表現力豐富，把握難度較高，設計周期長。
 

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

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

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

　　綜合考慮后選擇了抽象類的視覺風格。
 

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

　　4、手繪草稿
 

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

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

 

　　5、軟件繪制
 

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

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

 

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

　　6、增加質感和調整細節(jié)
 

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

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

 

　　7、動效設計
 

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

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

　　總結
 

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