設計基礎引導頁你會做嗎？

引導頁是我們每乙個ui設計師都面臨過的設計，無數次的設計之後，我們是否已經找到了乙個完美的解決方案或是思路呢？

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

產品文案：

海量圖書一網打盡

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

不讀書也給你好看

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

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

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

此處省略溝通環節…

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

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

看圖作文的流程:——寫作文

順序反過來，就是引導頁設計流程：文案——

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

3、確定視覺風格

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

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

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

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

截圖類——主視覺為實際截圖，表達準確，簡單穩定。

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

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

4、手繪草稿

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

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

5、軟體繪製

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

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

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

6、增加質感和調整細節

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

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

7、動效設計

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

總結

分析—提煉—風格—草稿—終稿—細化—動效

設計基礎 引導頁你會做嗎？