作為頁面布局的重要組成部分魄藕，表格的身影隨處可見。了解與熟知To B業(yè)務平臺軟件設計的工作人員都應該知道撵术，表格在平臺應用中的重要性背率。表格出現(xiàn)的概率不是一般的多，內容信息的排列布局嫩与、大量數(shù)據(jù)的展示寝姿、眾多功能操作的按鈕擺放，一般都會用到相應的表格划滋，而且表格的樣式類別也是多種多樣饵筑。表格的設計也遠遠沒你想象中的那沒簡單，可以說要想設計出滿足業(yè)務需求处坪、符合用戶心智模型的表格不是那么的輕而易舉根资。

表格，沒有那么簡單

本文就來詳細聊一聊表格同窘。聊之前嫂冻，我們應該明確三個詞的概念：列表、表格塞椎、表單桨仿。

列表，英文釋義為List案狠。百度釋義為：以表格為容器服傍，裝載著文字或圖表的一種形式，叫列表骂铁。如吹零，班主任點名的花名冊，就是一個列表拉庵；QQ軟件的好友列表等等灿椅。

表格，英文釋義為Table钞支，又稱為表茫蛹，即是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段烁挟，主要承載數(shù)據(jù)的歸納婴洼、展示與對比的功能，是列表的一種撼嗓。

表單柬采，英文釋義為Form欢唾。表單在網頁中主要負責數(shù)據(jù)采集功能。如當我們注冊某個網站的賬號時粉捻，填寫個人信息的頁面礁遣，就是一個表單。

表格經常和其他界面元素一起協(xié)同使用肩刃，用于展示和操作結構化數(shù)據(jù)祟霍，并經常用于詳情信息的入口。通常表格的組成元素以及相關元素會有多個部分树酪，筆者根據(jù)自己設計表格的工作經驗將表格概括為篩選區(qū)浅碾、表頭大州、內容區(qū)以及底欄等四個部分，其各個部分包含的相關元素如圖所示厦画。

表格疮茄，那些事

接下來，我們對表格的每一個部分進行講解根暑。

篩選區(qū)

篩選區(qū)可以看作表格的導航力试。篩選區(qū)主要包括兩部分，一是篩選排嫌，二是搜索畸裳。其目的相同，都是將操作者所關注的數(shù)據(jù)展示到前面淳地，便于查看怖糊。

1、篩選 ? ?

篩選是將一類數(shù)據(jù)展示出來颇象，而將其他類型的數(shù)據(jù)隱藏伍伤。當表格數(shù)據(jù)的類型多于兩種時，則考慮采用篩選條件遣钳。

1）篩選案例1

篩選條件在頂部扰魂，共七個。因為篩選條件存在交叉蕴茴，所以都展示在頂部劝评。選擇條件以后，需點擊才能觸發(fā)篩選倦淀。

篩選案例1

2）篩選案例2

篩選條件在頂部付翁，因為篩選條件不存在交叉，所以實時篩選晃听。

篩選案例2

3）篩選設計建議

a百侧、對于篩選條件沒有交叉的場景砰识，當條件少于五個，制作成table切換佣渴；超過五個少于二十個辫狼，采用下拉選擇；多與二十五個辛润，為下拉選擇添加模糊匹配設置膨处，并配備實時刷新；

b砂竖、對于篩選條件有交叉的場景真椿，建議采用展開形式，并配備手動加載刷新乎澄。

c突硝、對于需輸入篩選條件的場景，如日期篩選條件置济，單獨處理解恰，展示出來。

2浙于、搜索

搜索是目的在于定點查看护盈。搜索的使用場景是操作者要查看某一特定數(shù)據(jù)，輸入相應的條件羞酗，進行搜索腐宋，頁面對所搜索的數(shù)據(jù)進行展示。

1)搜索案例1

搜索框緊跟篩選條件檀轨，并配有確定搜索按鈕胸竞。

搜索案例1

2)搜索案例2

當存在多個搜索輸入框時，用高級搜索打包收起裤园，點擊展開撤师，同時，配備搜索與重置按鈕拧揽。點擊右上角的漏斗可以設置高級搜索條件的顯示與隱藏剃盾。

搜索案例2

3)搜索設計建議

a、搜索輸入框盡量采用模糊搜索淤袜，不要讓用戶去辨認痒谴、識別要輸入的內容；

b铡羡、對于多個搜索條件交叉搜索的場景积蔚，建議采用高級搜索按鈕，將其打包收起烦周，并配置重置按鈕尽爆，便于一鍵清空所有搜索條件怎顾，便于接下來的搜索。

表頭

表頭是對表格數(shù)據(jù)的操作漱贱，包括行標簽槐雾、操作工具等。有些簡單表格幅狮，將表頭與篩選區(qū)合并募强，將篩選條件、搜索雜糅在一起崇摄。

1擎值、固定

表頭固定，目的在于向下滾動表格時逐抑，表頭出現(xiàn)在頁面頂部鸠儿，時刻指示出該列數(shù)據(jù)的類別屬性。

1）固定案例1

該案例中每列數(shù)據(jù)具有明顯的差異泵肄，數(shù)據(jù)本身體現(xiàn)出了類型捆交，在不需要表頭情況下淑翼，用戶能夠清楚的知道數(shù)據(jù)類型及意義腐巢，不會出現(xiàn)混淆，故沒有采用固定表頭的設計玄括。

固定案例1

2）固定案例2

表格中的數(shù)據(jù)列差異不大冯丙，用戶不能直觀的根據(jù)表格中的數(shù)據(jù)分辨出數(shù)據(jù)類型，因此采用固定頂部表頭遭京，指示出數(shù)據(jù)類型胃惜。

固定案例2

3）固定表頭設計建議

a、在數(shù)據(jù)顯示超過40條時（電腦屏幕一屏無法完全顯示哪雕，需要滾動查看時）船殉，且表格中的數(shù)據(jù)不能直觀的展示出數(shù)據(jù)類型，建議采用固定表頭的形式斯嚎，時刻顯示數(shù)據(jù)類型利虫；

b、當字段數(shù)量過多堡僻，需要橫向滾動表格糠惫，且需要對比數(shù)據(jù)時，采用固定屬性列字段钉疫。

2硼讽、字段數(shù)量

1）字段數(shù)量案例1

表格的字段過多，且數(shù)據(jù)分類不明顯牲阁，因此采用橫向滾動形式固阁，將重要數(shù)據(jù)放在表格左側壤躲，次要數(shù)據(jù)放到表格右側。

字段數(shù)案例1

2）字段數(shù)量案例2

與案例1相同备燃，字段過多柒爵，采用橫向滾動形式。但相比案例一赚爵，在向右滾動數(shù)據(jù)時笙瑟，縱標簽固定，指示數(shù)據(jù)類型盛末。第一列是時間需要進行對比甚负，固定了第一列使得閱讀起來存在一個基礎。

字段數(shù)量案例2

3）字段數(shù)量案例3

對數(shù)據(jù)進行分類顯示窝剖，做成下拉選擇切換形式麻掸。將重點數(shù)據(jù)放置在默認顯示頁面，次要數(shù)據(jù)放置在下拉選擇的類別中赐纱。頁面簡潔脊奋，功能完備且有序。

字段數(shù)量案例3

4）字段數(shù)量案例4

相較于案例3疙描，同樣對數(shù)據(jù)進行分類顯示诚隙，并制成table切換形式。數(shù)據(jù)的類型較少起胰，且不存在主次關系久又，僅進行數(shù)據(jù)羅列展示。

字段數(shù)量案例4

5）字段設計建議

a效五、對于字段數(shù)據(jù)沒有明確分類地消，或者有些數(shù)據(jù)不太重要，可以采用橫向滾動條畏妖，進而固定左側屬性列脉执，便于數(shù)據(jù)對比；

b戒劫、對于數(shù)據(jù)有類別區(qū)分半夷，可以采用分類展示，切換button放在頂部或列表中谱仪。

3玻熙、字段

字段，為表頭中的行標簽中的字段標識疯攒。字數(shù)多少以及傳達的意義是否明確嗦随，對于表格功能的表現(xiàn)至關重要。

1）字段案例1

采用簡單英文單詞、單詞縮寫枚尼、詞組子母首拼等來傳達字段含義贴浙。同時，每個字段后面緊跟釋義標識署恍。鼠標懸停崎溃，即可出現(xiàn)該字段的詳細解釋，順暢的滿足了新手用戶盯质、普通用戶以及專家用戶的需求袁串。

字段案例1

2）字段案例2

字段用意義明確的單詞、詞組來表示呼巷。字段數(shù)量較少時囱修，用簡潔的標識字段數(shù)據(jù)，界面簡潔王悍、意義明確破镰。

字段案例2

3）字段設計建議

a、字段在五個以下压储，且字段的類型較為常見鲜漩，或能夠用簡短的文字描述清楚，可采用單詞或詞組來作為字段集惋；

b孕似、若字段超過五個，或不常見字段類型芋膘，或者簡短文字不能闡述清楚鳞青，可以考慮使用縮寫或者特殊單詞做字段霸饲，另附解釋文字。

4习寸、排序

對表格中的數(shù)據(jù)進行排序霞溪，是讓純粹以展示為目的的表格增添了活力，用戶可以改變數(shù)據(jù)的排序殴蓬，豐富了數(shù)據(jù)展示形式染厅。

1）排序案例1

僅用單向箭頭指示出當前的數(shù)據(jù)表格排序依據(jù)孤页，并沒有指明排序的形式行施。在字段較多悲龟、且存在幫助標識的情況下，僅僅指示出排序的依據(jù)轻腺，是比較合適的設計，畢竟排序的依據(jù)要比形式重要的多误算。

排序案例1

2）排序案例2

上下箭頭指示排序，一般上下空心箭頭默認蚊夫，上箭頭為升序，下箭頭為降序琅轧，也有通過明確說明來提示排序的方式

排序案例2

3）排序設計建議

a、字段在五個以下漠趁，排序可以采用明確的排序類型指向性明確的ICON闯传；

b、字段數(shù)量大于等于五個時共缕，只顯示排序圖標，而不顯示類型便贵。

內容區(qū)

1承璃、分割線

1）分割線案例1

表格采用了同樣灰度與透明度的橫縱分割線，斑馬線以及懸停高亮底色能夠很好的引導用戶的視線舷嗡，避免在閱讀時出現(xiàn)錯行、迷失的情況。同時沒有強調單個數(shù)據(jù)，或者數(shù)據(jù)之間的關系抛寝，僅做純粹的數(shù)據(jù)展示晶府，頁面客觀川陆，避免各種錯誤的引導。

分割線案例1

2）分割線案例2

采用獨立數(shù)據(jù)，弱化縱向分割線，采用懸浮高亮顯示解幽，展示一條數(shù)據(jù)的完整性。

分割線案例2

3）分割線案例3

采用橫線構架出行的視覺，數(shù)據(jù)信息均勻分布望浩。同時，用縱向分隔線對數(shù)據(jù)進行分類，表達出數(shù)據(jù)之間的類別關系，具有明確的數(shù)據(jù)類別指向琳水。

分割線案例3

4）分割線設計建議

a、對于數(shù)據(jù)之間的關系緊密且有對比關系的，可以采用橫向與縱向分割線极阅；

b、對于較有獨立性的數(shù)據(jù)可強調橫向分割線奔脐，弱化縱向分割線建丧；

c橄维、對于每條數(shù)據(jù)中的字段有分類的表格争舞，可以在強調橫向分割線的同時叁熔，弱化同類數(shù)據(jù)的縱向分割線福澡，而強調數(shù)據(jù)類型之間的縱向分割線糯累。

2效拭、勾選框

在表格中阎肝，勾選框主要用于選擇條目并進行批量操作判导。

1）勾選框案例1

方案采用全選框與下拉選擇來實現(xiàn)全選的范圍擂红。直接點擊全選框吩抓，默認全選本頁的全部條目。點擊下拉箭頭钳垮，顯示不同的全選范圍類型肚医，可點擊選擇。

勾選框案例1

2）勾選框案例2

與案例1相同搁痛，指示全選的范圍有所不同涯肩，案例1是以頁面為單位進行選擇，案例2是以數(shù)據(jù)類型進行選擇，同時包含了篩選與全選的功能破婆。

勾選框案例2

3）勾選框案例3

勾選放置在條目后面抛丽，便于用戶在查看完一條數(shù)據(jù)后，決定是否勾選冤吨。

勾選框案例3

4）勾選框設計建議

a蒿柳、當數(shù)據(jù)超過一頁時饶套，對全選操作提供全選范圍；

b其馏、當數(shù)據(jù)具有類型時凤跑，可以考慮對數(shù)據(jù)的不同類型進行全選爆安；

c叛复、對于逐條勾選的數(shù)據(jù)，若需要查閱數(shù)據(jù)后決定是否勾選扔仓，勾選框可以放在條目后面褐奥；當不需要查閱數(shù)據(jù)就能確認是否勾選，勾選框應該放在條目前面翘簇。

3撬码、對齊

在表格設計，對齊有兩方面的目的版保，一是便于數(shù)據(jù)對比呜笑；二是便于用戶閱讀，其分別對應了數(shù)據(jù)與文字兩種類型彻犁。

1）對齊案例1

數(shù)據(jù)右對齊叫胁，便于數(shù)據(jù)的對比；文字左對齊汞幢，便于用戶閱讀驼鹅。數(shù)據(jù)的單位及小數(shù)點后位數(shù)，保持一致森篷。

對齊案例1

2）對齊案例2

將橫向的行內信息再次擴充就成了如同淘寶商品頁一樣的输钩，行區(qū)分弱化的表格形式，既滿足了豐富信息的呈現(xiàn)仲智，也能很快速的進行與行之間的如同價格等關鍵信息的對比买乃。

對齊案例2

3）對齊案例3

對于數(shù)據(jù)的小數(shù)點后面的位數(shù)不同的場景，采用以個位數(shù)字為基準钓辆，居中對齊剪验，便于對比。

對齊案例3

4）對齊設計建議

數(shù)據(jù)右對齊岩馍，文字左對齊碉咆，盡量保證數(shù)據(jù)的小數(shù)點后單位一致；若不能蛀恩，則以個位數(shù)為基準疫铜，居中對齊。

4双谆、操作項

操作項是用戶對數(shù)據(jù)的操作處理壳咕，不同的數(shù)據(jù)類型席揽，其操作項的類型、數(shù)量有較大差異谓厘，同時幌羞，還牽涉到數(shù)據(jù)批量操作與單項操作的頻率問題。操作項一般存在于條目最后竟稳，以及表頭位置属桦，分別對應單條操作與批量操作的場景。

1）操作項案例1

共兩個操作項他爸，且放置在條目最后聂宾。因為編輯、刪除以及設置ICON的含義明確诊笤，且廣為人知系谐，故僅用純ICON來表示，簡潔醒目讨跟。

操作項案例1

2）操作項案例2

操作項在條目后面纪他，多個操作動作，放置在后面晾匠，折疊起來茶袒。在操作時，點擊下拉出現(xiàn)具體操作項混聊。

操作項案例2

3）操作項案例3

操作項為ICON+文字弹谁，共兩個，放置在條目最后句喜。對于圖形意義不太明確或者圖形的含義有較大變化预愤，采用圖形+文字的形式，傳達意義更加明確清楚咳胃。

操作項案例3

4）操作項案例4

操作項為純文字植康，存在表格頂部的表頭，勾選所選條目以后點擊操作按鈕可用展懈。文字按鈕销睁，傳達的意義更加明確，辨識性強存崖。

操作項案例4

5）操作項案例5

兩個操作項為按鈕形式冻记，且放置在條目最后，提高了醒目性来惧，引導用戶點擊操作冗栗。

操作項案例5

6）操作項設計建議

a、對于單條數(shù)據(jù)操作頻繁的場景，操作項不操作三個時隅居，操作項跟在條目后面钠至，常見操作僅用ICON，不常見操作用ICON+文字胎源，當超過三個時棉钧，建議將操作折疊收起。

b涕蚤、對于數(shù)據(jù)批量操作頻繁的場景宪卿，建議將操作放到表格頂部，與勾選操作配合使用赞季。

5愧捕、空單元格

作為表格中的特殊狀態(tài)，空單元格主要存在兩種情況申钩，一是數(shù)據(jù)不存在，二是數(shù)據(jù)為零瘪阁。

1）空單元格案例1

對于不存在的數(shù)據(jù)撒遣，單元格不能空置，需要用短橫線代替管跺，表示該項數(shù)據(jù)不存在义黎，給用戶明確指示。

空單元格案例1

2）空單元格案例2

對于數(shù)據(jù)為零的單元格豁跑，要填上0廉涕，且小數(shù)點后位數(shù)、單位艇拍，都要與上下單元格保持一致狐蜕。

空單元格案例2

3）空單元格設計建議

在任何情況下，單元格都不應該空置出現(xiàn)卸夕，避免用戶的困惑层释。針對不存在的數(shù)據(jù)可以用其他占位符，告知用戶該單元格不存在數(shù)據(jù)快集；對于數(shù)據(jù)為零的單元格贡羔，與上下數(shù)據(jù)單位、小數(shù)點相同的0來表示个初。

6乖寒、行高

在表格設計中，行高是非常重要的參數(shù)院溺，行高間距直接影響著閱讀的體驗楣嘁，同時還影響著一個頁面中數(shù)據(jù)的顯示量。

1）行高案例1

該案例中，數(shù)據(jù)表格的內容為單行顯示马澈，行高較小瓢省。數(shù)據(jù)顯示緊湊、有序痊班，同時勤婚，便于跨行之間的數(shù)據(jù)對比。

行高案例1

2）行高案例2

該案例中涤伐，數(shù)據(jù)表格中的內容存在多行顯示馒胆，行區(qū)分弱化的表格形式，既滿足了豐富信息的呈現(xiàn)凝果，也能很快速的進行行與行之間的關鍵信息對比祝迂。

行高案例2

3）行高設計建議

對于單行顯示數(shù)據(jù)內容的表格，建議行高約為字體高度的2.5倍到3倍器净；對于多行顯示數(shù)據(jù)的表格型雳，建議行中內容的最高點與最低點到行框的上下邊距略小于文字高度。

底欄

底欄緊跟在表格正文之后山害，主要展示正文中的數(shù)據(jù)量以及單頁數(shù)據(jù)條目纠俭，同時，兼具一些導航的功能浪慌，指示當前所在頁面以及跳轉到指定頁面冤荆。

1、分頁

1）分頁案例1

案例采用了整體頁碼平鋪的方式权纤，分別展示出前钓简、中、后點的若干頁碼汹想，便于用戶順序查看外邓。案例中的數(shù)據(jù)不具有特殊性，用戶很少會特定的查看某一頁的數(shù)據(jù)欧宜，因此沒有定點跳轉的功能坐榆。

分頁案例1

2）分頁案例2

分頁不僅僅要指出當前數(shù)據(jù)所在整體數(shù)據(jù)的位置，同時還要指出數(shù)據(jù)量的多少冗茸，給用戶已明確的指示席镀。

分頁案例2

3）分頁設計建議

分頁的設計是根據(jù)不同的場景進行選擇最優(yōu)的設計方案。在不需要定點跳轉的場景夏漱，建議采用案例1或者案例2中的第兩種設計豪诲，刪除多于的功能，使頁面簡潔挂绰、清爽屎篱。在需要定點跳轉的場景服赎，采用案例2中的第一種和第三種設計，能夠節(jié)約用戶的大量時間交播，且設計相對簡單重虑，用戶很容易就明白設計意圖。

2秦士、單頁條目顯示

1）單頁條目顯示案例1

一般情況下缺厉，單頁條目顯示與分頁是一體的，分別位于底欄的左右兩側隧土。案例一的單頁條目顯示僅僅作為單頁條目數(shù)量的顯示提针，而不具有設置功能，同時在表格頂部也做相應的展示曹傀。

單頁條目顯示案例1

2）單頁條目顯示案例2

案例不僅展示了當前頁面顯示條目的數(shù)量辐脖，同時給出相應的顯示數(shù)量自定義的設置功能〗杂洌可增加單頁條目的顯示數(shù)量嗜价，便于更多數(shù)據(jù)放在一起對比分析。

單頁條目顯示案例2

3）單頁條目顯示設計建議

對于單頁條目顯示的設計亥啦，建議采用頁面條目顯示數(shù)量自定義的設計方式炭剪，其設計可以豐富數(shù)據(jù)的對比范圍，在特定情況下會方便用戶的操作翔脱。

寫在結尾

表格的設計遠遠沒有想象的那么簡單，除了純粹的數(shù)據(jù)展示媒鼓，現(xiàn)在的表格越來越兼顧到一些導航的功能在里面届吁，不僅僅縱向展示數(shù)據(jù)，在橫向方面也做了相應的擴展绿鸣。

言盡于此疚沐，表格還有一些其他的設計點尚未談及，如子母表潮模、數(shù)據(jù)狀態(tài)亮蛔、列寬、數(shù)據(jù)列表編輯等擎厢，以后有機會究流，再完善表格設計的剩余方面。

參考資料

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/