3個案例,正確理解B端產品中的一致性原則

7 評論 7357 瀏覽 28 收藏 11 分鐘

編輯導語:一致性原則的存在有利于產品內外部的和諧與一致,然而,業(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個案例,正確理解B端產品中的一致性原則

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

3個案例,正確理解B端產品中的一致性原則

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

所以當我們在做產品設計時,首先要從產品功能定位和商業(yè)模式出發(fā),結合用戶需求,不能為了一致而一致。

2. 符合用戶認知

我們在做產品設計或者制定設計規(guī)范,不僅僅要考慮自身產品的一致性,還需要與行業(yè)內的產品保持一定的一致性。

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

3個案例,正確理解B端產品中的一致性原則

不知道大家是什么感覺,剛開始我在PC上收到左圖的會議邀請時,下意識地想點紅色“拒絕”按鈕,需要思考片刻才能做出決策?;蛟S設計師會說,設計已經遵從行業(yè)內的規(guī)范,利用紅、綠色區(qū)分了按鈕的功能屬性。

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

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

在界面設計時,一致性除了需要遵從產品內部的設計規(guī)范,也要考慮行業(yè)產品對用戶認知的影響,避免設計與用戶普遍認知產生沖突。

3. 符合用戶操作習慣

依然是按鈕的例子。

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

3個案例,正確理解B端產品中的一致性原則

彈窗中通常采用的是「右主+左次」的形式,而表單頁面中大都采用的是「左主+右次」的形式。為什么出現(xiàn)這種差異呢?以下是我個人的理解。

1)位置差異性分析

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

相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側表單內容區(qū)域。所以按鈕應該緊隨表單,便于用戶快速發(fā)現(xiàn)按鈕。如果將按鈕放置頁面右下角,或者頁面底部,用戶的視覺負荷更高。如下圖所示:

3個案例,正確理解B端產品中的一致性原則

在緊隨表單內容的場景下,設計時優(yōu)先考慮用戶「F型」瀏覽習慣的原則,將主要按鈕居左放置,更加強調主按鈕的信息。

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

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

再擴展下對齊的思考,表單中按鈕為什么不與標簽對齊,而是與輸入框對齊呢?

① 隱喻認知

按鈕作為表單的操作項,可以認為與輸入框的性質是一致的,是需要與用戶發(fā)生交互的。而表單中左側的標簽則是信息區(qū),主要承載的是用戶信息瀏覽。因此按鈕歸屬于交互區(qū),需要與輸入框對齊。

② 視覺要求

標簽有3種布局形式,頂對齊、左對齊、右對齊。

頂對齊場景下,標簽、內容區(qū)和按鈕三者對齊,不會出現(xiàn)什么問題。

左對齊場景下,標簽需要預留一定的信息空間滿足長文本標簽的場景,如果按鈕靠左對齊會造成明顯的右側內容空白,讓整個內容區(qū)視覺重心不穩(wěn)。

右對齊場景下,除了視覺重心不穩(wěn),還會造成整體的視覺錯亂。如下圖所示:

3個案例,正確理解B端產品中的一致性原則

所以按鈕與輸入框對齊,在視覺上整體更加協(xié)調。

三、總結

簡單總結下:

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

#專欄作家#

子牧先生。公眾號:子牧UXD(HelloDesign),人人都是產品經理專欄作家。產品體驗設計師。8年互聯(lián)網行業(yè)經驗,擅長體驗設計思維、設計方法論、交互設計研究。

本文原創(chuàng)發(fā)布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協(xié)議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 講的很好,有收獲

    來自中國 回復
  2. 3中布局你就給了兩種,頂對齊呢大哥

    來自江西 回復
    1. 留白,作者給了讀者想象的空間

      來自上海 回復
  3. 123

    回復
  4. 相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側表單內容區(qū)域

    來自廣西 回復
  5. 綠色跟紅色的按鈕操作也不知道是哪家定的,真的無語

    來自浙江 回復
    1. 來自現(xiàn)實中啊,比如紅綠燈

      來自福建 回復