前言

表格作為組織整理數(shù)據(jù)的手段，可以有效的向用戶展示數(shù)據(jù)信息，是B端產(chǎn)品中出現(xiàn)最高頻的模塊之一。

下圖為典型的B端表格示例：

用戶主要通過(guò)表格瀏覽獲取信息、對(duì)數(shù)據(jù)進(jìn)行篩選、排序以及相關(guān)業(yè)務(wù)處理等更多復(fù)雜操作、對(duì)比數(shù)據(jù)的差異與變化（關(guān)聯(lián)和區(qū)別）。好的表格信息展示設(shè)計(jì)，應(yīng)當(dāng)是能夠輔助用戶高效便捷的實(shí)現(xiàn)以上場(chǎng)景中的訴求。

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

///

一、疏密適度

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

1、定義合理的表格行高

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

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

根據(jù)用戶場(chǎng)景的不同，來(lái)選擇模數(shù)倍數(shù)，需保證系統(tǒng)內(nèi)使用統(tǒng)一的模數(shù)。比如，針對(duì)用戶快速瀏覽獲取大量數(shù)據(jù)場(chǎng)景時(shí)，可以選擇1.2倍作為模數(shù)，列表更為緊湊，同樣掃視范圍內(nèi)，可獲取更多信息。

b、為小屏幕考慮一屏顯示的行數(shù)

表格行高決定屏幕內(nèi)能呈現(xiàn)的行數(shù)，即用戶在一屏內(nèi)能獲取信息的數(shù)量，主要影響用戶縱向?qū)Ρ葦?shù)據(jù)的效率。對(duì)于1920*1020（包含該分辨率）以上的大屏用戶，對(duì)于一屏顯示行數(shù)的感知不強(qiáng)，但對(duì)于1366×768、1280*720等這類小屏，顯示行數(shù)有限，用戶進(jìn)行縱向數(shù)據(jù)對(duì)比的效率就會(huì)有所降低。在設(shè)計(jì)前，應(yīng)當(dāng)充分了解目標(biāo)用戶的行為訴求，了解目標(biāo)用戶設(shè)備屏幕分辨率的占比分布情況，有針對(duì)性的設(shè)置行高。

c、用戶自定義行高的場(chǎng)景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

c、用戶自定義展示信息

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

///

二、高效掃視

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

1、合理的對(duì)齊方式

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

具體對(duì)齊方式可參考我們建議的方式：

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

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

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

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

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

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

b、斑馬線作用有限

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

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

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

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

///

三、精簡(jiǎn)克制

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

1、適度隱藏信息

a、隱藏低頻操作

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

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

b、隱藏輔助信息

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

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

2、設(shè)定折行與截?cái)嘁?guī)則

B 端業(yè)務(wù)的數(shù)據(jù)信息復(fù)雜多樣，信息內(nèi)容的長(zhǎng)度高度是多樣不可控的，很多內(nèi)容會(huì)超出我們限定的最大列寬，最大列高，我們應(yīng)當(dāng)給出折行與截?cái)嘣瓌t去約束內(nèi)容的展示，而非總是為具體情況而做特殊設(shè)計(jì)，破壞體驗(yàn)的一致性。

截?cái)嗾坌性瓌t設(shè)定時(shí)要細(xì)分，不能簡(jiǎn)單粗暴的一刀切，比如一行截?cái)噙@種，如日期、時(shí)間等固定格式內(nèi)容，拖動(dòng)列寬后文字應(yīng)折行而非截?cái)嗾故?，避免影響用戶誤讀。再比如很多業(yè)務(wù)實(shí)體標(biāo)題字段是格式化的，即標(biāo)題前面部分可能都是一致的，這時(shí)候如果簡(jiǎn)單的截?cái)?，用戶就需要逐一Hover才能找到定位到要找的數(shù)據(jù)。因而折行與截?cái)嘣瓌t，我們建議是給出三種：?jiǎn)涡薪財(cái)唷㈦p行截?cái)嘁约白赃m應(yīng)截?cái)?，根?jù)具體業(yè)務(wù)情景選擇。

文章來(lái)源：站酷    作者:百度MEUX

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)