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

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

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

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

1. 對(duì)齊，高效的信息獲取方式

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

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

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

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

有操作時(shí)需固定，操作項(xiàng)不固定時(shí)無(wú)法快速定位會(huì)降低操作效率；重要信息固定，有利于快速獲取重要的內(nèi)容。

3. 表格列表的寬度

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

注：當(dāng)?shù)谝涣惺切蛱?hào)或多選項(xiàng)時(shí)，列寬不需要太寬，這樣視覺(jué)不會(huì)顯得空洞。

4. 表頭每列標(biāo)題文字字?jǐn)?shù)

字符不要多，如果文字太多，就需要做文字信息精簡(jiǎn)化。同樣，對(duì)于專業(yè)術(shù)語(yǔ)或用戶不常見(jiàn)的名詞應(yīng)給予一定的幫助說(shuō)明。

5. 長(zhǎng)文本處理

表格內(nèi)容較多且有長(zhǎng)文本時(shí)，長(zhǎng)文本縮略展示；表格內(nèi)容較少時(shí)有長(zhǎng)文本，長(zhǎng)文本換行展示。

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

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

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

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

操作項(xiàng)超過(guò)三個(gè)時(shí)，將操作低頻折疊收起，可以幫助頁(yè)面突出更加重要的信息，減輕空間壓力，減少干擾。

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

給數(shù)據(jù)做升降區(qū)分可以快速判斷數(shù)據(jù)的趨勢(shì)，國(guó)內(nèi)數(shù)據(jù)升圖標(biāo)默認(rèn)為紅色，降的為綠色。

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

全局操作為無(wú)需選擇數(shù)據(jù)內(nèi)容即可進(jìn)行的操作，常見(jiàn)的有新增、導(dǎo)入、篩選。

批量操作就是對(duì)表格的多行數(shù)據(jù)同時(shí)操作，常見(jiàn)的有導(dǎo)出、刪除。

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

10. 斑馬線

條紋顏色：標(biāo)題背景色透明度60%左右；（條紋顏色視覺(jué)上應(yīng)該比標(biāo)題欄弱一點(diǎn)）鼠標(biāo)hover顏色：主題色透明度10%。

二、B端表格交互整理

1. 固定表頭，一目了然

當(dāng)閱讀豐富且繁多的表格時(shí)，由于屏幕有限，用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來(lái)閱讀信息。

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

2. 排序，讓信息有序起來(lái)

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

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

允許調(diào)整列的寬度來(lái)查看更加完整的縮略數(shù)據(jù)。被截?cái)嗟臄?shù)據(jù)，默認(rèn)支持鼠標(biāo)懸停時(shí)瀏覽器自帶title顯示完整數(shù)據(jù)。

4. 水平滾動(dòng)，固定首尾列

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

5. 分頁(yè)固定

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