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

時間：2023-09-29 19:30:01 | 來源：網(wǎng)站運營

時間：2023-09-29 19:30:01 來源：網(wǎng)站運營

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

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

• 列表，英文釋義為List。百度釋義為：以表格為容器，裝載著文字或圖表的一種形式，叫列表。如，班主任點名的花名冊，就是一個列表；QQ軟件的好友列表等等。
• 表格，英文釋義為Table，又稱為表，即是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段，主要承載數(shù)據(jù)的歸納、展示與對比的功能，是列表的一種。
• 表單，英文釋義為Form。表單在網(wǎng)頁中主要負責(zé)數(shù)據(jù)采集功能。如當(dāng)我們注冊某個網(wǎng)站的賬號時，填寫個人信息的頁面，就是一個表單。

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

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

一、篩選區(qū)

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

1、篩選

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

（1）篩選案例1

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

（2）篩選案例2

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

（3）篩選設(shè)計建議

1. 對于篩選條件沒有交叉的場景，當(dāng)條件少于五個，制作成table切換；超過五個少于二十個，采用下拉選擇；多與二十五個，為下拉選擇添加模糊匹配設(shè)置，并配備實時刷新；
2. 對于篩選條件有交叉的場景，建議采用展開形式，并配備手動加載刷新。
3. 對于需輸入篩選條件的場景，如日期篩選條件，單獨處理，展示出來。

2、搜索

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

（1）搜索案例1

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

（2）搜索案例2

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

（3）搜索設(shè)計建議

1. 搜索輸入框盡量采用模糊搜索，不要讓用戶去辨認、識別要輸入的內(nèi)容；
2. 對于多個搜索條件交叉搜索的場景，建議采用高級搜索按鈕，將其打包收起，并配置重置按鈕，便于一鍵清空所有搜索條件，便于接下來的搜索。

二、表頭

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

1、固定

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

（1）固定案例1

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

（2）固定案例2

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

（3）固定表頭設(shè)計建議

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

2、字段數(shù)量

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

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

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

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

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

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

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

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

（5）字段設(shè)計建議

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

3、字段

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

（1）字段案例1

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

（2）字段案例2

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

（3）字段設(shè)計建議

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

4、排序

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

（1）排序案例1

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

（2）排序案例2

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

（3）排序設(shè)計建議

1. 字段在五個以下，排序可以采用明確的排序類型指向性明確的ICON；
2. 字段數(shù)量大于等于五個時，只顯示排序圖標(biāo)，而不顯示類型。

三、正文

1、分割線

（1）分割線案例1

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

（2）分割線案例2

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

（3）分割線案例3

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

（4）分割線設(shè)計建議

1. 對于數(shù)據(jù)之間的關(guān)系緊密且有對比關(guān)系的，可以采用橫向與縱向分割線；
2. 對于較有獨立性的數(shù)據(jù)可強調(diào)橫向分割線，弱化縱向分割線；
3. 對于每條數(shù)據(jù)中的字段有分類的表格，可以在強調(diào)橫向分割線的同時，弱化同類數(shù)據(jù)的縱向分割線，而強調(diào)數(shù)據(jù)類型之間的縱向分割線。

2、勾選框

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

（1）勾選框案例1

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

2）勾選框案例2

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

（3）勾選框案例3

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

（4）勾選框設(shè)計建議

1. 當(dāng)數(shù)據(jù)超過一頁時，對全選操作提供全選范圍；
2. 當(dāng)數(shù)據(jù)具有類型時，可以考慮對數(shù)據(jù)的不同類型進行全選；
3. 對于逐條勾選的數(shù)據(jù)，若需要查閱數(shù)據(jù)后決定是否勾選，勾選框可以放在條目后面；當(dāng)不需要查閱數(shù)據(jù)就能確認是否勾選，勾選框應(yīng)該放在條目前面。

3、對齊

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

（1）對齊案例1

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

（2）對齊案例2

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

（3）對齊案例3

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

（4）對齊設(shè)計建議

數(shù)據(jù)右對齊，文字左對齊，盡量保證數(shù)據(jù)的小數(shù)點后單位一致；若不能，則以個位數(shù)為基準(zhǔn)，居中對齊。

4、操作項

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

（1）操作項案例1

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

（2）操作項案例2

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

（3）操作項案例3

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

（4）操作項案例4

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

（5）操作項案例5

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

（6）操作項設(shè)計建議

1. 對于單條數(shù)據(jù)操作頻繁的場景，操作項不操作三個時，操作項跟在條目后面，常見操作僅用ICON，不常見操作用ICON+文字，當(dāng)超過三個時，建議將操作折疊收起。
2. 對于數(shù)據(jù)批量操作頻繁的場景，建議將操作放到表格頂部，與勾選操作配合使用。

5、空單元格

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

（1）空單元格案例1

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

（2）空單元格案例2

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

（3）空單元格設(shè)計建議

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

6、行高

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

（1）行高案例1

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

（2）行高案例2

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

（3）行高設(shè)計建議

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

四、底欄

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

1、分頁

（1）分頁案例1

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

（2）分頁案例2

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

（3）分頁設(shè)計建議

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

2、單頁條目顯示

（1）單頁條目顯示案例1

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

（2）單頁條目顯示案例2

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

（3）單頁條目顯示設(shè)計建議

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

五、寫在結(jié)尾

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

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

參考資料

1. 提高表格可讀性的一些技巧
2. 讓數(shù)據(jù)閱讀更舒適！帶你玩轉(zhuǎn)表格設(shè)計
3. Extra wide tables best practices
4. Ultimate guide to table UI patterns
5. Build it With Me - Connecting Designers & Developers
6. Pega UX Design System

敬請關(guān)注UIUX設(shè)計工作坊，微信公眾號：UIUX-HUANG，每周會有互聯(lián)網(wǎng)產(chǎn)品設(shè)計的相關(guān)文章更新，是作者的實際工作經(jīng)驗，愿與大家共同進步。