一個(gè)好的引導(dǎo)頁設(shè)計(jì)會(huì)給用戶留下良好的第一印象。也可以降低用戶的學(xué)習(xí)成本，快速上手產(chǎn)品并了解新增功能，避免用戶使用過程中的迷茫，減少誤操作，是提升產(chǎn)品體驗(yàn)的必要手段。接下來我們以閱讀app的新版本功能引導(dǎo)頁為例，一起探討關(guān)于引導(dǎo)頁的設(shè)計(jì)思路。

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)。

此處省略溝通環(huán)節(jié)…

第一張圖的主題：重點(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)勢(shì)，上一頁與下一頁啟到承上啟下的作用，好的視覺配上動(dòng)畫會(huì)使引導(dǎo)頁更加生動(dòng)有吸引力。

總結(jié)

分析—提煉—風(fēng)格—草稿—終稿—細(xì)化—?jiǎng)有?/strong>

如果你做引導(dǎo)頁的時(shí)候不知道如何下手，可以嘗試一下這個(gè)思路~~其實(shí)大部分設(shè)計(jì)工作都可以用這個(gè)思路去完成，希望這篇文章能夠給予更多新手設(shè)計(jì)師一些靈感和幫助~

作者：閱文CDDC

原文鏈接：https://www.zcool.com.cn/article/ZOTM1NDAw.html