最近做了幾個后臺管理系統(tǒng)，表格在其中占據(jù)著不可或缺的地位。在此對于表格的設計做一個整理，如有考慮不周之處，歡迎留言，共同學習進步~

表格：一種可視化的數(shù)據(jù)交流模式，也是組織整理數(shù)據(jù)的一種手段，主要承載數(shù)據(jù)的展示、對比和歸納。

一、設計原則

易讀：表格應該是一目了然的，層級分明的。讓用戶的注意力集中在內(nèi)容而不是表格的形式。

高效：表格頁應該是可交互的，幫助用戶更快來分類獲取信息以他們習慣的方式。

?二、表格結(jié)構(gòu)

下圖展示的為最常見的表格，表格不僅可以包含數(shù)據(jù)還可以包含可視化元素，比如：圖表。對于表格，最基本的元素就是表體，也就是數(shù)據(jù)部分。

1. 容器：容器包含表格的所有內(nèi)容。
2. 搜索/篩選區(qū)域：方便用戶快速查詢定位數(shù)據(jù)，一般位于表格上方。
3. 功能性按鈕：一般位于表格上方，有時也可以位于表格下方。
4. 表頭：起到對于數(shù)據(jù)內(nèi)容的解釋以及可以附加篩選排序等。
5. 表體：包含行和列數(shù)據(jù)以及一些操作（可選）。
6. 底欄：底欄包含數(shù)據(jù)量以及總頁數(shù)和當前頁數(shù)以及每頁數(shù)據(jù)量和分頁，底欄數(shù)據(jù)也可以放置在表格頂部。

2.1 搜索/篩選區(qū)域

在表格設計中，一般搜索和篩選會同時出現(xiàn)，但是兩者一般很少同時使用來對數(shù)據(jù)進行定位。搜索更多的是對單一或者包含某個字段的的數(shù)據(jù)來進行定位，有更高的精確度；

不同于搜索，篩選更多的是查詢一類數(shù)據(jù)，可以和一些功能相配合使用（導出）。

根據(jù)搜索和篩選的屬性，我們可以根據(jù)實際情況設計搜索和篩選的表現(xiàn)形式。

根據(jù)MECE，我們可以歸納出以下的場景：

1. 常用搜索少用篩選，若篩選項多，可以選擇隱藏篩選性，篩選少可以展示出來；
2. 搜索和篩選都常用，可以將搜索和篩選都展示出來；
3. 常用篩選少用搜索，篩選和搜索同時展示；
4. 篩選和搜索都不常用，展示搜索隱藏篩選。

搜索

• 構(gòu)成：標簽，輸入框，搜索按鈕（可選）
• 輸入：通過輸入特定的字段，來查詢單一的數(shù)據(jù)，在表格中有導航的作用。
• 查詢范圍：可以查詢單個數(shù)據(jù)類型，也可以查詢多個數(shù)據(jù)類型
• 搜索結(jié)果：根據(jù)輸入的搜索字段，可能存在空狀態(tài)。對于搜索結(jié)果的排序，可以根據(jù)數(shù)據(jù)的匹配度或者生成時間等排序。

根據(jù)匹配方式，可以分為：精確搜索和模糊搜索。在大多數(shù)情況下，模糊搜索有利于減輕用戶記憶負擔，但是在同一個輸入框搜索具有相似度很高的內(nèi)容（比如手機號和ID都包含數(shù)字）時，建議對于該內(nèi)容使用精確搜索或者分開兩個輸入框搜索。

根據(jù)搜索時效性，又可將搜索分為，實時搜索和點擊搜索。實時搜索，指的時在用戶輸入數(shù)據(jù)時便進行數(shù)據(jù)的搜索，具有搜索快速，搜索結(jié)果實時顯示的好處，但是僅適用于小數(shù)據(jù)搜索；點擊搜索，指的是在輸入數(shù)據(jù)后，需要點擊按鈕才能進行搜索，該搜索方式適用性強。

根據(jù)表現(xiàn)形式，可以將搜索分為,簡單搜索和復雜搜索。簡單搜索，指的是單一搜索框的形式，視用戶對于搜索的需求的強烈度，可以放置輸入框在篩選框前或后（注意保持所有頁面統(tǒng)一），簡單搜索還可以加上標簽篩選，來搜索不同的數(shù)據(jù)類型（圖書搜索—作者，書名，編號等）；復雜搜索，指的是多個搜索框的形式，一般只展示一個最常用的輸入框，其余的輸入框隱藏。

篩選

• 構(gòu)成：菜單項，單選/復選框（可選），搜索框（可選），篩選按鈕（可選）
• 篩選：通過選擇特定的選項，來對現(xiàn)有的數(shù)據(jù)進行篩選，篩選項應該遵循MECE原則。
• 數(shù)據(jù)數(shù)量：對于數(shù)據(jù)篩選沒有交叉的情況，同時篩選項少于5項時，我們可以采用展開的形式（單選框，標簽的形式，頂部tab等形式）來進行篩選；對于超過5項少于25項的情況，我們可以采用下拉菜單的形式；對于超過25項的內(nèi)容，我們可以在下拉菜單加上模糊搜索，采用實時搜索。
• 數(shù)據(jù)呈現(xiàn)：一般包含全部或者不限這一項，對于兩者的區(qū)別就如同all和any的區(qū)別。對于數(shù)據(jù)的呈現(xiàn)，我們可以根據(jù)用戶的行為設置默認值。

根據(jù)觸發(fā)方式，可分為：觸發(fā)篩選，實時篩選。一般情況下，篩選條件存在交叉時使用觸發(fā)篩選，不存在交叉時使實時篩選。也可以根據(jù)篩選條件的數(shù)量選擇合適的觸發(fā)方式，比如條件少時用實時篩選，條件多時用觸發(fā)篩選。

根據(jù)篩選的位置，可以分為：標題篩選，表頭篩選。標題篩選指的是，在表格的標題處可以進行相關(guān)項的篩選，優(yōu)點時可以節(jié)省空間，缺點是一次只能篩選一項；表頭篩選，指的時篩選框單獨呈現(xiàn)在表頭，形式可以是組合篩選（多個篩選條件）和單個篩選，同時視篩選的對用戶的重要程度可以選擇是展開還是隱藏顯示。

交互形式：點擊菜單呈現(xiàn)下拉框，鼠標移到相應的項會有視覺區(qū)分，點擊該項選中該項，外部顯示選中的項。日期篩選建議使用一次點擊選擇日期范圍，而不是需要點擊兩次來分別選擇，同時禁用無數(shù)據(jù)的日期。

2.2 功能性按鈕

常見的功能性按鈕有：導出，創(chuàng)建，設置表格結(jié)構(gòu)（定制表單，設置行高…）等（功能性按鈕在這里指的是對于表格數(shù)據(jù)進行增刪改查等 ）。

根據(jù)人的閱讀習慣和人機工程，一般重要的按鈕(破壞性按鈕除外)放在左邊，次要的放在右邊，常用的按鈕放在左邊，不常用的按鈕放在右邊。

所以我們可以根據(jù)按鈕的重要程度和使用頻率來設計按鈕的放置位置。

導出

形式：一般為填充主色彩的按鈕形式，有禁用/啟用/Hover/Focus/Press五種狀態(tài)。

交互：在未選中數(shù)據(jù)時（有復選框的形式），按鈕為禁用狀態(tài)，若設計為啟用狀態(tài)，可以在點擊是出現(xiàn)toast提示；在選中數(shù)據(jù)時，點擊導出數(shù)據(jù)。

導出數(shù)據(jù)：導出的數(shù)據(jù)可以是部分數(shù)據(jù)也可以是全部數(shù)據(jù)，視實際情況而言。對于導出文件的名稱一般的處理為：當前頁面的名稱+當前日期（時間視情況而定）。不導出表單的相關(guān)操作，只導出數(shù)據(jù)。

創(chuàng)建數(shù)據(jù)

形式：一般為填充主色彩的按鈕形式，有禁用/啟用/Hover/Focus/Press五種狀態(tài)。

交互：一般點擊創(chuàng)建按鈕，會出現(xiàn)包含創(chuàng)建項目數(shù)據(jù)的彈窗。彈窗一般包含：標題，創(chuàng)建項目表單，取消/創(chuàng)建按鈕（創(chuàng)建按鈕一般在必填數(shù)據(jù)未填寫時呈現(xiàn)禁用狀態(tài)）。

彈窗表單設計注意點：1.選擇合適的輸入方式 ?2.顯示必要的數(shù)據(jù)項以及默認的數(shù)據(jù)（默認的序號等） 3.能創(chuàng)建數(shù)據(jù)，一般就能刪除數(shù)據(jù)

自定義表單項

使用場景：由于一份數(shù)據(jù)報表，往往需要滿足各種不同的角色在不同情況下的需求，因而在數(shù)據(jù)內(nèi)容上，一般采取寧多勿少的原則，即系統(tǒng)提供盡可能詳細的數(shù)據(jù)給用 戶，由此就造成了表格數(shù)據(jù)項過多，難以在一個屏幕內(nèi)完整展示，導致需要橫向拉伸，極大的降低了表格的可讀性。

表現(xiàn)形式：一般有兩種形式，一種是將所有的數(shù)據(jù)項都展示在表格的上方（可以收起/展開）；另一種是點擊按鈕出現(xiàn)彈窗進行選擇配置。

設計注意點：一般默認顯示最重要，最常見的幾個數(shù)據(jù)項，用戶可以根據(jù)自己的需求自定義數(shù)據(jù)項。

設置行高

使用場景：由于用戶閱讀表單的設備的多樣性，一個統(tǒng)一的行高會導致在不同尺寸設備上一屏顯示的數(shù)據(jù)的差異化，影響閱讀的效率。

設計注意點：設置行高為興奮需求，可以提高用戶的用戶體驗。所以我們可以視表格的具體情況來設計設置行高的形式，可以放置在設置按鈕里，也可以在外部按鈕較少的情況下展示出來。

2.3 表頭

作用：解釋當前列數(shù)據(jù)。所以在數(shù)據(jù)有明顯的差異以及能自我表意的時候，甚至可以去掉表頭（郵箱），畢竟表頭也占據(jù)一定的空間。

設計注意點：

1. 表頭標題盡量簡約
2. 表頭的UI表現(xiàn)區(qū)別于正文
3. 表頭標題與數(shù)據(jù)對齊，完整顯示標題

根據(jù)表頭的構(gòu)成，可以分為三類：

1. 純文本表頭-僅起到解釋數(shù)據(jù)屬性的作用
2. 多功能表頭-可以篩選、排序、搜索相關(guān)數(shù)據(jù)
3. 多級表頭-信息分類層級較多的情況下使用

對于多功能表頭，常見的功能包含：全選復選框，篩選，搜索，排序。

• 全選復選框：對于全選，有兩種情況，一種是全選當前頁面的所有數(shù)據(jù)項，另一種是全選所有數(shù)據(jù)項。所以為了適應不同的場景需求，復選框可以進一步篩選是全選當前頁面所有數(shù)據(jù)還是所有數(shù)據(jù)，也可以篩選別的類型的數(shù)據(jù)（已讀、未讀、已標記、未標記等）。
• 篩選：表頭篩選和單獨篩選相比，只能篩選一列數(shù)據(jù)，使用實時篩選，但是具有節(jié)省空間的作用。篩選不僅可以篩選單選或復選，還可以篩選日期。
• 搜索：我們還可以對于一列的數(shù)據(jù)在表頭進行搜索，來節(jié)省空間。
• 排序：設置查看數(shù)據(jù)優(yōu)先級順序，快速發(fā)掘最關(guān)注的信?？梢允褂蒙舷掳粹o進行排序（只有兩種排序），還可以使用下拉菜單進行排序（適用于多種排序）。同時我們可以根據(jù)用戶的認識來設計排序，比如對于銷量，我們可以只顯示從高到低的排序(用戶并不會對于低銷量的商品感興趣)。對于排序的方式，有按A-Z首字母升序/降序，也有按數(shù)值升序/降序。

對于表頭的交互，可以將表頭分為固定表頭和隨數(shù)據(jù)一起滾動的表頭。固定表頭，一般標題的數(shù)據(jù)屬性相似或者數(shù)據(jù)很多或者需要橫向滾動表格時，固定表頭便于分辨記憶。對于滾動表頭，建議若數(shù)據(jù)之間差異大可以直接去掉表頭。

2.4 表體

表體的構(gòu)成：數(shù)據(jù)，分割線，功能操作（可選）。

表體的布局：

• 垂直布局—弱化了行，強化了列，用于行與行之間的數(shù)據(jù)對比，一般用于數(shù)據(jù)統(tǒng)計；
• 水平布局—強化了行，弱化了列，符合閱讀從左往右的順序，強調(diào)信息的連貫性，多用于多數(shù)據(jù)的情況，使用較為廣泛；
• 矩形布局—每個數(shù)據(jù)被分割，適用于數(shù)據(jù)過多，沒有足夠的空間來區(qū)分數(shù)據(jù)的情況。

數(shù)據(jù)：

對于數(shù)據(jù)，根據(jù)表現(xiàn)形式可以分為行數(shù)據(jù)和列數(shù)據(jù)。行和列是包含數(shù)據(jù)的容器。

行：

一行數(shù)據(jù)一般都是同一主體的不同屬性（比如：同一用戶的相關(guān)信息：ID、姓名、身份證、性別、年齡等。當然行數(shù)據(jù)也可以是對于列數(shù)據(jù)的統(tǒng)計。

交互：鼠標移到一行數(shù)據(jù)一般有視覺區(qū)分（顏色或者是高度-陰影）。已點擊閱讀的項有視覺區(qū)分（顏色弱化或者有標記）。

UI表現(xiàn)：為了加強行數(shù)據(jù)的聯(lián)系，我們可以使用斑馬線（顏色差距不宜太大）或者是去除豎分割線的形式，來加強視覺引導，提高閱讀效率。

行高：行高通過數(shù)據(jù)的密度和一屏顯示的行數(shù)，來影響用戶提取數(shù)據(jù)的效率?？紤]表格的行高時，我認為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮，文字行高可以設定為字號的1.2-1.8倍，文字與分割線間距離可以設定為字號的1-1.5倍。

行高因為用戶習慣和用戶設備的不同，無法滿足所有用戶的需求，所以對于行高我們可以讓用戶去選擇合適的行高。

列：

一列數(shù)據(jù)指的是同一屬性的數(shù)據(jù)。根據(jù)7±2原理，建議最多展示9條列數(shù)據(jù)，同時少量的列數(shù)據(jù)也方便用戶瀏覽。建議將重要的列數(shù)據(jù)居左放置，表格只顯示重要的數(shù)據(jù)，對于次要的數(shù)據(jù)可以放入詳情頁。

UI表現(xiàn)：為了加強縱向數(shù)據(jù)的對比，可以使用兩種方式，1.縱向斑馬線，一般用于列與列之間的數(shù)據(jù)對比，用處有限；2.有時會使用不同粗細的縱向分割線對信息進行區(qū)隔，增加同類信息對比性。

列寬：

1. 數(shù)據(jù)長度固定時，一般顯示完整數(shù)據(jù)，具有固定的列寬，比如手機號可以設置150px；
2. 數(shù)據(jù)長度不固定時，首先我們應該了解用戶的輸入內(nèi)容的情況，比如用戶個性簽名，我們設置了200字符，但是經(jīng)過數(shù)據(jù)分析，發(fā)現(xiàn)大多用戶的簽名長度少于20，那我們可以設置列寬為20，從而保證大多數(shù)數(shù)據(jù)的完整；
3. 較少情況下，我們設置的數(shù)據(jù)不能完整的顯示數(shù)據(jù)，但是數(shù)據(jù)對于用戶有比較的重要。那我們可以讓用戶手動拖拽調(diào)整列寬（不影響別的列寬，可能會出現(xiàn)橫向滑動的情況）。

交互形式：對于一些列數(shù)據(jù)我們可以加上超鏈接，比如ID，用戶稱號等。注意區(qū)分別的數(shù)據(jù)，比如可以使用顏色。

顯示：

（1）字體的選擇

表格數(shù)據(jù)一般包含文本和數(shù)字。字體的選擇，保證字體的可讀性。

對于文本，有以下幾點建議：

1. 避免全大寫字體，因為它很難讀，需要轉(zhuǎn)化思維；
2. 避免使用襯線字體，因為個性會產(chǎn)生閱讀噪音，不利于用戶對數(shù)據(jù)的理解和思考；
3. 避免使用斜體，易引起視線疲勞，影響閱讀；
4. 避免使用多種字體和選擇可讀性高的字體，保持風格統(tǒng)一。

對于數(shù)字，建議使用表格數(shù)字而非舊式字體和比例字。數(shù)字的單位，一般在表頭中顯示。

為了便于用戶信息的提取，我們可以設計數(shù)值的格式。表格數(shù)字不是越精確越好，需要多少有效數(shù)字就顯示多少，不必太多。所以我們可以設置數(shù)字的格式 :

1. 顯示數(shù)值，但是設置小數(shù)點位數(shù)，千分位和數(shù)值單位等；
2. 顯示百分比，設置小數(shù)點位數(shù)。

對于數(shù)值，我們應該減少用戶的計算，通過對比分析數(shù)據(jù)，在原有的數(shù)值上給出差值，升降變化，總計值平均值等分析性數(shù)據(jù)結(jié)果，方便用戶的查閱。

（2）對齊很重要

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

1. 數(shù)字右對齊；
2. 文字信息左對齊；
3. 表頭與數(shù)據(jù)對齊。

數(shù)字是從右向左讀的：這是因為，我們對比數(shù)字時，首先看個位，然后十位、百位。多數(shù)人也是這么學會算數(shù)的——從右邊開始，向左移動，在移動中傳遞數(shù)字。

文字信息是從左向右讀：這是符合人們的閱讀習慣的，一般人們的閱讀方式是從左往右，從上往下。當然不同的區(qū)域有不同的閱讀習慣，比如阿拉伯就是從右往左的閱讀習慣。

通常，表頭應當符合數(shù)據(jù)的對齊方式。這能保持表格豎直方向整潔，營造一致性和上下文環(huán)境。

（3）數(shù)據(jù)顯示

在一個單元格數(shù)據(jù)顯示不完整時，我們可以截斷數(shù)據(jù)以…暗示數(shù)據(jù)的不完整。

對于截斷數(shù)據(jù)的展示，我們可以使用氣泡彈窗的形式（查看靈活，操作成本低，但是影響查看其他內(nèi)容）或者是下拉查看（適合查看較多的內(nèi)容，不會影響查看其他內(nèi)容，操作成本高）。

空單元，會給用戶帶來疑惑，到底是無數(shù)據(jù)還是數(shù)值為0？

對于數(shù)值為0的數(shù)據(jù)，我們應顯示0，數(shù)值格式的處理和其他數(shù)值相同（小數(shù)點等），方便查看；對于無數(shù)據(jù)，我們可以使用“-”來顯示。

（4）分割線

如果對表格中的數(shù)據(jù)使用了合適的對齊方式，分隔線就會很多余。使用分隔線的首要好處是可以縮小元素間的空間，但仍可以區(qū)分各元素。即便要使用分隔線，也應該把顏色盡量減淡，不能妨礙快速瀏覽所以建議采用相同顏色的具有一定透明度的分割線，減少視覺噪音。

水平分隔線的用處是最大的，因為它可顯著減輕長表格占用的垂直方向的視覺重心，加快大量數(shù)據(jù)的對比工作，以及隨著時間看清趨勢。

（5）功能性操作

表體的功能操作根據(jù)針對的對象，可以分為：

1. 單個數(shù)據(jù)—可以針對單個數(shù)據(jù)進行編輯，形式可以是框內(nèi)編輯（不適合長內(nèi)容），可以浮層編輯，也可以彈窗編輯（會覆蓋信息）；
2. 整行數(shù)據(jù)—一般操作放置在表格的最后一列，建議超過兩個的操作，次要操作彈窗顯示（節(jié)省水平空間，防止誤操作），在鼠標hover狀態(tài)時顯示彈窗；
3. 在針對數(shù)據(jù)操作過多時，我們可以在選中該條數(shù)據(jù)時顯示針對數(shù)據(jù)的操作（Gmail）。

（6）操作按鈕的顯示

1. 圖標（和文字相比占據(jù)更少的空間，但是要注意其表意性）；
2. 圖標+標簽（占據(jù)更多的水平空間，但是可視化程度更高，適用于單個操作的情況）；
3. 文本鏈接（表意性強，但是可能存在文本過長的問題，建議在只有少于3個按鈕的時候使用，或者在下拉菜單中使用）。

對于單條數(shù)據(jù)的編輯修改，如果數(shù)據(jù)內(nèi)容固定且只有幾項，則可以使用下拉菜單的形式；若數(shù)據(jù)內(nèi)容不固定，但是數(shù)據(jù)長度短，可以在單元格內(nèi)修改；若數(shù)據(jù)長度不固定，這可以使用彈窗的形式來進行編輯。

2.5 底欄

底欄同樣可以放置在表頭的上方。

底欄一般包含以下幾個部分：

1. 當前頁面數(shù)據(jù)的條數(shù)設置（可固定配置也可用戶手動設置）以及總的數(shù)據(jù)條數(shù)；
2. 總頁數(shù)以及當前處于的頁數(shù)顯示；
3. 前后翻頁功能（前一頁,后一頁，首頁，尾頁）；
4. 跳轉(zhuǎn)功能（對于很多頁數(shù)的表格尤其適用）。

對于分頁器可以分為以下幾類：

1. 復雜分頁器：可以設置每頁的顯示條數(shù)，適合大數(shù)據(jù)量。用戶可以根據(jù)自己的顯示屏調(diào)整顯示條數(shù)以提???高數(shù)據(jù)處理效率。對于條數(shù)的設置，可以選擇已設置的條數(shù)，也可以手動輸入設置條數(shù)。
2. 簡單的分頁器：不可以設置每頁條數(shù),甚至沒有跳轉(zhuǎn)功能

分頁器的功能就是加載數(shù)據(jù)，該功能還有一種方式可以取代分頁器，那就是加載更多。

但是加載更多只適合小數(shù)據(jù)量，它具有節(jié)省空間，同時能給用戶一種沉浸式體驗。但是這種模式，對于數(shù)據(jù)量難以把握，操作不靈活。

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

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