編輯導(dǎo)語：在B端產(chǎn)品設(shè)計中，越來越多的設(shè)計師需要和數(shù)據(jù)打交道。表格作為一種常見的信息組織整理手段以及web頁面的基礎(chǔ)設(shè)施之一，其重要性不容忽視。本文作者結(jié)合最近做的幾個項目和相關(guān)設(shè)計經(jīng)驗并且參考了相關(guān)文檔，為大家梳理一個表格設(shè)計框架，能夠?qū)δ愕脑O(shè)計有所幫助。

1. 表格的定義與用途

1.1 什么是表格

表格：既是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段。一般來說，由行、列分割而成的單元格是構(gòu)成表格的基本元素。

表格的行、列之間相互獨立又相互關(guān)聯(lián)，充滿變化。行與列形成了單元格的長與高，不同的長高有著疏密之別，進(jìn)而使表格產(chǎn)生充實或透氣之感。

經(jīng)典的表格：水平和垂直邊框清晰可見，表頭與包含內(nèi)容的單元格分開。

1.2 表格的用途

表格是常見的信息組織手段，是web頁面布局的重要組成部分，可用于保存和展示少量或大量結(jié)構(gòu)化、靜態(tài)化及處于變化中的數(shù)據(jù)。

大量使用表格，這可能是效率最高的信息展示方式了。表格可以高效組織信息和數(shù)據(jù)，讓用戶方便閱覽、對比和分析。

具體說來，表格結(jié)構(gòu)簡單，分隔明確，可保證信息可讀性，易于用戶快速掃描瀏覽并獲取內(nèi)容；

• 視覺方面，數(shù)據(jù)經(jīng)過歸納整理和合理布局后，更易于用戶感知及分辨其中的關(guān)聯(lián)與區(qū)別，并進(jìn)行對比分析；
• 交互方面，用戶可以對數(shù)據(jù)信息進(jìn)行排序、搜索、篩選、分析、分類等相關(guān)業(yè)務(wù)的復(fù)雜操作。

2. 表格的構(gòu)成

一般來說，表格有水平型、垂直型和矩陣型三種布局。

1. 水平布局會弱化列的存在，強調(diào)信息的連貫性，保證用戶閱讀信息時視覺流是從左到右的，然后自上而下逐條掃描，適合大量信息的瀏覽。
2. 垂直布局是在行分割的基礎(chǔ)上，通過強化列的視覺特征來突出行間信息的對比。
3. 矩形布局的表格有均勻而明顯的分割線，邊框單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息時。

從視覺結(jié)構(gòu)的表現(xiàn)角度，將“表格”的構(gòu)成分為六大類：

1. 標(biāo)題
2. 篩選操作區(qū)
3. 表頭
4. 表體
5. 表尾
6. 底欄

由表頭、表體、表尾構(gòu)成內(nèi)部區(qū)域，由標(biāo)題、篩選操作、底欄構(gòu)成外部區(qū)域。

2.1 標(biāo)題

標(biāo)題是對表格信息內(nèi)容的整體概括，可包含數(shù)據(jù)來源及屬性(日期、地區(qū)等)，以便用戶對表格內(nèi)容有整體認(rèn)知。

給數(shù)據(jù)表格起一個清晰簡明的標(biāo)題，與其他的設(shè)計同等重要。有了好的標(biāo)題，表格就可以獨立使用，它們可以用于許多不同場合中，也可以由外部來引用。

2.2 篩選操作區(qū)域

篩選操作區(qū)域是位于表頭的上方，包含篩選，操作按鈕等其他操作。

篩選區(qū)包含模糊搜索和條件篩選，按鈕區(qū)的按鈕可分為增刪改和其它業(yè)務(wù)處理操作。合理設(shè)計篩選區(qū)可以大大提高用戶的效率。

2.3 表頭

表頭對一些問題的性質(zhì)的歸類，每張表按慣例要對數(shù)據(jù)的簡況做出反映，如：被調(diào)查者的性別、年齡、學(xué)歷、收入、家庭成員組成、政治背景、經(jīng)濟狀況等。

表頭的字段名稱應(yīng)當(dāng)符合用戶思維習(xí)慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標(biāo)。表頭在這里也指列行標(biāo)簽，是對所屬行或列數(shù)據(jù)的描述。

除了容納行/列標(biāo)簽之外，表頭也可以包含排序、搜索、篩選等功能。

2.4 表體

表體是表格的主體內(nèi)容，具體內(nèi)容的填充區(qū)域，由一個個基礎(chǔ)的單元格組成。

包含數(shù)據(jù)，分割線，背景，也可進(jìn)行操作，如鏈接跳轉(zhuǎn)(項目或者商品)。

2.5 表尾

表尾一般是統(tǒng)計信息，例如總計、平均數(shù)等。

2.6 底欄

底欄緊跟在表格正文之后，主要展示正文中的數(shù)據(jù)量以及單頁數(shù)據(jù)條目信息，底欄一般放統(tǒng)計信息、分頁、備注、加載按鈕等內(nèi)容。

底欄最常見的元素就是分頁，分頁可以放在上部、下部或上下部均有，而分頁固定能省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩。

無限滾動可以替代分頁，但對于功能優(yōu)先的應(yīng)用未必適用。

下圖為加載按鈕，比較少見：

分頁可分為：整體頁碼平鋪式、全功能版、簡易版等，需要根據(jù)不同的場景選擇最優(yōu)的設(shè)計方案，比如有的時候并不需要定點跳轉(zhuǎn)。

3. 表格的視覺

3.1 視覺標(biāo)準(zhǔn)

3.1.1 填充與邊距

合適的填充和邊距對于視覺設(shè)計至關(guān)重要，既包括保證數(shù)據(jù)單元格之間的留白，又包括單元格內(nèi)部留白，以保證易讀性。

當(dāng)創(chuàng)建表格設(shè)計規(guī)范并嚴(yán)格遵循后，團隊在執(zhí)行其它項目時，都可以創(chuàng)建視覺一致的表。

3.1.2 對齊方式

合適的對齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)信息的縱向列對齊能夠很好的形成視覺引導(dǎo)線。

通過對齊，會讓表格更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，視線流動更順暢，讓用戶快速的捕捉到所需內(nèi)容。

可以遵循3條半對齊原則：

1. 數(shù)字應(yīng)該右對齊
2. 文字信息左對齊
3. 表頭與數(shù)據(jù)對齊
4. 不要使用居中對齊

數(shù)字是從右向左讀的——這是因為我們對比數(shù)字時，首先看個位，然后十位、百位。

當(dāng)個位數(shù)值對齊時，我們就可以快速查看前面的數(shù)值，比較多個數(shù)據(jù)的大小。

因此，表格的數(shù)字應(yīng)當(dāng)右對齊。因為我們閱讀文字信息是從左向右讀，所以不采用左對齊，會降低瀏覽文字的效率。

表頭應(yīng)當(dāng)同數(shù)據(jù)的對齊方式一致，這能保持表格豎直方向整潔，營造一致性。

居中對齊會導(dǎo)致表格的行參差不齊，瀏覽數(shù)據(jù)會更難，常常需要額外的分隔物。固定的內(nèi)容居中對齊，如狀態(tài)文字(成功，失敗等)，這樣的話信息呈現(xiàn)會更加突出，并能節(jié)省表格空間。

跨列合并單元格時，內(nèi)容頂對齊。多行的數(shù)據(jù)表，用戶從上往下閱讀時往往搞不清楚對應(yīng)的數(shù)據(jù)列內(nèi)容。

跨行合并時，靈活處理，一般指多級表頭，采用居中對齊，相應(yīng)的未合并的表頭頁簽也要居中對齊。如：日期之類的數(shù)字應(yīng)采用始終相同的長度進(jìn)行格式化，如：2020/07/19而不是2020/7/19。

3.1.3 色彩

表格具有的顏色盡可能少，顏色和可讀性是密切相關(guān)的，要合理的使用顏色，盡量使用簡單的背景色和點綴色。

背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線)、懸停高亮底色(便于準(zhǔn)確辨別光標(biāo)所在行)等處理方法，還可以對表頭表尾進(jìn)行視覺區(qū)分。但不能增加過多顏色以引起混亂。

邊框顏色不能為黑色。當(dāng)字體選擇深灰色，邊框選擇淺灰色，就可以減少我們視覺疲勞，不會使表格看起來令人生畏。

3.2 表頭的優(yōu)化

表頭標(biāo)簽應(yīng)該簡煉準(zhǔn)確，以達(dá)到節(jié)省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數(shù)據(jù)本身。對于B端產(chǎn)品而言，先能把事情說清楚，然后再考慮文字的簡潔性。

數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時候，使用多級表頭來體現(xiàn)數(shù)據(jù)的層次關(guān)系，如下圖：

3.3 行的優(yōu)化

3.3.1 默認(rèn)排序

常以創(chuàng)建時間進(jìn)行排序，即最新創(chuàng)建的排在最前面。

3.3.2 合適的行高

行高是非常重要的參數(shù)，直接影響著閱讀體驗。

較小的行高承載更多信息，讓用戶無需滾動鼠標(biāo)即可看到更多數(shù)據(jù)，但會降低掃描效果，導(dǎo)致視覺解析錯誤。適宜的行高使得數(shù)據(jù)更易于被閱讀，但這不代表行高越大越利于閱讀。

行高的大小應(yīng)該是與字體成比例的，在單行文字的情況下表格間距一般在字符大小的三倍以內(nèi)。

設(shè)置行高的原則：

• 單行數(shù)據(jù)顯示時，數(shù)據(jù)顯示緊湊、有序。
• 多行數(shù)據(jù)顯示時，弱化表格形式，提供豐富的視覺展現(xiàn)。

因此對于單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對于多行顯示的表格，建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度。

當(dāng)然，也可以提供切換按鈕讓用戶自己控制顯示密度。

3.3.3 橫向斑馬線

斑馬線又稱作間行換色、隔行變色、行交替樣式。

它能讓行間界限更為明顯，同時加強視覺流的橫向引導(dǎo)，避免在閱讀過寬表格時出現(xiàn)錯行、迷失的情況，要注意兩種顏色不能反差過大。

另外，可以根據(jù)實際情況選擇是否與邊框同時使用。

3.3.4 行的強調(diào)

有時為了強調(diào)行內(nèi)信息的連續(xù)性，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續(xù)通暢，以提升閱讀效率。

此時，可以對行內(nèi)信息進(jìn)行擴充，進(jìn)一步弱化表格形式，豐富各類信息的視覺呈現(xiàn)，同時兼顧行與行之間的關(guān)鍵信息的對比。

3.4 列的優(yōu)化

3.4.1 列的選擇

盡量減少列的數(shù)量，關(guān)注用戶需要的必要信息，避免出現(xiàn)用戶不需要的數(shù)據(jù)，同時要避免數(shù)據(jù)缺失，用戶需要的非重點、輔助性信息可以通過次級入口來解決。

在表格數(shù)據(jù)可以自我解釋的情況下，列標(biāo)簽就不是必須的了，如電子郵件的表格，就不需要列標(biāo)簽，因為發(fā)件人和郵件主題以及時間的區(qū)分度比較高。

3.4.2 合適的列寬

列寬的處理有三種方式：

1. 通過柵格，由列的數(shù)量決定列寬；
2. 可以固定部分列的寬度，其余列則按百分比處理；
3. 在固定寬度的基礎(chǔ)上，允許用戶自由拖動調(diào)整列寬的大?。ó?dāng)然我覺得不要太拘泥與這個，合適就好）。

3.4.3 列的強調(diào)

一般列的強調(diào)是配合表格列排序功能使用的，如點擊率、訪問量的排序。

有時會使用不同粗細(xì)的縱向分割線對信息進(jìn)行區(qū)隔，增加同類信息的對比性。也可以任意指定數(shù)據(jù)列強調(diào)顯示，表示當(dāng)前的操作結(jié)果。

如下圖，表示目前日期正在降序排列：

為便于用戶對數(shù)據(jù)進(jìn)行對比分析，可以在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、平均值、總計等數(shù)據(jù)處理結(jié)果，減少用戶心算和再做數(shù)據(jù)加工的過程，使重要信息突出，提高用戶的閱讀速度，幫助用戶快速定位和了解重點信息。

3.5 單元格數(shù)據(jù)展示

3.5.1 度量單位的使用

其中的關(guān)鍵區(qū)別在于數(shù)字的大小，為了更好對齊和對比，建議使用等寬的表格字體。數(shù)據(jù)的度量單位無需重復(fù)，只需要在表頭標(biāo)識清楚即可。

3.5.2 空白單元格處理

一般指空數(shù)據(jù)或零數(shù)據(jù)的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是數(shù)值為零。

正確做法是，對于數(shù)據(jù)為零的單元格，要填上0，且小數(shù)點后位數(shù)、單位，都要與上下單元格保持一致。

對于沒有數(shù)據(jù)的單元格，通常是用“－”表示。

B端后臺數(shù)據(jù)類型較多，最好能為空數(shù)據(jù)做出釋義，可以加在“列標(biāo)簽”的解釋文案中。

3.5.3 減少用戶的計算

對于進(jìn)行對比分析的數(shù)據(jù)，在原始數(shù)據(jù)的基礎(chǔ)上可以給出差值、升降變化、總計值、平均值等分析性的數(shù)據(jù)處理結(jié)果，直達(dá)用戶獲取信息的目標(biāo)(需要明確用戶目標(biāo))，而盡量減少用戶心算或者線下處理的過程。

如：股票數(shù)據(jù)變化，音樂排行榜等，能顯著提升信息的閱讀和理解效率。

下圖表尾對數(shù)據(jù)的總計值：

3.5.4 關(guān)鍵屬性標(biāo)識

比如用戶重點關(guān)注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等，可以用符號進(jìn)行標(biāo)識，幫助用戶快速定位到目標(biāo)信息。

下圖音樂排行榜用帶顏色升降小圖標(biāo)示意當(dāng)前歌曲排行狀態(tài)，紅色為上升、綠色為下降：

3.6 分隔線

水平分隔線，能顯著減輕表格在垂直方向的視覺重量，提升用戶進(jìn)行大量數(shù)據(jù)對比時的速度。

垂直分隔線，在表格中使用適合的對齊方式后，那么就可以省略；數(shù)據(jù)量級比較大的表格，建議保留，可以使用較淡的分隔線，提升瀏覽速度。

下圖采用了同時采用了水平和垂直分隔線：

如果在表格中使用適合的對齊方式，分隔線就是多余的。但由于數(shù)據(jù)量級不同，即使要用，分隔線也要淡，不能妨礙快速瀏覽。

3.7 分頁及翻頁

用戶一般是能不用翻頁就不會用翻頁功能，涉及到跨頁的數(shù)據(jù)操作時，分頁會帶來不便。

但受限于數(shù)據(jù)加載的壓力，在WEB端、手機端等需要實時下載數(shù)據(jù)的終端，通常需要分頁展示數(shù)據(jù)來緩解服務(wù)器的壓力，因此用戶需要分頁查看和操作。

而在客戶端，數(shù)據(jù)已下載到了本地，就可以采用無限滾動的方式呈現(xiàn)數(shù)據(jù)，不需要分頁展示，這樣用戶操作的成本更低。

在WEB端，表格的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時需要提供翻頁功能，這個“數(shù)量”由表頭的數(shù)據(jù)的高度、表格的行間距、目標(biāo)用戶群體的顯示設(shè)備的配置等因素來決定。

原則是不要超過一屏，考慮到每個用戶的使用習(xí)慣，可以讓用戶自定義每頁的顯示的數(shù)量，相比于跨屏翻頁而言，向下滾屏?xí)憷?/p>

翻頁控件內(nèi)容 ：用戶自定義每頁顯示的數(shù)量，當(dāng)前頁碼(行數(shù))，全部數(shù)據(jù)的頁數(shù)(行數(shù))，向前翻頁，向后翻頁，到達(dá)第一頁，到達(dá)最后一頁等。

注意:

1. 當(dāng)前用戶的數(shù)據(jù)未超過一頁時，無須展示翻頁控件。
2. 對于B端后臺的用戶而言，告之當(dāng)面數(shù)據(jù)的行數(shù)比當(dāng)前的頁數(shù)更有用。
3. 翻頁按鈕不可用時，須給出置灰態(tài)。

翻頁控件做為篩選數(shù)據(jù)的一種方式，通常會結(jié)合日歷、排序、篩選等其它控件一起使用，來提升用戶的操作效率。

如：網(wǎng)易的郵箱，翻頁與日歷結(jié)合一起使用，對于有大量郵件數(shù)據(jù)的用戶來說，查閱郵件的效率更高。

無限滾動/延遲加載呢？

許多應(yīng)用程序已完全擺脫了分頁，如：直接鼠標(biāo)滾動或點擊“加載更多”按鈕以查看更多數(shù)據(jù)。

這只會加載當(dāng)前視圖中適合的內(nèi)容，并且如果用戶有意識地采取行動以加載更多內(nèi)容，則將加載更多項目。

3.8 全屏查閱

減少與表格無關(guān)的視覺干擾，提供表格的沉浸式閱讀體驗，可提供全屏表格的入口，但應(yīng)注意可以讓用戶便捷的退出。

全屏模式可直接屏蔽掉上方的報表區(qū)域和左側(cè)及頂部的導(dǎo)航欄，用戶通過ESC鍵可隨時退出全屏模式，學(xué)習(xí)成本較低。

3.9 降低視覺噪音

信息內(nèi)容的有效傳達(dá)是表格設(shè)計的本質(zhì)，就表格本身而言應(yīng)該是隱藏的，應(yīng)該讓用戶注意力聚焦在核心內(nèi)容上。

所以，做減法設(shè)計就顯得可貴了。

3.9.1 減少分隔線

這必須是在數(shù)據(jù)允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量，加快大量數(shù)值的對比工作。

但如果在表格中使用適合的對齊方式，豎直分隔線就完全是多余的。它們最大的貢獻(xiàn)就是縮減元素之間的距離后，即使要用垂直分割線，也要非常淡，不能妨礙快速瀏覽。

不使用斑馬線，使用不同底色區(qū)分指示不同類型的數(shù)據(jù)（如總和、平均值）是有必要的，但是斑馬線在很多時候又是沒有必要的，因為它們是同一類數(shù)據(jù)，而且水平分割線就已經(jīng)明顯區(qū)隔了。

省去所有分隔線，對于較小的，動態(tài)性較小的表，可以省去所有分隔線，并獲得醒目的外觀。當(dāng)然，這更多是數(shù)據(jù)量不大的情況。

3.9.2 盡量以黑白為主

運用彩色表達(dá)組織或含義可能會增加誤解，并且引發(fā)視覺障礙者的易用性問題。

3.9.3減少其他圖形元素的使用

其他圖形元素，如星號，三角，圓點，對勾，叉等，雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達(dá)信息，但物極必反，少即是多，要注意克制這些元素的使用。

3.10 其他樣式

3.10.1 圖表的使用

除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。

有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細(xì)放在頁面底部。大量的表格也會導(dǎo)致視覺的單調(diào)。

3.10.2 卡片的使用

在信息量較少或特別多的情況下可以用卡片的形式來展示信息，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級進(jìn)行排列。

此外，卡片彼此之間又形成一個整體。

4. 表格的交互

4.1 篩選與搜索

4.1.1 表上方

當(dāng)表格的數(shù)據(jù)量較大時，可增加搜索功能和對數(shù)據(jù)的分類來提升用戶查找數(shù)據(jù)的效率，提供多維的篩選和排序，減少用戶尋找信息的時間。

輸入框可以輸入用戶關(guān)心的內(nèi)容，下面可以做到實時篩選，也可以觸發(fā)點擊。但是必須支持模糊查詢，否則用戶必須記住所有內(nèi)容，才能查出要找的內(nèi)容項，這樣的成本太高了。

也有特殊情況，比如查詢保密性較高的賬號密碼列表時，需要精確輸入。

面對手動查詢還是自動查詢，如果常用的查詢條件是組合幾個條件，那么這種情況下，一般是填好全部條件再讓用戶點擊查詢按鈕。

因為如果用戶要查詢的某類個體具有多個屬性，組合條件的查詢顯然是更合理的。

如下圖所示：

如果篩選操作通常是單個條件獨立查詢，各個篩選條件都是相互獨立的，那么一般設(shè)計是填好一個條件便自動查詢。面對單選框還是下拉框，篩選條件有些需要匯總數(shù)據(jù)的，有些只需看單一條件下的數(shù)據(jù)。

比如狀態(tài)包含“已發(fā)布、未發(fā)布和待審核”，除了需要統(tǒng)計各狀態(tài)的數(shù)據(jù)，還需匯總數(shù)據(jù)，此時則是做成單選框比較好，如下圖所示。

如果不需要匯總數(shù)據(jù)，則可以是下拉框或者Tab顯示，如下圖：

我認(rèn)為如果篩選值少于6個，可以用Tab顯示；多于6個，則是下拉框比較好。

4.1.2 表頭

放置在列標(biāo)簽上的篩選，受“表格列”內(nèi)容的限制，僅能做單次單列的篩選。表頭篩選是一種復(fù)雜篩選的形式。

點擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。

可以通過對表頭的點擊，使用戶更快捷進(jìn)入到自己的篩選條件，在通常情況下，在表單越左的數(shù)據(jù)顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場景基本還是得到滿足。

4.2 滾動與固定

4.2.1 固定表頭

固定表頭可以讓用戶明白當(dāng)前單元格內(nèi)信息的屬性和含義，體現(xiàn)界面友好性。當(dāng)數(shù)據(jù)列差異不大，用戶不能直觀的根據(jù)表格中的數(shù)據(jù)分辨出數(shù)據(jù)類型時，尤其需要固定頂部表頭。

當(dāng)然，表頭有操作時，固定表頭更能提升使用效率。

4.2.2 首列固定

呈現(xiàn)大量數(shù)據(jù)時，橫向滾動無法避免，第一列(前幾列)或操作列屬性固定更方便信息的對比與操作。

4.2.3 自定義固定列

作為高級功能，可以對列進(jìn)行單獨鎖定，以便用戶將數(shù)據(jù)與多個錨定對象進(jìn)行比較。

4.2.4 固定表尾和底欄

固定表尾和底欄可以避免頁面無數(shù)據(jù)時的空洞。

4.3 排序

4.3.1 拖曳排序

常用于數(shù)據(jù)量較小，有拖曳排序需求的場景。又可以運用在多個表一起的情況，從某一表中拖拽行至另外表。

4.3.2 表頭排序

可以輔助用戶快速挖掘出關(guān)注的信息，發(fā)現(xiàn)數(shù)據(jù)信息之間的關(guān)系，一般可按數(shù)字大小、文字拼音順序、字母順序、數(shù)據(jù)的特征等進(jìn)行排序。

如果表格中不是所有數(shù)據(jù)都能排序，則需要標(biāo)識出可排序的列，一般采用箭頭做為標(biāo)識，每次單擊順序相反，實時反饋當(dāng)前排序中的狀態(tài)。

4.4 控制表內(nèi)容

4.4.1 可伸縮列

由于可能有多個數(shù)據(jù)的標(biāo)題和列，因此有時我們只能根據(jù)表格的寬度來顯示內(nèi)容。

在某些情況下，表格可以允許用戶選擇并選擇他們想要查看的列。在固定寬度的基礎(chǔ)上，允許用戶自由拖動調(diào)整列寬的大小（可伸縮列）。

4.4.2 自定義選擇列

由于一份數(shù)據(jù)報表，往往需要滿足各種不同的角色在不同場景下的需求，因而在數(shù)據(jù)內(nèi)容上，一般采取寧多勿少的原則——即系統(tǒng)提供盡可能詳細(xì)的數(shù)據(jù)給用戶。

由此可能就造成了數(shù)據(jù)指標(biāo)過多，難以在一個屏幕內(nèi)完整的展示，導(dǎo)致需要橫向拉伸，極大的降低了表格的可讀性。

在這個問題上，采取的方法應(yīng)該是將所有的指標(biāo)名稱羅列在表格上方，并提供復(fù)選框選擇，在默認(rèn)情況下僅展示最常用、最重要的幾個指標(biāo)（如下圖）。

這樣做的好處是用戶能在表格上方看多所有的指標(biāo)名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標(biāo)的情況。

其次，用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾。

B端后臺通常會對應(yīng)不同的角色及不同的需求，可讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序。

注意：系統(tǒng)應(yīng)記住用戶上一次自定義列的設(shè)置。

4.4.3 控制顯示密度

較小的行高讓用戶無需滾動頁面就能查看到更多的數(shù)據(jù)。但可掃描性的效果導(dǎo)致視覺解析錯誤。這就是為什么許多成功的數(shù)據(jù)表設(shè)計包含了控制顯示密度的功能。

4.5 查看詳情

在全面了解實際業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行靈活設(shè)計。對表格內(nèi)容的取舍要建立在對業(yè)務(wù)的了解之上，盡量精簡指標(biāo)，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。

不要讓用戶一次性接收過于龐大的信息量，尤其不要超出用戶的視線范圍，避免通過拖拽的方式查看信息。

建議默認(rèn)只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。

4.5.1 展開行

展開行允許用戶無需打開新頁面即可查看附加信息，防止用戶迷失。

4.5.2 表格組節(jié)

表格中打開表格，表格組節(jié)把相關(guān)的行組合在一起，并且能夠收縮和展開，各組節(jié)層級要有樣式區(qū)別。如果有需要，在每個組節(jié)里可以顯示數(shù)據(jù)概要。

4.5.3 彈窗

包括模態(tài)彈窗和非模態(tài)彈窗，模態(tài)彈窗可以打開任一個條目進(jìn)行詳細(xì)查看，非模態(tài)彈窗可以同時打開多個，并允許拖動彈窗位置進(jìn)行信息對比。

模態(tài)允許用戶留在表格視圖中，且更多地關(guān)注附加信息和操作：

多模態(tài)功能對于主動使用的用戶來說很有用，他可以通過一系列操作，比較不同項目的細(xì)節(jié)：

4.5.4 表格內(nèi)部側(cè)邊展開

相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項目視圖和右側(cè)的其他詳細(xì)信息。

這讓用戶能夠解析大型數(shù)據(jù)集，而且在涉及到許多項目時也不會丟失它們的位置。

4.5.5 視圖切換

可以通過視圖切換查看更多細(xì)節(jié)，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。

4.6 數(shù)據(jù)的編輯操作

操作項一般存在于行數(shù)據(jù)最后，以及表頭位置，分別對應(yīng)單條操作與批量操作的場景。

4.6.1 單行操作和批量操作

對于單條數(shù)據(jù)操作頻繁的場景，操作項不多于三個時，操作項跟在條目后面：

• 當(dāng)超過三個時，建議將操作折疊收起，點擊icon彈出多個操作選項；
• 當(dāng)僅用操作時，應(yīng)致灰，鼠標(biāo)選中可顯示原因。

對于數(shù)據(jù)批量操作頻繁的場景，建議將操作放到表格頂部，與勾選操作配合使用。文字按鈕傳達(dá)更加明確，辨識度強。

4.6.2 單選、多選和全選

單選、多選和全選，一般通過復(fù)選框?qū)崿F(xiàn)選擇條目并進(jìn)行批量操作。也可以進(jìn)行整行選擇，即點擊某一行的局部能讓整行被選中，這種做法可增大點擊區(qū)域減少界面的混亂。

單選時必須給出明確的選中樣式，而實際上純粹的單選很少見，所以一般也可以使用復(fù)選框。多選是通過復(fù)選框?qū)崿F(xiàn)，具體設(shè)計時，可以按照數(shù)據(jù)類型進(jìn)行選擇，如郵件已讀、未讀等。

告知用戶已選多少條數(shù)據(jù)，是否允許跨頁選擇。全選時需要對數(shù)據(jù)范圍進(jìn)行限定，特別是遇到分頁時，只能選擇當(dāng)前視圖中的所有項目還是選擇完整列表中的所有項目。

4.6.3 單元格編輯、行編輯與表格編輯

針對于需要進(jìn)行數(shù)據(jù)編輯的表格：

4.6.3.1 表格編輯

選中一編輯按鈕時，當(dāng)前表格所有可編輯的數(shù)據(jù)單元格內(nèi)顯示文本修改框。這一功能基本用于大面積需要填寫和修改的時，

如：填寫報表，由于數(shù)據(jù)修改多，這種方法的另一個問題是容易填錯單元格。想象單元格的密集，用戶意外編輯錯誤的單元格比較容易。這樣的話需要編輯/暫存/提交三個操作。

如果發(fā)現(xiàn)編輯的內(nèi)容報錯可被更正，應(yīng)直接引導(dǎo)用戶更正；如果報錯內(nèi)容不可被更正，則告知用戶原因。

4.6.3.2 行編輯

針對同一行標(biāo)簽下的數(shù)據(jù)編輯。新增數(shù)據(jù)行后，視圖定位到新增的行并高亮顯示，讓用戶快速聚焦。

4.6.3.3 單元格編輯

哪些是可編輯的，哪些不是可編輯十分明確，適于較少的數(shù)據(jù)編輯時。

4.6.4 懸停(操作/選中表格/放大）

當(dāng)鼠標(biāo)懸停時，可對當(dāng)前行背景作出區(qū)分，辨別光標(biāo)所在行，或放大懸停行區(qū)域，達(dá)到醒目的效果。

當(dāng)提出額外的操作時，用戶懸?？梢允褂脩艟劢褂诋?dāng)前操作。如谷歌郵箱：

4.7 空表

在表格的空白內(nèi)容處加入創(chuàng)建的快捷入口，引導(dǎo)用戶新建表格，或者父級頁面提示倒入數(shù)據(jù)。

如下圖郵箱已發(fā)送郵箱為空時：

沒有創(chuàng)建訴求的，直接告之暫無數(shù)據(jù)。如數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無數(shù)據(jù)，話術(shù)的表述則需與后臺文案的整體風(fēng)格保持一致。

關(guān)于表格設(shè)計就大概講完了，在總結(jié)歸納中也發(fā)現(xiàn)了自己平常設(shè)計表格中的其他問題。個人感覺還是有很多漏洞，說的不正確的，歡迎大家指正。

參考文獻(xiàn)鏈接

1.web表格設(shè)計攻略http://www.codemsi.com/ucd/714641.html

2.數(shù)據(jù)表的用戶界面最佳設(shè)計http://www.codemsi.com/pd/661699.html

3.設(shè)計表格的可重用性https://uxdesign.cc/designing-tables-for-reusability-490a3760533

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

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