容易被忽略的App界面設計細節(jié)

談到app界面設計，很多新手都會過于糾結界面尺寸、圖標尺寸，也會在顏色、字體、間距間毫無頭緒。本文將按照app界面設計流程來講解一下，新手需要注意的細節(jié)和誤區(qū)。

App界面設計流程

產(chǎn)品定義

產(chǎn)品定義就是產(chǎn)品經(jīng)理通過市場調(diào)研、目標用戶模型分析等途徑，確定產(chǎn)品的定位、目標人群和功能需求。產(chǎn)品經(jīng)理在需求文檔中務必把產(chǎn)品定位和目標人群清晰傳達給設計師。

設計階段

app界面設計階段，又可以細分為：整理需求文檔、原型設計和視覺設計。

整理需求文檔

整理需求文檔，建議用思維導圖整理。思維導圖能讓我們更為直觀的了解整個App的結構，包括分為幾大模塊，每個模塊包括哪些內(nèi)容，還有他們之間的聯(lián)系。

沒有思維導圖，也不用到處找破解版，原型設計工具Mockplus中自帶有腦圖模式，可以幫你直觀了解整個App的結構。

原型設計

對于界面上要呈現(xiàn)的信息都思考過以后，你就可以在紙上打草圖或是使用Axure、Mockplus等原型工具畫出原型和交互狀態(tài)。

注意，評審的時候叫上程序員。不然辛苦了半天，最后程序員說，實現(xiàn)不了，就不止是尷尬了。

設計元素上簡約、條理清晰就好，去除過多的動效和交互。

推薦文章：用戶最討厭的3種界面交互設計

原型設計工具

標注工具，推薦國產(chǎn)的zeplin。一鍵標注，點一下就能在PS或sketch里導出整個界面的標注信息到云端服務器，并且支持隨時更新。

原型設計工具，也推薦國產(chǎn)的mockplus，簡單好用，上手快，也支持切圖處理。

視覺設計

視覺設計包括了幾大步驟，分別是風格圖的確認、設計規(guī)范的撰寫、以及最后高保真圖的輸出及切圖。

確定風格圖

對于界面尺寸和圖標尺寸，新手莫過于糾結。建議選擇自己的手機尺寸來設計，方便預覽效果?；蛘哌x擇中間尺寸，方便向上、向下適配；

對于顏色、字體、間距都應該先定下最常用的參數(shù)（主要參數(shù)），再往次級依次展開，會使規(guī)范根基更穩(wěn)，調(diào)理清晰。關于配色問題。

好文推薦：如何快速掌握正確的UI配色方案？6種技巧不容錯過！

App界面整體基調(diào)的確定，要結合app的目標人群

比如騰訊旗下的QQ和微信，QQ口號“樂在溝通”，目標人群定位為年輕用戶娛樂化的社交應用。所以QQ默認皮膚是淺藍、淺灰、白三種主要顏色搭配，靈活的布局交互呈現(xiàn)給用戶活潑有趣，甚至個性化的感覺。

微信的口號是“微信，是一個生活方式”，這種大而全的定位，注定設計風格更加謹慎和中性化。所以微信是黑、綠、白三種主要顏色搭配，中規(guī)中矩的布局呈現(xiàn)給用戶穩(wěn)重、信賴的感覺。

主流的設計風格勿過度使用。因為用戶是多樣的，需求是多種的，流行也是會變的。優(yōu)秀的視覺設計師是有自己的理念。

推薦文章：2018年為什么漸變色重回主流設計趨勢？

撰寫設計規(guī)范

在視覺風格定位后，就可以開始撰寫設計規(guī)范。

設計規(guī)范看似是在增加設計師工作量，其實是起到了承上啟下高效完成工作的作用。設計師根據(jù)規(guī)范拓展頁面，程序員根據(jù)規(guī)范進行開發(fā)。有效提升開發(fā)進度。

設計規(guī)范勿設定的太全面、死板

太全面的規(guī)范會影響設計師發(fā)揮，應只針對控件、色值、質(zhì)感、動效、品牌元素等重要界面進行規(guī)范設定。20%不重要或者不可復用的控件不做規(guī)范，給設計師留20%的靈活空間，發(fā)揮自己創(chuàng)意。

注意規(guī)范要隨著產(chǎn)品改版的節(jié)奏而迭代。在產(chǎn)品迭代過程中對不好的、過時的歸納及時同步歸納，并及時通知到項目相關人員。

App界面設計，新手免不了要入坑，也少不了反復修改，要有一個好心態(tài)，及時歸納總結，多瀏覽優(yōu)秀的app界面設計案例，逐步積累，不積跬步，無以至千里。

為了反饋大家對韓曉燕《即學即用的用研基礎課》的關注，推出了兩彈優(yōu)惠福利，優(yōu)惠券大派送，參與就有獎！趕緊點擊文章詳情進行參與吧→即學即用的用研課程 課程優(yōu)惠活動！