剛?cè)胄械脑O(shè)計(jì)師可能都踩過很多坑，也曾經(jīng)很疑惑——明明拿到的是一樣的原型圖，為什么自己做出來的視覺稿和優(yōu)秀的界面仍有明顯差距。今天就來談一談，應(yīng)該注意哪些細(xì)節(jié)，才能設(shè)計(jì)出好的APP界面。

一. 顏色

在開始著手做設(shè)計(jì)稿之前，我們需要定義APP的主色（品牌色），和輔助色（點(diǎn)綴色）。

1. 注意主色和輔助色占比，控制好界面中的輔助色數(shù)量

輔助色使畫面更加豐富，具有裝飾性作用，在頁面中占比較小，一般控制在2個(gè)左右，會(huì)比較好把控。頁面中的顏色數(shù)量一多，設(shè)計(jì)起來難度就更大，出錯(cuò)的幾率也相應(yīng)增加，同時(shí)太過鮮艷的畫面也會(huì)影響到頁面的閱讀性。

2. 嘗試不同的配色方法

（1）對(duì)比配色

對(duì)比色給人視覺上的沖擊比較大，奪人眼球，如下圖案例中藍(lán)色和橙黃色的巧妙搭配不僅豐富了畫面，還成為了頁面中很大的亮點(diǎn)。所以，對(duì)比配色處理得好能一定程度上給頁面加分。當(dāng)然，也要謹(jǐn)防配錯(cuò)色。

（2）單一配色

單一配色能帶來整體的統(tǒng)一感覺，不同深淺的主色承載不同的信息內(nèi)容，可增加品牌的印象。

（3）近似色配色

如果覺得單一配色過于單調(diào)無趣，但又不想色彩太繽紛，可以用主色的近似色進(jìn)行點(diǎn)綴。

（4）漸變配色

漸變作為一種設(shè)計(jì)趨勢(shì)，能使頁面感受更豐富飽滿。但切記不可使用差別太大的顏色，細(xì)微的漸變即可。

3. 注意帶有自身屬性的顏色的使用

帶有自身屬性的顏色是指已養(yǎng)成大眾認(rèn)知習(xí)慣顏色，例如：報(bào)錯(cuò)一般會(huì)使用帶有警示效果的紅色系，可點(diǎn)擊的文字按鈕一般會(huì)使用藍(lán)色系。判斷失敗圖標(biāo)一般使用紅色系，成功則是綠色系。如果強(qiáng)行去改變，會(huì)讓用戶困惑，影響體驗(yàn)。

二. 圖標(biāo)

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

圖標(biāo)是APP界面中很重要的一部分，我們所了解的圖標(biāo)風(fēng)格有很多，比如：線性圖標(biāo)、面型圖標(biāo)、擬物圖標(biāo)等。無論選擇哪種表現(xiàn)形式，切記要保持圖標(biāo)風(fēng)格的統(tǒng)一。

2. 同一模塊中的圖標(biāo)視覺大小統(tǒng)一

并不是統(tǒng)一圖標(biāo)的尺寸就能達(dá)到視覺上的統(tǒng)一。舉個(gè)例子，相同尺寸的圓和正方形在視覺上正方形要比圓大。所以我們需要根據(jù)圖標(biāo)的形狀對(duì)其大小做相應(yīng)的調(diào)整。

3. 正確傳達(dá)圖標(biāo)的含義

圖標(biāo)能夠清晰地傳達(dá)信息，幫助用戶理解這是什么功能。準(zhǔn)確傳遞信息是圖標(biāo)設(shè)計(jì)的第一要點(diǎn)，如果圖標(biāo)的含義無法正確傳達(dá)，那么它在界面中就是一個(gè)多余無用信息。

4. 在內(nèi)容簡單的頁面，加強(qiáng)對(duì)圖標(biāo)的細(xì)節(jié)勾勒

圖標(biāo)通常具有很強(qiáng)的裝飾性。當(dāng)頁面比較單調(diào)時(shí)，可加強(qiáng)對(duì)圖標(biāo)的細(xì)節(jié)勾勒，不僅能豐富界面，還可以讓用戶通過對(duì)圖標(biāo)的認(rèn)識(shí)快速找到想要的功能和需求點(diǎn)；同時(shí)對(duì)圖標(biāo)的細(xì)節(jié)勾勒也會(huì)令界面更有趣味性。

三. 配圖

圖片是構(gòu)成界面的重要元素之一，它可以幫助我們豐富界面，所以在圖片的選擇使用上需經(jīng)過仔細(xì)地考量。
結(jié)合產(chǎn)品自身的定位選擇圖片，提高配圖的質(zhì)量

根據(jù)產(chǎn)品自身的定位和目標(biāo)用戶群體選擇圖片。比如餐飲類的軟件產(chǎn)品可選擇讓人食欲大開的圖片，而旅游類的則可選擇風(fēng)景優(yōu)美的圖片。同時(shí)謹(jǐn)記，要保證配圖的質(zhì)量。

四. 信息的排布

1. 明確信息的層級(jí)關(guān)系，突出重點(diǎn)

視覺設(shè)計(jì)過程中要明確頁面中信息的層級(jí)關(guān)系，以有效傳達(dá)信息。好的界面所展示的信息不可能是平均的，因此要加強(qiáng)對(duì)比，突出重要信息、弱化次要信息，這樣才能更好地引導(dǎo)用戶閱讀和操作。

2. 適當(dāng)?shù)牧舭?/h3>

很多人可能會(huì)有這樣一個(gè)誤解：要充分利用好有限的空間，這樣頁面才會(huì)充實(shí)。但是密集的信息排布在設(shè)計(jì)中是很忌諱的。合適的間距和留白，能給界面帶來“呼吸感”，而且設(shè)計(jì)師可以通過不同大小的留白區(qū)域讓整個(gè)信息排列主次分明，層級(jí)清晰。關(guān)系近的、距離近，關(guān)系遠(yuǎn)的、距離就遠(yuǎn)。合理使用親密性原則，能夠幫助我們的界面更加有條理。

3. 信息布局符合閱讀習(xí)慣

從上到下、從左到右、從大到小、從重到輕，這是用戶已形成的閱讀習(xí)慣，很難去改變，所以盡量要遵循。

• 從左到右閱讀：從左到右是我們現(xiàn)代人最基本的閱讀習(xí)慣，這也就是為什么很多網(wǎng)站的logo都在左上角。
• 從上到下閱讀：我們閱讀作品時(shí)也是從上到下依次閱讀，所以重要的內(nèi)容一定在上面，按優(yōu)先級(jí)來排列。
• 從大到小閱讀：我們的視覺也是比較調(diào)皮的，如果一個(gè)元素很大，我們也會(huì)首先會(huì)注意到大的元素，再依次看中等和小的元素。
• 從重到輕：元素的顏色也會(huì)影響我們閱讀的順序，我們通常會(huì)先重后輕地瀏覽界面信息。
  

以上就是今天想和大家簡單聊聊的界面設(shè)計(jì)過程中的小細(xì)節(jié)。如果在以上細(xì)節(jié)已經(jīng)做得都很完美，那么你還可以在APP中加入一些小創(chuàng)意、小心思，來增加趣味性，更貼近用戶的心哦！

但不要忘了，要做出好的界面設(shè)計(jì)作品，還是要多看、多學(xué)、多實(shí)踐。設(shè)計(jì)是一條很漫長的路，我們一定要不斷努力自我突破才能走的更遠(yuǎn)。希望我的總結(jié)能幫助到大家，謝謝閱讀。

作者：島主@點(diǎn)融設(shè)計(jì)中心DDC，微信公眾號(hào)：「微信ID：DR_DDC」

本文由 @島主?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pixabay，基于 CC0 協(xié)議