編輯導(dǎo)語：在我們的日常工作中經(jīng)常會用到表格，表格的功能可以讓我們很清晰快捷的了解當(dāng)前情況，設(shè)計一個好的表格也能大大的提升我們的工作效率；本文作者分享了關(guān)于B端交互界面基礎(chǔ)組件表格的設(shè)計，我們一起來看一下。

我們常說一個表格基本的功能是包含增刪改查的，為了完整的表達(dá)這一功能，常見的就是用表格組件，表格被公認(rèn)為是展現(xiàn)結(jié)構(gòu)化數(shù)據(jù)最為清晰、高效的形式；常和按鈕、搜索、篩選、分頁等其他界面元素一起協(xié)同，構(gòu)成表格頁。

它具備結(jié)構(gòu)簡單、分隔和歸納明確等特點(diǎn)，幫助對比分析，大大提升了用戶對信息的接收效率和理解程度；回歸到線下場景更像家里的柜子，我們使用抽屜可以用來收納整理，極大提升用戶信息收納的效率、空間利用率，查找規(guī)律，打造了一個信息密度極高的歸納頁。

下面我將表格拆分成多個細(xì)節(jié)，并詳細(xì)講解各部分如何來設(shè)計，并結(jié)合業(yè)務(wù)場景深挖如何正確的使用表格：

一、數(shù)據(jù)查看

1. 表格構(gòu)成與布局

• 內(nèi)部：由表頭、行、列、單元格共4部分組成；
• 外部：由篩選區(qū)域、操作按鈕區(qū)、分頁區(qū)共3 大類組成。

2. 檢驗表格設(shè)計好壞

在我們對表格的設(shè)計思考過程中，需要注意兩項原則：可讀（可視化）與易用

好的數(shù)據(jù)表格是全面整合并呈現(xiàn)業(yè)務(wù)數(shù)據(jù)，提供順暢閱讀體驗，便于用戶發(fā)掘重要信息，進(jìn)行便捷操作，主要是從信息降噪、呼吸適中、高效易讀以及詳情查看四個方面去檢驗表格的好壞。

這里我們從四個方面來驗證表格的好壞：信息降噪、呼吸適中、高效易讀、查看詳情

1）信息降噪

信息降噪：內(nèi)容

表頭：表頭標(biāo)簽應(yīng)該簡煉準(zhǔn)確，以達(dá)到節(jié)省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數(shù)據(jù)本身；當(dāng)然對于產(chǎn)品而言，先能把事情說清楚，再考慮文字的簡潔性。

這需要我們做到：

表頭內(nèi)容上面做到精簡，列數(shù)控制在7+-2，列舉出用戶更為關(guān)注的數(shù)據(jù)，更多的信息我們可以在詳情中展示。

自定義列：如果不同用戶看到的信息側(cè)重不同，我們還可以通過增加設(shè)置類型的按鈕，讓用戶進(jìn)行自定義列的展示。

信息降噪：視覺

幾種常見的風(fēng)格樣式：

• a.帶豎向分割線：表格有均勻而明顯的分割線，邊框單元格比較明顯。
• b.帶斑馬紋：隔行交替使用不同底色來區(qū)分?jǐn)?shù)據(jù)。
• c.極簡樣式：僅顯示水平線可減少整個網(wǎng)格的視覺噪音。

關(guān)于樣式的選取技巧：

當(dāng)前樣式一和樣式二比較傳統(tǒng)老套，比較推薦極簡，去掉不必要的視覺干擾，針對想要突出某一行，可以鼠標(biāo)hover給一個斑馬紋，這樣可以方便看某一行數(shù)據(jù)，讓數(shù)據(jù)更加聚焦，如果在你數(shù)據(jù)特巨長無比的情況下，斑馬紋還是比較重要的。

去掉不必要的裝飾：能用線性標(biāo)簽就不要使用面性標(biāo)簽，盡量做到輕盈不要太重。

不要出現(xiàn)襯線體等字體的干擾。

2）呼吸適中

關(guān)于單元格行高制定：

合適的填充和邊距對于視覺設(shè)計至關(guān)重要，既包括保證數(shù)據(jù)單元格之間的留白，又包括單元格內(nèi)部留白，以保證易讀性，當(dāng)創(chuàng)建表格設(shè)計規(guī)范并嚴(yán)格遵循后，就可以創(chuàng)建視覺一致的表。

開始之前首先明確一下開發(fā)是怎么實現(xiàn)行高的，從下圖可以看出，開發(fā)在實現(xiàn)設(shè)計稿時，通常是按照行高來寫的：

單元格高度=文字行高+上間距+下間距

一般我們制定的單元格規(guī)范為：

文字字號：n

文字行高：1.5n

上、下間距：1.2n

以此來保證各場景下獲取信息的效率與易讀性。

關(guān)于列與列之間的制定：

表格本身應(yīng)具有最小寬度，在不同畫面中寬度應(yīng)可以增長到整個空間，所以每個列也需具備最小寬度。如果頁面寬度小于表格，那么表格應(yīng)水平可拖拽，當(dāng)表格寬度大于頁面寬度時候，固定首尾列，左右滑動。

隨著頁面搜索和拉伸變n2,n1保持不變，并且在拉長或變短，表格的呼吸感、節(jié)奏感不受影響 ，N2會隨著表格的變化自適應(yīng)產(chǎn)生變動。

回歸到開發(fā)場景中，n2 對應(yīng)盒子模型中的margin-right，字體的行高相當(dāng)于padding

3）高效易讀

列的對齊方式：

單元格合適的位置排列能夠提升表格的效率和準(zhǔn)確度。對齊能夠很好的形成視覺引導(dǎo)線，會讓表格更加規(guī)范易理解，將元素進(jìn)行對齊；既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。

標(biāo)題和內(nèi)容：一般采用左對齊，更高效的閱讀瀏覽順序。

表格：諸如金額、數(shù)量等數(shù)值排列時，通常采用“右對齊”方式，既方便用戶快捷讀取數(shù)據(jù)，還可以使用戶進(jìn)行縱向數(shù)據(jù)對比。

操作項：一般放置在尾列，左對齊，保證表格為規(guī)整的盒子模型。

空白格：

單元格中不要做無意義的留白，以上傳貨物為例，未上傳為-，缺貨的顯示為0。

分頁器：

選擇合適的翻頁器，利用分頁可以緩解服務(wù)器的加載壓力，通常情況下，分頁器緊跟在表格正文之后，主要展示正文中的數(shù)據(jù)量以及單頁數(shù)據(jù)條目信息；同時，兼具一些導(dǎo)航的功能，指示當(dāng)前所在頁面以及跳轉(zhuǎn)到指定頁面。

• 每一頁的默認(rèn)行數(shù)：10行以上，減少翻頁的次數(shù)；
• 給出默認(rèn)行的數(shù)量后，也可以讓用戶自定義每頁行的數(shù)量，相比跨屏更加方便。

操作項：

為保證用戶閱讀高效性，我們可以收起低頻操作箱，這里注意：除了產(chǎn)品經(jīng)理和客戶，我們可以通過之前的埋點(diǎn)pv、uv來區(qū)分高頻和低頻的操作項。

行的排序：

• 默認(rèn)最近創(chuàng)建的放在最上面，這點(diǎn)是由于操作完立馬有反饋，針對最近一條使用頻率比較高；
• 可以用帶排序的表頭，讓用戶自定義排序；

4）詳情查看

精簡表格之后如何查看隱藏起來的次要信息呢？

詳情入口：可以在操作里加“詳情”。

也可以把名稱做成可點(diǎn)擊樣式，跳轉(zhuǎn)詳情：

5）交互方式

展開行：

展開行（Expandable rows）允許用戶無需打開新頁面即可查看附加信息，防止用戶迷失；展開可以是一個二級表格，重新定義表頭和內(nèi)容，也可以是一個列表展示。

彈窗：

包括模態(tài)彈窗和非模態(tài)彈窗，模態(tài)彈窗可以打開任一個條目進(jìn)行詳細(xì)查看，非模態(tài)彈窗可以同時打開多個，并允許拖動彈窗位置進(jìn)行信息對比。

抽屜：

表格內(nèi)部側(cè)邊展開，相比彈窗減少了頁面層級和隔離感，承載內(nèi)容變大。

頁面切換：

適合詳情比較多，且需要編輯的情況，相當(dāng)于新開一個tab欄。

二、數(shù)據(jù)過濾

搜索、篩選和標(biāo)簽頁是用戶獲取精準(zhǔn)目標(biāo)的辦法，這是一項基本功能，可讓用戶從默認(rèn)的表格數(shù)據(jù)輕松獲取要查找的內(nèi)容，在數(shù)據(jù)量較大的表中特別有用，一般位于表上方的操作區(qū)域或表頭區(qū)域。

1. 搜索

一般的搜索功能分為模糊搜索和帶標(biāo)簽的精準(zhǔn)搜索，輸入搜索框輸入用戶關(guān)心的內(nèi)容，既可以實時篩選，也可以點(diǎn)擊觸發(fā)。

1）模糊搜索

• 優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會搜索出來，減少了精準(zhǔn)搜索帶來的記憶負(fù)擔(dān)。
• 缺點(diǎn)：容易把不想管的信息也帶出來。例如搜索手機(jī)號，把相關(guān)編碼也匹配了出來。

2）帶標(biāo)簽的搜索

• 優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高。
• 缺點(diǎn)：每次只能對單一條件進(jìn)行搜索。

2. 篩選

一般搜索和篩選會同時出現(xiàn)，但是兩者一般很少同時使用來對數(shù)據(jù)進(jìn)行定位，在一般情況下，搜索更多的是對單一或者包含某個字段的的數(shù)據(jù)來進(jìn)行定位；篩選則是用來查詢一類數(shù)據(jù)，下面我們將分為兩種篩選進(jìn)行分析：下拉篩選、平鋪篩選。

1）下拉篩選

• 優(yōu)點(diǎn)：空間利用率高、起到了很好的收納作用。
• 缺點(diǎn)：無法直觀看到所有篩選項。

2）平鋪篩選

• 優(yōu)點(diǎn)：操作效率高，篩選項一目了然，支持輸入更多篩選條件。
• 缺點(diǎn)：空間利用率低，不適合選項太多的情況。

這里我們需要注意，當(dāng)篩選項過多時，我們應(yīng)當(dāng)按照操作頻次來排列篩選項，因為用戶的目標(biāo)均是優(yōu)先于業(yè)務(wù)邏輯；當(dāng)所有的篩選項都是屬于低頻操作時，可以把所有的篩選項放置在高級篩選，作為高級操作，用彈窗來承載。

3. 標(biāo)簽

標(biāo)簽頁的篩選一般和時間、狀態(tài)流轉(zhuǎn)相關(guān)，通常按照用戶最關(guān)注的目標(biāo)設(shè)置為默認(rèn)的選項。

三、數(shù)據(jù)操作

操作項一般存在于條目最后，以及表頭位置，分別對應(yīng)單條操作、批量和全局操作的場景。

數(shù)據(jù)操作的分類：

• 控制范圍：單行操作、批量操作、全局操作；
• 操作屬性：新增數(shù)據(jù)、編輯數(shù)據(jù)、刪除數(shù)據(jù)、業(yè)務(wù)處理。

1）判斷控制范圍

2）再判斷放置位置

3）最后優(yōu)化信息層級

四、總結(jié)

以上便是我個人對于web典型表格設(shè)計的拆解，雖然是簡單的數(shù)據(jù)表格，其實是web端非常重要的部分，通過合理的拆解分析和布局，使得原本枯燥的數(shù)據(jù)呈現(xiàn)出生命力。

但是組件是死的，人是活的，希望大家今后遇到具體的業(yè)務(wù)場景，還是需要具體分析，真實地圍繞用戶的實際使用場景，為用戶提供高效的篩選工具，促進(jìn)信息的理解，降低用戶的使用成本，這才是本質(zhì)內(nèi)容。

參考資料：

B端表格設(shè)計實戰(zhàn)指南

Ant Design：https://ant.design/index-cn

web表格設(shè)計攻略

web端表格設(shè)計，怎么做？

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

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