設計方法 | 移動醫療類新功能引導頁設計思路
:point_up_2:首發於微信公眾號：小阿田的設計筆記~
作者：程小龍Darren
總結了一套引導頁的設計思路，希望自己在新的一年能多學習總結，在這裡和大家分享交流。文章裡使用到的2.5D軸測圖輔助線關注公眾號“小龍的UX學習本”回覆2.5D輔助線即可下載，大家在可以下載自己列印畫草圖使用，也可以在軟體上使用。
一
需求分析
新功能是什麼
照護計劃全程管理 規律複診日期、複查專案提前檢視
全新健康頁面 健康檔案、近7天自測、飲食運動資料一目瞭然
新增發現頁面 精選高質量控糖知識等你發現
用藥、測量提醒 藥物、測量提醒如約而至，血糖管理更輕鬆
瞭解到新功能大致是說 照護計劃管理、增加健康檔案、發現頁面、提醒功能這幾點，然後向產品詢問這些具體的功能點如何使用，解決了使用者什麼樣的問題等等。由於這些功能的介面設計之前也是由我來完成的，前期也和產品有過溝通我就跳過了這一步，實際上在不瞭解功能的時候是需要去確認一下的。
如何使畫面貫穿文案內容表達新功能特點？
上小學的時候我們都做過看圖說話的題目，在這裡我們需要反過來看字畫圖，首先在腦海裡想象各式各樣畫面，然後通過關鍵詞搜尋把我們腦海裡浮現出來的畫面尋找出來，當然如果想象不到畫面我們同樣可以去搜索圖面去構建想象。想象一下作為使用者，使用這些功能時候的場景
1照護計劃全程管理
規律複診日期、複查專案提前檢視
我的腦海裡出現的是這樣的畫面，一個控制檯，使用者能夠全程掌握自己的計劃管理。
2全新健康頁面
健康檔案、近7天自測、飲食運動資料一目瞭然
想象畫面是這樣，使用者在運動，運動完之後檢視自己的健康資料。
3新增發現頁面
精選高質量控糖知識等你發現
想象使用者在去探索新功能，開啟新世界的大門
4用藥、測量提醒
藥物、測量提醒如約而至，血糖管理更輕鬆
想象一個人躺著很放鬆的樣子
二、確認視覺風格
這一步需要收集大量的不同視覺風格圖片確定視覺方向，為了減少不必要的改稿要求，我會給產品快速瀏覽蒐集到的圖片討論視覺風格的方向，當然這裡不是為了去迎合產品的口味，不是每一個產品都對視覺流行趨勢有良好的嗅覺，在這裡主要是討論時下的流行設計技法和適合我們產品App的風格利弊。如果前期沒有確認好視覺風格，在頁面繪製完之後評審時說風格上的問題就會導致大量的修改甚至推倒重做，影響程序和效率。最後討論結果是結合手繪和當下比較流行的2.5D風格。下圖是我在花瓣蒐集到的一些圖。
三繪製設計稿
草圖繪製
第一稿快速繪製的草圖比較亂。。。繪製到這裡其實思路已經非常清晰了，如果時間充足可以整理一下再繪製一版清爽乾淨的草圖（早上吃了一顆滷蛋不小心滴在紙上了。。）繪製草圖是非常重要的步驟，一定不要急於直接上機。建議像我一樣手繪不太好的設計師草圖也可以借用一下輔助線或者網格線。
線稿
剛開始做設計的時候為了省事我也習慣於一邊上色一邊繪圖，這樣效率反而會降低，就像以前畫畫的時候我們都需要先打好型再上色，更加直觀也便於修改，這裡其實也類似於先做一個低保真模型，後面上色就很快了。
上色
在選取顏色的時候可以選取和自身產品相關的色調，也可以大膽配色，這取決於通過色彩傳達的情緒和品牌感。在這裡我的配色方案主要基於產品App的主色和輔助色的變化延伸。
增加質感和調整細節
在畫面上我們可以通過增加顆粒等技法使畫面更有質感，在陰影部分可以增加雜色，會更加豐富畫面的細節，新增顆粒質感的方法有很多，可以在畫面繪製完成之後匯入PS裡使用畫筆工具再次繪製，在這裡我直接使用sketch的顆粒填充並進行調整。最後進行微調，再次豐富畫面，比如可以給人物加一個陰影，給手機增加一些光線，加一些若影若現的背景等等。
到這裡就已全部繪製完成，看一下整體的效果，如需調整可單獨進行。
四、動效加成
調整完成之後使用動效軟體加一些細微的動效讓畫面更加生動，前提是需要和開發談論動效實現方案。
五、總結
從收到需求到交付，過程中需要反覆去和產品討論程序，以免後期不必要的修改和爭論影響進度和效率。切圖和標註要仔細確認，圖片大小不要有偏差，交付給開發之後需要跟進開發進度確認完成度，開戶程式設計師人人有責。上線之後要總結和分析不足之處，在之後的設計中加以改進。聽取反饋意見，是否達到了傳達意圖分析所在問題之處。以上就是我對這次設計的總結，希望能夠給大家帶來幫助，大家也可以提出問題和建議。