前言

提起中后臺，除了高效、靈活和強大之外，不可忽視的還有它的海量數(shù)據(jù)。海量數(shù)據(jù)的篩選與呈現(xiàn)，直接決定決策人員的效率高低。我這邊主要是結(jié)合自己在實際工作中遇到的表格設(shè)計問題，針對Web端數(shù)據(jù)呈現(xiàn)方式之一，表格的設(shè)計進行探討。

首先了解下表格的構(gòu)成：頂欄、表格主體、底欄

• 頂欄： 對表格信息進行概括，包含標題、篩選、搜索、操作按鈕等功能

• 表格主體：承載數(shù)據(jù)內(nèi)容，由 行 和 列 構(gòu)成

• 底欄：主要用于設(shè)置當頁條數(shù)及放置分頁器

關(guān)于表格的文章有很多，這邊我僅僅針對表格內(nèi)部（即表格主體）與大家探討需考慮哪些問題才能讓表格整體的閱讀體驗更好！

“優(yōu)秀的設(shè)計需要用心、規(guī)劃、思考和理解人們的行為方式”

的確，表格作為中后臺海量數(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)致用戶第一時間很難獲取到自己想要的有效信息，極大影響閱讀效率。但如果抓住了這個主要目的，對指標進行排列，那么我們表格的邏輯性便會更強，更清晰，也更加貼合業(yè)務(wù)述求。

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

表頭不僅僅有解釋當前數(shù)據(jù)內(nèi)容，還可以集成：批量操作、排序篩選、解釋說明、分組、固定等查看操作，而這些功能均不是必要元素，需根據(jù)用戶查看數(shù)據(jù)的需要（如：用戶想快速找到拉新用戶數(shù)最多的某天等），適當?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)簡潔明了，但有時精簡后的名稱用戶還是看不懂，這時就需要跟一個釋義標識，鼠標懸停時出現(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)標簽，人物頭像，鏈接等）。

• 多選操作：居中對齊。

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

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

• 文本對齊：純文本

• 文本：判斷性文本

• 文本：時間日期

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

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

• 混合型文本：操作

• 混合型文本：顯示/隱藏

• 混合型文本：評價

• 可操作：多選

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ù)

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

5.2、表格無內(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ù)思考的事情！

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

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)