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

一、一致性原則是什么？

百度百科：一致性原則也稱一貫性原則，它要求企業采用的會計處理方法前后各期應當保持一致，而不得隨意變更。如確有必要變更，須將變更原因及其對財務狀況和經營成果的影響，在財務報告中加以說明。

一致性最初用于企業，后來延伸到設計領域，是指相同的功能在應用的不同界面應該表現一致 ，相似的功能在不同的界面中應該表現相似。

二、遵循一致性原則優勢

減少用戶認知和記憶負擔，提高產品易用性。同時也減少了用戶在使用過程中產生的困惑，提高了用戶使用產品的愉悅感和流暢感。

三、一致性原則在設計中如何體現？

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

一致性在設計中的運用主要包括以下的幾個方面：

（1）視覺一致性

• 顏色一致性（主色調、輔助色、點綴色、字體顏色）
• 風格一致性（扁平、投影、擬物等風格表現）
• 屬性一致性（字體、圖標、圖片）

（2）行為一致性

• 操作一致性（刪除、滑動、點擊、下滑刷新、動作、動畫表現）
• 與產品在所在平臺保持一致性（安卓和iOS的不同的操作習慣）

（3）感知一致性

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

（4）視覺一致性

• 顏色一致性（主色調、輔助色、點綴色、字體顏色）

顏色的一致性是指在同一個產品中，主色調、輔助色、點綴色、字體顏色、警告色等顏色是否在保持一致，而不會因為在不同的頁面上他們的顏色表現不一致。例如：在支付寶的主色調是藍色，那么他的產品LOGO、產品的主色調、包括線下活動的相關海報，一般是藍色作為主色調。

顏色的一致性在設計中非常重要，大家都知道品牌色的概念，可見顏色的傳承對于產品來說是非常重要的。特別是對于多端的產品來說，表現得尤為重要，你應該沒有見過一個產品在pc端主色調是一種顏色，而在手機又是另外一種顏色。

產品的色調影響了用戶對產品的認知，用戶對一個產品的認知來源于他的品牌色和他的內容。例如：你走在馬路上，遠遠看到一輛橙紅色的共享單車，那么你會認為他是一輛摩拜單車，黃色的則是ofo，同樣的他們的應用在主色調上也同車身主色調保持一致，可以讓用戶更好的識別這個品牌。

如下圖所示：

• 風格一致性（扁平、投影、擬物等風格表現）

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

此外，經過這幾年扁平化的發展，現在的很多應用的扁平化并不是純的扁平化，一般會在扁平化的基礎上增加一些陰影、漸變等處理，使整個畫面相對豐富一些。所以無論使用哪一種風格，都需要注意，一個應用中只使用一種風格。

此外，一致性的一個很重要的體現就是ICON的一致性，在應用分類中，同一模塊下使用的圖標建議保持一致。圖標的一致性包括風格是線形、面形、線面結合等方式，選取其中的一種風格，并且在圖標的線的粗細和圓角上也需要保持一致，而不是有一些線是2px，而有一些是3px，指教和圓角都有。如下圖是比較優秀的圖標設計案列。

• 屬性一致性（字體、圖標、圖片）

在相同層級的不同功能的字體字號大小、不同圖標、不同尺寸的圖片在屬性的表現應該是一致的，或者有某種關系讓他們達到一致。屬性的一致通常體現在字體、標簽、圖片上。

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

例如：在資訊類的文章中，你在不同的頁面中一眼就可以分出標題、內容、標簽等這些內容，是因為在不同的頁面中標題、標簽、內容給用戶的感知是一致的，他們的屬性相同。在應用中的所有圖片的圓角、陰影保持一致。

如下圖所示：

（5）行為一致性

• 操作一致性（刪除、滑動、點擊、下滑刷新、動作、動畫表現）

操作一致性也可以說是交互動作一致性，就是指用戶在操作相同的功能時，他們的操作方式應該是一致的，如點擊打開、左滑刪除、長按顯示更多操作、截圖出現自動分享等在各個頁面表現一致。

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

• 與產品在所在平臺保持一致性（安卓和iOS的不同的操作習慣）

在產品的設計中需要考慮產品的所在的平臺的特性，根據平臺的特性設計與其相符合的產品。

如果設計的平臺是PC端的話，那么需要考慮PC端的特性，屏幕較大，網絡相對較穩定，常用的的以點擊的操作居多等相關情況。如果設計的平臺移動端，那則要考慮到手機的使用場景的復雜性，包括網絡和使用環境以及用戶心理狀態等。

并且移動端也會相對運用較多的手勢操作，在手勢的使用上也要遵循手勢操作的規范。并且移動端還分iOS、Android等不同的操作系統，在不同的系統下某些操作和表現樣式不一致。如：常見的iOS和Android的彈窗在表現上就是不一樣的，需要根據產品所在的平臺選用不同的方式。

如下圖所示是Android和iOS系統彈窗的樣式。

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

（6）感知一致性

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

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

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

如下圖紅色位置所示：

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

其中位置的一致性，還包括頁面中各元素的對應關系，類似模塊布局位置類似。如下圖所示：

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

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

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

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

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

如果你的應用是相對正式的，例如理財等應用，則需要更多的是正式一點的提示語，如：

• 加載中：數據加載中，請稍后/數據正在刷新中
• 功能未開放：XX功能未開放，敬請期待
• 空頁面：您未XXX

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

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

四、總結

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

除了上文描述的需要遵循的一致性的相關點之外，還有其他運用的地方，例如一些狀態表現一致，如禁用此功能時是隱藏還是置灰等也是需要注意的，設計時需要多想。

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

作者：一戈何處，公眾號：一戈何處

來源：公眾號：一戈何處

本文由 @一戈何處?授權發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議