實戰案例！新功能引導頁設計思路總結

Darren大人 ：總結了一套引導頁的設計思路，希望自己在新的一年能多學習總結，在這里和大家分享交流，大家也可以提出問題和建議。

一. 需求分析

1. 新功能是什么？

收到運營那邊的文案是這樣的：

• 照護計劃全程管理：規律復診日期、復查項目提前查看。
• 全新健康頁面：健康檔案、近7天自測、飲食運動數據一目了然。
• 新增發現頁面：精選高質量控糖知識等你發現。
• 用藥、測量提醒：藥物、測量提醒如約而至，血糖管理更輕松。

了解到新功能大致是說照護計劃管理、增加健康檔案、發現頁面、提醒功能這幾點，然后向產品詢問這些具體的功能點如何使用，解決了用戶什么樣的問題等等。由于這些功能的界面設計之前也是由我來完成的，前期也和產品有過溝通我就跳過了這一步，實際上在不了解功能的時候是需要去確認一下的。

2. 如何使畫面貫穿文案內容表達新功能特點？

上小學的時候我們都做過看圖說話的題目，在這里我們需要反過來看字畫圖。首先在腦海里想象各式各樣畫面，然后通過關鍵詞搜索把我們腦海里浮現出來的畫面尋找出來。當然如果想象不到畫面我們同樣可以去搜索圖片去構建想象。想象一下作為用戶，使用這些功能時候的場景。

照護計劃全程管理：規律復診日期、復查項目提前查看。

我的腦海里出現的是這樣的畫面，一個控制臺，用戶能夠全程掌握自己的計劃管理。

全新健康頁面：健康檔案、近7天自測、飲食運動數據一目了然。

想象畫面是這樣，用戶在運動，運動完之后查看自己的健康數據。

新增發現頁面：精選高質量控糖知識等你發現。

想象用戶在去探索新功能，打開新世界的大門。

用藥、測量提醒：藥物、測量提醒如約而至，血糖管理更輕松。

想象一個人躺著很放松的樣子。

二. 確認視覺風格

這一步需要收集大量的不同視覺風格圖片確定視覺方向，為了減少不必要的改稿要求，我會給產品快速瀏覽搜集到的圖片，討論視覺風格的方向。當然這里不是為了去迎合產品的口味，不是每一個產品都對視覺流行趨勢有良好的嗅覺，在這里主要是討論時下的流行設計技法和適合我們產品App的風格利弊。如果前期沒有確認好視覺風格，在頁面繪制完之后評審時說風格上的問題就會導致大量的修改甚至推倒重做，影響進程和效率。最后討論結果是結合手繪和當下比較流行的2.5D風格。

三. 繪制設計稿

1. 繪制草圖

第一稿快速繪制的草圖比較亂......繪制到這里其實思路已經非常清晰了，如果時間充足可以整理一下再繪制一版清爽干凈的草圖。繪制草圖是非常重要的步驟，一定不要急于直接上機。建議像我一樣手繪不太好的設計師草圖也可以借用一下輔助線或者網格線。

2. 線稿

剛開始做設計的時候為了省事我也習慣于一邊上色一邊繪圖，這樣效率反而會降低。就像以前畫畫的時候我們都需要先打好型再上色，更加直觀也便于修改，這里其實也類似于先做一個低保真模型，后面上色就很快了。

3. 上色

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

4. 增加質感和調整細節

在畫面上我們可以通過增加顆粒等技法使畫面更有質感，在陰影部分可以增加雜色，會更加豐富畫面的細節。添加顆粒質感的方法有很多，可以在畫面繪制完成之后導入PS里使用畫筆工具再次繪制，在這里我直接使用sketch的顆粒填充并進行調整。最后進行微調，再次豐富畫面，比如可以給人物加一個陰影，給手機增加一些光線，加一些若影若現的背景等等。

5. 動效加成

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

總結

從收到需求到交付，過程中需要反復去和產品討論進程，以免后期不必要的修改和爭論影響進度和效率。切圖和標注要仔細確認，圖片大小不要有偏差，交付給開發之后需要跟進開發進度確認完成度，開戶程序員人人有責。上線之后要總結和分析不足之處，在之后的設計中加以改進。聽取反饋意見，是否達到了傳達意圖分析所在問題之處。以上就是我對這次設計的總結，希望能夠給大家帶來幫助，大家也可以提出問題和建議。

「引導頁設計你還需要這些！」

• 《收藏起來！超實用的引導頁設計基礎手冊》
• 《從零開始設計APP！快速提升引導頁格調的設計方法總結》
• 《討厭引導頁？這5個技巧幫你設計出眼前一亮的App引導頁》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com