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

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

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

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

　　產(chǎn)品文案：
 

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

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

　　不讀書也給你好看
 

　　書評(píng)互動(dòng)、專欄文章、福利活動(dòng)
 

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

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

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

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

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

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

 

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

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

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

 

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

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

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

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

 

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

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

 

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

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

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

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

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

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

　　4、手繪草稿
 

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

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

 

　　5、軟件繪制
 

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

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

 

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

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

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

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

 

　　7、動(dòng)效設(shè)計(jì)
 

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

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

　　總結(jié)
 

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