編輯導(dǎo)語(yǔ)：當(dāng)相似的元素有一致性的外表和相似的功能時(shí)，它的可用性和易學(xué)性會(huì)增強(qiáng)；當(dāng)一致性運(yùn)用到你的設(shè)計(jì)中時(shí)，人們將會(huì)將知識(shí)運(yùn)用到新的環(huán)境并且能夠快速輕易地學(xué)習(xí)新知識(shí)；本文作者分享了關(guān)于設(shè)計(jì)一致性原則的詳解，我們一起來(lái)了解一下。

一、設(shè)計(jì)一致性概述

一致性是產(chǎn)品設(shè)計(jì)最為基礎(chǔ)且重要的原則之一，一般主要指品的設(shè)計(jì)理念、品牌形象、邏輯結(jié)構(gòu)、操作交互以及視覺(jué)形象等設(shè)計(jì)“基因”能夠在設(shè)計(jì)中較好的保持一致和統(tǒng)一。

如下圖所示為網(wǎng)易云音樂(lè)的排行榜和歌單頁(yè)面，雖然是2個(gè)不同的功能頁(yè)面，但頁(yè)面在布局結(jié)構(gòu)（如標(biāo)題，背景插圖，歌曲列表）和交互操作（播放歌曲，搜索，分享）等方面都是一致統(tǒng)一的。

設(shè)計(jì)保持一致性的好處是顯而易見(jiàn)的，對(duì)產(chǎn)品，可以使產(chǎn)品、品牌形象的統(tǒng)一規(guī)范性，降低產(chǎn)品迭代優(yōu)化的成本；對(duì)于用戶，能夠在產(chǎn)品不同模塊中有一致性的體驗(yàn)，同時(shí)降低用戶對(duì)功能的理解和使用成本。

二、設(shè)計(jì)一致性的作用

設(shè)計(jì)的一致性無(wú)論對(duì)用產(chǎn)品還是對(duì)用戶都有著巨大的作用和意義，其主要體現(xiàn)在以下幾個(gè)方面。

1. 為產(chǎn)品優(yōu)化迭代提供指導(dǎo)和評(píng)估準(zhǔn)則

在需求討論階段，一致性原則可以保證產(chǎn)品需求不會(huì)偏離產(chǎn)品既定的目標(biāo)和理念；在設(shè)計(jì)過(guò)程中，一致性原則可以讓設(shè)計(jì)師確保設(shè)計(jì)方案不偏離需求目標(biāo)，以及在視覺(jué)，交互等細(xì)節(jié)方面保持一致統(tǒng)一。

在設(shè)計(jì)方案評(píng)審過(guò)程中，一致性原則可以作為評(píng)估準(zhǔn)則來(lái)評(píng)估具體設(shè)計(jì)方案。

2. 保持產(chǎn)品和品牌形象的一致

在產(chǎn)品不同的功能模塊中或者不同發(fā)展時(shí)期中，一致性原則可以保證產(chǎn)品在設(shè)計(jì)理念，品牌形象，功能邏輯結(jié)構(gòu)，操作交互，視覺(jué)形象等方面保持一致，從而確保用戶對(duì)產(chǎn)品形成的形象認(rèn)知是一致和統(tǒng)一的。

如下圖所示為網(wǎng)易云音樂(lè)“我的”頁(yè)面和播客分類頁(yè)面，不僅在圖標(biāo)設(shè)計(jì)、Tab組件等視覺(jué)形象方面都保持了一致；而且在元素結(jié)構(gòu)布局以及操作交互上都保持一致，這樣確保了用戶在使用產(chǎn)品后形成的產(chǎn)品和品牌形象認(rèn)知是一致的。

3. 保證用戶認(rèn)知和使用體驗(yàn)的一致，降低用戶使用產(chǎn)品的成本

產(chǎn)品迭代優(yōu)化帶來(lái)的差異總會(huì)對(duì)用戶的使用造成一定的“阻礙”，而在設(shè)計(jì)中遵循一致性原則，就可以較大程度的降低這種“阻礙”，以“潤(rùn)物細(xì)無(wú)聲”的方式去改變用戶認(rèn)知，保證用戶認(rèn)知和使用體驗(yàn)的一致，從而降低用戶使用產(chǎn)品的成本。

例如iOS系統(tǒng)中，列表左滑刪除操作可以認(rèn)為是一種較為普遍的認(rèn)知，因此在合適的場(chǎng)景中使用列表左滑刪除邏輯，用戶就可以很好理解，甚至不需要提示引導(dǎo)就可以完成刪除操作。

4. 提升產(chǎn)品設(shè)計(jì)效率，降低產(chǎn)品迭代優(yōu)化的成本

產(chǎn)品是一個(gè)復(fù)雜功能的集合體，其中總有或多或少的功能模塊、交互邏輯是比較類似或者相同的，如按鈕，頁(yè)面資源加載邏輯等；基于一致性原則，這些功能邏輯應(yīng)該使用統(tǒng)一規(guī)范的設(shè)計(jì)方案，這樣不僅能夠保證用戶在不同功能模塊中體驗(yàn)趨于一致。

而且由于功能邏輯的復(fù)用會(huì)降低產(chǎn)品，設(shè)計(jì)，研發(fā)和測(cè)試等流程的周期和投入成本，從提升產(chǎn)品迭代優(yōu)化的效率。

三、如何做到設(shè)計(jì)的一致性

一致性原則的內(nèi)涵是非常廣的，不是使用一樣的顏色或者一樣的形式就能代表設(shè)計(jì)的一致性，而是需要從多個(gè)方面和角度進(jìn)行思考和衡量，在設(shè)計(jì)中，可以從以下方面來(lái)進(jìn)行思考。

1. 設(shè)計(jì)理念的一致

成熟產(chǎn)品在一定的發(fā)展歷程內(nèi)，必須保證產(chǎn)品設(shè)計(jì)理念是一致的，即針對(duì)不同的需求，要以統(tǒng)一的理念去指導(dǎo)和評(píng)估設(shè)計(jì)，從而形成統(tǒng)一規(guī)范的產(chǎn)品形象，用戶認(rèn)知和使用體驗(yàn)。

假設(shè)產(chǎn)品理念包含“年輕人”的關(guān)鍵詞，那么所有的設(shè)計(jì)方案都應(yīng)該能夠表現(xiàn)出“年輕人”的特點(diǎn)，只是具體的表現(xiàn)形式不一樣而已。

值得注意的是，此外設(shè)計(jì)理念還應(yīng)該包括設(shè)計(jì)目標(biāo)、設(shè)計(jì)策略、設(shè)計(jì)原則以及設(shè)計(jì)語(yǔ)言風(fēng)格等設(shè)計(jì)基本“基因”因素。

2. 用戶認(rèn)知的一致

用戶對(duì)任何事物的看法和判斷都是建立在自己以往經(jīng)驗(yàn)的基礎(chǔ)上，即看待新事物都會(huì)用以往的記憶和經(jīng)驗(yàn)來(lái)判斷和理解，因此必須保證設(shè)計(jì)方案是符合用戶認(rèn)知的，即符合用戶的過(guò)往經(jīng)驗(yàn)，否則用戶就會(huì)產(chǎn)生認(rèn)知歧義；例如常見(jiàn)的垃圾桶圖標(biāo)就是代表刪除的含義，設(shè)計(jì)中就不能用垃圾桶圖標(biāo)來(lái)表達(dá)其他含義。

一般來(lái)說(shuō)，用戶對(duì)產(chǎn)品的認(rèn)知可以簡(jiǎn)單歸納為兩大類，一是普遍用戶認(rèn)知，一是產(chǎn)品用戶認(rèn)知。

普遍用戶認(rèn)知

普遍用戶認(rèn)知指的是在整個(gè)社會(huì)群體中大家對(duì)于某事物有比較統(tǒng)一的認(rèn)識(shí)。一般來(lái)說(shuō)，能被絕大部分社會(huì)群體認(rèn)可的觀點(diǎn)，日常生活或和行業(yè)領(lǐng)域中較為普遍且一致的行為、經(jīng)驗(yàn)以及科學(xué)規(guī)律等都可以成為普遍用戶認(rèn)知；例如上文所講述的垃圾桶圖標(biāo)代表刪除含義和物理移動(dòng)規(guī)律就屬于普遍用戶認(rèn)知。

產(chǎn)品用戶認(rèn)知

產(chǎn)品用戶認(rèn)知指的是用戶在使用產(chǎn)品過(guò)程中形成的認(rèn)知，這些認(rèn)知局限于產(chǎn)品內(nèi)和使用用戶群體，超出這個(gè)范圍其他的用戶可能就難以理解。

產(chǎn)品用戶認(rèn)知一般都是一些復(fù)用的功能邏輯或者設(shè)計(jì)，例如JD中使用了動(dòng)態(tài)的JD狗作為加載等待狀態(tài)的提示，那么在用戶在JD中看見(jiàn)動(dòng)態(tài)的JD狗，那么就能理解頁(yè)面當(dāng)前處于加載或者等待狀態(tài)，需要等待一會(huì)。

如果產(chǎn)品做得足夠好，用戶群體足夠大，那么產(chǎn)品用戶認(rèn)知也可以演變?yōu)槠毡橛脩粽J(rèn)知，例如微信中長(zhǎng)按按鈕進(jìn)行語(yǔ)音的操作方式，現(xiàn)在基本上已經(jīng)成為語(yǔ)音交互的通用交互方式之一（之前很多產(chǎn)品都是單擊進(jìn)行語(yǔ)音交互）。

3. 功能結(jié)構(gòu)的一致

功能結(jié)構(gòu)是產(chǎn)品的骨架，決定了用戶在產(chǎn)品中的主要體驗(yàn)路徑，功能結(jié)構(gòu)的一致性可以幫助用戶快速理解整個(gè)產(chǎn)品的功能和保證不同模塊中用戶體驗(yàn)的一致。

常見(jiàn)的功能結(jié)構(gòu)一致性包括兩方面，一是相似的功能使用相同的結(jié)構(gòu)，例如在設(shè)置模塊，同一個(gè)層級(jí)的不同的設(shè)置模塊使用的列表結(jié)構(gòu)應(yīng)該是一致的，都使用雙行列表或者都使用單行列表；二是不同功能模塊中相同的功能應(yīng)該使用一樣的功能結(jié)構(gòu)，產(chǎn)品中所有的頁(yè)面標(biāo)題欄的邏輯和結(jié)構(gòu)都應(yīng)該是一致的。

4. 交互操作的一致

交互操作的一致能夠降低產(chǎn)品邏輯結(jié)構(gòu)的復(fù)雜程度，能統(tǒng)一用戶的認(rèn)知和使用體驗(yàn)以及降低用戶的使用成本。在實(shí)際設(shè)計(jì)中關(guān)于交互操作的一致性可以從以下幾個(gè)方面進(jìn)行考慮。

交互邏輯的一致

在產(chǎn)品內(nèi)有很多交互操作的邏輯本質(zhì)是相同的，不能為這些相同的交互操作設(shè)計(jì)多種邏輯或方案，因?yàn)檫@樣不僅會(huì)造成用戶體驗(yàn)的不一致，還會(huì)造成產(chǎn)品架構(gòu)的混亂。

如下圖所示為常見(jiàn)的2種溢出菜單按鈕的操作列表，左圖中點(diǎn)擊蒙版區(qū)域會(huì)關(guān)閉菜單列表，而右圖是利用取消按鈕關(guān)閉菜單列表；這2種設(shè)計(jì)方案的設(shè)計(jì)都是合理的，但在產(chǎn)品中不應(yīng)該同時(shí)混用這兩種設(shè)計(jì)方案，根據(jù)產(chǎn)品自身需要選擇其中一種方案就可以了。

操作方式的一致

常見(jiàn)的交互操作方式有點(diǎn)擊，長(zhǎng)按，滑動(dòng)，拖動(dòng)等，每一種操作方式都有著其獨(dú)有的特點(diǎn)和使用場(chǎng)景，在設(shè)計(jì)中需要保證這些交互操作方式的使用是一致的。

例如產(chǎn)品中的本地?cái)?shù)據(jù)在大部分情況下都支持長(zhǎng)按進(jìn)入編輯管理狀態(tài)后者出現(xiàn)操作菜單列表，再比如常見(jiàn)Tabs組件中都支持左右滑動(dòng)切換不同的Tab選項(xiàng)卡，在產(chǎn)品設(shè)計(jì)中就需要保持這些交互操作方式的一致，不能為同一種交互操作設(shè)計(jì)多的操作方式（不包括主操作方式和快捷操作方式）。

狀態(tài)邏輯的一致

產(chǎn)品頁(yè)面中的元素狀態(tài)應(yīng)該能夠很好地表現(xiàn)出交互操作的邏輯，相同狀態(tài)的元素其代表的交互邏輯也應(yīng)該是相同的，例如產(chǎn)品中按鈕的可點(diǎn)擊狀態(tài)、按下?tīng)顟B(tài)、拖拽狀態(tài)、禁用狀態(tài)、選中狀態(tài)以及加載等待狀態(tài)、操作反饋等在產(chǎn)品中都需要保持一致。

如下圖所示為為不同類型按鈕的禁用狀態(tài)示意圖，其狀態(tài)邏輯的設(shè)計(jì)是一致的。

5. 視覺(jué)形象的一致

視覺(jué)形象對(duì)產(chǎn)品一致性的影響是最為直觀的，因?yàn)橛脩粜纬僧a(chǎn)品認(rèn)知和體驗(yàn)感受的基礎(chǔ)就是視覺(jué)形象。設(shè)計(jì)中視覺(jué)形象的一致性可以從以下幾個(gè)方面進(jìn)行考慮。

設(shè)計(jì)風(fēng)格/語(yǔ)言

設(shè)計(jì)風(fēng)格/語(yǔ)言指的是整個(gè)產(chǎn)品的視覺(jué)形象基調(diào)，是視覺(jué)設(shè)計(jì)的基本理念和重要的指導(dǎo)評(píng)估原則之一。

本質(zhì)上講設(shè)計(jì)風(fēng)格/語(yǔ)言就是產(chǎn)品設(shè)計(jì)理念的一部分，只不過(guò)設(shè)計(jì)風(fēng)格/語(yǔ)言更多的體現(xiàn)在視覺(jué)設(shè)計(jì)方面。例如微信和QQ，兩者的視覺(jué)設(shè)計(jì)風(fēng)格是完全不同的，再細(xì)節(jié)一點(diǎn)，圖標(biāo)的設(shè)計(jì)是使用線形風(fēng)格還是面形風(fēng)格。

一致的設(shè)計(jì)風(fēng)格可以保證產(chǎn)品整體形象的一致，能在產(chǎn)品設(shè)計(jì)過(guò)程中提供明確的設(shè)計(jì)指導(dǎo)、設(shè)計(jì)要求、設(shè)計(jì)準(zhǔn)則以及方案評(píng)估準(zhǔn)則。

品牌形象（VI）

嚴(yán)格意義上講，品牌VI是自成體系的，不會(huì)與普通的產(chǎn)品視覺(jué)設(shè)計(jì)歸為一類。但在具體的設(shè)計(jì)中，我們還是會(huì)使用品牌VI中的一些元素，包括吉祥物，產(chǎn)品logo，品牌色等；如JD的吉祥物狗joy和天貓的超級(jí)符號(hào)等在其應(yīng)用中都有非常多的使用場(chǎng)景和使用形式。

在產(chǎn)品設(shè)計(jì)中與品牌形象保持一致性也是非常重要的，可以加強(qiáng)用戶對(duì)品牌的認(rèn)知以及利用品牌來(lái)為產(chǎn)品功能背書(shū)。

色彩

任何視覺(jué)形象都是由色彩組成的，因此在設(shè)計(jì)中我們需要形成一個(gè)完整且一致的的產(chǎn)品色彩體系，包括品牌色（主色調(diào)），主要色系以及衍生的輔助色色彩。

保證色彩的一致性，既可以保證用戶對(duì)產(chǎn)品認(rèn)知的一致性以及形成獨(dú)有的品牌認(rèn)知，還有利于頁(yè)面信息層次和優(yōu)先級(jí)的表達(dá)。

如下圖所示為網(wǎng)易云音樂(lè)和QQ音樂(lè)中我的頁(yè)面的設(shè)計(jì)方案，其中圖標(biāo)和Tab組件等設(shè)計(jì)都統(tǒng)一使用了其品牌色（紅色和綠色）。

文本

與色彩類似，文本也是視覺(jué)形象的重要組成部分。在絕大數(shù)的產(chǎn)品中，文本是用戶獲取產(chǎn)品信息的基本途徑，這也意味著文本對(duì)產(chǎn)品的使用體驗(yàn)有非常大影響。

一般來(lái)說(shuō)，文本的一致性就是指文本樣式的一致性，常見(jiàn)的文本樣式包括字體，字號(hào)，字重，顏色，字間距，行間距，段落，文本區(qū)域?qū)挾雀叨?，?duì)齊方式和透明度等；通過(guò)這些具體的文本樣式可以為產(chǎn)品設(shè)定統(tǒng)一規(guī)范的文本樣式，如標(biāo)題，副標(biāo)題，正文，說(shuō)明文本，出錯(cuò)/警示文本等。

如下圖所示為網(wǎng)易云音樂(lè)中不同模塊中2個(gè)卡片，其中卡片標(biāo)題，正文以及其他文本標(biāo)簽的文本樣式都是一致的。

布局

頁(yè)面的布局是視覺(jué)設(shè)計(jì)方案的基礎(chǔ)框架，是一個(gè)非常復(fù)雜的問(wèn)題，涉及到交互和邏輯，以及眾多的視覺(jué)因素。

常見(jiàn)的影響頁(yè)面布局的視覺(jué)因素有元素間距，排序，對(duì)齊方式，字體以及大小，位置約束，元素縮放，輸出單位，設(shè)備適配等，在這里也無(wú)法一一說(shuō)明解釋。在設(shè)計(jì)過(guò)程中，需要對(duì)這些因素進(jìn)行統(tǒng)一合理的的規(guī)劃和設(shè)計(jì)。

標(biāo)準(zhǔn)控件/組件

視覺(jué)形象的一致性在產(chǎn)品中最為直接的體現(xiàn)就是產(chǎn)品中標(biāo)準(zhǔn)控件和組件的使用，如按鈕，彈窗，Tabs等。

控件和組件的一致性，不僅包括視覺(jué)樣式，還包括其使用規(guī)范以及交互邏輯等；如下圖所示的為淘寶的首頁(yè)和逛逛頁(yè)面，其頁(yè)面中的標(biāo)題欄就屬于組件，2個(gè)頁(yè)面的標(biāo)題欄在布局結(jié)構(gòu)，視覺(jué)樣式和交互操作等方面都是是一致的，僅僅在細(xì)節(jié)視覺(jué)樣式上有所差異。

四、設(shè)計(jì)一致性與可變性

任何事物都需要把握一個(gè)度，設(shè)計(jì)的一致性亦是如此。如果一味的追求設(shè)計(jì)的一致，就會(huì)讓設(shè)計(jì)陷入固定的模式，設(shè)計(jì)出來(lái)的方案就會(huì)缺少“生機(jī)”和“靈動(dòng)”；隨著時(shí)間的增長(zhǎng)，會(huì)導(dǎo)致產(chǎn)品缺少吸引力和競(jìng)爭(zhēng)力下降。所以在遵循設(shè)計(jì)一致性的基礎(chǔ)上，探索設(shè)計(jì)的可變性也是不可缺少的。

同設(shè)計(jì)的一致性原則類似，設(shè)計(jì)的可變性也是有一定的要求和限制的，不能一味的追求設(shè)計(jì)的多變，否則只會(huì)起到負(fù)面作用，如讓設(shè)計(jì)變得毫無(wú)特色，讓產(chǎn)品變得雜亂無(wú)章，讓產(chǎn)品體驗(yàn)變差。

實(shí)際的設(shè)計(jì)過(guò)程中，可以從以下幾個(gè)方面考慮設(shè)計(jì)的可變性。

滿足產(chǎn)品和用戶需求

任何設(shè)計(jì)都需要滿足產(chǎn)品和用戶的需求，設(shè)計(jì)的一致性和多變性也需如此，如果不能滿足產(chǎn)品和用戶需求，那么任何形式的設(shè)計(jì)都是沒(méi)有意義的。

設(shè)計(jì)的拓展

成熟的產(chǎn)品中（不包括運(yùn)營(yíng)活動(dòng)），任何設(shè)計(jì)都需考慮設(shè)計(jì)拓展性，需要考慮這種“變化”在產(chǎn)品內(nèi)的拓展，即能否將新方案應(yīng)用到其他地方或后續(xù)的設(shè)計(jì)方案中；如果設(shè)計(jì)方案能拓展，那么這種“可變性”最終能夠演變成設(shè)計(jì)的“一致性”。

設(shè)計(jì)“基因”延續(xù)

對(duì)于產(chǎn)品而言，設(shè)計(jì)的風(fēng)格和設(shè)計(jì)理念等設(shè)計(jì)“基因”是不會(huì)經(jīng)?；蛘咴谳^短時(shí)間內(nèi)改變的，在任何背景下的設(shè)計(jì)方案都需要遵循和體現(xiàn)這些設(shè)計(jì)“基因”，因此在探索設(shè)計(jì)多變性的過(guò)程中，同樣需要保證這些設(shè)計(jì)“基因”的延續(xù)和表達(dá)。

這樣做的好處不僅能在設(shè)計(jì)方案中體現(xiàn)出靈活多變，還能在一定程度上保持設(shè)計(jì)的一致性，這樣不會(huì)因?yàn)槎嘧兊脑O(shè)計(jì)而導(dǎo)致迭代前后使用體驗(yàn)和用戶認(rèn)知的差異較大。

緊跟社會(huì)/行業(yè)發(fā)展的腳步

社會(huì)和行業(yè)領(lǐng)域都在不斷進(jìn)步發(fā)展，設(shè)計(jì)也是如此，不可能能一直停留在“原地”；因此需要不斷的關(guān)注社會(huì)和行業(yè)的進(jìn)步發(fā)展，不斷思考這些“改變”對(duì)計(jì)的影響，并適時(shí)的調(diào)整設(shè)計(jì)，讓設(shè)計(jì)能夠跟隨社會(huì)和行業(yè)的發(fā)展。

例如行業(yè)內(nèi)的色彩，布局，圖標(biāo)設(shè)計(jì)等流行趨勢(shì)是在不斷變化的，合理適時(shí)的將這些設(shè)計(jì)趨勢(shì)運(yùn)用到新的設(shè)計(jì)方案中去，對(duì)產(chǎn)品和用戶都是有好處的。

設(shè)計(jì)一致性原則的好處和重要性是顯而易見(jiàn)的，但在實(shí)際設(shè)計(jì)中，決不能為了一致性而一致性，不能讓一致性原則成為設(shè)計(jì)的桎梏。

一致性與可變性都是為了更好的服務(wù)用戶，為產(chǎn)品和用戶帶來(lái)更多的價(jià)值；需要在設(shè)計(jì)過(guò)程中把握好一致性和可變性之間平衡性，這樣設(shè)計(jì)出來(lái)的方案才更有生命力。

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

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