毫無疑問，表格之于B端產品而言是及其重要的一部分，那么，如何系統(tǒng)掌握B端產品中的表格設計呢？本文作者從表格設計規(guī)范與交互邏輯兩個角度提出了15點建議，干貨滿滿，希望對你有幫助。

表格作為B端產品中重要的界面組成部分，承載著內容展示、數(shù)據記錄等多重任務。每家產品的表格看起來構成差不多，但在交互細節(jié)上仍然有很多好的地方值得我們仔細思考。

本次通過整理10條B端表格設計規(guī)范+5條B端表格交互邏輯，系統(tǒng)掌握B端產品中的表格設計～

一、B端表格規(guī)范整理

1. 對齊，高效的信息獲取方式

表格內的信息通過對齊，會更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，且視線流動順暢，能夠讓人快速捕捉到所要的內容。

• 文本信息左對齊，因為現(xiàn)代人的閱讀方式習慣從左到右，符合正常心智；
• 數(shù)據信息右對齊，方便數(shù)字大小的直觀對比；
• 內容寬度固定居中對齊，更好的信息呈現(xiàn)及表格空間的節(jié)??；
• 表頭與信息內容對齊方式一致，一致性以達到簡化，降低視覺噪音。

2. 表格列數(shù)與固定列

默認展示的列數(shù)為3-8列，如果需要展示更多列數(shù)，則需要優(yōu)先固定展示重要列，其余的列的內容會以滾動條滑動而展示出來。

有操作時需固定，操作項不固定時無法快速定位會降低操作效率；重要信息固定，有利于快速獲取重要的內容。

3. 表格列表的寬度

寬度的尺寸大小自適應，但需要根據文字的重要性顯示，重要文字內容優(yōu)先完整顯示。（如果由于屏幕小表格會出現(xiàn)省略，就要考慮多一個瀏覽器自帶的title提示。）

注：當?shù)谝涣惺切蛱柣蚨噙x項時，列寬不需要太寬，這樣視覺不會顯得空洞。

4. 表頭每列標題文字字數(shù)

字符不要多，如果文字太多，就需要做文字信息精簡化。同樣，對于專業(yè)術語或用戶不常見的名詞應給予一定的幫助說明。

5. 長文本處理

表格內容較多且有長文本時，長文本縮略展示；表格內容較少時有長文本，長文本換行展示。

6. 空白數(shù)據填充「-」，避免留白產生疑慮

表格中經常會出現(xiàn)空數(shù)據或無數(shù)據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統(tǒng)沒有加載出來嗎？明智的做法，使用「-」填充顯示。圖片為空時使用圖片占位符。

7. 操作列的統(tǒng)一

同一項目中的操作列命名應該保持統(tǒng)一，例如：常規(guī)增、刪、改、查命名為新增、刪除、編輯、詳情。

操作項超過三個時，將操作低頻折疊收起，可以幫助頁面突出更加重要的信息，減輕空間壓力，減少干擾。

8. 數(shù)據升降樣式

給數(shù)據做升降區(qū)分可以快速判斷數(shù)據的趨勢，國內數(shù)據升圖標默認為紅色，降的為綠色。

9. 表格全局操作和批量操作

全局操作為無需選擇數(shù)據內容即可進行的操作，常見的有新增、導入、篩選。

批量操作就是對表格的多行數(shù)據同時操作，常見的有導出、刪除。

全局和批量都不屬于單個對象因此需要放在表格外，操作具體的位置排放根據操作的重要程度一次從左到右遞減。

10. 斑馬線

條紋顏色：標題背景色透明度60%左右；（條紋顏色視覺上應該比標題欄弱一點）鼠標hover顏色：主題色透明度10%。

二、B端表格交互整理

1. 固定表頭，一目了然

當閱讀豐富且繁多的表格時，由于屏幕有限，用戶不得不拖動橫向或縱向滾動條來閱讀信息。

固定表頭，能夠讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思。固定表頭也是一種界面友好性的體現(xiàn)。

2. 排序，讓信息有序起來

可以讓無序信息內容進行有序排列，排序分為升序和降序，一般用在數(shù)據、時間、數(shù)量上。

3. 調整列寬度，查看完整數(shù)據

允許調整列的寬度來查看更加完整的縮略數(shù)據。被截斷的數(shù)據，默認支持鼠標懸停時瀏覽器自帶title顯示完整數(shù)據。

4. 水平滾動，固定首尾列

呈現(xiàn)大型數(shù)據集時，水平滾動是不可避免的，通過橫向滾動查看其它數(shù)據。將首列進行固定（若包含勾選操作，則一起固定），以便用戶將數(shù)據與對象進行對應。

5. 分頁固定

若表格是分頁處理的，分頁會放在上部、下部或上下部均有，分頁固定省去了用戶需要翻到頂部或底部進行操作的麻煩。