表格作為組織整理數(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è)計(jì)，應(yīng)當(dāng)是能夠輔助用戶高效便捷的實(shí)現(xiàn)以上場景中的訴求。

今天我們就來討論表格設(shè)計(jì)中一個(gè)重要的問題——【應(yīng)該如何考慮表格信息展示】。首先拋出結(jié)論，我們認(rèn)為良好呈現(xiàn)信息的表格應(yīng)當(dāng)做到疏密適度、高效掃視、精簡克制。 

 1

一、疏密適度

常見的表格信息包含文本、標(biāo)簽、狀態(tài)樣式、數(shù)值統(tǒng)計(jì)圖表、關(guān)鍵信息Icon等。表格單元格是信息填充的基本單元，行高和列寬的定義決定了表格信息的疏密程度，進(jìn)而決定了表格給用戶的直觀感受，因而下面分別從行高和列寬兩個(gè)方向來探討表格信息展示如何疏密適度。

1、定義合理的表格行高

a、行高模數(shù)設(shè)定

在具體設(shè)定表格行高時(shí)，由于表格中以文字信息為主，我認(rèn)為可以參考文字排版的常用做法，將整個(gè)表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。文字行高可以設(shè)定為字號的1.2~1.8倍，文字與分割線間距離可以設(shè)定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發(fā)同學(xué)寫代碼時(shí)的習(xí)慣（多行行高同理去設(shè)定）。

根據(jù)用戶場景的不同，來選擇模數(shù)倍數(shù)，需保證系統(tǒng)內(nèi)使用統(tǒng)一的模數(shù)。比如，針對用戶快速瀏覽獲取大量數(shù)據(jù)場景時(shí)，可以選擇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ù)對比的效率就會(huì)有所降低。在設(shè)計(jì)前，應(yīng)當(dāng)充分了解目標(biāo)用戶的行為訴求，了解目標(biāo)用戶設(shè)備屏幕分辨率的占比分布情況，有針對性的設(shè)置行高。

c、用戶自定義行高的場景

B端產(chǎn)品的特點(diǎn)之一是通用化，覆蓋用戶角色多樣。然而用戶個(gè)體對于表格信息呈現(xiàn)密度的訴求經(jīng)常是有所差異的。比如個(gè)人視力的原因，有些用戶喜歡表格行高值大一些，看起來舒適透氣，便于閱讀。而有些平臺用戶由于很熟悉線下excel表格模式，希望線上的表格也盡可能像excel那樣緊湊，以便他們在一屏內(nèi)看到更多的數(shù)據(jù)，進(jìn)行對比，提升工作效率。產(chǎn)品為了讓不同用戶都能獲得較好的體驗(yàn)，可以考慮把表格疏密度的設(shè)置開放給用戶，建議不是完全開放給用戶去調(diào)整尺寸，而是給出一定階梯度的快速選項(xiàng)，例如舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿足用戶需求。

例如，Gmail提供默認(rèn)/標(biāo)準(zhǔn)/緊湊三種表格密度設(shè)置，如圖：

2、靈活擴(kuò)展的橫向空間

通過對表格固定位置與列寬的調(diào)整，擴(kuò)大表格數(shù)據(jù)空間，使信息不局促，空間更透氣，保證橫向掃視易讀性。

a、列寬極限值設(shè)定

設(shè)計(jì)師需要根據(jù)表格承載內(nèi)容定義表格的列寬，應(yīng)包含最大/最小/默認(rèn)列寬的定義以及使用規(guī)則。

我推薦的一個(gè)規(guī)則是：

規(guī)則1：當(dāng)相對列少【瀏覽器寬度-頁面其他模塊 > 全部列的默認(rèn)寬度和】，則各個(gè)列自動(dòng)等比拉伸，撐滿屏幕；

規(guī)則2：當(dāng)相對列多【瀏覽器寬度-頁面其他模塊 < 全部列的默認(rèn)寬度和】，則出橫向滾動(dòng)條，每列寬度為默認(rèn)寬。

另外需注意最小值設(shè)定時(shí)應(yīng)避免信息展示出現(xiàn)【對聯(lián)式表格】。對聯(lián)式表格最大的問題在于，一屏內(nèi)展示的行數(shù)有限，當(dāng)用戶縱向?qū)Ρ葦?shù)據(jù)時(shí)，需往復(fù)滾動(dòng)多次，記憶壓力大；橫向掃視時(shí)，閱讀視線不能一直保持左右橫向預(yù)覽，而是不停上下左右切換，使用體驗(yàn)不佳。

b、橫向『偷取』屏幕外空間、行高模數(shù)設(shè)定

當(dāng)壓縮列寬也無法在有限空間內(nèi)展示大量的數(shù)據(jù)指標(biāo)列時(shí)，我們可以借助橫向滾動(dòng)來『偷取』屏幕外更多空間。橫向滾動(dòng)需用戶拖動(dòng)滾動(dòng)條進(jìn)行瀏覽，有一定操作成本，所以要結(jié)合業(yè)務(wù)實(shí)際情況選用是否利用屏幕外橫向空間。

隨著行和列的增加，用戶的瞬時(shí)記憶會(huì)達(dá)到極限，超過“7±2原則”的范圍，用戶需要依靠輔助信息去閱讀表格內(nèi)的數(shù)據(jù)，防止遺忘某列數(shù)據(jù)的意義。因而當(dāng)表格數(shù)據(jù)列較多橫向滾動(dòng)時(shí)，建議為用戶固定重要信息列，如標(biāo)題列、操作列。同時(shí)用戶瀏覽表格時(shí)是符合F型掃視原則的，建議固定列顯示在表格左側(cè)，方便用戶從左至右瀏覽數(shù)據(jù)、從上至下對比數(shù)據(jù)時(shí)能夠清晰定位當(dāng)前所瀏覽數(shù)據(jù)的主體是什么，同時(shí)可根據(jù)需要快速發(fā)起操作。

同理，用戶拖拽縱向滾動(dòng)條來閱讀數(shù)據(jù)時(shí)，可固定表格的表頭，幫助用戶在閱讀過程中清晰知曉單元格數(shù)據(jù)的意義。

c、用戶自定義展示信息

針對需展示大量數(shù)據(jù)的情景，我們除了【偷取】屏幕外空間外，可以根據(jù)B端產(chǎn)品提供的數(shù)據(jù)表格是覆蓋全部用戶角色的全量數(shù)據(jù)的特點(diǎn)，讓不同用戶角色來自定義想要瀏覽的信息，從而提升表格的可讀性。下圖為百度信息流推廣平臺的自定義列功能，用戶可根據(jù)需要選擇展示的數(shù)據(jù)列，系統(tǒng)將在用戶完成選擇后，主動(dòng)幫用戶保存自定義內(nèi)容，下次登錄后，表格依然按照用戶定義的數(shù)據(jù)來展示。

1 

二、高效掃視

無論是在表格中要明確的定位數(shù)據(jù)，還是順序閱讀，高效掃視都是B端用戶一個(gè)很重要的訴求，我們在設(shè)計(jì)表格時(shí)可嘗試一些有效手段提升用戶瀏覽獲取信息的效率。 

1

1、合理的對齊方式

數(shù)據(jù)信息本身包含多種格式，可遵守一個(gè)基本原則即文字左對齊，符合從左到右的閱讀習(xí)慣；數(shù)據(jù)信息右對齊，方便數(shù)據(jù)大小的直觀對比。

具體對齊方式可參考我們建議的方式：

文本字段：可點(diǎn)擊字段、普通文本類、數(shù)字、字母等，長短參差不齊，左對齊；

格式化字段：日期、時(shí)間、部分枚舉類等，字符數(shù)一致且較短的，左對齊。

數(shù)據(jù)字段：金額、數(shù)據(jù)、百分比。帶小數(shù)點(diǎn)等數(shù)據(jù)，方便對比為主，右對齊。

2、去除視覺雜音，強(qiáng)調(diào)對比關(guān)系

a、正確使用分割線，實(shí)現(xiàn)對表格行與列的強(qiáng)調(diào)

橫向分割線可強(qiáng)調(diào)行內(nèi)信息的連續(xù)性。垂直分割線在縮減元素之間的距離后也能區(qū)分不同元素，更好的強(qiáng)調(diào)縱向數(shù)據(jù)對比。但只要遵循良好的對齊方式，通常不展示縱向分割線，避免信息干擾。因而表格中通常僅使用橫向分割線和底色分割，提升表格閱讀效率。 

1

b、斑馬線作用有限

斑馬線即隔行（列）變色。它能讓行（列）間界限更為明顯，但由于與分割線的作用類似，起到的作用有限，可針對不同場景酌情考慮是否使用。比如針對不同類型的數(shù)據(jù)（如總和、平均值）使用不同底色來區(qū)分，可以更突出強(qiáng)調(diào)該數(shù)據(jù)。要注意的是，隔行（列）換色的兩種顏色不能反差過大，否則看來太“跳躍”。

對同一類數(shù)據(jù)而言，分割線就已經(jīng)能夠明顯區(qū)隔，所以可不使用斑馬線，但需要給出單行的懸浮狀態(tài)，強(qiáng)化橫向?qū)б?，避免出現(xiàn)列數(shù)過多引起數(shù)據(jù)錯(cuò)行的問題。

3、突顯重要內(nèi)容的視覺重量

前面我們提到表格呈現(xiàn)的數(shù)據(jù)信息除文本外，還有其它一些可視化數(shù)據(jù)。可視化一方面提升了列表視覺表現(xiàn)力，增加差異化，另一方面讓內(nèi)容更加突出，提升閱讀效率。例如：數(shù)據(jù)列中數(shù)據(jù)異常時(shí)，最好可以醒目的形式突顯，讓用戶一進(jìn)入頁面就能快速注意到異常狀況。

 1

三、精簡克制

體驗(yàn)好的表格一定是克制的，克制應(yīng)表現(xiàn)在信息的適度隱藏以及內(nèi)容折行與截?cái)嗾故驹瓌t。

1、適度隱藏信息

a、隱藏低頻操作

當(dāng)表頭需要承載排序、表頭篩選、提示等功能時(shí)，不建議一股腦的將所有功能展示出來。用戶對表頭的訴求是定位數(shù)據(jù)指標(biāo)﹥執(zhí)行操作的，因此可根據(jù)具體業(yè)務(wù)定義展示哪些操作，將其它操作隱藏，有需求時(shí)用戶主動(dòng)觸發(fā)再展示。比如，百度搜索推廣平臺的推廣管理頁面提供了全局篩選，所以表頭篩選對于用戶而言是相對低頻的操作，我們選擇隱藏表頭篩選的圖標(biāo)，當(dāng)用戶鼠標(biāo)HOVER表頭單元格時(shí)再展示。

對于表格行內(nèi)的操作我們也應(yīng)當(dāng)進(jìn)行優(yōu)先級排序，為用戶專門設(shè)置操作列展示高頻核心的操作，其它相對低頻的次要操作可隱藏在相關(guān)數(shù)據(jù)單元格中，用戶有訴求時(shí)hover對應(yīng)單元格即可快速發(fā)起操作。

b、隱藏輔助信息

表格中的有些數(shù)據(jù)指標(biāo)是綜合緯度的，當(dāng)用戶關(guān)注點(diǎn)定位于該指標(biāo)時(shí)，需要通過細(xì)分?jǐn)?shù)據(jù)來理解、分析。指標(biāo)的細(xì)分緯度信息雖能起到輔助用戶更好理解數(shù)據(jù)指標(biāo)的作用，但如果全部拿出來在表格列展示，會(huì)讓表格變得臃腫不易讀，此時(shí)可以考慮采取一定設(shè)計(jì)手段去隱藏這些信息，把觸發(fā)展示的自由度交給用戶，也更符合用戶逐級查看的場景。例如，百度搜索推廣平臺中關(guān)鍵詞列表中，質(zhì)量度指標(biāo)是由多條數(shù)據(jù)共同決定的，我們采用了將細(xì)分指標(biāo)聚合在氣泡卡片中，當(dāng)用戶HOVER質(zhì)量度得分?jǐn)?shù)據(jù)時(shí)展示出來。

再比如，有父子層級關(guān)系的數(shù)據(jù)，可以通過父子折疊表格將子信息默認(rèn)隱藏，用戶根據(jù)需要，去展開查看詳細(xì)的子信息。