起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識UI設計中一致性如何做？看這篇就夠了
編輯導讀：為什么一致性在UI設計中很重要，設計師平常掛嘴邊的一致性原則到底是什么？一致性原則如何影響用戶行為？價值在哪里？本文作者從一致性原則的優勢出發，對設計師在處理界面的時候，如何遵循一致性原則這個問題進行了探討，與大家分享。
01 一致性原則的優勢
我們遵循一致性的原則目的是為了減少用戶認知負荷，用戶能夠輕易上手使用產品，熟悉的導航路徑，熟悉的設計模式。
我們知道，我們的用戶是忙碌的，沒有耐心，他們不愿意 花更多時間來學習使用你的產品。所以我們在做設計時候，就盡量多遵循常用的UI Patterns，它是什么？是一種常用可用性問題的一種通用解決方案。
但是如果一味遵循常有的Design Patterns，會導致我們界面看起來無創新，那么該什么時候突破這種界限，下面我會簡單舉例說明。
02 影響它的關鍵要素
顏色、間距、字體大小、圖標一致性、規則一致性、交互操作等，我們在做界面設計時，如何科學把控這些？
這里就要告訴大家一個常用的設計法則“重復”“節奏”“韻律”，學過平面設計的同學應該知道，這幾個點吧，在平面設計中運用比較多的種設計方法。
舉一個例子，重復如何運用在UI設計中？
1. 重復間距
上兩圖中，我們看可以看出里面設計采用的間距都是基于8的倍數，并重復運用。有節奏、有韻律的重復使用這些間距，可以產生節奏美。
2. 重復控件
上圖facebook截圖，按鈕表象層圓角基因一致。如果有大小差異，它們使用參數化原則去定義圓角，大一點的控件圓角大一些，反之亦然。
3. 布局規則
上圖是騰訊視頻界面截圖，我們可以看到他們在布局上制定了一些規則。
比如欄目與欄目之間才有重復使用相同布局，2×3（指單個欄目擺放視頻數量），然后接著下面欄目就是1×1，下面又接著2×3，后面欄目將1X1和2X3集合起來，然后重復使用。
這樣重復的網格布局，對我們產品有什么好處呢？大家有沒有發現目前市面上的視頻類和音樂類的產品差不多這樣布局嗎？（這其實就是外部一致性原則）。
因為用戶已經熟悉且掌握這種模式，不再需要重新學習。
那么如何在這種同質化的產品中脫穎而出呢？布局中可以使用對比，突出核心功能體驗，又如還可以內容優于同類產品，品牌特征打造，符號運用。
03 一致性原則影響著用戶行為
如導航模式；一級導航，二級導航，如果采用常用設計模式，用戶基本可以很輕松的找到自己想要的內容。
再來說下顏色如何影響用戶行為：比如系統里面定義藍色是可點擊的顏色，那么我們在做設計是時候就要注意，哪些可點擊，顏色使用是否合理，同類顏色，表達相同的含義，就不能用在其他意義的元素上。
大原則：相同含義的元素在不同的地方執行相同的操作時候，反饋機制需要一致。
上圖左邊是ios的開關，右邊是materials design 材質設計系統的開關，這兩種開關大同小異，它符合用戶心理表真，我們日常生活中家里燈開關不就和這個類似嗎？所以在我們設計這些就可以盡量遵循用戶的心里表真，保持內部外部一致性。
再比如在ios系統里面在對應列表上左滑動是可以對該列表操作的，那么在安卓里面的列表設計就需要慎用左滑操作。
總結
一致性設計大方向為產品有更杰出的體驗，在保證用戶體驗良好的同時，我們需要與同類產品做出差異化競爭設計，這就需要我們平時多觀察互聯網設計趨勢，國外設計趨勢，集合自己品牌去打造一套好用的產品。
在產品設計中我們時刻留意著關鍵元素的一致性的運用，確保產品整體體驗一致。
- 顏色：在使用顏色上需要嚴格去定義，比如綠色用于正確顏色，紅色用語錯誤顏色，藍色是可以點擊顏色，這些都是常用的設計模式。
- 布局／排版：布局遵循最小化設計原則，導航路徑清晰可見，一級導航和二級導航一定要區分清楚，二者不可混用，排版布局上盡量遵循格式塔心理學原理。
- 字體：一個app使用一種字體貫穿整個產品設計，字體大小運用重復原則，重復可以使其保持一致性。
- 交互：這里我簡單說下，操作模式，反饋機制要符合用戶心理表真，常用功能操作流程要和外部環境保持一致性，比如我點擊界面上藍色文字這時候就要有正確反饋機制，而不是出一個彈窗。
- 圖標：圖標一致性我相信大家都懂吧，以前寫了一篇關于圖標規范的，有興趣的可以去看下，5招輕松打造系統圖標規范。
看完了你掌握了多少？一致性是視覺分析的其中一種關鍵環節，再結合我之前寫的“認知負荷”可以拿自家APP 去分析一下，現有版本有哪些視覺問題，這樣可以鍛煉自己視覺分析能力！
#專欄作家#
Tony，微信公眾號：洞見設計，人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長，簡歷指導，每周分享最有價值的設計經驗，擅長產品體驗設計，關注【洞見設計】后臺回復“彩蛋”領取設計資料。
本文原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
不錯
不錯