Web頁面中的表格設計，遠沒那么簡單

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

    本文就來詳細聊一聊表格。聊之前，我們應該明確三個詞的概念：列表、表格、表單。

    列表，英文釋義為List。百度釋義為：以表格為容器，裝載著文字或圖表的一種形式，叫列表。如，班主任點名的花名冊，就是一個列表；QQ軟件的好友列表等等。

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

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

    表格經(jīng)常和其他界面元素一起協(xié)同使用，用于展示和操作結(jié)構(gòu)化數(shù)據(jù)，并經(jīng)常用于詳情信息的入口。通常表格的組成元素以及相關(guān)元素會有多個部分，筆者根據(jù)自己設計表格的工作經(jīng)驗將表格概括為篩選區(qū)、表頭、正文以及底欄等四個部分，其各個部分包含的相關(guān)元素如圖所示。

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

    一、篩選區(qū)

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

    1、篩選

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

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

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

    對于篩選條件沒有交叉的場景，當條件少于五個，制作成table切換;超過五個少于二十個，采用下拉選擇;多與二十五個，為下拉選擇添加模糊匹配設置，并配備實時刷新；對于篩選條件有交叉的場景，建議采用展開形式，并配備手動加載刷新。

    對于需輸入篩選條件的場景，如日期篩選條件，單獨處理，展示出來。

    2、搜索

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

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

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

    搜索設計建議：搜索輸入框盡量采用模糊搜索，不要讓用戶去辨認、識別要輸入的內(nèi)容;

    對于多個搜索條件交叉搜索的場景，建議采用高級搜索按鈕，將其打包收起，并配置重置按鈕，便于一鍵清空所有搜索條件，便于接下來的搜索。

    二、表頭

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

    1、固定

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

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

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

    固定表頭設計建議：在數(shù)據(jù)顯示超過 40 條時(電腦屏幕一屏無法完全顯示，需要滾動查看時)，且表格中的數(shù)據(jù)不能直觀的展示出數(shù)據(jù)類型，建議采用固定表頭的形式，時刻顯示數(shù)據(jù)類型；當字段數(shù)量過多，需要橫向滾動表格，且需要對比數(shù)據(jù)時，采用固定屬性列字段。

    2、字段數(shù)量

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

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

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

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

    字段設計建議：對于字段數(shù)據(jù)沒有明確分類，或者有些數(shù)據(jù)不太重要，可以采用橫向滾動條，進而固定左側(cè)屬性列，便于數(shù)據(jù)對比；對于數(shù)據(jù)有類別區(qū)分，可以采用分類展示，切換button放在頂部或列表中。

    3、字段

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

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

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

    字段設計建議：字段在五個以下，且字段的類型較為常見，或能夠用簡短的文字描述清楚，可采用單詞或詞組來作為字段；若字段超過五個，或不常見字段類型，或者簡短文字不能闡述清楚，可以考慮使用縮寫或者特殊單詞做字段，另附解釋文字。

    4、排序

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

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

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

    排序設計建議：字段在五個以下，排序可以采用明確的排序類型指向性明確的ICON；字段數(shù)量大于等于五個時，只顯示排序圖標，而不顯示類型。

    三、正文

    1、分割線

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

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

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

    分割線設計建議：對于數(shù)據(jù)之間的關(guān)系緊密且有對比關(guān)系的，可以采用橫向與縱向分割線；對于較有獨立性的數(shù)據(jù)可強調(diào)橫向分割線，弱化縱向分割線;

    對于每條數(shù)據(jù)中的字段有分類的表格，可以在強調(diào)橫向分割線的同時，弱化同類數(shù)據(jù)的縱向分割線，而強調(diào)數(shù)據(jù)類型之間的縱向分割線。

    2、勾選框

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

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

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

    勾選框設計建議

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

    當數(shù)據(jù)具有類型時，可以考慮對數(shù)據(jù)的不同類型進行全選；

    對于逐條勾選的數(shù)據(jù)，若需要查閱數(shù)據(jù)后決定是否勾選，勾選框可以放在條目后面;當不需要查閱數(shù)據(jù)就能確認是否勾選，勾選框應該放在條目前面。

    3、對齊

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

    數(shù)據(jù)右對齊，便于數(shù)據(jù)的對比;文字左對齊，便于用戶閱讀。數(shù)據(jù)的單位及小數(shù)點后位數(shù)，保持一致。

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

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

    對齊設計建議：數(shù)據(jù)右對齊，文字左對齊，盡量保證數(shù)據(jù)的小數(shù)點后單位一致;若不能，則以個位數(shù)為基準，居中對齊。

    4、操作項

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

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

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

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

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

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

    操作項設計建議：對于單條數(shù)據(jù)操作頻繁的場景，操作項不操作三個時，操作項跟在條目后面，常見操作僅用ICON，不常見操作用ICON+文字，當超過三個時，建議將操作折疊收起。

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

    5、空單元格

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

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

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

    空單元格設計建議：在任何情況下，單元格都不應該空置出現(xiàn)，避免用戶的困惑。針對不存在的數(shù)據(jù)可以用其他占位符，告知用戶該單元格不存在數(shù)據(jù);對于數(shù)據(jù)為零的單元格，與上下數(shù)據(jù)單位、小數(shù)點相同的 0 來表示。

    6、行高

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

    該案例中，數(shù)據(jù)表格的內(nèi)容為單行顯示，行高較小。數(shù)據(jù)顯示緊湊、有序，同時，便于跨行之間的數(shù)據(jù)對比。

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

    行高設計建議:對于單行顯示數(shù)據(jù)內(nèi)容的表格，建議行高約為字體高度的2. 5 倍到 3 倍;對于多行顯示數(shù)據(jù)的表格，建議行中內(nèi)容的最高點與最低點到行框的上下邊距略小于文字高度。

    四、底欄

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

    1、分頁

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

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

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

    2、單頁條目顯示

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

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

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