一致性原則在設(shè)計(jì)中通常包含視覺一致性、行為一致性和感知一致性3個(gè)方面，接下來將從這3方面詳細(xì)描述如何使用在設(shè)計(jì)中使用一致性。

一、一致性原則是什么？

百度百科：一致性原則也稱一貫性原則，它要求企業(yè)采用的會(huì)計(jì)處理方法前后各期應(yīng)當(dāng)保持一致，而不得隨意變更。如確有必要變更，須將變更原因及其對(duì)財(cái)務(wù)狀況和經(jīng)營成果的影響，在財(cái)務(wù)報(bào)告中加以說明。

一致性最初用于企業(yè)，后來延伸到設(shè)計(jì)領(lǐng)域，是指相同的功能在應(yīng)用的不同界面應(yīng)該表現(xiàn)一致 ，相似的功能在不同的界面中應(yīng)該表現(xiàn)相似。

二、遵循一致性原則優(yōu)勢(shì)

減少用戶認(rèn)知和記憶負(fù)擔(dān)，提高產(chǎn)品易用性。同時(shí)也減少了用戶在使用過程中產(chǎn)生的困惑，提高了用戶使用產(chǎn)品的愉悅感和流暢感。

三、一致性原則在設(shè)計(jì)中如何體現(xiàn)？

一致性原則在設(shè)計(jì)中通常包含視覺一致性、行為一致性和感知一致性3個(gè)方面，接下來將從這3方面詳細(xì)描述如何使用在設(shè)計(jì)中使用一致性。

一致性在設(shè)計(jì)中的運(yùn)用主要包括以下的幾個(gè)方面：

（1）視覺一致性

• 顏色一致性（主色調(diào)、輔助色、點(diǎn)綴色、字體顏色）
• 風(fēng)格一致性（扁平、投影、擬物等風(fēng)格表現(xiàn)）
• 屬性一致性（字體、圖標(biāo)、圖片）

（2）行為一致性

• 操作一致性（刪除、滑動(dòng)、點(diǎn)擊、下滑刷新、動(dòng)作、動(dòng)畫表現(xiàn)）
• 與產(chǎn)品在所在平臺(tái)保持一致性（安卓和iOS的不同的操作習(xí)慣）

（3）感知一致性

• 位置一致性（確定、取消按鈕、保存、類似模塊的相同按鈕位置相似）
• 文本一致性（提示語、操作提示、功能按鈕、編輯提示）

（4）視覺一致性

• 顏色一致性（主色調(diào)、輔助色、點(diǎn)綴色、字體顏色）

顏色的一致性是指在同一個(gè)產(chǎn)品中，主色調(diào)、輔助色、點(diǎn)綴色、字體顏色、警告色等顏色是否在保持一致，而不會(huì)因?yàn)樵诓煌捻撁嫔纤麄兊念伾憩F(xiàn)不一致。例如：在支付寶的主色調(diào)是藍(lán)色，那么他的產(chǎn)品LOGO、產(chǎn)品的主色調(diào)、包括線下活動(dòng)的相關(guān)海報(bào)，一般是藍(lán)色作為主色調(diào)。

顏色的一致性在設(shè)計(jì)中非常重要，大家都知道品牌色的概念，可見顏色的傳承對(duì)于產(chǎn)品來說是非常重要的。特別是對(duì)于多端的產(chǎn)品來說，表現(xiàn)得尤為重要，你應(yīng)該沒有見過一個(gè)產(chǎn)品在pc端主色調(diào)是一種顏色，而在手機(jī)又是另外一種顏色。

產(chǎn)品的色調(diào)影響了用戶對(duì)產(chǎn)品的認(rèn)知，用戶對(duì)一個(gè)產(chǎn)品的認(rèn)知來源于他的品牌色和他的內(nèi)容。例如：你走在馬路上，遠(yuǎn)遠(yuǎn)看到一輛橙紅色的共享單車，那么你會(huì)認(rèn)為他是一輛摩拜單車，黃色的則是ofo，同樣的他們的應(yīng)用在主色調(diào)上也同車身主色調(diào)保持一致，可以讓用戶更好的識(shí)別這個(gè)品牌。

如下圖所示：

• 風(fēng)格一致性（扁平、投影、擬物等風(fēng)格表現(xiàn)）

在一個(gè)應(yīng)用中一般只使用一種風(fēng)格如擬物化或扁平化（如下圖所示），而不是在一個(gè)應(yīng)用中一些頁面是擬物化，一些頁面是扁平化，這很容易讓用戶在使用過程中容易跳戲，疑惑這是否還是同一個(gè)應(yīng)用中。

此外，經(jīng)過這幾年扁平化的發(fā)展，現(xiàn)在的很多應(yīng)用的扁平化并不是純的扁平化，一般會(huì)在扁平化的基礎(chǔ)上增加一些陰影、漸變等處理，使整個(gè)畫面相對(duì)豐富一些。所以無論使用哪一種風(fēng)格，都需要注意，一個(gè)應(yīng)用中只使用一種風(fēng)格。

此外，一致性的一個(gè)很重要的體現(xiàn)就是ICON的一致性，在應(yīng)用分類中，同一模塊下使用的圖標(biāo)建議保持一致。圖標(biāo)的一致性包括風(fēng)格是線形、面形、線面結(jié)合等方式，選取其中的一種風(fēng)格，并且在圖標(biāo)的線的粗細(xì)和圓角上也需要保持一致，而不是有一些線是2px，而有一些是3px，指教和圓角都有。如下圖是比較優(yōu)秀的圖標(biāo)設(shè)計(jì)案列。

• 屬性一致性（字體、圖標(biāo)、圖片）

在相同層級(jí)的不同功能的字體字號(hào)大小、不同圖標(biāo)、不同尺寸的圖片在屬性的表現(xiàn)應(yīng)該是一致的，或者有某種關(guān)系讓他們達(dá)到一致。屬性的一致通常體現(xiàn)在字體、標(biāo)簽、圖片上。

字體選用、字號(hào)大小、是否加粗、顏色、投影等都是屬于字體的屬性；圖片的屬性主要體現(xiàn)在圓角或直角、尺寸、圖片投影上。

例如：在資訊類的文章中，你在不同的頁面中一眼就可以分出標(biāo)題、內(nèi)容、標(biāo)簽等這些內(nèi)容，是因?yàn)樵诓煌捻撁嬷袠?biāo)題、標(biāo)簽、內(nèi)容給用戶的感知是一致的，他們的屬性相同。在應(yīng)用中的所有圖片的圓角、陰影保持一致。

如下圖所示：

（5）行為一致性

• 操作一致性（刪除、滑動(dòng)、點(diǎn)擊、下滑刷新、動(dòng)作、動(dòng)畫表現(xiàn)）

操作一致性也可以說是交互動(dòng)作一致性，就是指用戶在操作相同的功能時(shí)，他們的操作方式應(yīng)該是一致的，如點(diǎn)擊打開、左滑刪除、長按顯示更多操作、截圖出現(xiàn)自動(dòng)分享等在各個(gè)頁面表現(xiàn)一致。

例如：在iOS的列表中，很多刪除都是左滑刪除的，如果你在設(shè)計(jì)列表的刪除操作時(shí)，不要使用右滑刪除。再如：在應(yīng)用頁面中，下拉刷新是一個(gè)非常自然的操作，并且經(jīng)過多年的發(fā)展，很多用戶的習(xí)慣了這個(gè)操作，那么建議在你的設(shè)計(jì)中保持下拉刷新的操作，而不是把拉下刷新做成其他的功能。

• 與產(chǎn)品在所在平臺(tái)保持一致性（安卓和iOS的不同的操作習(xí)慣）

在產(chǎn)品的設(shè)計(jì)中需要考慮產(chǎn)品的所在的平臺(tái)的特性，根據(jù)平臺(tái)的特性設(shè)計(jì)與其相符合的產(chǎn)品。

如果設(shè)計(jì)的平臺(tái)是PC端的話，那么需要考慮PC端的特性，屏幕較大，網(wǎng)絡(luò)相對(duì)較穩(wěn)定，常用的的以點(diǎn)擊的操作居多等相關(guān)情況。如果設(shè)計(jì)的平臺(tái)移動(dòng)端，那則要考慮到手機(jī)的使用場(chǎng)景的復(fù)雜性，包括網(wǎng)絡(luò)和使用環(huán)境以及用戶心理狀態(tài)等。

并且移動(dòng)端也會(huì)相對(duì)運(yùn)用較多的手勢(shì)操作，在手勢(shì)的使用上也要遵循手勢(shì)操作的規(guī)范。并且移動(dòng)端還分iOS、Android等不同的操作系統(tǒng)，在不同的系統(tǒng)下某些操作和表現(xiàn)樣式不一致。如：常見的iOS和Android的彈窗在表現(xiàn)上就是不一樣的，需要根據(jù)產(chǎn)品所在的平臺(tái)選用不同的方式。

如下圖所示是Android和iOS系統(tǒng)彈窗的樣式。

又如：iOS的列表刪除通常是左滑進(jìn)行刪除，而Android的列表刪除則是長按進(jìn)行刪除，如下圖是Android和iOS兩種的列表刪除方式。

（6）感知一致性

• 位置一致性（確定、取消按鈕、保存、類似模塊的相同按鈕位置相似）

位置的一致性主要是指相同的功能在頁面的中位置需要保持一致，位置的一致性可以方便用戶快速準(zhǔn)確的操作。其中包括相同功能的操作位置一致、頁面之間的元素相對(duì)位置一致等。

例如：很多應(yīng)用都有列表管理功能，用戶可以對(duì)列表進(jìn)行移動(dòng)、分組、刪除、分享、編輯等操作，在執(zhí)行操作之前通常會(huì)點(diǎn)擊管理、然后勾選，則建議所有頁面列表的勾選位置都保持一致。例如：位于列表的前方，或者是右上/下角等。

如下圖紅色位置所示：

例如：在一些包含有視頻的資訊類應(yīng)用中，為了區(qū)分圖文信息還是視頻信息，通常會(huì)在視頻信息中增加一個(gè)播放的按鈕，很多都是位于視頻資源/視頻封面的中心位置。

其中位置的一致性，還包括頁面中各元素的對(duì)應(yīng)關(guān)系，類似模塊布局位置類似。如下圖所示：

• 文本一致性（提示語、操作提示、功能按鈕、編輯提示）

文本一致性是指在APP中，同樣的功能在不同的地方出現(xiàn)的文本應(yīng)該保持一致，其中包含提示語、輔助信息、操作提示、功能按鈕文本等。

提示語和輔助信息（如：賬號(hào)密碼的輸入提示）主要是指在語氣上、用詞上保持一致，假如你的App是那種二次元相關(guān)的，如：B站等，那么提示語就會(huì)相對(duì)于二次元一些。

以下為B站的提示語舉例：

• 如他的空頁面會(huì)提示：什么都沒找到啊T-T
• 登錄提示語：你還沒登錄哦~趕快登錄打開新世界的大門吧
• 加載中：正在玩命加載數(shù)據(jù)……
• 鼓勵(lì)用戶發(fā)彈幕：發(fā)個(gè)友善的彈幕見證當(dāng)下

如果你的應(yīng)用是相對(duì)正式的，例如理財(cái)?shù)葢?yīng)用，則需要更多的是正式一點(diǎn)的提示語，如：

• 加載中：數(shù)據(jù)加載中，請(qǐng)稍后/數(shù)據(jù)正在刷新中
• 功能未開放：XX功能未開放，敬請(qǐng)期待
• 空頁面：您未XXX

操作提示主要是用戶在操作時(shí)的一些反饋，例如：操作成功、操作失敗、已添加等提示語需要保持一致。例如：一個(gè)管理文件的應(yīng)用，當(dāng)用戶添加文件時(shí)操作成功時(shí)，如果提示“添加成功”，那么建議在刪除時(shí)也提示”刪除成功” 而不是“已刪除”

功能按鈕文本在各個(gè)界面的表述一致，例如：一些列表頁面如收藏、下載、文件列表等頁面中，通常會(huì)有編輯或管理這些列表的功能，無非是刪除、修改等功能。那么建議在應(yīng)用設(shè)計(jì)中，對(duì)于同等的操作，建議統(tǒng)一為管理、編輯、刪除等詞中的一個(gè)，避免同一個(gè)功能多種術(shù)語，如收藏功能在一些界面顯示“喜愛”。

四、總結(jié)

文章主要從視覺一致性、行為一致性和感知一致性等方面分析了如何在設(shè)計(jì)中使用一致性原則，一致性的運(yùn)用在設(shè)計(jì)中的方方面面，需要多方面的配合才能做好一個(gè)產(chǎn)品的一致性。但是需要注意的是一致性并不是一樣，不是在任何界面的體現(xiàn)相同而是體現(xiàn)一致。

除了上文描述的需要遵循的一致性的相關(guān)點(diǎn)之外，還有其他運(yùn)用的地方，例如一些狀態(tài)表現(xiàn)一致，如禁用此功能時(shí)是隱藏還是置灰等也是需要注意的，設(shè)計(jì)時(shí)需要多想。

最后，感謝閱讀本文的朋友們~

作者：一戈何處，公眾號(hào)：一戈何處

來源：公眾號(hào)：一戈何處

本文由 @一戈何處?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

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