3個案例,正確理解B端產品中的一致性原則
編輯導語:一致性原則的存在有利于產品內外部的和諧與一致,然而,業(yè)務團隊在進行產品設計時,需要辯證地看待一致性原則,從定位、用戶認知等方面對一致性原則的采納進行詳細考量。本文作者便結合B端產品設計發(fā)表了他的看法,一起來看一下。
「一致性」是尼爾森十大可用性原則之一。強調產品設計應遵循平臺的慣例,也就是在用語、功能、操作等方面保持一致。主要的目標是希望產品保持內部和外部的一致性,減少用戶的學習成本,從而提升用戶體驗。
今天討論的目的不是否定一致性,而是需要辯證地看待一致性。
一、一致性的價值
工作過程中,當產品或者開發(fā)問到一些設計細節(jié)時,設計師很容易回答“與XX功能保持一致就可以了”。這在工作中應該比較常見,也比較容易理解,沿用以往的設計形式省時、省心,何樂而不為呢?
另外設計側主動建立產品設計規(guī)范,很大程度上也是為了做好設計管控,保證產出的一致性,所以一致性的價值是毋容置疑的。
當然除了產品體驗提升外,「一致性」對產品設計開發(fā)也有幫助。
1. 降低設計成本,提高開發(fā)效率
無論是設計還是開發(fā),復用已有的組件資源,保持界面的一致性可以有效地減少設計的投入,避免不必要的設計分歧點。
而在開發(fā)階段,可以避免重復造輪子,提高開發(fā)的效率,保證落地效果,也可以減少上線前設計走查、測試的工作量。
2. 形成一致的設計風格
根據(jù)原子設計理論,通過原子組件的一致性,可以構建出統(tǒng)一的界面框架、布局,形成統(tǒng)一風格和用戶交互認知,從而更好地保證用戶體驗質量。
二、一致性思考的維度
不過「一致性」并不是強制性的標準,而是要以提升用戶體驗為目標靈活應用。實際落地執(zhí)行時,要根據(jù)產品定位、用戶場景,結合業(yè)務功能來確定設計方案,不能為了一致而一致。
當我們遇到一致性問題時,還是需要從以下3個方面深入思考,做出準確合理的設計決策。
1. 符合產品定位
傳統(tǒng)的B端產品都是本地化私有部署,功能僅面向企業(yè)內部用戶和實際的業(yè)務場景。業(yè)務屬性更強,因此頁面的結構形式相對更加統(tǒng)一。
但是隨著SaaS產品的興起,B端產品功能更加豐富,場景和服務更加多元。
例如面向個人用戶和團隊協(xié)作的工具型產品,產品定位首先要滿足個人用戶的服務,獲得足夠的用戶流量,因此大都開放注冊并提供免費的基礎服務。在此基礎上,通過差異化的增值服務獲得商業(yè)變現(xiàn),例如會員特權服務、團隊服務等等。
因此在頁面結構上既要滿足業(yè)務功能的需要,又要考慮運營推廣信息的展現(xiàn),單純地追求一致性是無法滿足產品定位的。
例如騰訊文檔,首先滿足用戶日常在線文檔編輯協(xié)作需求,采用的是管理端布局。
而「模板庫」屬于增值服務,則采用了版心卡片式設計。
在語雀中也是如此,個人「工作臺」界面采用了3欄布局結構,根據(jù)屏幕寬度自動縮放適配。而在「廣場」頻道中采用了版心定寬設計,「空間」頻道則變成了引流入口,點擊后通過瀏覽器標簽打開新的頁面,交互邏輯上也是不同的。
所以當我們在做產品設計時,首先要從產品功能定位和商業(yè)模式出發(fā),結合用戶需求,不能為了一致而一致。
2. 符合用戶認知
我們在做產品設計或者制定設計規(guī)范,不僅僅要考慮自身產品的一致性,還需要與行業(yè)內的產品保持一定的一致性。
先看下面的2張圖,兩張都是PC端視頻會議的邀請界面。
不知道大家是什么感覺,剛開始我在PC上收到左圖的會議邀請時,下意識地想點紅色“拒絕”按鈕,需要思考片刻才能做出決策?;蛟S設計師會說,設計已經遵從行業(yè)內的規(guī)范,利用紅、綠色區(qū)分了按鈕的功能屬性。
但是無論是PC還是移動端產品,彈窗中的按鈕一般都是采用「右主+左次」的形式,這已經成為了大多數(shù)用戶的認知。左邊的視頻會議產品采用了相反的設計,違背了用戶的認知。雖然顏色在一定程度上可以降低用戶的誤判,但是很難改變用戶的認知習慣。
另外PC端按鈕仿照「接聽電話」的設計形式,我接觸的確實不多,還沒有建立起綠色接聽、紅色拒絕的認知,所以產生了一定的困難。
在界面設計時,一致性除了需要遵從產品內部的設計規(guī)范,也要考慮行業(yè)產品對用戶認知的影響,避免設計與用戶普遍認知產生沖突。
3. 符合用戶操作習慣
依然是按鈕的例子。
我們常見的表單頁面中按鈕和彈窗中的按鈕,位置和組合形式并不一致。
彈窗中通常采用的是「右主+左次」的形式,而表單頁面中大都采用的是「左主+右次」的形式。為什么出現(xiàn)這種差異呢?以下是我個人的理解。
1)位置差異性分析
根據(jù)「認知負荷>視覺負荷>動作負荷」理論,在頁面中我們首先要讓用戶能夠找到按鈕,然后完成操作。
相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側表單內容區(qū)域。所以按鈕應該緊隨表單,便于用戶快速發(fā)現(xiàn)按鈕。如果將按鈕放置頁面右下角,或者頁面底部,用戶的視覺負荷更高。如下圖所示:
在緊隨表單內容的場景下,設計時優(yōu)先考慮用戶「F型」瀏覽習慣的原則,將主要按鈕居左放置,更加強調主按鈕的信息。
而在彈窗中空間更小,內容相對比較緊湊,更加適用于「古騰堡原則」,用戶的視覺終點會停留在右下角。而用戶的鼠標往往是停留在屏幕右側,所以主按鈕放置在右側,更方便用戶操作。
2)對齊方式的差異性分析
再擴展下對齊的思考,表單中按鈕為什么不與標簽對齊,而是與輸入框對齊呢?
① 隱喻認知
按鈕作為表單的操作項,可以認為與輸入框的性質是一致的,是需要與用戶發(fā)生交互的。而表單中左側的標簽則是信息區(qū),主要承載的是用戶信息瀏覽。因此按鈕歸屬于交互區(qū),需要與輸入框對齊。
② 視覺要求
標簽有3種布局形式,頂對齊、左對齊、右對齊。
頂對齊場景下,標簽、內容區(qū)和按鈕三者對齊,不會出現(xiàn)什么問題。
左對齊場景下,標簽需要預留一定的信息空間滿足長文本標簽的場景,如果按鈕靠左對齊會造成明顯的右側內容空白,讓整個內容區(qū)視覺重心不穩(wěn)。
右對齊場景下,除了視覺重心不穩(wěn),還會造成整體的視覺錯亂。如下圖所示:
所以按鈕與輸入框對齊,在視覺上整體更加協(xié)調。
三、總結
簡單總結下:
- 「一致性」作為設計的基礎性原則是非常重要的,對設計、開發(fā)以及產品體驗的提升都有很大的幫助;
- 一致性原則不是強制原則,需要根據(jù)產品定位靈活變通地應用;
- 一致性的價值在于提升用戶體驗,需要符合用戶的認知和習慣。
#專欄作家#
子牧先生。公眾號:子牧UXD(HelloDesign),人人都是產品經理專欄作家。產品體驗設計師。8年互聯(lián)網行業(yè)經驗,擅長體驗設計思維、設計方法論、交互設計研究。
本文原創(chuàng)發(fā)布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協(xié)議。
講的很好,有收獲
3中布局你就給了兩種,頂對齊呢大哥
留白,作者給了讀者想象的空間
123
相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側表單內容區(qū)域
綠色跟紅色的按鈕操作也不知道是哪家定的,真的無語
來自現(xiàn)實中啊,比如紅綠燈