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