毫無疑問，表格之于B端産品而言是及其重要的一部分，那麼，如何系統掌握B端産品中的表格設計呢？本文作者從表格設計規範與互動邏輯兩個角度提出了15點建議，幹貨滿滿，希望對你有幫助。
表格作為B端産品中重要的界面組成部分，承載着内容展示、資料記錄等多重任務。每家産品的表格看起來構成差不多，但在互動細節上仍然有很多好的地方值得我們仔細思考。
本次通過整理10條B端表格設計規範+5條B端表格互動邏輯，系統掌握B端産品中的表格設計～
一、B端表格規範整理
1. 對齊，高效的資訊擷取方式
表格内的資訊通過對齊，會更加規範易了解，給使用者視覺上的統一感，且視線流動順暢，能夠讓人快速捕捉到所要的内容。
- 文本資訊左對齊，因為現代人的閱讀方式習慣從左到右，符合正常心智；
- 資料資訊右對齊，友善數字大小的直覺對比；
- 内容寬度固定居中對齊，更好的資訊呈現及表格空間的節省；
- 表頭與資訊内容對齊方式一緻，一緻性以達到簡化，降低視覺噪音。
2. 表格列數與固定列
預設展示的列數為3-8列，如果需要展示更多列數，則需要優先固定展示重要列，其餘的列的内容會以滾動條滑動而展示出來。
有操作時需固定，操作項不固定時無法快速定位會降低操作效率；重要資訊固定，有利于快速擷取重要的内容。
3. 表格清單的寬度
寬度的尺寸大小自适應，但需要根據文字的重要性顯示，重要文字内容優先完整顯示。（如果由于螢幕小表格會出現省略，就要考慮多一個浏覽器自帶的title提示。）
注：當第一列是序号或多選項時，列寬不需要太寬，這樣視覺不會顯得空洞。
4. 表頭每列标題文字字數
字元不要多，如果文字太多，就需要做文字資訊精簡化。同樣，對于專業術語或使用者不常見的名詞應給予一定的幫助說明。
5. 長文本處理
表格内容較多且有長文本時，長文本縮略展示；表格内容較少時有長文本，長文本換行展示。
6. 空白資料填充「-」，避免留白産生疑慮
表格中經常會出現空資料或無資料的情況，留白處理會給使用者造成一定的困惑和誤解，是系統沒有加載出來嗎？明智的做法，使用「-」填充顯示。圖檔為空時使用圖檔占位符。
7. 操作列的統一
同一項目中的操作列命名應該保持統一，例如：正常增、删、改、查命名為新增、删除、編輯、詳情。
操作項超過三個時，将操作低頻折疊收起，可以幫助頁面突出更加重要的資訊，減輕空間壓力，減少幹擾。
8. 資料升降樣式
給資料做升降區分可以快速判斷資料的趨勢，國内資料升圖示預設為紅色，降的為綠色。
9. 表格全局操作和批量操作
全局操作為無需選擇資料内容即可進行的操作，常見的有新增、導入、篩選。
批量操作就是對表格的多行資料同時操作，常見的有導出、删除。
全局和批量都不屬于單個對象是以需要放在表格外，操作具體的位置排放根據操作的重要程度一次從左到右遞減。
10. 斑馬線
條紋顔色：标題背景色透明度60%左右；（條紋顔色視覺上應該比标題欄弱一點）滑鼠hover顔色：主題色透明度10%。
二、B端表格互動整理
1. 固定表頭，一目了然
當閱讀豐富且繁多的表格時，由于螢幕有限，使用者不得不拖動橫向或縱向滾動條來閱讀資訊。
固定表頭，能夠讓使用者明白目前單元格内資訊的屬性而不至于不知道該資訊的意思。固定表頭也是一種界面友好性的展現。
2. 排序，讓資訊有序起來
可以讓無序資訊内容進行有序排列，排序分為升序和降序，一般用在資料、時間、數量上。
3. 調整列寬度，檢視完整資料
允許調整列的寬度來檢視更加完整的縮略資料。被截斷的資料，預設支援滑鼠懸停時浏覽器自帶title顯示完整資料。
4. 水準滾動，固定首尾列
呈現大型資料集時，水準滾動是不可避免的，通過橫向滾動檢視其它資料。将首列進行固定（若包含勾選操作，則一起固定），以便使用者将資料與對象進行對應。
5. 分頁固定
若表格是分頁處理的，分頁會放在上部、下部或上下部均有，分頁固定省去了使用者需要翻到頂部或底部進行操作的麻煩。
作者：譚檀檀