起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識詳解設計一致性原則，讓產品帶有生命力
編輯導語：當相似的元素有一致性的外表和相似的功能時，它的可用性和易學性會增強；當一致性運用到你的設計中時，人們將會將知識運用到新的環境并且能夠快速輕易地學習新知識；本文作者分享了關于設計一致性原則的詳解，我們一起來了解一下。
一、設計一致性概述
一致性是產品設計最為基礎且重要的原則之一，一般主要指品的設計理念、品牌形象、邏輯結構、操作交互以及視覺形象等設計“基因”能夠在設計中較好的保持一致和統一。
如下圖所示為網易云音樂的排行榜和歌單頁面，雖然是2個不同的功能頁面，但頁面在布局結構（如標題，背景插圖，歌曲列表）和交互操作（播放歌曲，搜索，分享）等方面都是一致統一的。
設計保持一致性的好處是顯而易見的，對產品，可以使產品、品牌形象的統一規范性，降低產品迭代優化的成本；對于用戶，能夠在產品不同模塊中有一致性的體驗，同時降低用戶對功能的理解和使用成本。
二、設計一致性的作用
設計的一致性無論對用產品還是對用戶都有著巨大的作用和意義，其主要體現在以下幾個方面。
1. 為產品優化迭代提供指導和評估準則
在需求討論階段，一致性原則可以保證產品需求不會偏離產品既定的目標和理念；在設計過程中，一致性原則可以讓設計師確保設計方案不偏離需求目標，以及在視覺，交互等細節方面保持一致統一。
在設計方案評審過程中，一致性原則可以作為評估準則來評估具體設計方案。
2. 保持產品和品牌形象的一致
在產品不同的功能模塊中或者不同發展時期中，一致性原則可以保證產品在設計理念，品牌形象，功能邏輯結構，操作交互，視覺形象等方面保持一致，從而確保用戶對產品形成的形象認知是一致和統一的。
如下圖所示為網易云音樂“我的”頁面和播客分類頁面，不僅在圖標設計、Tab組件等視覺形象方面都保持了一致；而且在元素結構布局以及操作交互上都保持一致，這樣確保了用戶在使用產品后形成的產品和品牌形象認知是一致的。
3. 保證用戶認知和使用體驗的一致，降低用戶使用產品的成本
產品迭代優化帶來的差異總會對用戶的使用造成一定的“阻礙”，而在設計中遵循一致性原則，就可以較大程度的降低這種“阻礙”，以“潤物細無聲”的方式去改變用戶認知，保證用戶認知和使用體驗的一致，從而降低用戶使用產品的成本。
例如iOS系統中，列表左滑刪除操作可以認為是一種較為普遍的認知，因此在合適的場景中使用列表左滑刪除邏輯，用戶就可以很好理解，甚至不需要提示引導就可以完成刪除操作。
4. 提升產品設計效率，降低產品迭代優化的成本
產品是一個復雜功能的集合體，其中總有或多或少的功能模塊、交互邏輯是比較類似或者相同的，如按鈕，頁面資源加載邏輯等；基于一致性原則，這些功能邏輯應該使用統一規范的設計方案，這樣不僅能夠保證用戶在不同功能模塊中體驗趨于一致。
而且由于功能邏輯的復用會降低產品，設計，研發和測試等流程的周期和投入成本，從提升產品迭代優化的效率。
三、如何做到設計的一致性
一致性原則的內涵是非常廣的，不是使用一樣的顏色或者一樣的形式就能代表設計的一致性，而是需要從多個方面和角度進行思考和衡量，在設計中，可以從以下方面來進行思考。
1. 設計理念的一致
成熟產品在一定的發展歷程內，必須保證產品設計理念是一致的，即針對不同的需求，要以統一的理念去指導和評估設計，從而形成統一規范的產品形象，用戶認知和使用體驗。
假設產品理念包含“年輕人”的關鍵詞，那么所有的設計方案都應該能夠表現出“年輕人”的特點，只是具體的表現形式不一樣而已。
值得注意的是，此外設計理念還應該包括設計目標、設計策略、設計原則以及設計語言風格等設計基本“基因”因素。
2. 用戶認知的一致
用戶對任何事物的看法和判斷都是建立在自己以往經驗的基礎上，即看待新事物都會用以往的記憶和經驗來判斷和理解，因此必須保證設計方案是符合用戶認知的，即符合用戶的過往經驗，否則用戶就會產生認知歧義；例如常見的垃圾桶圖標就是代表刪除的含義，設計中就不能用垃圾桶圖標來表達其他含義。
一般來說，用戶對產品的認知可以簡單歸納為兩大類，一是普遍用戶認知，一是產品用戶認知。
普遍用戶認知
普遍用戶認知指的是在整個社會群體中大家對于某事物有比較統一的認識。一般來說，能被絕大部分社會群體認可的觀點，日常生活或和行業領域中較為普遍且一致的行為、經驗以及科學規律等都可以成為普遍用戶認知；例如上文所講述的垃圾桶圖標代表刪除含義和物理移動規律就屬于普遍用戶認知。
產品用戶認知
產品用戶認知指的是用戶在使用產品過程中形成的認知，這些認知局限于產品內和使用用戶群體，超出這個范圍其他的用戶可能就難以理解。
產品用戶認知一般都是一些復用的功能邏輯或者設計，例如JD中使用了動態的JD狗作為加載等待狀態的提示，那么在用戶在JD中看見動態的JD狗，那么就能理解頁面當前處于加載或者等待狀態，需要等待一會。
如果產品做得足夠好，用戶群體足夠大，那么產品用戶認知也可以演變為普遍用戶認知，例如微信中長按按鈕進行語音的操作方式，現在基本上已經成為語音交互的通用交互方式之一（之前很多產品都是單擊進行語音交互）。
3. 功能結構的一致
功能結構是產品的骨架，決定了用戶在產品中的主要體驗路徑，功能結構的一致性可以幫助用戶快速理解整個產品的功能和保證不同模塊中用戶體驗的一致。
常見的功能結構一致性包括兩方面，一是相似的功能使用相同的結構，例如在設置模塊，同一個層級的不同的設置模塊使用的列表結構應該是一致的，都使用雙行列表或者都使用單行列表；二是不同功能模塊中相同的功能應該使用一樣的功能結構，產品中所有的頁面標題欄的邏輯和結構都應該是一致的。
4. 交互操作的一致
交互操作的一致能夠降低產品邏輯結構的復雜程度，能統一用戶的認知和使用體驗以及降低用戶的使用成本。在實際設計中關于交互操作的一致性可以從以下幾個方面進行考慮。
交互邏輯的一致
在產品內有很多交互操作的邏輯本質是相同的，不能為這些相同的交互操作設計多種邏輯或方案，因為這樣不僅會造成用戶體驗的不一致，還會造成產品架構的混亂。
如下圖所示為常見的2種溢出菜單按鈕的操作列表，左圖中點擊蒙版區域會關閉菜單列表，而右圖是利用取消按鈕關閉菜單列表；這2種設計方案的設計都是合理的，但在產品中不應該同時混用這兩種設計方案，根據產品自身需要選擇其中一種方案就可以了。
操作方式的一致
常見的交互操作方式有點擊，長按，滑動，拖動等，每一種操作方式都有著其獨有的特點和使用場景，在設計中需要保證這些交互操作方式的使用是一致的。
例如產品中的本地數據在大部分情況下都支持長按進入編輯管理狀態后者出現操作菜單列表，再比如常見Tabs組件中都支持左右滑動切換不同的Tab選項卡，在產品設計中就需要保持這些交互操作方式的一致，不能為同一種交互操作設計多的操作方式（不包括主操作方式和快捷操作方式）。
狀態邏輯的一致
產品頁面中的元素狀態應該能夠很好地表現出交互操作的邏輯，相同狀態的元素其代表的交互邏輯也應該是相同的，例如產品中按鈕的可點擊狀態、按下狀態、拖拽狀態、禁用狀態、選中狀態以及加載等待狀態、操作反饋等在產品中都需要保持一致。
如下圖所示為為不同類型按鈕的禁用狀態示意圖，其狀態邏輯的設計是一致的。
5. 視覺形象的一致
視覺形象對產品一致性的影響是最為直觀的，因為用戶形成產品認知和體驗感受的基礎就是視覺形象。設計中視覺形象的一致性可以從以下幾個方面進行考慮。
設計風格/語言
設計風格/語言指的是整個產品的視覺形象基調，是視覺設計的基本理念和重要的指導評估原則之一。
本質上講設計風格/語言就是產品設計理念的一部分，只不過設計風格/語言更多的體現在視覺設計方面。例如微信和QQ，兩者的視覺設計風格是完全不同的，再細節一點，圖標的設計是使用線形風格還是面形風格。
一致的設計風格可以保證產品整體形象的一致，能在產品設計過程中提供明確的設計指導、設計要求、設計準則以及方案評估準則。
品牌形象（VI）
嚴格意義上講，品牌VI是自成體系的，不會與普通的產品視覺設計歸為一類。但在具體的設計中，我們還是會使用品牌VI中的一些元素，包括吉祥物，產品logo，品牌色等；如JD的吉祥物狗joy和天貓的超級符號等在其應用中都有非常多的使用場景和使用形式。
在產品設計中與品牌形象保持一致性也是非常重要的，可以加強用戶對品牌的認知以及利用品牌來為產品功能背書。
色彩
任何視覺形象都是由色彩組成的，因此在設計中我們需要形成一個完整且一致的的產品色彩體系，包括品牌色（主色調），主要色系以及衍生的輔助色色彩。
保證色彩的一致性，既可以保證用戶對產品認知的一致性以及形成獨有的品牌認知，還有利于頁面信息層次和優先級的表達。
如下圖所示為網易云音樂和QQ音樂中我的頁面的設計方案，其中圖標和Tab組件等設計都統一使用了其品牌色（紅色和綠色）。
文本
與色彩類似，文本也是視覺形象的重要組成部分。在絕大數的產品中，文本是用戶獲取產品信息的基本途徑，這也意味著文本對產品的使用體驗有非常大影響。
一般來說，文本的一致性就是指文本樣式的一致性，常見的文本樣式包括字體，字號，字重，顏色，字間距，行間距，段落，文本區域寬度高度，對齊方式和透明度等；通過這些具體的文本樣式可以為產品設定統一規范的文本樣式，如標題，副標題，正文，說明文本，出錯/警示文本等。
如下圖所示為網易云音樂中不同模塊中2個卡片，其中卡片標題，正文以及其他文本標簽的文本樣式都是一致的。
布局
頁面的布局是視覺設計方案的基礎框架，是一個非常復雜的問題，涉及到交互和邏輯，以及眾多的視覺因素。
常見的影響頁面布局的視覺因素有元素間距，排序，對齊方式，字體以及大小，位置約束，元素縮放，輸出單位，設備適配等，在這里也無法一一說明解釋。在設計過程中，需要對這些因素進行統一合理的的規劃和設計。
標準控件/組件
視覺形象的一致性在產品中最為直接的體現就是產品中標準控件和組件的使用，如按鈕，彈窗，Tabs等。
控件和組件的一致性，不僅包括視覺樣式，還包括其使用規范以及交互邏輯等；如下圖所示的為淘寶的首頁和逛逛頁面，其頁面中的標題欄就屬于組件，2個頁面的標題欄在布局結構，視覺樣式和交互操作等方面都是是一致的，僅僅在細節視覺樣式上有所差異。
四、設計一致性與可變性
任何事物都需要把握一個度，設計的一致性亦是如此。如果一味的追求設計的一致，就會讓設計陷入固定的模式，設計出來的方案就會缺少“生機”和“靈動”；隨著時間的增長，會導致產品缺少吸引力和競爭力下降。所以在遵循設計一致性的基礎上，探索設計的可變性也是不可缺少的。
同設計的一致性原則類似，設計的可變性也是有一定的要求和限制的，不能一味的追求設計的多變，否則只會起到負面作用，如讓設計變得毫無特色，讓產品變得雜亂無章，讓產品體驗變差。
實際的設計過程中，可以從以下幾個方面考慮設計的可變性。
滿足產品和用戶需求
任何設計都需要滿足產品和用戶的需求，設計的一致性和多變性也需如此，如果不能滿足產品和用戶需求，那么任何形式的設計都是沒有意義的。
設計的拓展
成熟的產品中（不包括運營活動），任何設計都需考慮設計拓展性，需要考慮這種“變化”在產品內的拓展，即能否將新方案應用到其他地方或后續的設計方案中；如果設計方案能拓展，那么這種“可變性”最終能夠演變成設計的“一致性”。
設計“基因”延續
對于產品而言，設計的風格和設計理念等設計“基因”是不會經?；蛘咴谳^短時間內改變的，在任何背景下的設計方案都需要遵循和體現這些設計“基因”，因此在探索設計多變性的過程中，同樣需要保證這些設計“基因”的延續和表達。
這樣做的好處不僅能在設計方案中體現出靈活多變，還能在一定程度上保持設計的一致性，這樣不會因為多變的設計而導致迭代前后使用體驗和用戶認知的差異較大。
緊跟社會/行業發展的腳步
社會和行業領域都在不斷進步發展，設計也是如此，不可能能一直停留在“原地”；因此需要不斷的關注社會和行業的進步發展，不斷思考這些“改變”對計的影響，并適時的調整設計，讓設計能夠跟隨社會和行業的發展。
例如行業內的色彩，布局，圖標設計等流行趨勢是在不斷變化的，合理適時的將這些設計趨勢運用到新的設計方案中去，對產品和用戶都是有好處的。
設計一致性原則的好處和重要性是顯而易見的，但在實際設計中，決不能為了一致性而一致性，不能讓一致性原則成為設計的桎梏。
一致性與可變性都是為了更好的服務用戶，為產品和用戶帶來更多的價值；需要在設計過程中把握好一致性和可變性之間平衡性，這樣設計出來的方案才更有生命力。
本文由 @小乞丐 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
