編輯導語：一緻性原則的存在有利于産品内外部的和諧與一緻，然而，業務團隊在進行産品設計時，需要辯證地看待一緻性原則，從定位、用戶認知等方面對一緻性原則的采納進行詳細考量。本文作者便結合B端産品設計發表了他的看法，一起來看一下。

「一緻性」是尼爾森十大可用性原則之一。強調産品設計應遵循平台的慣例，也就是在用語、功能、操作等方面保持一緻。主要的目标是希望産品保持内部和外部的一緻性，減少用戶的學習成本，從而提升用戶體驗。

今天讨論的目的不是否定一緻性，而是需要辯證地看待一緻性。

一、一緻性的價值

工作過程中，當産品或者開發問到一些設計細節時，設計師很容易回答“與XX功能保持一緻就可以了”。這在工作中應該比較常見，也比較容易理解，沿用以往的設計形式省時、省心，何樂而不為呢？

另外設計側主動建立産品設計規範，很大程度上也是為了做好設計管控，保證産出的一緻性，所以一緻性的價值是毋容置疑的。

當然除了産品體驗提升外，「一緻性」對産品設計開發也有幫助。

1. 降低設計成本，提高開發效率

無論是設計還是開發，複用已有的組件資源，保持界面的一緻性可以有效地減少設計的投入，避免不必要的設計分歧點。

而在開發階段，可以避免重複造輪子，提高開發的效率，保證落地效果，也可以減少上線前設計走查、測試的工作量。

2. 形成一緻的設計風格

根據原子設計理論，通過原子組件的一緻性，可以構建出統一的界面框架、布局，形成統一風格和用戶交互認知，從而更好地保證用戶體驗質量。

二、一緻性思考的維度

不過「一緻性」并不是強制性的标準，而是要以提升用戶體驗為目标靈活應用。實際落地執行時，要根據産品定位、用戶場景，結合業務功能來确定設計方案，不能為了一緻而一緻。

當我們遇到一緻性問題時，還是需要從以下3個方面深入思考，做出準确合理的設計決策。

1. 符合産品定位

傳統的B端産品都是本地化私有部署，功能僅面向企業内部用戶和實際的業務場景。業務屬性更強，因此頁面的結構形式相對更加統一。

但是随着SaaS産品的興起，B端産品功能更加豐富，場景和服務更加多元。

例如面向個人用戶和團隊協作的工具型産品，産品定位首先要滿足個人用戶的服務，獲得足夠的用戶流量，因此大都開放注冊并提供免費的基礎服務。在此基礎上，通過差異化的增值服務獲得商業變現，例如會員特權服務、團隊服務等等。

因此在頁面結構上既要滿足業務功能的需要，又要考慮運營推廣信息的展現，單純地追求一緻性是無法滿足産品定位的。

例如騰訊文檔，首先滿足用戶日常在線文檔編輯協作需求，采用的是管理端布局。

而「模闆庫」屬于增值服務，則采用了版心卡片式設計。

在語雀中也是如此，個人「工作台」界面采用了3欄布局結構，根據屏幕寬度自動縮放适配。而在「廣場」頻道中采用了版心定寬設計，「空間」頻道則變成了引流入口，點擊後通過浏覽器标簽打開新的頁面，交互邏輯上也是不同的。

所以當我們在做産品設計時，首先要從産品功能定位和商業模式出發，結合用戶需求，不能為了一緻而一緻。

2. 符合用戶認知

我們在做産品設計或者制定設計規範，不僅僅要考慮自身産品的一緻性，還需要與行業内的産品保持一定的一緻性。

先看下面的2張圖，兩張都是PC端視頻會議的邀請界面。

不知道大家是什麼感覺，剛開始我在PC上收到左圖的會議邀請時，下意識地想點紅色“拒絕”按鈕，需要思考片刻才能做出決策。或許設計師會說，設計已經遵從行業内的規範，利用紅、綠色區分了按鈕的功能屬性。

但是無論是PC還是移動端産品，彈窗中的按鈕一般都是采用「右主 左次」的形式，這已經成為了大多數用戶的認知。左邊的視頻會議産品采用了相反的設計，違背了用戶的認知。雖然顔色在一定程度上可以降低用戶的誤判，但是很難改變用戶的認知習慣。

另外PC端按鈕仿照「接聽電話」的設計形式，我接觸的确實不多，還沒有建立起綠色接聽、紅色拒絕的認知，所以産生了一定的困難。

在界面設計時，一緻性除了需要遵從産品内部的設計規範，也要考慮行業産品對用戶認知的影響，避免設計與用戶普遍認知産生沖突。

3. 符合用戶操作習慣

依然是按鈕的例子。

我們常見的表單頁面中按鈕和彈窗中的按鈕，位置和組合形式并不一緻。

彈窗中通常采用的是「右主 左次」的形式，而表單頁面中大都采用的是「左主 右次」的形式。為什麼出現這種差異呢？以下是我個人的理解。

1）位置差異性分析

根據「認知負荷>視覺負荷>動作負荷」理論，在頁面中我們首先要讓用戶能夠找到按鈕，然後完成操作。

相對于彈窗，頁面的空間更大，邊界感偏弱，用戶的視覺重心更容易停留在左側表單内容區域。所以按鈕應該緊随表單，便于用戶快速發現按鈕。如果将按鈕放置頁面右下角，或者頁面底部，用戶的視覺負荷更高。如下圖所示：

在緊随表單内容的場景下，設計時優先考慮用戶「F型」浏覽習慣的原則，将主要按鈕居左放置，更加強調主按鈕的信息。

而在彈窗中空間更小，内容相對比較緊湊，更加适用于「古騰堡原則」，用戶的視覺終點會停留在右下角。而用戶的鼠标往往是停留在屏幕右側，所以主按鈕放置在右側，更方便用戶操作。

2）對齊方式的差異性分析

再擴展下對齊的思考，表單中按鈕為什麼不與标簽對齊，而是與輸入框對齊呢？

① 隐喻認知

按鈕作為表單的操作項，可以認為與輸入框的性質是一緻的，是需要與用戶發生交互的。而表單中左側的标簽則是信息區，主要承載的是用戶信息浏覽。因此按鈕歸屬于交互區，需要與輸入框對齊。

② 視覺要求

标簽有3種布局形式，頂對齊、左對齊、右對齊。

頂對齊場景下，标簽、内容區和按鈕三者對齊，不會出現什麼問題。

左對齊場景下，标簽需要預留一定的信息空間滿足長文本标簽的場景，如果按鈕靠左對齊會造成明顯的右側内容空白，讓整個内容區視覺重心不穩。

右對齊場景下，除了視覺重心不穩，還會造成整體的視覺錯亂。如下圖所示：

所以按鈕與輸入框對齊，在視覺上整體更加協調。

三、總結

簡單總結下：

1. 「一緻性」作為設計的基礎性原則是非常重要的，對設計、開發以及産品體驗的提升都有很大的幫助；
2. 一緻性原則不是強制原則，需要根據産品定位靈活變通地應用；
3. 一緻性的價值在于提升用戶體驗，需要符合用戶的認知和習慣。

#專欄作家#

子牧先生。公衆号：子牧UXD（HelloDesign），人人都是産品經理專欄作家。産品體驗設計師。8年互聯網行業經驗，擅長體驗設計思維、設計方法論、交互設計研究。

本文原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部