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