編輯導(dǎo)語：在B端設(shè)計(jì)領(lǐng)域，用戶對界面的屏效方面都存在同樣的訴求。本篇作者就對這一問題，從用戶案例收集、競品分析和論文查閱入手，進(jìn)行視覺、交互和信息三層面的實(shí)踐設(shè)計(jì)，推薦想了解B端產(chǎn)品界面屏效，如何從傾聽用戶需求，到發(fā)現(xiàn)問題和解決問題過程的童鞋閱讀。

一、背景

在 B 端設(shè)計(jì)領(lǐng)域中，不管是內(nèi)部用戶、產(chǎn)品、設(shè)計(jì)師、開發(fā)，還是外部產(chǎn)品、設(shè)計(jì)師等，總能聽到關(guān)于界面「屏效」方面的訴求或吐槽。

「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產(chǎn)出多少營業(yè)額(營業(yè)額/專柜所占總坪數(shù)）。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內(nèi)的信息可以帶來多少商業(yè)效益/效率提升。

為了探索在 B 端產(chǎn)品中用戶為何對「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設(shè)計(jì)探索與實(shí)踐?！钙列А箤ｎ}探索主要以「探索」與「實(shí)踐」相結(jié)合的方式展開，將實(shí)踐過程中反復(fù)驗(yàn)證有效的設(shè)計(jì)策略沉淀成設(shè)計(jì)手冊，同步將部分功能進(jìn)行工程化，確?？梢蚤_箱即用。

二、探索階段-為誰在何時何地設(shè)計(jì)

1. 用戶聲音｜不同的故事相似的訴求

面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求》《中后臺產(chǎn)品滿意度調(diào)研》問卷中認(rèn)為提高屏效能極大提升用戶體驗(yàn)的設(shè)計(jì)師占 58.14%；認(rèn)為提升屏效對體驗(yàn)有提升的終端用戶占 50.6%。

外部知乎上針對《Ant Design 4.0 設(shè)計(jì)價值觀》的 13 條反饋里，其中就有 2 點(diǎn)提到關(guān)鍵字「效率」。

通過了解不同用戶和產(chǎn)品類型發(fā)現(xiàn)，不同的用戶在工作場景的產(chǎn)品使用中有著相似的特征：

2. 案例收集｜發(fā)現(xiàn)問題，大膽假設(shè)

縱觀 B 端產(chǎn)品界面，發(fā)現(xiàn)普遍問題和收錄在解決屏效問題上實(shí)踐得比較好的案例，為了逐步突破問題，選擇以數(shù)據(jù)產(chǎn)品中覆蓋率極高的表格為設(shè)計(jì)切入點(diǎn)，通過線上跨產(chǎn)品多端地毯式的體驗(yàn)走查，發(fā)現(xiàn)表格三個層次的問題：

視覺、交互層在無需理解業(yè)務(wù)場景和用戶目標(biāo)的情況下，都較容易發(fā)現(xiàn)，屬基礎(chǔ)問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導(dǎo)致的「過度留白」。

綜上我們提出假設(shè)：為提高屏效，可從視覺、交互、信息三個層次解決。

視覺層為提高信息查閱速度，可以通過提高信息密度；交互層為提高操作速度，可以縮短當(dāng)前手勢到目標(biāo)之間的距離；信息層為提高信息被理解的速度，可以通過重組織等方式。

基于假設(shè)，我們進(jìn)行了進(jìn)一步的桌面研究，查閱論文等書籍，尋找設(shè)計(jì)理論的驗(yàn)證和指導(dǎo)。

3. 競品分析｜尋找實(shí)踐證據(jù)，謹(jǐn)慎驗(yàn)證

我們知道視覺上界面留白過多（過疏會增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號、字高和行高的關(guān)系，因?yàn)椴煌煮w的同字號實(shí)際像素高度會有差異。

因此選擇的是字高（即文字垂直高度的視覺大?。┒亲痔柣蜃中懈撸瑳Q定留白的兩個重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關(guān)系，探究在視覺層怎樣的留白率能保證甚至提升屏效。

以數(shù)據(jù)產(chǎn)品中的表格為例，通過直接和間接競對的方式，分別從數(shù)據(jù)的查閱（視覺）、分析（交互）維度進(jìn)行功能點(diǎn)和設(shè)計(jì)細(xì)節(jié)上的比對，來看看優(yōu)秀產(chǎn)品是如何解決屏效問題。

• 直接競對：內(nèi)部用戶口碑較好的產(chǎn)品。
• A、B外界競對：同領(lǐng)域的 Tableau、網(wǎng)易有數(shù)、金山、微軟表格。
• 間接競對：谷歌郵箱、AntD 等的緊湊主題的常規(guī)列表（一維表格）。

通過競品分析可以發(fā)現(xiàn)，數(shù)據(jù)分析領(lǐng)域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數(shù)據(jù)用戶的 Tableau、網(wǎng)易有數(shù)，而谷歌郵箱等工作臺常用的常規(guī)列表緊湊版本中，留白率和數(shù)據(jù)領(lǐng)域的電子表格不相上下。

緊湊版的使用場景也常常是面對數(shù)據(jù)量巨大的信息呈現(xiàn)，通過切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數(shù)據(jù)分析場景中巨大的數(shù)據(jù)量呈現(xiàn)。因此我們的產(chǎn)品在留白率的提升空間極大，而在實(shí)際案例實(shí)踐中，也已經(jīng)將表格行高優(yōu)化至 30px，克制的使用留白。

除此外，競品其他層次的設(shè)計(jì)也做了比對，總結(jié)來看整體設(shè)計(jì)做法：高密度、少屏數(shù)、少留白等。

文字陷阱：中英文字高不等于字號

舉個容易犯錯的競品參考是，谷歌在緊湊版主題下字號 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發(fā)現(xiàn)非常擁擠，缺乏呼吸感。

原因在于谷歌的 12px 是英文字體，實(shí)際字高只有 10px，而 AntD Table 的語境是中文字偏多，實(shí)際字高有 12px，所以留白的差異在于一個是 18px（28-10），一個是 16px（28-12），這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高，而非「字號」和表格行高，進(jìn)一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。

4. 論文查閱｜尋找理論證據(jù)，謹(jǐn)慎驗(yàn)證

研究表明，低密度認(rèn)知負(fù)荷低，但高密度任務(wù)完成率高，用戶更喜好。

參考資料：論文《基于眼動的網(wǎng)頁對稱性和復(fù)雜度對用戶認(rèn)知的影響的研究》。

對于信息，用戶需要需要閱讀（視覺），思考和理解（認(rèn)知），需要點(diǎn)擊按鈕、操作鼠標(biāo)和打字（行動），在人機(jī)工程學(xué)中，統(tǒng)稱為負(fù)荷。即認(rèn)知（記憶）負(fù)荷、視覺負(fù)荷、動作負(fù)荷，即分別對應(yīng)用戶體驗(yàn)設(shè)計(jì)的三個層級，信息/視覺/交互。而負(fù)荷所花費(fèi)資源從多到少依次為：認(rèn)知 > 視覺 > 行動。

認(rèn)知負(fù)荷，舉個例子，看了但不一定懂了。你是否有這么一種體驗(yàn)——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門 C4D 教學(xué)視頻，即使就短短十來分鐘（信息密度大，輸出效率高），但是卻要看上半天。

因?yàn)樗⒍桃曨l時，你的輸入效率遠(yuǎn)高于作者的輸出效率，而看一門 C4D 教學(xué)視頻時，你的輸入效率遠(yuǎn)低于作者的輸出效率。

可是，輸出效率是客觀的，輸入效率是主觀的。如果輸出效率很高，你可以通過提高自己的輸入效率（比如讓自己成為 C4D 專家）來跟上作者，從而變強(qiáng)；否則輸出效率很低（信息質(zhì)量低），你的輸入效率很高（很專業(yè)），信息于你而言都是無效的。

假設(shè)負(fù)荷總量不變的情況下，那么以上三類場景界面需要對用戶負(fù)擔(dān)分配大致如下：

官網(wǎng)品宣類需要低認(rèn)知成本，低視覺負(fù)擔(dān)，視覺要求高，用戶才會被吸引過來閱讀，甚至酷炫的交互更能增加互動體驗(yàn)而帶來的趣味感。比如蘋果官網(wǎng)，信息量極少、圖版率高帶來極具藝術(shù)的視覺體驗(yàn)、進(jìn)而吸引用戶愿意跟隨屏幕滾動漸進(jìn)式接受信息。

而 B 端應(yīng)用因?yàn)槭菍I(yè)使用，首先認(rèn)知方面隨著員工的專業(yè)度提高而降低，因此可以通過提高視覺負(fù)擔(dān)，來降低行動負(fù)擔(dān)，進(jìn)而減少操作用時，當(dāng)然最佳情況是三個維度能整體降低負(fù)擔(dān)，讓總負(fù)擔(dān)降低，就需要更多設(shè)計(jì)巧思了。

面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求調(diào)研》預(yù)設(shè)解決方案中，設(shè)計(jì)師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點(diǎn)擊跳轉(zhuǎn)。

三、實(shí)踐階段-如何設(shè)計(jì)

通過以上的探索，我們可以確定的是，B 端產(chǎn)品面向?qū)I(yè)人員的工作界面設(shè)計(jì)中，提高屏效可從視覺、交互、信息三個層次進(jìn)行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉(zhuǎn)，通過減少頁面跳轉(zhuǎn)、手勢與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊等以提高用戶專業(yè)能力。

基于以上的總結(jié)，對產(chǎn)品進(jìn)行優(yōu)化。下面以一個簡單案例進(jìn)行設(shè)計(jì)策略的解讀。一位運(yùn)營同學(xué)想對比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，尋找運(yùn)營機(jī)會點(diǎn)。

如下表格經(jīng)過高屏效策略優(yōu)化前后對比圖，優(yōu)化前相同維度下不同人群數(shù)量的對比需要視線來回跳動比對，而優(yōu)化后的表格內(nèi)容，更符合用戶看差異場景下分析目的數(shù)據(jù)查閱，視線鎖定相同維度，即可快速比對數(shù)值大小。

下面以視覺、交互、信息三個層次解剖設(shè)計(jì)過程背后的思考。

1. 視覺層｜高密度-克制的留白

眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉(zhuǎn)動區(qū) 30度，垂直最大眼動舒適轉(zhuǎn)動區(qū) 55度。可得出人眼最小識別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設(shè)計(jì)與研究》。

如圖，縮小表格行高的同時，目標(biāo)信息之間的眼動距離隨之縮短，在眼動舒適區(qū)內(nèi)看到更多信息，便于信息的高效獲取。

2. 交互層｜低跳轉(zhuǎn)-高頻信息前置

理論基礎(chǔ)：菲茨定律是用來預(yù)測從任意一點(diǎn)到目標(biāo)位置所需時間的數(shù)學(xué)模型，它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點(diǎn)的初始位置與目標(biāo)的相對距離、目標(biāo)的大小、移動的最短時間。三者之間關(guān)系公式為：T=a+blog2(D/W+1)，W為其中目標(biāo)的大小；D為到目標(biāo)的距離；T為移動到目標(biāo)所用最短時間。參考資料：菲茲定律。

表格單元格借助交互狀態(tài)，增加懸浮出現(xiàn)的信息組件，前置顯示目標(biāo)單元格明細(xì)信息，同時通過交互出現(xiàn)的指示器輔助行列信息的獲取，高頻操作考慮手勢位置放置，縮短與操作目標(biāo)的距離，以提高整體操作效率。

3. 信息層｜有效性-信息重組織

理論基礎(chǔ)：交互設(shè)計(jì)四大策略「組織、刪除、隱藏、轉(zhuǎn)移」。參考資料：《簡約至上》。

用戶為了對比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，但內(nèi)容的重組織方式讓兩數(shù)據(jù)行需要頻繁點(diǎn)擊滾動條來查看，根據(jù)用戶目標(biāo)，將關(guān)聯(lián)性大的數(shù)據(jù)放置相鄰列（即將要對比的人群放置列頭），即可快速查閱，減少眼跳距離。

四、結(jié)語

設(shè)計(jì)趨勢中常見的大字體大留白界面，但在 B 端場景中，面對緊張的工作節(jié)奏，時間和注意力變得尤為可貴，相對而言，基于復(fù)雜度守恒定律， B 端信息量大且高頻訪問的產(chǎn)品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉(zhuǎn)」詮釋的即是「空間換時間」，少一次點(diǎn)擊，少一次跳轉(zhuǎn)，少一份等待，就多一份時間和效率。

特別感謝小伙伴的指導(dǎo)和幫助：@完白 @梓義 @不過 @銘秋 @元堯

參考資料：

論文《基于眼動的網(wǎng)頁對稱性和復(fù)雜度對用戶認(rèn)知的影響的研究》

論文《基于眼動交互的用戶界面設(shè)計(jì)與研究》

《Ant Design 3.0 背后的故事》

https://sizecalc.com/ 可以計(jì)算通過視覺距離，物理大小和最終得到感知角度的網(wǎng)站

https://experience.sap.com/fiori-design-web/cozy-compact/

https://www.material.io/design/layout/applying-density.html#usage

作者：白弦，螞蟻集團(tuán)設(shè)計(jì)師

本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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