作為頁面布局的重要組成部分，表格的身影隨處可見。了解與熟知To B業務平臺軟件設計的工作人員都應該知道，表格在平臺應用中的重要性。表格出現的概率不是一般的多，內容信息的排列布局、大量數據的展示、眾多功能操作的按鈕擺放，一般都會用到相應的表格，而且表格的樣式類別也是多種多樣。表格的設計也遠遠沒你想象中的那沒簡單，可以說要想設計出滿足業務需求、符合用戶心智模型的表格不是那么的輕而易舉。
本文就來詳細聊一聊表格。聊之前，我們應該明確三個詞的概念：列表、表格、表單。
列表，英文釋義為List。百度釋義為：以表格為容器，裝載著文字或圖表的一種形式，叫列表。如，班主任點名的花名冊，就是一個列表；QQ軟件的好友列表等等。
表格，英文釋義為Table，又稱為表，即是一種可視化交流模式，又是一種組織整理數據的手段，主要承載數據的歸納、展示與對比的功能，是列表的一種。
表單，英文釋義為Form。表單在網頁中主要負責數據采集功能。如當我們注冊某個網站的賬號時，填寫個人信息的頁面，就是一個表單。
表格經常和其他界面元素一起協同使用，用于展示和操作結構化數據，并經常用于詳情信息的入口。通常表格的組成元素以及相關元素會有多個部分，筆者根據自己設計表格的工作經驗將表格概括為篩選區、表頭、內容區以及底欄等四個部分，其各個部分包含的相關元素如圖所示。
接下來，我們對表格的每一個部分進行講解。
篩選區
篩選區可以看作表格的導航。篩選區主要包括兩部分，一是篩選，二是搜索。其目的相同，都是將操作者所關注的數據展示到前面，便于查看。
1、篩選 ? ?
篩選是將一類數據展示出來，而將其他類型的數據隱藏。當表格數據的類型多于兩種時，則考慮采用篩選條件。
1）篩選案例1
篩選條件在頂部，共七個。因為篩選條件存在交叉，所以都展示在頂部。選擇條件以后，需點擊才能觸發篩選。
2）篩選案例2
篩選條件在頂部，因為篩選條件不存在交叉，所以實時篩選。
3）篩選設計建議
a、對于篩選條件沒有交叉的場景，當條件少于五個，制作成table切換；超過五個少于二十個，采用下拉選擇；多與二十五個，為下拉選擇添加模糊匹配設置，并配備實時刷新；
b、對于篩選條件有交叉的場景，建議采用展開形式，并配備手動加載刷新。
c、對于需輸入篩選條件的場景，如日期篩選條件，單獨處理，展示出來。
2、搜索
搜索是目的在于定點查看。搜索的使用場景是操作者要查看某一特定數據，輸入相應的條件，進行搜索，頁面對所搜索的數據進行展示。
1)搜索案例1
搜索框緊跟篩選條件，并配有確定搜索按鈕。
2)搜索案例2
當存在多個搜索輸入框時，用高級搜索打包收起，點擊展開，同時，配備搜索與重置按鈕。點擊右上角的漏斗可以設置高級搜索條件的顯示與隱藏。
3)搜索設計建議
a、搜索輸入框盡量采用模糊搜索，不要讓用戶去辨認、識別要輸入的內容；
b、對于多個搜索條件交叉搜索的場景，建議采用高級搜索按鈕，將其打包收起，并配置重置按鈕，便于一鍵清空所有搜索條件，便于接下來的搜索。
表頭
表頭是對表格數據的操作，包括行標簽、操作工具等。有些簡單表格，將表頭與篩選區合并，將篩選條件、搜索雜糅在一起。
1、固定
表頭固定，目的在于向下滾動表格時，表頭出現在頁面頂部，時刻指示出該列數據的類別屬性。
1）固定案例1
該案例中每列數據具有明顯的差異，數據本身體現出了類型，在不需要表頭情況下，用戶能夠清楚的知道數據類型及意義，不會出現混淆，故沒有采用固定表頭的設計。
2）固定案例2
表格中的數據列差異不大，用戶不能直觀的根據表格中的數據分辨出數據類型，因此采用固定頂部表頭，指示出數據類型。
3）固定表頭設計建議
a、在數據顯示超過40條時（電腦屏幕一屏無法完全顯示，需要滾動查看時），且表格中的數據不能直觀的展示出數據類型，建議采用固定表頭的形式，時刻顯示數據類型；
b、當字段數量過多，需要橫向滾動表格，且需要對比數據時，采用固定屬性列字段。
2、字段數量
1）字段數量案例1
表格的字段過多，且數據分類不明顯，因此采用橫向滾動形式，將重要數據放在表格左側，次要數據放到表格右側。
2）字段數量案例2
與案例1相同，字段過多，采用橫向滾動形式。但相比案例一，在向右滾動數據時，縱標簽固定，指示數據類型。第一列是時間需要進行對比，固定了第一列使得閱讀起來存在一個基礎。
3）字段數量案例3
對數據進行分類顯示，做成下拉選擇切換形式。將重點數據放置在默認顯示頁面，次要數據放置在下拉選擇的類別中。頁面簡潔，功能完備且有序。
4）字段數量案例4
相較于案例3，同樣對數據進行分類顯示，并制成table切換形式。數據的類型較少，且不存在主次關系，僅進行數據羅列展示。
5）字段設計建議
a、對于字段數據沒有明確分類，或者有些數據不太重要，可以采用橫向滾動條，進而固定左側屬性列，便于數據對比；
b、對于數據有類別區分，可以采用分類展示，切換button放在頂部或列表中。
3、字段
字段，為表頭中的行標簽中的字段標識。字數多少以及傳達的意義是否明確，對于表格功能的表現至關重要。
1）字段案例1
采用簡單英文單詞、單詞縮寫、詞組子母首拼等來傳達字段含義。同時，每個字段后面緊跟釋義標識。鼠標懸停，即可出現該字段的詳細解釋，順暢的滿足了新手用戶、普通用戶以及專家用戶的需求。
2）字段案例2
字段用意義明確的單詞、詞組來表示。字段數量較少時，用簡潔的標識字段數據，界面簡潔、意義明確。
3）字段設計建議
a、字段在五個以下，且字段的類型較為常見，或能夠用簡短的文字描述清楚，可采用單詞或詞組來作為字段；
b、若字段超過五個，或不常見字段類型，或者簡短文字不能闡述清楚，可以考慮使用縮寫或者特殊單詞做字段，另附解釋文字。
4、排序
對表格中的數據進行排序，是讓純粹以展示為目的的表格增添了活力，用戶可以改變數據的排序，豐富了數據展示形式。
1）排序案例1
僅用單向箭頭指示出當前的數據表格排序依據，并沒有指明排序的形式。在字段較多、且存在幫助標識的情況下，僅僅指示出排序的依據，是比較合適的設計，畢竟排序的依據要比形式重要的多。
2）排序案例2
上下箭頭指示排序，一般上下空心箭頭默認，上箭頭為升序，下箭頭為降序，也有通過明確說明來提示排序的方式
3）排序設計建議
a、字段在五個以下，排序可以采用明確的排序類型指向性明確的ICON；
b、字段數量大于等于五個時，只顯示排序圖標，而不顯示類型。
內容區
1、分割線
1）分割線案例1
表格采用了同樣灰度與透明度的橫縱分割線，斑馬線以及懸停高亮底色能夠很好的引導用戶的視線，避免在閱讀時出現錯行、迷失的情況。同時沒有強調單個數據，或者數據之間的關系，僅做純粹的數據展示，頁面客觀，避免各種錯誤的引導。
2）分割線案例2
采用獨立數據，弱化縱向分割線，采用懸浮高亮顯示，展示一條數據的完整性。
3）分割線案例3
采用橫線構架出行的視覺，數據信息均勻分布。同時，用縱向分隔線對數據進行分類，表達出數據之間的類別關系，具有明確的數據類別指向。
4）分割線設計建議
a、對于數據之間的關系緊密且有對比關系的，可以采用橫向與縱向分割線；
b、對于較有獨立性的數據可強調橫向分割線，弱化縱向分割線；
c、對于每條數據中的字段有分類的表格，可以在強調橫向分割線的同時，弱化同類數據的縱向分割線，而強調數據類型之間的縱向分割線。
2、勾選框
在表格中，勾選框主要用于選擇條目并進行批量操作。
1）勾選框案例1
方案采用全選框與下拉選擇來實現全選的范圍。直接點擊全選框，默認全選本頁的全部條目。點擊下拉箭頭，顯示不同的全選范圍類型，可點擊選擇。
2）勾選框案例2
與案例1相同，指示全選的范圍有所不同，案例1是以頁面為單位進行選擇，案例2是以數據類型進行選擇，同時包含了篩選與全選的功能。
3）勾選框案例3
勾選放置在條目后面，便于用戶在查看完一條數據后，決定是否勾選。
4）勾選框設計建議
a、當數據超過一頁時，對全選操作提供全選范圍；
b、當數據具有類型時，可以考慮對數據的不同類型進行全選；
c、對于逐條勾選的數據，若需要查閱數據后決定是否勾選，勾選框可以放在條目后面；當不需要查閱數據就能確認是否勾選，勾選框應該放在條目前面。
3、對齊
在表格設計，對齊有兩方面的目的，一是便于數據對比；二是便于用戶閱讀，其分別對應了數據與文字兩種類型。
1）對齊案例1
數據右對齊，便于數據的對比；文字左對齊，便于用戶閱讀。數據的單位及小數點后位數，保持一致。
2）對齊案例2
將橫向的行內信息再次擴充就成了如同淘寶商品頁一樣的，行區分弱化的表格形式，既滿足了豐富信息的呈現，也能很快速的進行與行之間的如同價格等關鍵信息的對比。
3）對齊案例3
對于數據的小數點后面的位數不同的場景，采用以個位數字為基準，居中對齊，便于對比。
4）對齊設計建議
數據右對齊，文字左對齊，盡量保證數據的小數點后單位一致；若不能，則以個位數為基準，居中對齊。
4、操作項
操作項是用戶對數據的操作處理，不同的數據類型，其操作項的類型、數量有較大差異，同時，還牽涉到數據批量操作與單項操作的頻率問題。操作項一般存在于條目最后，以及表頭位置，分別對應單條操作與批量操作的場景。
1）操作項案例1
共兩個操作項，且放置在條目最后。因為編輯、刪除以及設置ICON的含義明確，且廣為人知，故僅用純ICON來表示，簡潔醒目。
2）操作項案例2
操作項在條目后面，多個操作動作，放置在后面，折疊起來。在操作時，點擊下拉出現具體操作項。
3）操作項案例3
操作項為ICON+文字，共兩個，放置在條目最后。對于圖形意義不太明確或者圖形的含義有較大變化，采用圖形+文字的形式，傳達意義更加明確清楚。
4）操作項案例4
操作項為純文字，存在表格頂部的表頭，勾選所選條目以后點擊操作按鈕可用。文字按鈕，傳達的意義更加明確，辨識性強。
5）操作項案例5
兩個操作項為按鈕形式，且放置在條目最后，提高了醒目性，引導用戶點擊操作。
6）操作項設計建議
a、對于單條數據操作頻繁的場景，操作項不操作三個時，操作項跟在條目后面，常見操作僅用ICON，不常見操作用ICON+文字，當超過三個時，建議將操作折疊收起。
b、對于數據批量操作頻繁的場景，建議將操作放到表格頂部，與勾選操作配合使用。
5、空單元格
作為表格中的特殊狀態，空單元格主要存在兩種情況，一是數據不存在，二是數據為零。
1）空單元格案例1
對于不存在的數據，單元格不能空置，需要用短橫線代替，表示該項數據不存在，給用戶明確指示。
2）空單元格案例2
對于數據為零的單元格，要填上0，且小數點后位數、單位，都要與上下單元格保持一致。
3）空單元格設計建議
在任何情況下，單元格都不應該空置出現，避免用戶的困惑。針對不存在的數據可以用其他占位符，告知用戶該單元格不存在數據；對于數據為零的單元格，與上下數據單位、小數點相同的0來表示。
6、行高
在表格設計中，行高是非常重要的參數，行高間距直接影響著閱讀的體驗，同時還影響著一個頁面中數據的顯示量。
1）行高案例1
該案例中，數據表格的內容為單行顯示，行高較小。數據顯示緊湊、有序，同時，便于跨行之間的數據對比。
2）行高案例2
該案例中，數據表格中的內容存在多行顯示，行區分弱化的表格形式，既滿足了豐富信息的呈現，也能很快速的進行行與行之間的關鍵信息對比。
3）行高設計建議
對于單行顯示數據內容的表格，建議行高約為字體高度的2.5倍到3倍；對于多行顯示數據的表格，建議行中內容的最高點與最低點到行框的上下邊距略小于文字高度。
底欄
底欄緊跟在表格正文之后，主要展示正文中的數據量以及單頁數據條目，同時，兼具一些導航的功能，指示當前所在頁面以及跳轉到指定頁面。
1、分頁
1）分頁案例1
案例采用了整體頁碼平鋪的方式，分別展示出前、中、后點的若干頁碼，便于用戶順序查看。案例中的數據不具有特殊性，用戶很少會特定的查看某一頁的數據，因此沒有定點跳轉的功能。
2）分頁案例2
分頁不僅僅要指出當前數據所在整體數據的位置，同時還要指出數據量的多少，給用戶已明確的指示。
3）分頁設計建議
分頁的設計是根據不同的場景進行選擇最優的設計方案。在不需要定點跳轉的場景，建議采用案例1或者案例2中的第兩種設計，刪除多于的功能，使頁面簡潔、清爽。在需要定點跳轉的場景，采用案例2中的第一種和第三種設計，能夠節約用戶的大量時間，且設計相對簡單，用戶很容易就明白設計意圖。
2、單頁條目顯示
1）單頁條目顯示案例1
一般情況下，單頁條目顯示與分頁是一體的，分別位于底欄的左右兩側。案例一的單頁條目顯示僅僅作為單頁條目數量的顯示，而不具有設置功能，同時在表格頂部也做相應的展示。
2）單頁條目顯示案例2
案例不僅展示了當前頁面顯示條目的數量，同時給出相應的顯示數量自定義的設置功能。可增加單頁條目的顯示數量，便于更多數據放在一起對比分析。
3）單頁條目顯示設計建議
對于單頁條目顯示的設計，建議采用頁面條目顯示數量自定義的設計方式，其設計可以豐富數據的對比范圍，在特定情況下會方便用戶的操作。
寫在結尾
表格的設計遠遠沒有想象的那么簡單，除了純粹的數據展示，現在的表格越來越兼顧到一些導航的功能在里面，不僅僅縱向展示數據，在橫向方面也做了相應的擴展。
言盡于此，表格還有一些其他的設計點尚未談及，如子母表、數據狀態、列寬、數據列表編輯等，以后有機會，再完善表格設計的剩余方面。
參考資料
http://www.uisdc.com/tips-of-data-table-design
http://www.uisdc.com/table-design
https://ux.stackexchange.com/questions/55847/extra-wide-tables-best-practices
http://designingwebinterfaces.com/ultimate-guide-to-table-ui-patterns
https://www.builditwith.me/
https://design.pega.com/
