編輯導(dǎo)讀：為什么一致性在UI設(shè)計(jì)中很重要，設(shè)計(jì)師平常掛嘴邊的一致性原則到底是什么？一致性原則如何影響用戶行為？價(jià)值在哪里？本文作者從一致性原則的優(yōu)勢出發(fā)，對設(shè)計(jì)師在處理界面的時(shí)候，如何遵循一致性原則這個(gè)問題進(jìn)行了探討，與大家分享。

01 一致性原則的優(yōu)勢

我們遵循一致性的原則目的是為了減少用戶認(rèn)知負(fù)荷，用戶能夠輕易上手使用產(chǎn)品，熟悉的導(dǎo)航路徑，熟悉的設(shè)計(jì)模式。

我們知道，我們的用戶是忙碌的，沒有耐心，他們不愿意 花更多時(shí)間來學(xué)習(xí)使用你的產(chǎn)品。所以我們在做設(shè)計(jì)時(shí)候，就盡量多遵循常用的UI Patterns，它是什么？是一種常用可用性問題的一種通用解決方案。

但是如果一味遵循常有的Design Patterns，會(huì)導(dǎo)致我們界面看起來無創(chuàng)新，那么該什么時(shí)候突破這種界限，下面我會(huì)簡單舉例說明。

02 影響它的關(guān)鍵要素

顏色、間距、字體大小、圖標(biāo)一致性、規(guī)則一致性、交互操作等，我們在做界面設(shè)計(jì)時(shí)，如何科學(xué)把控這些？

這里就要告訴大家一個(gè)常用的設(shè)計(jì)法則“重復(fù)”“節(jié)奏”“韻律”，學(xué)過平面設(shè)計(jì)的同學(xué)應(yīng)該知道，這幾個(gè)點(diǎn)吧，在平面設(shè)計(jì)中運(yùn)用比較多的種設(shè)計(jì)方法。

舉一個(gè)例子，重復(fù)如何運(yùn)用在UI設(shè)計(jì)中？

1. 重復(fù)間距

上兩圖中，我們看可以看出里面設(shè)計(jì)采用的間距都是基于8的倍數(shù)，并重復(fù)運(yùn)用。有節(jié)奏、有韻律的重復(fù)使用這些間距，可以產(chǎn)生節(jié)奏美。

2. 重復(fù)控件

上圖facebook截圖，按鈕表象層圓角基因一致。如果有大小差異，它們使用參數(shù)化原則去定義圓角，大一點(diǎn)的控件圓角大一些，反之亦然。

3. 布局規(guī)則

上圖是騰訊視頻界面截圖，我們可以看到他們在布局上制定了一些規(guī)則。

比如欄目與欄目之間才有重復(fù)使用相同布局，2×3（指單個(gè)欄目擺放視頻數(shù)量），然后接著下面欄目就是1×1，下面又接著2×3，后面欄目將1X1和2X3集合起來，然后重復(fù)使用。

這樣重復(fù)的網(wǎng)格布局，對我們產(chǎn)品有什么好處呢？大家有沒有發(fā)現(xiàn)目前市面上的視頻類和音樂類的產(chǎn)品差不多這樣布局嗎？（這其實(shí)就是外部一致性原則）。

因?yàn)橛脩粢呀?jīng)熟悉且掌握這種模式，不再需要重新學(xué)習(xí)。

那么如何在這種同質(zhì)化的產(chǎn)品中脫穎而出呢？布局中可以使用對比，突出核心功能體驗(yàn)，又如還可以內(nèi)容優(yōu)于同類產(chǎn)品，品牌特征打造，符號(hào)運(yùn)用。

03 一致性原則影響著用戶行為

如導(dǎo)航模式；一級(jí)導(dǎo)航，二級(jí)導(dǎo)航，如果采用常用設(shè)計(jì)模式，用戶基本可以很輕松的找到自己想要的內(nèi)容。

再來說下顏色如何影響用戶行為：比如系統(tǒng)里面定義藍(lán)色是可點(diǎn)擊的顏色，那么我們在做設(shè)計(jì)是時(shí)候就要注意，哪些可點(diǎn)擊，顏色使用是否合理，同類顏色，表達(dá)相同的含義，就不能用在其他意義的元素上。

大原則：相同含義的元素在不同的地方執(zhí)行相同的操作時(shí)候，反饋機(jī)制需要一致。

上圖左邊是ios的開關(guān)，右邊是materials design 材質(zhì)設(shè)計(jì)系統(tǒng)的開關(guān)，這兩種開關(guān)大同小異，它符合用戶心理表真，我們?nèi)粘Ｉ钪屑依餆糸_關(guān)不就和這個(gè)類似嗎？所以在我們設(shè)計(jì)這些就可以盡量遵循用戶的心里表真，保持內(nèi)部外部一致性。

再比如在ios系統(tǒng)里面在對應(yīng)列表上左滑動(dòng)是可以對該列表操作的，那么在安卓里面的列表設(shè)計(jì)就需要慎用左滑操作。

總結(jié)

一致性設(shè)計(jì)大方向?yàn)楫a(chǎn)品有更杰出的體驗(yàn)，在保證用戶體驗(yàn)良好的同時(shí)，我們需要與同類產(chǎn)品做出差異化競爭設(shè)計(jì)，這就需要我們平時(shí)多觀察互聯(lián)網(wǎng)設(shè)計(jì)趨勢，國外設(shè)計(jì)趨勢，集合自己品牌去打造一套好用的產(chǎn)品。

在產(chǎn)品設(shè)計(jì)中我們時(shí)刻留意著關(guān)鍵元素的一致性的運(yùn)用，確保產(chǎn)品整體體驗(yàn)一致。

1. 顏色：在使用顏色上需要嚴(yán)格去定義，比如綠色用于正確顏色，紅色用語錯(cuò)誤顏色，藍(lán)色是可以點(diǎn)擊顏色，這些都是常用的設(shè)計(jì)模式。
2. 布局／排版：布局遵循最小化設(shè)計(jì)原則，導(dǎo)航路徑清晰可見，一級(jí)導(dǎo)航和二級(jí)導(dǎo)航一定要區(qū)分清楚，二者不可混用，排版布局上盡量遵循格式塔心理學(xué)原理。
3. 字體：一個(gè)app使用一種字體貫穿整個(gè)產(chǎn)品設(shè)計(jì)，字體大小運(yùn)用重復(fù)原則，重復(fù)可以使其保持一致性。
4. 交互：這里我簡單說下，操作模式，反饋機(jī)制要符合用戶心理表真，常用功能操作流程要和外部環(huán)境保持一致性，比如我點(diǎn)擊界面上藍(lán)色文字這時(shí)候就要有正確反饋機(jī)制，而不是出一個(gè)彈窗。
5. 圖標(biāo)：圖標(biāo)一致性我相信大家都懂吧，以前寫了一篇關(guān)于圖標(biāo)規(guī)范的，有興趣的可以去看下，5招輕松打造系統(tǒng)圖標(biāo)規(guī)范。

看完了你掌握了多少？一致性是視覺分析的其中一種關(guān)鍵環(huán)節(jié)，再結(jié)合我之前寫的“認(rèn)知負(fù)荷”可以拿自家APP 去分析一下，現(xiàn)有版本有哪些視覺問題，這樣可以鍛煉自己視覺分析能力！

#專欄作家#

Tony，微信公眾號(hào)：洞見設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂意幫助年輕設(shè)計(jì)師成長，簡歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

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

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