2021-7-29 ui設(shè)計分享達(dá)人
前言
表格作為組織整理數(shù)據(jù)的手段，可以有效的向用戶展示數(shù)據(jù)信息，是B端產(chǎn)品中出現(xiàn)最高頻的模塊之一。
下圖為典型的B端表格示例：
用戶主要通過表格瀏覽獲取信息、對數(shù)據(jù)進(jìn)行篩選、排序以及相關(guān)業(yè)務(wù)處理等更多復(fù)雜操作、對比數(shù)據(jù)的差異與變化（關(guān)聯(lián)和區(qū)別）。好的表格信息展示設(shè)計，應(yīng)當(dāng)是能夠輔助用戶高效便捷的實現(xiàn)以上場景中的訴求。
今天我們就來討論表格設(shè)計中一個重要的問題——【應(yīng)該如何考慮表格信息展示】。首先拋出結(jié)論，我們認(rèn)為良好呈現(xiàn)信息的表格應(yīng)當(dāng)做到疏密適度、高效掃視、精簡克制。
///
一、疏密適度
常見的表格信息包含文本、標(biāo)簽、狀態(tài)樣式、數(shù)值統(tǒng)計圖表、關(guān)鍵信息Icon等。表格單元格是信息填充的基本單元，行高和列寬的定義決定了表格信息的疏密程度，進(jìn)而決定了表格給用戶的直觀感受，因而下面分別從行高和列寬兩個方向來探討表格信息展示如何疏密適度。
1、定義合理的表格行高
a、行高模數(shù)設(shè)定
在具體設(shè)定表格行高時，由于表格中以文字信息為主，我認(rèn)為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。文字行高可以設(shè)定為字號的1.2~1.8倍，文字與分割線間距離可以設(shè)定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發(fā)同學(xué)寫代碼時的習(xí)慣（多行行高同理去設(shè)定）。
根據(jù)用戶場景的不同，來選擇模數(shù)倍數(shù)，需保證系統(tǒng)內(nèi)使用統(tǒng)一的模數(shù)。比如，針對用戶快速瀏覽獲取大量數(shù)據(jù)場景時，可以選擇1.2倍作為模數(shù)，列表更為緊湊，同樣掃視范圍內(nèi)，可獲取更多信息。
b、為小屏幕考慮一屏顯示的行數(shù)
表格行高決定屏幕內(nèi)能呈現(xiàn)的行數(shù)，即用戶在一屏內(nèi)能獲取信息的數(shù)量，主要影響用戶縱向?qū)Ρ葦?shù)據(jù)的效率。對于1920*1020（包含該分辨率）以上的大屏用戶，對于一屏顯示行數(shù)的感知不強(qiáng)，但對于1366×768、1280*720等這類小屏，顯示行數(shù)有限，用戶進(jìn)行縱向數(shù)據(jù)對比的效率就會有所降低。在設(shè)計前，應(yīng)當(dāng)充分了解目標(biāo)用戶的行為訴求，了解目標(biāo)用戶設(shè)備屏幕分辨率的占比分布情況，有針對性的設(shè)置行高。
c、用戶自定義行高的場景
B端產(chǎn)品的特點之一是通用化，覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現(xiàn)密度的訴求經(jīng)常是有所差異的。比如個人視力的原因，有些用戶喜歡表格行高值大一些，看起來舒適透氣，便于閱讀。而有些平臺用戶由于很熟悉線下excel表格模式，希望線上的表格也盡可能像excel那樣緊湊，以便他們在一屏內(nèi)看到更多的數(shù)據(jù)，進(jìn)行對比，提升工作效率。產(chǎn)品為了讓不同用戶都能獲得較好的體驗，可以考慮把表格疏密度的設(shè)置開放給用戶，建議不是完全開放給用戶去調(diào)整尺寸，而是給出一定階梯度的快速選項，例如舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿足用戶需求。
例如，Gmail提供默認(rèn)/標(biāo)準(zhǔn)/緊湊三種表格密度設(shè)置，如圖：
2、靈活擴(kuò)展的橫向空間
通過對表格固定位置與列寬的調(diào)整，擴(kuò)大表格數(shù)據(jù)空間，使信息不局促，空間更透氣，保證橫向掃視易讀性。
a、列寬極限值設(shè)定
設(shè)計師需要根據(jù)表格承載內(nèi)容定義表格的列寬，應(yīng)包含最大/最小/默認(rèn)列寬的定義以及使用規(guī)則。
我推薦的一個規(guī)則是：
規(guī)則1：當(dāng)相對列少【瀏覽器寬度-頁面其他模塊 > 全部列的默認(rèn)寬度和】，則各個列自動等比拉伸，撐滿屏幕；
規(guī)則2：當(dāng)相對列多【瀏覽器寬度-頁面其他模塊 < 全部列的默認(rèn)寬度和】，則出橫向滾動條，每列寬度為默認(rèn)寬。
另外需注意最小值設(shè)定時應(yīng)避免信息展示出現(xiàn)【對聯(lián)式表格】。對聯(lián)式表格最大的問題在于，一屏內(nèi)展示的行數(shù)有限，當(dāng)用戶縱向?qū)Ρ葦?shù)據(jù)時，需往復(fù)滾動多次，記憶壓力大；橫向掃視時，閱讀視線不能一直保持左右橫向預(yù)覽，而是不停上下左右切換，使用體驗不佳。
b、橫向『偷取』屏幕外空間、行高模數(shù)設(shè)定
當(dāng)壓縮列寬也無法在有限空間內(nèi)展示大量的數(shù)據(jù)指標(biāo)列時，我們可以借助橫向滾動來『偷取』屏幕外更多空間。橫向滾動需用戶拖動滾動條進(jìn)行瀏覽，有一定操作成本，所以要結(jié)合業(yè)務(wù)實際情況選用是否利用屏幕外橫向空間。
隨著行和列的增加，用戶的瞬時記憶會達(dá)到極限，超過“7±2原則”的范圍，用戶需要依靠輔助信息去閱讀表格內(nèi)的數(shù)據(jù)，防止遺忘某列數(shù)據(jù)的意義。因而當(dāng)表格數(shù)據(jù)列較多橫向滾動時，建議為用戶固定重要信息列，如標(biāo)題列、操作列。同時用戶瀏覽表格時是符合F型掃視原則的，建議固定列顯示在表格左側(cè)，方便用戶從左至右瀏覽數(shù)據(jù)、從上至下對比數(shù)據(jù)時能夠清晰定位當(dāng)前所瀏覽數(shù)據(jù)的主體是什么，同時可根據(jù)需要快速發(fā)起操作。
同理，用戶拖拽縱向滾動條來閱讀數(shù)據(jù)時，可固定表格的表頭，幫助用戶在閱讀過程中清晰知曉單元格數(shù)據(jù)的意義。
c、用戶自定義展示信息
針對需展示大量數(shù)據(jù)的情景，我們除了【偷取】屏幕外空間外，可以根據(jù)B端產(chǎn)品提供的數(shù)據(jù)表格是覆蓋全部用戶角色的全量數(shù)據(jù)的特點，讓不同用戶角色來自定義想要瀏覽的信息，從而提升表格的可讀性。下圖為百度信息流推廣平臺的自定義列功能，用戶可根據(jù)需要選擇展示的數(shù)據(jù)列，系統(tǒng)將在用戶完成選擇后，主動幫用戶保存自定義內(nèi)容，下次登錄后，表格依然按照用戶定義的數(shù)據(jù)來展示。
///
二、高效掃視
無論是在表格中要明確的定位數(shù)據(jù)，還是順序閱讀，高效掃視都是B端用戶一個很重要的訴求，我們在設(shè)計表格時可嘗試一些有效手段提升用戶瀏覽獲取信息的效率。
1、合理的對齊方式
數(shù)據(jù)信息本身包含多種格式，可遵守一個基本原則即文字左對齊，符合從左到右的閱讀習(xí)慣；數(shù)據(jù)信息右對齊，方便數(shù)據(jù)大小的直觀對比。
具體對齊方式可參考我們建議的方式：
文本字段：可點擊字段、普通文本類、數(shù)字、字母等，長短參差不齊，左對齊；
格式化字段：日期、時間、部分枚舉類等，字符數(shù)一致且較短的，左對齊。
數(shù)據(jù)字段：金額、數(shù)據(jù)、百分比。帶小數(shù)點等數(shù)據(jù)，方便對比為主，右對齊。
2、去除視覺雜音，強(qiáng)調(diào)對比關(guān)系
a、正確使用分割線，實現(xiàn)對表格行與列的強(qiáng)調(diào)
橫向分割線可強(qiáng)調(diào)行內(nèi)信息的連續(xù)性。垂直分割線在縮減元素之間的距離后也能區(qū)分不同元素，更好的強(qiáng)調(diào)縱向數(shù)據(jù)對比。但只要遵循良好的對齊方式，通常不展示縱向分割線，避免信息干擾。因而表格中通常僅使用橫向分割線和底色分割，提升表格閱讀效率。
b、斑馬線作用有限
斑馬線即隔行（列）變色。它能讓行（列）間界限更為明顯，但由于與分割線的作用類似，起到的作用有限，可針對不同場景酌情考慮是否使用。比如針對不同類型的數(shù)據(jù)（如總和、平均值）使用不同底色來區(qū)分，可以更突出強(qiáng)調(diào)該數(shù)據(jù)。要注意的是，隔行（列）換色的兩種顏色不能反差過大，否則看來太“跳躍”。
對同一類數(shù)據(jù)而言，分割線就已經(jīng)能夠明顯區(qū)隔，所以可不使用斑馬線，但需要給出單行的懸浮狀態(tài)，強(qiáng)化橫向?qū)б暎苊獬霈F(xiàn)列數(shù)過多引起數(shù)據(jù)錯行的問題。
3、突顯重要內(nèi)容的視覺重量
前面我們提到表格呈現(xiàn)的數(shù)據(jù)信息除文本外，還有其它一些可視化數(shù)據(jù)?？梢暬环矫嫣嵘肆斜硪曈X表現(xiàn)力，增加差異化，另一方面讓內(nèi)容更加突出，提升閱讀效率。例如：數(shù)據(jù)列中數(shù)據(jù)異常時，最好可以醒目的形式突顯，讓用戶一進(jìn)入頁面就能快速注意到異常狀況。
///
三、精簡克制
體驗好的表格一定是克制的，克制應(yīng)表現(xiàn)在信息的適度隱藏以及內(nèi)容折行與截斷展示原則。
1、適度隱藏信息
a、隱藏低頻操作
當(dāng)表頭需要承載排序、表頭篩選、提示等功能時，不建議一股腦的將所有功能展示出來。用戶對表頭的訴求是定位數(shù)據(jù)指標(biāo)﹥執(zhí)行操作的，因此可根據(jù)具體業(yè)務(wù)定義展示哪些操作，將其它操作隱藏，有需求時用戶主動觸發(fā)再展示。比如，百度搜索推廣平臺的推廣管理頁面提供了全局篩選，所以表頭篩選對于用戶而言是相對低頻的操作，我們選擇隱藏表頭篩選的圖標(biāo)，當(dāng)用戶鼠標(biāo)HOVER表頭單元格時再展示。
對于表格行內(nèi)的操作我們也應(yīng)當(dāng)進(jìn)行優(yōu)先級排序，為用戶專門設(shè)置操作列展示高頻核心的操作，其它相對低頻的次要操作可隱藏在相關(guān)數(shù)據(jù)單元格中，用戶有訴求時hover對應(yīng)單元格即可快速發(fā)起操作。
b、隱藏輔助信息
表格中的有些數(shù)據(jù)指標(biāo)是綜合緯度的，當(dāng)用戶關(guān)注點定位于該指標(biāo)時，需要通過細(xì)分?jǐn)?shù)據(jù)來理解、分析。指標(biāo)的細(xì)分緯度信息雖能起到輔助用戶更好理解數(shù)據(jù)指標(biāo)的作用，但如果全部拿出來在表格列展示，會讓表格變得臃腫不易讀，此時可以考慮采取一定設(shè)計手段去隱藏這些信息，把觸發(fā)展示的自由度交給用戶，也更符合用戶逐級查看的場景。例如，百度搜索推廣平臺中關(guān)鍵詞列表中，質(zhì)量度指標(biāo)是由多條數(shù)據(jù)共同決定的，我們采用了將細(xì)分指標(biāo)聚合在氣泡卡片中，當(dāng)用戶HOVER質(zhì)量度得分?jǐn)?shù)據(jù)時展示出來。
再比如，有父子層級關(guān)系的數(shù)據(jù)，可以通過父子折疊表格將子信息默認(rèn)隱藏，用戶根據(jù)需要，去展開查看詳細(xì)的子信息。
2、設(shè)定折行與截斷規(guī)則
B 端業(yè)務(wù)的數(shù)據(jù)信息復(fù)雜多樣，信息內(nèi)容的長度高度是多樣不可控的，很多內(nèi)容會超出我們限定的最大列寬，最大列高，我們應(yīng)當(dāng)給出折行與截斷原則去約束內(nèi)容的展示，而非總是為具體情況而做特殊設(shè)計，破壞體驗的一致性。
截斷折行原則設(shè)定時要細(xì)分，不能簡單粗暴的一刀切，比如一行截斷這種，如日期、時間等固定格式內(nèi)容，拖動列寬后文字應(yīng)折行而非截斷展示，避免影響用戶誤讀。再比如很多業(yè)務(wù)實體標(biāo)題字段是格式化的，即標(biāo)題前面部分可能都是一致的，這時候如果簡單的截斷，用戶就需要逐一Hover才能找到定位到要找的數(shù)據(jù)。因而折行與截斷原則，我們建議是給出三種：單行截斷、雙行截斷以及自適應(yīng)截斷，根據(jù)具體業(yè)務(wù)情景選擇。
文章來源：站酷 作者:百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.teruid.com