起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端交互界面基礎組件——表格
編輯導語：在我們的日常工作中經常會用到表格，表格的功能可以讓我們很清晰快捷的了解當前情況，設計一個好的表格也能大大的提升我們的工作效率；本文作者分享了關于B端交互界面基礎組件表格的設計，我們一起來看一下。
我們常說一個表格基本的功能是包含增刪改查的，為了完整的表達這一功能，常見的就是用表格組件，表格被公認為是展現結構化數據最為清晰、高效的形式；常和按鈕、搜索、篩選、分頁等其他界面元素一起協同，構成表格頁。
它具備結構簡單、分隔和歸納明確等特點，幫助對比分析，大大提升了用戶對信息的接收效率和理解程度；回歸到線下場景更像家里的柜子，我們使用抽屜可以用來收納整理，極大提升用戶信息收納的效率、空間利用率，查找規律，打造了一個信息密度極高的歸納頁。
下面我將表格拆分成多個細節，并詳細講解各部分如何來設計，并結合業務場景深挖如何正確的使用表格：
一、數據查看
1. 表格構成與布局
- 內部：由表頭、行、列、單元格共4部分組成；
- 外部：由篩選區域、操作按鈕區、分頁區共3 大類組成。
2. 檢驗表格設計好壞
在我們對表格的設計思考過程中，需要注意兩項原則：可讀（可視化）與易用
好的數據表格是全面整合并呈現業務數據，提供順暢閱讀體驗，便于用戶發掘重要信息，進行便捷操作，主要是從信息降噪、呼吸適中、高效易讀以及詳情查看四個方面去檢驗表格的好壞。
這里我們從四個方面來驗證表格的好壞：信息降噪、呼吸適中、高效易讀、查看詳情
1）信息降噪
信息降噪：內容
表頭：表頭標簽應該簡煉準確，以達到節省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身；當然對于產品而言，先能把事情說清楚，再考慮文字的簡潔性。
這需要我們做到：
表頭內容上面做到精簡，列數控制在7+-2，列舉出用戶更為關注的數據，更多的信息我們可以在詳情中展示。
自定義列：如果不同用戶看到的信息側重不同，我們還可以通過增加設置類型的按鈕，讓用戶進行自定義列的展示。
信息降噪：視覺
幾種常見的風格樣式：
- a.帶豎向分割線：表格有均勻而明顯的分割線，邊框單元格比較明顯。
- b.帶斑馬紋：隔行交替使用不同底色來區分數據。
- c.極簡樣式：僅顯示水平線可減少整個網格的視覺噪音。
關于樣式的選取技巧：
當前樣式一和樣式二比較傳統老套，比較推薦極簡，去掉不必要的視覺干擾，針對想要突出某一行，可以鼠標hover給一個斑馬紋，這樣可以方便看某一行數據，讓數據更加聚焦，如果在你數據特巨長無比的情況下，斑馬紋還是比較重要的。
去掉不必要的裝飾：能用線性標簽就不要使用面性標簽，盡量做到輕盈不要太重。
不要出現襯線體等字體的干擾。
2）呼吸適中
關于單元格行高制定：
合適的填充和邊距對于視覺設計至關重要，既包括保證數據單元格之間的留白，又包括單元格內部留白，以保證易讀性，當創建表格設計規范并嚴格遵循后，就可以創建視覺一致的表。
開始之前首先明確一下開發是怎么實現行高的，從下圖可以看出，開發在實現設計稿時，通常是按照行高來寫的：
單元格高度=文字行高+上間距+下間距
一般我們制定的單元格規范為：
文字字號：n
文字行高：1.5n
上、下間距：1.2n
以此來保證各場景下獲取信息的效率與易讀性。
關于列與列之間的制定：
表格本身應具有最小寬度，在不同畫面中寬度應可以增長到整個空間，所以每個列也需具備最小寬度。如果頁面寬度小于表格，那么表格應水平可拖拽，當表格寬度大于頁面寬度時候，固定首尾列，左右滑動。
隨著頁面搜索和拉伸變n2,n1保持不變，并且在拉長或變短，表格的呼吸感、節奏感不受影響 ，N2會隨著表格的變化自適應產生變動。
回歸到開發場景中，n2 對應盒子模型中的margin-right，字體的行高相當于padding
3）高效易讀
列的對齊方式：
單元格合適的位置排列能夠提升表格的效率和準確度。對齊能夠很好的形成視覺引導線，會讓表格更加規范易理解，將元素進行對齊；既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。
標題和內容：一般采用左對齊，更高效的閱讀瀏覽順序。
表格：諸如金額、數量等數值排列時，通常采用“右對齊”方式，既方便用戶快捷讀取數據，還可以使用戶進行縱向數據對比。
操作項：一般放置在尾列，左對齊，保證表格為規整的盒子模型。
空白格：
單元格中不要做無意義的留白，以上傳貨物為例，未上傳為-，缺貨的顯示為0。
分頁器：
選擇合適的翻頁器，利用分頁可以緩解服務器的加載壓力，通常情況下，分頁器緊跟在表格正文之后，主要展示正文中的數據量以及單頁數據條目信息；同時，兼具一些導航的功能，指示當前所在頁面以及跳轉到指定頁面。
- 每一頁的默認行數：10行以上，減少翻頁的次數；
- 給出默認行的數量后，也可以讓用戶自定義每頁行的數量，相比跨屏更加方便。
操作項：
為保證用戶閱讀高效性，我們可以收起低頻操作箱，這里注意：除了產品經理和客戶，我們可以通過之前的埋點pv、uv來區分高頻和低頻的操作項。
行的排序：
- 默認最近創建的放在最上面，這點是由于操作完立馬有反饋，針對最近一條使用頻率比較高；
- 可以用帶排序的表頭，讓用戶自定義排序；
4）詳情查看
精簡表格之后如何查看隱藏起來的次要信息呢？
詳情入口：可以在操作里加“詳情”。
也可以把名稱做成可點擊樣式，跳轉詳情：
5）交互方式
展開行：
展開行（Expandable rows）允許用戶無需打開新頁面即可查看附加信息，防止用戶迷失；展開可以是一個二級表格，重新定義表頭和內容，也可以是一個列表展示。
彈窗：
包括模態彈窗和非模態彈窗，模態彈窗可以打開任一個條目進行詳細查看，非模態彈窗可以同時打開多個，并允許拖動彈窗位置進行信息對比。
抽屜：
表格內部側邊展開，相比彈窗減少了頁面層級和隔離感，承載內容變大。
頁面切換：
適合詳情比較多，且需要編輯的情況，相當于新開一個tab欄。
二、數據過濾
搜索、篩選和標簽頁是用戶獲取精準目標的辦法，這是一項基本功能，可讓用戶從默認的表格數據輕松獲取要查找的內容，在數據量較大的表中特別有用，一般位于表上方的操作區域或表頭區域。
1. 搜索
一般的搜索功能分為模糊搜索和帶標簽的精準搜索，輸入搜索框輸入用戶關心的內容，既可以實時篩選，也可以點擊觸發。
1）模糊搜索
- 優點：只要有相關的內容都會搜索出來，減少了精準搜索帶來的記憶負擔。
- 缺點：容易把不想管的信息也帶出來。例如搜索手機號，把相關編碼也匹配了出來。
2）帶標簽的搜索
- 優點：搜索匹配精準度高。
- 缺點：每次只能對單一條件進行搜索。
2. 篩選
一般搜索和篩選會同時出現，但是兩者一般很少同時使用來對數據進行定位，在一般情況下，搜索更多的是對單一或者包含某個字段的的數據來進行定位；篩選則是用來查詢一類數據，下面我們將分為兩種篩選進行分析：下拉篩選、平鋪篩選。
1）下拉篩選
- 優點：空間利用率高、起到了很好的收納作用。
- 缺點：無法直觀看到所有篩選項。
2）平鋪篩選
- 優點：操作效率高，篩選項一目了然，支持輸入更多篩選條件。
- 缺點：空間利用率低，不適合選項太多的情況。
這里我們需要注意，當篩選項過多時，我們應當按照操作頻次來排列篩選項，因為用戶的目標均是優先于業務邏輯；當所有的篩選項都是屬于低頻操作時，可以把所有的篩選項放置在高級篩選，作為高級操作，用彈窗來承載。
3. 標簽
標簽頁的篩選一般和時間、狀態流轉相關，通常按照用戶最關注的目標設置為默認的選項。
三、數據操作
操作項一般存在于條目最后，以及表頭位置，分別對應單條操作、批量和全局操作的場景。
數據操作的分類：
- 控制范圍：單行操作、批量操作、全局操作；
- 操作屬性：新增數據、編輯數據、刪除數據、業務處理。
1）判斷控制范圍
2）再判斷放置位置
3）最后優化信息層級
四、總結
以上便是我個人對于web典型表格設計的拆解，雖然是簡單的數據表格，其實是web端非常重要的部分，通過合理的拆解分析和布局，使得原本枯燥的數據呈現出生命力。
但是組件是死的，人是活的，希望大家今后遇到具體的業務場景，還是需要具體分析，真實地圍繞用戶的實際使用場景，為用戶提供高效的篩選工具，促進信息的理解，降低用戶的使用成本，這才是本質內容。
參考資料：
Ant Design：https://ant.design/index-cn
本文由@斯兒們 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
圖表組件庫或者常用的組件庫可以分享下不？
很棒！
感謝分享
不錯不錯不錯
文章不多，都是精品【表情】
我拿這篇文章培訓下面的產品經理了，期待更多文章！