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

一. 需求分析

1. 新功能是什么？

收到運(yùn)營(yíng)那邊的文案是這樣的：

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

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

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

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

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

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

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

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

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

想象用戶在去探索新功能，打開(kāi)新世界的大門(mén)。

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

想象一個(gè)人躺著很放松的樣子。

二. 確認(rèn)視覺(jué)風(fēng)格

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

三. 繪制設(shè)計(jì)稿

1. 繪制草圖

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

2. 線稿

剛開(kāi)始做設(shè)計(jì)的時(shí)候?yàn)榱耸∈挛乙擦?xí)慣于一邊上色一邊繪圖，這樣效率反而會(huì)降低。就像以前畫(huà)畫(huà)的時(shí)候我們都需要先打好型再上色，更加直觀也便于修改，這里其實(shí)也類(lèi)似于先做一個(gè)低保真模型，后面上色就很快了。

3. 上色

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

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

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

5. 動(dòng)效加成

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

總   結(jié)

從收到需求到交付，過(guò)程中需要反復(fù)去和產(chǎn)品討論進(jìn)程，以免后期不必要的修改和爭(zhēng)論影響進(jìn)度和效率。切圖和標(biāo)注要仔細(xì)確認(rèn)，圖片大小不要有偏差，交付給開(kāi)發(fā)之后需要跟進(jìn)開(kāi)發(fā)進(jìn)度確認(rèn)完成度，開(kāi)戶程序員人人有責(zé)。上線之后要總結(jié)和分析不足之處，在之后的設(shè)計(jì)中加以改進(jìn)。聽(tīng)取反饋意見(jiàn)，是否達(dá)到了傳達(dá)意圖分析所在問(wèn)題之處。以上就是我對(duì)這次設(shè)計(jì)的總結(jié)，希望能夠給大家?guī)?lái)幫助，大家也可以提出問(wèn)題和建議。