新功能引導(dǎo)頁(yè)設(shè)計(jì)思路
在設(shè)計(jì)領(lǐng)域，不斷總結(jié)與交流是提升自我的重要途徑。在此，我將自己總結(jié)的一套新功能引導(dǎo)頁(yè)設(shè)計(jì)思路分享出來(lái)，希望能與大家共同探討，也期待大家提出問(wèn)題和建議。另外，文章中使用到的 2.5D 軸測(cè)圖輔助線，我會(huì)在文末附件中添加，大家可以下載打印用來(lái)畫草圖，也可以在軟件上使用。
首先要明確新功能是什么。我收到運(yùn)營(yíng)那邊的文案，主要涉及四個(gè)新功能：一是照護(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è)量提醒如約而至，讓血糖管理更輕松。
了解到新功能大致內(nèi)容后，還需要向產(chǎn)品詢問(wèn)這些具體功能點(diǎn)的使用方式以及解決了用戶哪些問(wèn)題等。不過(guò)由于這些功能的界面設(shè)計(jì)之前由我完成，前期也和產(chǎn)品有過(guò)溝通，所以我就跳過(guò)了這一步，但實(shí)際上如果不了解功能，這一步是必須要做的。
接下來(lái)要思考如何使畫面貫穿文案內(nèi)容，表達(dá)出新功能的特點(diǎn)。這就像做看圖說(shuō)話的反向題目，要根據(jù)文字去構(gòu)思畫面。首先在腦海里想象各種可能的畫面，然后通過(guò)關(guān)鍵詞搜索來(lái)尋找與腦海中畫面相符的素材，如果想象不到畫面，也可以通過(guò)搜索圖片來(lái)構(gòu)建想象。比如想到照護(hù)計(jì)劃全程管理，我腦海里浮現(xiàn)的是一個(gè)控制臺(tái)，用戶能全程掌握自己的計(jì)劃管理；想到全新健康頁(yè)面，會(huì)想象用戶運(yùn)動(dòng)后查看自己健康數(shù)據(jù)的場(chǎng)景；想到新增發(fā)現(xiàn)頁(yè)面，會(huì)聯(lián)想到用戶探索新功能，打開新世界大門的畫面；想到用藥、測(cè)量提醒，會(huì)浮現(xiàn)一個(gè)人躺著很放松的樣子。
這一步需要收集大量不同視覺風(fēng)格的圖片來(lái)確定視覺方向。為了減少不必要的改稿，我會(huì)給產(chǎn)品快速瀏覽搜集到的圖片，一起討論視覺風(fēng)格的方向。這里并非是要迎合產(chǎn)品的口味，畢竟不是每個(gè)產(chǎn)品都對(duì)視覺流行趨勢(shì)有敏銳的嗅覺，主要是討論時(shí)下流行的設(shè)計(jì)技法以及適合我們產(chǎn)品 App 風(fēng)格的利弊。如果前期沒(méi)有確認(rèn)好視覺風(fēng)格，等頁(yè)面繪制完評(píng)審時(shí)才發(fā)現(xiàn)風(fēng)格問(wèn)題，就可能導(dǎo)致大量修改甚至推倒重做，影響進(jìn)程和效率。最后我們討論決定結(jié)合手繪和當(dāng)下比較流行的 2.5D 風(fēng)格。
繪制草圖是非常重要的一步，一定不要急于直接上機(jī)操作。我第一稿快速繪制的草圖比較雜亂，不過(guò)到這里思路已經(jīng)很清晰了。如果時(shí)間充足，可以整理一下再繪制一版清爽干凈的草圖。建議像我一樣手繪不太好的設(shè)計(jì)師，在畫草圖時(shí)可以借助輔助線或者網(wǎng)格線。
之后是線稿環(huán)節(jié)。剛開始做設(shè)計(jì)時(shí)，我為了省事，習(xí)慣于一邊上色一邊繪圖，其實(shí)這樣效率反而更低。就像以前畫畫要先打好型再上色一樣，先畫好線稿更直觀，也便于修改，這其實(shí)和先做一個(gè)低保真模型類似，后面上色會(huì)更順利。
上色時(shí)，可以選取與自身產(chǎn)品相關(guān)的色調(diào)，也可以大膽配色，這取決于想要通過(guò)色彩傳達(dá)的情緒和品牌感。我這次的配色方案主要基于產(chǎn)品 App 的主色和輔助色進(jìn)行變化延伸。
接著是增加質(zhì)感和調(diào)整細(xì)節(jié)。在畫面上，可以通過(guò)增加顆粒等技法讓畫面更有質(zhì)感，在陰影部分增加雜色，能讓畫面細(xì)節(jié)更豐富。添加顆粒質(zhì)感的方法有很多，既可以在畫面繪制完成后導(dǎo)入 PS 里使用畫筆工具再次繪制，我這次則直接使用 sketch 的顆粒填充并進(jìn)行調(diào)整。最后進(jìn)行微調(diào)，進(jìn)一步豐富畫面，比如給人物加一個(gè)陰影，給手機(jī)增加一些光線，添加一些若隱若現(xiàn)的背景等。
調(diào)整完成之后，可以使用動(dòng)效軟件添加一些細(xì)微的動(dòng)效，讓畫面更加生動(dòng)。不過(guò)在這之前，需要和開發(fā)人員談?wù)搫?dòng)效的實(shí)現(xiàn)方案。
