的確，表格作為中后臺海量數(shù)據(jù)呈現(xiàn)的載體，能夠【幫助用戶快速“閱讀數(shù)據(jù)”，獲取有效信息，提高決策效率】，但是實際業(yè)務(wù)中，很多設(shè)計師往往沒能夠結(jié)合產(chǎn)品和業(yè)務(wù)場景，找到一個合適的方案。所以我結(jié)合了自己在實際工作中遇到的表格設(shè)計問題，總結(jié)出以下幾點：

一、表格需自我解釋：梳理數(shù)據(jù)關(guān)系，明確數(shù)據(jù)重點

自我解釋的最終目的就是讓人看懂你，試想下用戶面對一整張表格中數(shù)據(jù)卻不知道表達什么意思，這極容易給用戶帶來閱讀壓力最終放棄。因為很多B端產(chǎn)品的數(shù)據(jù)面向的用戶角色及場景都存在差異，所以在設(shè)計表格的時，我們首先需要對表格的表頭（列）進行合理的排列。

如：管理員與普通用戶所展示的數(shù)據(jù)內(nèi)容就可能存在差異，所以需要根據(jù)閱讀重點來定義表格 列的展示順序（依據(jù)信息重要程度從左到右放置），且思考每列間的數(shù)據(jù)關(guān)系，來引導(dǎo)用戶。

案例：運用同學(xué)常見的拉新數(shù)據(jù)，其中的數(shù)據(jù)包含：日期、渠道、新增用戶數(shù)、活躍用戶數(shù)、用戶啟動次數(shù)、累計用戶數(shù)、版本信息等。

首先我們應(yīng)思考運營同學(xué)關(guān)注點是什么？作為運營方案的成果數(shù)據(jù)，他們肯定最想知道是否完成KPI「是否有效獲取到用戶？這些用戶活躍情況？哪幾天拉新效果最好等」。如果我們不考慮用運營同學(xué)特定的目的，隨便排列，就容易導(dǎo)致用戶第一時間很難獲取到自己想要的有效信息，極大影響閱讀效率。但如果抓住了這個主要目的，對指標(biāo)進行排列，那么我們表格的邏輯性便會更強，更清晰，也更加貼合業(yè)務(wù)述求。

二、配置表頭類型，提高閱讀效率

表頭不僅僅有解釋當(dāng)前數(shù)據(jù)內(nèi)容，還可以集成：批量操作、排序篩選、解釋說明、分組、固定等查看操作，而這些功能均不是必要元素，需根據(jù)用戶查看數(shù)據(jù)的需要（如：用戶想快速找到拉新用戶數(shù)最多的某天等），適當(dāng)?shù)倪x配。

2.1 批量操作

在展示信息的同時，可以對表格主體內(nèi)容中的數(shù)據(jù)進行刪除、下載等操作，幫助用戶批量操作，提高效率。如：QQ郵箱我們批量刪除郵件。

2.2 排序篩選

排序能讓用戶可以改變數(shù)據(jù)的排序，篩選則可以改變數(shù)據(jù)展示的類型，幫助用戶更好的觀察數(shù)據(jù)，發(fā)現(xiàn)數(shù)據(jù)規(guī)律。有兩種形式，一種是使用上下按鈕進行排序（正序與倒序），另一種是使用下拉菜單進行排序（適用于多種排序及篩選）。

2.3 解釋說明

• 表頭的字段名稱理應(yīng)簡潔明了，但有時精簡后的名稱用戶還是看不懂，這時就需要跟一個釋義標(biāo)識，鼠標(biāo)懸停時出現(xiàn)該字段的詳細解釋，同時滿足不同用戶的需求。
• 有時候?qū)挾炔粔?，文字會溢出，則需要懸停時出現(xiàn)完整的字段名稱。

2.4 分組

適用于多種所屬關(guān)系的信息展示（如：地址>街道>街區(qū)>樓號>門牌號）

2.5 固定

固定不光可以固定 行，也可以固定 列，特殊情況可以同時固定 行 和 列。一般數(shù)據(jù)較多時，幫助用戶在滾動過程中可以實時看到 行 和 列 對應(yīng)的內(nèi)容，提高閱讀效率。

三、數(shù)據(jù)展示：規(guī)范展示方式，營造良好展示效果，提升數(shù)據(jù)閱讀效率

3.1 對齊方式

合適的對齊方式，能夠讓用戶閱讀時更加舒服。由于表格中的數(shù)據(jù)類型比較多，需根據(jù)數(shù)據(jù)內(nèi)容選用合適的對齊方式。

• 數(shù)字：右對齊，有小數(shù)點的數(shù)值需按照小數(shù)點對齊，且數(shù)值較大時需每隔三位數(shù)使用 ， 隔開，便于用戶閱讀與對比數(shù)值。
• 文字：左對齊，符合人們從左到右的閱讀習(xí)慣。
• 混合型文本：左對齊（混合型內(nèi)容包含圖片，進度，狀態(tài)標(biāo)簽，人物頭像，鏈接等）。
• 多選操作：居中對齊。

??！表頭的對齊方式與數(shù)據(jù)展示的對齊方式必須保持一致，這樣能夠統(tǒng)一整個表格的表格對齊方式，便于提升閱讀與對比的效率。

數(shù)字：數(shù)值、金額、比率

文本對齊：純文本

文本：判斷性文本

文本：時間日期

混合型文本：狀態(tài)標(biāo)簽、進度條

混合型文本：人員（單人、多人樣式）

混合型文本：操作

混合型文本：顯示/隱藏

混合型文本：評價

可操作：多選

3.2 數(shù)據(jù)多層級

在復(fù)雜的表格中，由于數(shù)據(jù)量較多，并且數(shù)據(jù)有層級關(guān)系，所以會對數(shù)據(jù)表格進行分層處理，優(yōu)先展示第一層級的數(shù)據(jù)內(nèi)容，將二三層級的數(shù)據(jù)隱藏起來，用戶點擊后再展示（如：教育類產(chǎn)品中題目設(shè)置 章節(jié)信息編輯 知識點編輯）。

3.3 數(shù)據(jù)修改

支持直接點擊內(nèi)容，出現(xiàn)輸入框后進行編輯：

3.4 展示統(tǒng)計

方便用戶快速了解總數(shù)：

四、表格分割線：建議選用水平線、斑馬條紋，閱讀舒適度最高

表格行列的分割方式有：

• 網(wǎng)格式：類似excel，這樣的方式很好的所有 行 和 列 進行分割，但是網(wǎng)格很容易給人造成視覺疲勞。
• 水平線：僅對 行 進行分割，通過間距與對齊的方式對 列 進行視覺上的分割，這樣的方式可以很好的對數(shù)據(jù)進行劃分，便于閱讀。
• 斑馬條紋：通過低飽和度的顏色交替的對 行 進行分割，同樣很好的對數(shù)據(jù)進行劃分，便于閱讀
• 留白，不分割：直接留白，通過間距來劃分，不建議使用這樣的方式，因為數(shù)據(jù)較多的時候，用戶十分容易將行對應(yīng)錯，容易造成混亂。

五、空數(shù)據(jù)

表格中經(jīng)常會出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況，留白處理會給用戶造成一定的困惑和誤解，是系統(tǒng)沒有加載出來嗎或誤以為出現(xiàn)了bug？明智的做法，是無數(shù)據(jù)時用「-」來填充顯示，數(shù)據(jù)為零時與上下數(shù)據(jù)單位、小數(shù)點相同的0來顯示。

表格無內(nèi)容：

沒有創(chuàng)建訴求的，數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無數(shù)據(jù)。

是用戶有創(chuàng)建訴求，數(shù)據(jù)是由用戶或系統(tǒng)產(chǎn)生的則直接示意用戶創(chuàng)建數(shù)據(jù)。

六、寫在最后

通過合理的組織架構(gòu)和呈現(xiàn)方式，使原本枯燥的數(shù)據(jù)呈現(xiàn)出生命力，這是一件很神奇的事。而用心、規(guī)劃、思考和理解人們的行為方式，圍繞用戶目的與實際使用場景，提供易讀性高且規(guī)范表格更是需要設(shè)計師反復(fù)思考的事情！

最后感謝您看到最后，希望通過本篇文章的講述，能對大家有所啟示~~~~~~~

本文由 @小發(fā)哥 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。