2021-12-17 ui設(shè)計分享達(dá)人
在 B 端設(shè)計領(lǐng)域中，不管是內(nèi)部用戶、產(chǎn)品、設(shè)計師、開發(fā)，還是外部產(chǎn)品、設(shè)計師等，總能聽到關(guān)于界面「屏效」方面的訴求或吐槽。
「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產(chǎn)出多少營業(yè)額(營業(yè)額/專柜所占總坪數(shù)）。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內(nèi)的信息可以帶來多少商業(yè)效益/效率提升。
為了探索在 B 端產(chǎn)品中用戶為何對「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設(shè)計探索與實(shí)踐?！钙列А箤ｎ}探索主要以「探索」與「實(shí)踐」相結(jié)合的方式展開，將實(shí)踐過程中反復(fù)驗(yàn)證有效的設(shè)計策略沉淀成設(shè)計手冊，同步將部分功能進(jìn)行工程化，確保可以開箱即用。
用戶聲音｜不同的故事相似的訴求
面向內(nèi)部設(shè)計師和終端用戶投放的《高屏效訴求》《中后臺產(chǎn)品滿意度調(diào)研》問卷中認(rèn)為提高屏效能極大提升用戶體驗(yàn)的設(shè)計師占 58.14%；認(rèn)為提升屏效對體驗(yàn)有提升的終端用戶占 50.6%。
外部知乎上針對《Ant Design 4.0 設(shè)計價值觀》的 13 條反饋里，其中就有 2 點(diǎn)提到關(guān)鍵字「效率」。
通過了解不同用戶和產(chǎn)品類型發(fā)現(xiàn)，不同的用戶在工作場景的產(chǎn)品使用中有著相似的特征：
案例收集｜發(fā)現(xiàn)問題，大膽假設(shè)
縱觀 B 端產(chǎn)品界面，發(fā)現(xiàn)普遍問題和收錄在解決屏效問題上實(shí)踐得比較好的案例，為了逐步突破問題，選擇以數(shù)據(jù)產(chǎn)品中覆蓋率極高的表格為設(shè)計切入點(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è)計理論的驗(yàn)證和指導(dǎo)。
競品分析｜尋找實(shí)踐證據(jù)，謹(jǐn)慎驗(yàn)證
我們知道視覺上界面留白過多（過疏會增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號、字高和行高的關(guān)系，因?yàn)椴煌煮w的同字號實(shí)際像素高度會有差異，因此選擇的是字高（即文字垂直高度的視覺大?。┒亲痔柣蜃中懈?，決定留白的兩個重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關(guān)系，探究在視覺層怎樣的留白率能保證甚至提升屏效。
以數(shù)據(jù)產(chǎn)品中的表格為例，通過直接和間接競對的方式，分別從數(shù)據(jù)的查閱（視覺）、分析（交互）維度進(jìn)行功能點(diǎn)和設(shè)計細(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è)計也做了比對，總結(jié)來看整體設(shè)計做法：高密度、少屏數(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)一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。
論文查閱｜尋找理論證據(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è)計的三個層級，信息/視覺/交互。而負(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è)計巧思了。
面向內(nèi)部設(shè)計師和終端用戶投放的《高屏效訴求調(diào)研》預(yù)設(shè)解決方案中，設(shè)計師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點(diǎn)擊跳轉(zhuǎn)。
通過以上的探索，我們可以確定的是，B 端產(chǎn)品面向?qū)I(yè)人員的工作界面設(shè)計中，提高屏效可從視覺、交互、信息三個層次進(jìn)行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉(zhuǎn)，通過減少頁面跳轉(zhuǎn)、手勢與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊等以提高用戶專業(yè)能力。
基于以上的總結(jié)，對產(chǎn)品進(jìn)行優(yōu)化。下面以一個簡單案例進(jìn)行設(shè)計策略的解讀。一位運(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è)計過程背后的思考。
視覺層｜高密度-克制的留白
眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉(zhuǎn)動區(qū) 30度，垂直最大眼動舒適轉(zhuǎn)動區(qū) 55度?？傻贸鋈搜圩钚∽R別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設(shè)計與研究》
如圖，縮小表格行高的同時，目標(biāo)信息之間的眼動距離隨之縮短，在眼動舒適區(qū)內(nèi)看到更多信息，便于信息的高效獲取。
理論基礎(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)的距離，以提高整體操作效率。
理論基礎(chǔ)：交互設(shè)計四大策略「組織、刪除、隱藏、轉(zhuǎn)移」參考資料：《簡約至上》
用戶為了對比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，但內(nèi)容的重組織方式讓兩數(shù)據(jù)行需要頻繁點(diǎn)擊滾動條來查看，根據(jù)用戶目標(biāo)，將關(guān)聯(lián)性大的數(shù)據(jù)放置相鄰列（即將要對比的人群放置列頭），即可快速查閱，減少眼跳距離。
設(shè)計趨勢中常見的大字體大留白界面，但在 B 端場景中，面對緊張的工作節(jié)奏，時間和注意力變得尤為可貴，相對而言，基于復(fù)雜度守恒定律， B 端信息量大且高頻訪問的產(chǎn)品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉(zhuǎn)」詮釋的即是「空間換時間」，少一次點(diǎn)擊，少一次跳轉(zhuǎn)，少一份等待，就多一份時間和效率。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.bouu.cn