▲點擊 "子牧UXD"關注，回復 "設計圈" 加入我們
2022年原創總第 24 篇
距離年度目標40篇 還有16 篇
(全文2198字，預計閱讀時間：5分鐘)
#01一致性的價值
工作過程中，當產品或者開發問到一些設計細節時，設計師很容易回答「與XX功能保持一致就可以了」。這在工作中應該比較常見，也比較容易理解，沿用以往的設計形式省時、省心，何樂而不為呢？
#02 一致性思考的維度
不過「一致性」並不是強制性的標準，而是要以提升用戶體驗為目標靈活應用。實際落地執行時，要根據產品定位、用戶場景，結合業務功能來確定設計方案，不能為了一致而一致。
當我們遇到一致性問題時，還是需要從以下3個方面深入思考，做出準確合理的設計決策。
傳統的B端產品都是本地化私有部署，功能僅面向企業內部用戶和實際的業務場景。業務屬性更強，因此頁面的結構形式相對更加統一。
但是隨着SaaS產品的興起，B端產品功能更加豐富，場景和服務更加多元。
例如面向個人用戶和團隊協作的工具型產品，產品定位首先要滿足個人用戶的服務，獲得足夠的用戶流量，因此大都開放註冊並提供免費的基礎服務。在此基礎上，通過差異化的增值服務獲得商業變現，例如會員特權服務、團隊服務等等。
因此在頁面結構上既要滿足業務功能的需要，又要考慮運營推廣信息的展現，單純地追求一致性是無法滿足產品定位的。
例如騰訊文檔，首先滿足用戶日常在線文檔編輯協作需求，採用的是管理端布局。
而「模板庫」屬於增值服務，則採用了版心卡片式設計。
在語雀中也是如此，個人「工作檯」界面採用了3欄布局結構，根據屏幕寬度自動縮放適配。而在「廣場」頻道中採用了版心定寬設計，「空間」頻道則變成了引流入口，點擊後通過瀏覽器標籤打開新的頁面，交互邏輯上也是不同的。
所以當我們在做產品設計時，首先要從產品功能定位和商業模式出發，結合用戶需求，不能為了一致而一致。
我們在做產品設計或者制定設計規範，不僅僅要考慮自身產品的一致性，還需要與行業內的產品保持一定的一致性。
先看下面的2張圖，兩張都是PC端視頻會議的邀請界面。
不知道大家是什麼感覺，剛開始我在PC上收到左圖的會議邀請時，下意識地想點紅色「拒絕」按鈕，需要思考片刻才能做出決策。或許設計師會說，設計已經遵從行業內的規範，利用紅、綠色區分了按鈕的功能屬性。
但是無論是PC還是移動端產品，彈窗中的按鈕一般都是採用「右主+左次」的形式，這已經成為了大多數用戶的認知。左邊的視頻會議產品採用了相反的設計，違背了用戶的認知。雖然顏色在一定程度上可以降低用戶的誤判，但是很難改變用戶的認知習慣。
另外PC端按鈕仿照「接聽電話」的設計形式，我接觸的確實不多，還沒有建立起綠色接聽、紅色拒絕的認知，所以產生了一定的困難。
在界面設計時，一致性除了需要遵從產品內部的設計規範，也要考慮行業產品對用戶認知的影響，避免設計與用戶普遍認知產生衝突。
3.符合用戶操作習慣
依然是按鈕的例子。
我們常見的表單頁面中按鈕和彈窗中的按鈕，位置和組合形式並不一致。
彈窗中通常採用的是「右主+左次」的形式，而表單頁面中大都採用的是「左主+右次」的形式。為什麼出現這種差異呢？以下是我個人的理解。
1）位置差異性分析
根據「認知負荷>視覺負荷>動作負荷」理論，在頁面中我們首先要讓用戶能夠找到按鈕，然後完成操作。
相對於彈窗，頁面的空間更大，邊界感偏弱，用戶的視覺重心更容易停留在左側表單內容區域。所以按鈕應該緊隨表單，便於用戶快速發現按鈕。如果將按鈕放置頁面右下角，或者頁面底部，用戶的視覺負荷更高。如下圖所示：
在緊隨表單內容的場景下，設計時優先考慮用戶「F型」瀏覽習慣的原則，將主要按鈕居左放置，更加強調主按鈕的信息。
而在彈窗中空間更小，內容相對比較緊湊，更加適用於「古騰堡原則」，用戶的視覺終點會停留在右下角。而用戶的鼠標往往是停留在屏幕右側，所以主按鈕放置在右側，更方便用戶操作。
2）對齊方式的差異性分析
再擴展下對齊的思考，表單中按鈕為什麼不與標籤對齊，而是與輸入框對齊呢？
隱喻認知
按鈕作為表單的操作項，可以認為與輸入框的性質是一致的，是需要與用戶發生交互的。而表單中左側的標籤則是信息區，主要承載的是用戶信息瀏覽。因此按鈕歸屬於交互區，需要與輸入框對齊。
視覺要求
標籤有3種布局形式，頂對齊、左對齊、右對齊。
頂對齊場景下，標籤、內容區和按鈕三者對齊，不會出現什麼問題。
左對齊場景下，標籤需要預留一定的信息空間滿足長文本標籤的場景，如果按鈕靠左對齊會造成明顯的右側內容空白，讓整個內容區視覺重心不穩。
右對齊場景下，除了視覺重心不穩，還會造成整體的視覺錯亂。如下圖所示：
所以按鈕與輸入框對齊，在視覺上整體更加協調。
總結
簡單總結下：
1、「一致性」作為設計的基礎性原則是非常重要的，對設計、開發以及產品體驗的提升都有很大的幫助
2、一致性原則不是強制原則，需要根據產品定位靈活變通地應用
3、一致性的價值在於提升用戶體驗，需要符合用戶的認知和習慣
好了，今天就到這裡了，下期見～
回複數字【01】，獲取100+「行業報告」
回複數字【02】，獲取「大廠設計規範」
回複數字【04】，獲取「作品集包裝攻略」
回複數字【06】，獲取「筆試面試技巧」
回複數字【08】，獲取「精選樣機合集」
此外還可領取「大廠原型文件」、「設計師簡歷樣本」、「App設計參考作品」等高價值資料
留言列表