APP UI

如何更好的設(shè)計(jì) APP UI界面？

現(xiàn)在我來點(diǎn)干貨吧，其實(shí)在日常界面設(shè)計(jì)的時(shí)候應(yīng)該多分析思考，然后嘗試去總結(jié)出一套以后自己可復(fù)用的設(shè)計(jì)方法，以提升未來設(shè)計(jì)的精準(zhǔn)度和效率。

在這里就給大家講講我平時(shí)是怎么思考和設(shè)計(jì)界面。我將 APP 拆成顏色，文字，圖標(biāo)，配圖四個(gè)方面進(jìn)行分析。

顏色，文字，圖標(biāo)，配圖

顏色：調(diào)性一致

一個(gè) APP 給用戶留下最深印象的往往是界面的顏色，例如淘寶、支付寶，你可能想不起來首頁(yè)是什么樣子的，底部標(biāo)簽欄是什么圖標(biāo)，但是馬上能記起淘寶是橙色的，支付寶是藍(lán)色的。

調(diào)性一致

人腦對(duì)于色彩的記憶度要高于形態(tài)，所以在界面設(shè)計(jì)中首先就是要運(yùn)用好顏色，才能幫助用戶更好的記憶。

在設(shè)計(jì)界面的時(shí)候，我會(huì)先分析顏色，以猩便利 APP為例：

1.找準(zhǔn)品牌色/輔助色

看到界面以后先思考，猩便利的品牌色是什么，品牌色通常是指在界面中占比例最多的顏色或者logo 的顏色，由此推斷猩便利的品牌色是黃色+黑色，輔助色是橙色。

找準(zhǔn)品牌色/輔助色

2.分析行業(yè)屬性、同類競(jìng)品

接下來思考為什么猩便利要使用黃色+黑色作為品牌色？要從行業(yè)屬性分析，猩便利是一家以線上+線下方式售賣食品的快消品平臺(tái)。大多數(shù)的美食類，外賣類 APP 以暖色系為主，遵循色彩心理學(xué)，因?yàn)榕禃?huì)刺激食欲，給以用戶舒適，美好的感覺。在了解行業(yè)屬性之后，以后設(shè)計(jì)這類界面的時(shí)候，就可以使用暖色調(diào)的色彩。

3.強(qiáng)化色彩能力

然后回到界面上，大多數(shù)初級(jí)設(shè)計(jì)師在設(shè)計(jì)界面選擇顏色的時(shí)候，通常會(huì)直接吸取原圖上的色彩。其實(shí)這樣的方式不正確的，無法提升對(duì)于色彩的把控。

我在選取顏色的時(shí)候先看一眼原圖，然后遮住，通過瞬間記憶能力調(diào)試。剛開始的時(shí)候需要多次校對(duì)來確認(rèn)顏色，后面會(huì)越來越精準(zhǔn)。之后眼睛看到的顏色，就能通過拾色器精準(zhǔn)選出。、

強(qiáng)化色彩能力

4.學(xué)習(xí)色彩運(yùn)用

初級(jí)設(shè)計(jì)師在運(yùn)用品牌色時(shí)，常會(huì)有一個(gè)問題，就是在所有元素上都使用品牌色，會(huì)導(dǎo)致面中因?yàn)檫^多主色而造成的視覺疲勞。

然而優(yōu)秀的界面色彩遵循60-30-10原則，60%的品牌色、30%輔助色和10%點(diǎn)綴色，這樣使界面有所區(qū)分，主次明確。

我在運(yùn)用色彩的過程中，會(huì)觀察60-30-10的使用場(chǎng)景在哪里，一般60%品牌色運(yùn)用在導(dǎo)航欄、按鈕、圖標(biāo)、標(biāo)題等關(guān)鍵元素中，30%橙色輔助色運(yùn)用在標(biāo)簽上，10%的藍(lán)色綠色則運(yùn)用在小入口上面。

60-30-10原則

文字：層級(jí)分明

大標(biāo)題正逐漸成為一種流行趨勢(shì)，相比小標(biāo)題，它更加醒目直觀，吸引用戶的注意力，所以在很多設(shè)計(jì)中，大標(biāo)題也成為一種設(shè)計(jì)風(fēng)格。

在設(shè)計(jì)界面的時(shí)候，我第二步會(huì)分析文字：

1.理清文字間的層級(jí)

大標(biāo)題風(fēng)格，并不是說文字越大越好，越有辨識(shí)度。只是建議用加大標(biāo)題字號(hào)的形式來區(qū)分頁(yè)面的層級(jí)，幫助用戶尋找。

理清文字間的層級(jí)

在設(shè)計(jì)的過程中，我會(huì)思考為什么界面中使用了多種大小的文字？是什么決定了文字大?。?/p>

試著從信息的重要性入手，進(jìn)入這個(gè)頁(yè)面后，首先看到“歡迎光臨行猩便利”，然后“晚間小食”，最后才是“優(yōu)惠價(jià)”和“商品庫(kù)”。

這個(gè)順序符合了日常的購(gòu)買流程，進(jìn)門-挑選-領(lǐng)取優(yōu)惠券-購(gòu)買，流程決定了信息重要性，決定了文字大小。

2.歸納常用字號(hào)以及場(chǎng)景

然后回到界面上，分析文字的時(shí)候也不是單純找準(zhǔn)字號(hào)，因?yàn)樽痔?hào)很輕易就可以知道。

我會(huì)在設(shè)計(jì)分析中總結(jié)，不同的信息層級(jí)之間怎樣體現(xiàn)對(duì)比、強(qiáng)調(diào)，例如猩便利 APP ，主標(biāo)題使用48號(hào)字，類目標(biāo)題40號(hào)字，小標(biāo)題32號(hào)字，輔助副標(biāo)題24號(hào)。

分析設(shè)計(jì)過多套 APP 之后才可以得出一套常用字號(hào)和使用場(chǎng)景，比如主標(biāo)題大致在什么字號(hào)范圍，信息層級(jí)區(qū)別需要字體相差多少字號(hào)等等......。

圖標(biāo)：風(fēng)格統(tǒng)一

圖標(biāo)是 APP 設(shè)計(jì)中必不可少的基礎(chǔ)元素，圖標(biāo)需先確保滿足基礎(chǔ)功能性和識(shí)別性。

在滿足以上兩點(diǎn)之后，圖標(biāo)設(shè)計(jì)時(shí)還應(yīng)融入設(shè)計(jì)特點(diǎn)，同時(shí)保持風(fēng)格統(tǒng)一，營(yíng)造良好的用戶視覺感受。

在設(shè)計(jì)的時(shí)候，我第三步會(huì)分析圖標(biāo):

1.分析圖標(biāo)形式

看到圖標(biāo)的時(shí)候，通常會(huì)先判斷圖標(biāo)是什么類型，很明顯猩便利的標(biāo)簽欄采用的是線性圖標(biāo)，同時(shí)采用了品牌黑色。

風(fēng)格統(tǒng)一

試著分析一下界面，其實(shí)圖標(biāo)的類型是由使用場(chǎng)景決定的，就以猩便利的標(biāo)簽欄為例，色塊突出了中間的“掃碼購(gòu)”的功能，如果兩邊的“購(gòu)物車”和“付款碼”圖標(biāo)使用面型圖標(biāo)，沖擊力過強(qiáng)，容易吸引用戶注意力，干擾用戶選擇。

又因?yàn)椤百?gòu)物車”和“付款碼”圖標(biāo)點(diǎn)擊之后不是選中狀態(tài)，而是跳轉(zhuǎn)效果，無需通過面型點(diǎn)亮增強(qiáng)選中效果，不合適使用線性+面型圖標(biāo)。

2.學(xué)習(xí)圖標(biāo)繪制

除了上面提到的圖標(biāo)形式可以展現(xiàn) APP 特性，設(shè)計(jì)特點(diǎn)突出，風(fēng)格統(tǒng)一的圖標(biāo)也可以獲得用戶的青睞和關(guān)注。

所以設(shè)計(jì)分析的時(shí)候試著總結(jié)設(shè)計(jì)特點(diǎn)，猩便利的標(biāo)簽欄圖標(biāo)就采用了斷線，小圓角，4px描邊的形式，精簡(jiǎn)干練，能確保信息的傳遞。

當(dāng)學(xué)習(xí)多種圖標(biāo)特點(diǎn)之后，我們可以自由組合，根據(jù)產(chǎn)品調(diào)性，設(shè)計(jì)出符合的圖標(biāo)。

配圖：品質(zhì)感

我們?cè)诠涮詫毢吞熵埖臅r(shí)候，明顯感覺到天貓是偏高端消費(fèi)人群，而淘寶則是針對(duì)普通消費(fèi)人群。這里我們要說的就是圖片的品質(zhì)感，品質(zhì)感帶給我們不同的用戶體驗(yàn)，視覺感受。

精致的配圖能給界面加分，而質(zhì)量不佳的圖片會(huì)拉低產(chǎn)品的氣質(zhì)，人靠衣裝馬靠鞍，大概就是這個(gè)道理。

1.分析配圖方式

配圖可以分成兩種，一種是插畫類型，一種是圖片類型。我們可以看到猩便利在配圖的選擇上也使用了兩種方式，設(shè)計(jì)的時(shí)候就要思考為什么不同？

分析配圖方式

試著分析一下界面，使用插畫類型的地方是三個(gè)入口和一個(gè)選擇頁(yè)面，它們的特征都是不跟隨業(yè)務(wù)、商品進(jìn)行更改的，這種類型的配圖統(tǒng)一性高，視覺表現(xiàn)力更強(qiáng)。

而使用圖片類型的情況，一般是具體商品，需要根據(jù)運(yùn)營(yíng)配置，市場(chǎng)供需做出調(diào)整。圖片的使用也更直接的能讓用戶感知真實(shí)的消費(fèi)體驗(yàn)和刺激用戶下單心理。

2.學(xué)會(huì)圖片優(yōu)化

品質(zhì)感的體現(xiàn)并不一定只有拍攝的時(shí)候才能調(diào)整，很多圖片還是需要后期經(jīng)過設(shè)計(jì)師才能煥發(fā)新生。在使用配圖時(shí)，我們就需要總結(jié)，品質(zhì)感的圖片都有一些什么特點(diǎn)。其實(shí)發(fā)現(xiàn)并不是特別難，只有我們將圖片扣圖之后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能起到立竿見影的效果。

總結(jié)

想要完成一個(gè) APP 的界面設(shè)計(jì)，需要進(jìn)行多方面的分析，最后總結(jié)出一套以后可復(fù)用的設(shè)計(jì)方法，以提升未來設(shè)計(jì)的精準(zhǔn)度和效率。

顏色：找準(zhǔn)APP 的品牌色、輔助色，分析色彩選擇的意圖。同時(shí)鍛煉調(diào)準(zhǔn)色的能力，并能根據(jù)60-30-10原則，使界面主次分明，和諧統(tǒng)一。

字體：列出界面中不同信息的字體字號(hào)，以及不同的使用場(chǎng)景，多次嘗試之后，總結(jié)出自己的一套規(guī)范，比如主標(biāo)題大致在什么字號(hào)范圍，信息層級(jí)區(qū)別需要字體相差多少字號(hào)等等。

圖標(biāo)：找出頁(yè)面中圖標(biāo)的類型，并嘗試分析其他類型不合適的原因。同時(shí)提煉圖標(biāo)之間的共性，例如圓角、粗細(xì)、斷線，有利于增強(qiáng)界面統(tǒng)一性。

配圖：分析頁(yè)面不同場(chǎng)景下配圖方式的不同，學(xué)會(huì)簡(jiǎn)單的圖片處理方式，將圖片扣圖之后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能起到立竿見影的效果。