2022-3-24 ui設(shè)計(jì)分享達(dá)人
在 B 端設(shè)計(jì)領(lǐng)域中，不管是內(nèi)部用戶(hù)、產(chǎn)品、設(shè)計(jì)師、開(kāi)發(fā)，還是外部產(chǎn)品、設(shè)計(jì)師等，總能聽(tīng)到關(guān)于界面「屏效」方面的訴求或吐槽。
「屏效」狹義理解是「界面過(guò)度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產(chǎn)出多少營(yíng)業(yè)額(營(yíng)業(yè)額/專(zhuān)柜所占總坪數(shù)）。而「屏效」對(duì)于界面而言可以指屏幕單位時(shí)間、單位面積內(nèi)的信息可以帶來(lái)多少商業(yè)效益/效率提升。
為了探索在 B 端產(chǎn)品中用戶(hù)為何對(duì)「界面過(guò)度留白」或「屏效」問(wèn)題如此敏感，于是我們展開(kāi)了「屏效」專(zhuān)題的設(shè)計(jì)探索與實(shí)踐?！钙列А箤?zhuān)題探索主要以「探索」與「實(shí)踐」相結(jié)合的方式展開(kāi)，將實(shí)踐過(guò)程中反復(fù)驗(yàn)證有效的設(shè)計(jì)策略沉淀成設(shè)計(jì)手冊(cè)，同步將部分功能進(jìn)行工程化，確?？梢蚤_(kāi)箱即用。
用戶(hù)聲音｜不同的故事相似的訴求
面向內(nèi)部設(shè)計(jì)師和終端用戶(hù)投放的《高屏效訴求》《中后臺(tái)產(chǎn)品滿(mǎn)意度調(diào)研》問(wèn)卷中認(rèn)為提高屏效能極大提升用戶(hù)體驗(yàn)的設(shè)計(jì)師占 58.14%；認(rèn)為提升屏效對(duì)體驗(yàn)有提升的終端用戶(hù)占 50.6%。
外部知乎上針對(duì)《Ant Design 4.0 設(shè)計(jì)價(jià)值觀》的 13 條反饋里，其中就有 2 點(diǎn)提到關(guān)鍵字「效率」。
通過(guò)了解不同用戶(hù)和產(chǎn)品類(lèi)型發(fā)現(xiàn)，不同的用戶(hù)在工作場(chǎng)景的產(chǎn)品使用中有著相似的特征：
案例收集｜發(fā)現(xiàn)問(wèn)題，大膽假設(shè)
縱觀 B 端產(chǎn)品界面，發(fā)現(xiàn)普遍問(wèn)題和收錄在解決屏效問(wèn)題上實(shí)踐得比較好的案例，為了逐步突破問(wèn)題，選擇以數(shù)據(jù)產(chǎn)品中覆蓋率極高的表格為設(shè)計(jì)切入點(diǎn)，通過(guò)線上跨產(chǎn)品多端地毯式的體驗(yàn)走查，發(fā)現(xiàn)表格三個(gè)層次的問(wèn)題：
視覺(jué)、交互層在無(wú)需理解業(yè)務(wù)場(chǎng)景和用戶(hù)目標(biāo)的情況下，都較容易發(fā)現(xiàn)，屬基礎(chǔ)問(wèn)題，但很多「過(guò)度留白」的屏效問(wèn)題往往是信息被組織方式的差異導(dǎo)致的「過(guò)度留白」。
綜上我們提出假設(shè)：為提高屏效，可從視覺(jué)、交互、信息三個(gè)層次解決
視覺(jué)層為提高信息查閱速度，可以通過(guò)提高信息密度；交互層為提高操作速度，可以縮短當(dāng)前手勢(shì)到目標(biāo)之間的距離；信息層為提高信息被理解的速度，可以通過(guò)重組織等方式。
基于假設(shè)，我們進(jìn)行了進(jìn)一步的桌面研究，查閱論文等書(shū)籍，尋找設(shè)計(jì)理論的驗(yàn)證和指導(dǎo)。
競(jìng)品分析｜尋找實(shí)踐證據(jù)，謹(jǐn)慎驗(yàn)證
我們知道視覺(jué)上界面留白過(guò)多（過(guò)疏會(huì)增加滾屏成本，過(guò)密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號(hào)、字高和行高的關(guān)系，因?yàn)椴煌煮w的同字號(hào)實(shí)際像素高度會(huì)有差異，因此選擇的是字高（即文字垂直高度的視覺(jué)大?。┒亲痔?hào)或字行高，決定留白的兩個(gè)重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關(guān)系，探究在視覺(jué)層怎樣的留白率能保證甚至提升屏效。
以數(shù)據(jù)產(chǎn)品中的表格為例，通過(guò)直接和間接競(jìng)對(duì)的方式，分別從數(shù)據(jù)的查閱（視覺(jué)）、分析（交互）維度進(jìn)行功能點(diǎn)和設(shè)計(jì)細(xì)節(jié)上的比對(duì)，來(lái)看看優(yōu)秀產(chǎn)品是如何解決屏效問(wèn)題。
直接競(jìng)對(duì)：內(nèi)部用戶(hù)口碑較好的產(chǎn)品 A、B外界競(jìng)對(duì)：同領(lǐng)域的 Tableau、網(wǎng)易有數(shù)、金山、微軟表格；間接競(jìng)對(duì)：谷歌郵箱、AntD 等的緊湊主題的常規(guī)列表（一維表格）
通過(guò)競(jìng)品分析可以發(fā)現(xiàn)，數(shù)據(jù)分析領(lǐng)域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類(lèi)面向數(shù)據(jù)用戶(hù)的 Tableau、網(wǎng)易有數(shù)，而谷歌郵箱等工作臺(tái)常用的常規(guī)列表緊湊版本中，留白率和數(shù)據(jù)領(lǐng)域的電子表格不相上下。
緊湊版的使用場(chǎng)景也常常是面對(duì)數(shù)據(jù)量巨大的信息呈現(xiàn)，通過(guò)切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數(shù)據(jù)分析場(chǎng)景中巨大的數(shù)據(jù)量呈現(xiàn)。因此我們的產(chǎn)品在留白率的提升空間極大，而在實(shí)際案例實(shí)踐中，也已經(jīng)將表格行高優(yōu)化至 30px，克制的使用留白。
除此外，競(jìng)品其他層次的設(shè)計(jì)也做了比對(duì)，總結(jié)來(lái)看整體設(shè)計(jì)做法：高密度、少屏數(shù)、少留白等。
文字陷阱：中英文字高不等于字號(hào)
舉個(gè)容易犯錯(cuò)的競(jìng)品參考是，谷歌在緊湊版主題下字號(hào) 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會(huì)發(fā)現(xiàn)非常擁擠，缺乏呼吸感。
原因在于谷歌的 12px 是英文字體，實(shí)際字高只有 10px，而 AntD Table 的語(yǔ)境是中文字偏多，實(shí)際字高有 12px，所以留白的差異在于一個(gè)是 18px（28-10），一個(gè)是 16px（28-12），這也是為什么決定決定留白的兩個(gè)重要因子是「字高」和表格行高，而非「字號(hào)」和表格行高，進(jìn)一步推演，決定界面留白的是「元素視覺(jué)高度」和「元素間距」。
論文查閱｜尋找理論證據(jù)，謹(jǐn)慎驗(yàn)證
研究表明，低密度認(rèn)知負(fù)荷低，但高密度任務(wù)完成率高，用戶(hù)更喜好
參考資料：論文《基于眼動(dòng)的網(wǎng)頁(yè)對(duì)稱(chēng)性和復(fù)雜度對(duì)用戶(hù)認(rèn)知的影響的研究》
對(duì)于信息，用戶(hù)需要需要閱讀（視覺(jué)），思考和理解（認(rèn)知），需要點(diǎn)擊按鈕、操作鼠標(biāo)和打字（行動(dòng)），在人機(jī)工程學(xué)中，統(tǒng)稱(chēng)為負(fù)荷。即認(rèn)知（記憶）負(fù)荷、視覺(jué)負(fù)荷、動(dòng)作負(fù)荷，即分別對(duì)應(yīng)用戶(hù)體驗(yàn)設(shè)計(jì)的三個(gè)層級(jí)，信息/視覺(jué)/交互。而負(fù)荷所花費(fèi)資源從多到少依次為：認(rèn)知 > 視覺(jué) > 行動(dòng)。
認(rèn)知負(fù)荷，舉個(gè)例子，看了但不一定懂了。你是否有這么一種體驗(yàn)——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門(mén) C4D 教學(xué)視頻，即使就短短十來(lái)分鐘（信息密度大，輸出效率高），但是卻要看上半天。因?yàn)樗⒍桃曨l時(shí)，你的輸入效率遠(yuǎn)高于作者的輸出效率，而看一門(mén) C4D 教學(xué)視頻時(shí)，你的輸入效率遠(yuǎn)低于作者的輸出效率?？墒牵敵鲂适强陀^的，輸入效率是主觀的。如果輸出效率很高，你可以通過(guò)提高自己的輸入效率（比如讓自己成為 C4D 專(zhuān)家）來(lái)跟上作者，從而變強(qiáng)；否則輸出效率很低（信息質(zhì)量低），你的輸入效率很高（很專(zhuān)業(yè)），信息于你而言都是無(wú)效的。
假設(shè)負(fù)荷總量不變的情況下，那么以上三類(lèi)場(chǎng)景界面需要對(duì)用戶(hù)負(fù)擔(dān)分配大致如下，官網(wǎng)品宣類(lèi)需要低認(rèn)知成本，低視覺(jué)負(fù)擔(dān)，視覺(jué)要求高，用戶(hù)才會(huì)被吸引過(guò)來(lái)閱讀，甚至酷炫的交互更能增加互動(dòng)體驗(yàn)而帶來(lái)的趣味感，比如蘋(píng)果官網(wǎng)，信息量極少、圖版率高帶來(lái)極具藝術(shù)的視覺(jué)體驗(yàn)、進(jìn)而吸引用戶(hù)愿意跟隨屏幕滾動(dòng)漸進(jìn)式接受信息，而 B 端應(yīng)用因?yàn)槭菍?zhuān)業(yè)使用，首先認(rèn)知方面隨著員工的專(zhuān)業(yè)度提高而降低，因此可以通過(guò)提高視覺(jué)負(fù)擔(dān)，來(lái)降低行動(dòng)負(fù)擔(dān)，進(jìn)而減少操作用時(shí)，當(dāng)然最佳情況是三個(gè)維度能整體降低負(fù)擔(dān)，讓總負(fù)擔(dān)降低，就需要更多設(shè)計(jì)巧思了。
面向內(nèi)部設(shè)計(jì)師和終端用戶(hù)投放的《高屏效訴求調(diào)研》預(yù)設(shè)解決方案中，設(shè)計(jì)師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺(jué)層】提高布局緊湊度、【交互層】減少點(diǎn)擊跳轉(zhuǎn)。
通過(guò)以上的探索，我們可以確定的是，B 端產(chǎn)品面向?qū)I(yè)人員的工作界面設(shè)計(jì)中，提高屏效可從視覺(jué)、交互、信息三個(gè)層次進(jìn)行，視覺(jué)層-高密度，即提高屏幕信息密度；交互層-低跳轉(zhuǎn)，通過(guò)減少頁(yè)面跳轉(zhuǎn)、手勢(shì)與常用操作的距離等；信息層-有效性，通過(guò)重組織或輔助信息幫助用戶(hù)理解，甚至提供幫助手冊(cè)等以提高用戶(hù)專(zhuān)業(yè)能力。
基于以上的總結(jié)，對(duì)產(chǎn)品進(jìn)行優(yōu)化。下面以一個(gè)簡(jiǎn)單案例進(jìn)行設(shè)計(jì)策略的解讀。一位運(yùn)營(yíng)同學(xué)想對(duì)比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，尋找運(yùn)營(yíng)機(jī)會(huì)點(diǎn)。
如下表格經(jīng)過(guò)高屏效策略?xún)?yōu)化前后對(duì)比圖，優(yōu)化前相同維度下不同人群數(shù)量的對(duì)比需要視線來(lái)回跳動(dòng)比對(duì)，而優(yōu)化后的表格內(nèi)容，更符合用戶(hù)看差異場(chǎng)景下分析目的數(shù)據(jù)查閱，視線鎖定相同維度，即可快速比對(duì)數(shù)值大小。
下面以視覺(jué)、交互、信息三個(gè)層次解剖設(shè)計(jì)過(guò)程背后的思考。
視覺(jué)層｜高密度-克制的留白
眼動(dòng)理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動(dòng)舒適轉(zhuǎn)動(dòng)區(qū) 30度，垂直最大眼動(dòng)舒適轉(zhuǎn)動(dòng)區(qū) 55度。可得出人眼最小識(shí)別范圍 12px，水平視野舒適眼動(dòng)寬 1200px，垂直視野舒適眼動(dòng)高 2200px。參考資料：論文《基于眼動(dòng)交互的用戶(hù)界面設(shè)計(jì)與研究》
如圖，縮小表格行高的同時(shí)，目標(biāo)信息之間的眼動(dòng)距離隨之縮短，在眼動(dòng)舒適區(qū)內(nèi)看到更多信息，便于信息的高效獲取。
理論基礎(chǔ)：菲茨定律是用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)位置所需時(shí)間的數(shù)學(xué)模型，它由保羅·菲茨在1954年首先提出。這個(gè)模型考慮了用戶(hù)定位點(diǎn)的初始位置與目標(biāo)的相對(duì)距離、目標(biāo)的大小、移動(dòng)的最短時(shí)間。三者之間關(guān)系公式為：T=a+blog2(D/W+1)，W為其中目標(biāo)的大小；D為到目標(biāo)的距離；T為移動(dòng)到目標(biāo)所用最短時(shí)間。參考資料：菲茲定律
表格單元格借助交互狀態(tài)，增加懸浮出現(xiàn)的信息組件，前置顯示目標(biāo)單元格明細(xì)信息，同時(shí)通過(guò)交互出現(xiàn)的指示器輔助行列信息的獲取，高頻操作考慮手勢(shì)位置放置，縮短與操作目標(biāo)的距離，以提高整體操作效率。
理論基礎(chǔ)：交互設(shè)計(jì)四大策略「組織、刪除、隱藏、轉(zhuǎn)移」參考資料：《簡(jiǎn)約至上》
用戶(hù)為了對(duì)比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，但內(nèi)容的重組織方式讓兩數(shù)據(jù)行需要頻繁點(diǎn)擊滾動(dòng)條來(lái)查看，根據(jù)用戶(hù)目標(biāo)，將關(guān)聯(lián)性大的數(shù)據(jù)放置相鄰列（即將要對(duì)比的人群放置列頭），即可快速查閱，減少眼跳距離。
設(shè)計(jì)趨勢(shì)中常見(jiàn)的大字體大留白界面，但在 B 端場(chǎng)景中，面對(duì)緊張的工作節(jié)奏，時(shí)間和注意力變得尤為可貴，相對(duì)而言，基于復(fù)雜度守恒定律， B 端信息量大且高頻訪問(wèn)的產(chǎn)品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉(zhuǎn)」詮釋的即是「空間換時(shí)間」，少一次點(diǎn)擊，少一次跳轉(zhuǎn)，少一份等待，就多一份時(shí)間和效率。
文章來(lái)源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com