前言

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

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

• 頂欄： 對(duì)表格信息進(jìn)行概括，包含標(biāo)題、篩選、搜索、操作按鈕等功能

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

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

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

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

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

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

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

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

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

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

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

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

2.1、批量操作

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

2.2、排序篩選

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

2.3、解釋說(shuō)明

• 表頭的字段名稱理應(yīng)簡(jiǎn)潔明了，但有時(shí)精簡(jiǎn)后的名稱用戶還是看不懂，這時(shí)就需要跟一個(gè)釋義標(biāo)識(shí)，鼠標(biāo)懸停時(shí)出現(xiàn)該字段的詳細(xì)解釋，同時(shí)滿足不同用戶的需求。

• 有時(shí)候?qū)挾炔粔?，文字?huì)溢出，則需要懸停時(shí)出現(xiàn)完整的字段名稱。

2.4、分組

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

2.5、固定

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

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

3.1、對(duì)齊方式

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

• 數(shù)字：右對(duì)齊，有小數(shù)點(diǎn)的數(shù)值需按照小數(shù)點(diǎn)對(duì)齊，且數(shù)值較大時(shí)需每隔三位數(shù)使用 ， 隔開，便于用戶閱讀與對(duì)比數(shù)值。

• 文字：左對(duì)齊，符合人們從左到右的閱讀習(xí)慣。

• 混合型文本：左對(duì)齊（混合型內(nèi)容包含圖片，進(jìn)度，狀態(tài)標(biāo)簽，人物頭像，鏈接等）。

• 多選操作：居中對(duì)齊。

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

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

• 文本對(duì)齊：純文本

• 文本：判斷性文本

• 文本：時(shí)間日期

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

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

• 混合型文本：操作

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

• 混合型文本：評(píng)價(jià)

• 可操作：多選

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

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

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

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

3.4、展示統(tǒng)計(jì)

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

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

表格行列的分割方式有：

• 網(wǎng)格式：類似excel，這樣的方式很好的所有 行 和 列 進(jìn)行分割，但是網(wǎng)格很容易給人造成視覺(jué)疲勞。

• 水平線：僅對(duì) 行 進(jìn)行分割，通過(guò)間距與對(duì)齊的方式對(duì) 列 進(jìn)行視覺(jué)上的分割，這樣的方式可以很好的對(duì)數(shù)據(jù)進(jìn)行劃分，便于閱讀。

• 斑馬條紋：通過(guò)低飽和度的顏色交替的對(duì) 行 進(jìn)行分割，同樣很好的對(duì)數(shù)據(jù)進(jìn)行劃分，便于閱讀。

• 留白，不分割：直接留白，通過(guò)間距來(lái)劃分，不建議使用這樣的方式，因?yàn)閿?shù)據(jù)較多的時(shí)候，用戶十分容易將行對(duì)應(yīng)錯(cuò)，容易造成混亂。

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

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

5.2、表格無(wú)內(nèi)容

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

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

寫在最后

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

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

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

免責(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ì)( www.yvirxh.cn )是一家專注而深入的界面設(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ù)