大牛設(shè)計師告訴你如何設(shè)計引導(dǎo)頁

一. 需求分析

1. 新功能是什么？

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

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

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

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

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

照護計劃全程管理：規(guī)律復(fù)診日期、復(fù)查項目提前查看。

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

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

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

新增發(fā)現(xiàn)頁面：精選高質(zhì)量控糖知識等你發(fā)現(xiàn)。

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

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

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

二. 確認視覺風(fēng)格

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

三. 繪制設(shè)計稿

1. 繪制草圖

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

2. 線稿

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

3. 上色

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

4. 增加質(zhì)感和調(diào)整細節(jié)

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

5. 動效加成

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

總   結(jié)

從收到需求到交付，過程中需要反復(fù)去和產(chǎn)品討論進程，以免后期不必要的修改和爭論影響進度和效率。切圖和標注要仔細確認，圖片大小不要有偏差，交付給開發(fā)之后需要跟進開發(fā)進度確認完成度，開戶程序員人人有責(zé)。上線之后要總結(jié)和分析不足之處，在之后的設(shè)計中加以改進。聽取反饋意見，是否達到了傳達意圖分析所在問題之處。以上就是我對這次設(shè)計的總結(jié)，希望能夠給大家?guī)韼椭蠹乙部梢蕴岢鰡栴}和建議。