編輯導語：對於B端產品經理來說，表格一定是日常工作接觸最多的組件之一瞭，本篇文章作者向我們介紹瞭表格設計的入門指南，詳細地講述瞭表格設計的基礎部分內容，一起來學習一下吧。眾所周知，表格是一種可以清晰、全面、高效地將數據展示出來的組件，作為B端產品，表格一定是產品設計工作中接觸最多的組件，今天我就以一個小場景來說說B端表格的應該如何入門。關於案例，有幾點需要提前告訴你：本業務案例純屬虛構，實際的場景會復雜得多；使用的解決方案在一開始有很多不合理的地方，有點類似於沒有經過思考，或是臨時的一個解決方案，這個將通過多篇文章來逐步優化；多篇文章的一個整體結構。表格常見的樣式、組件配合（表格設計的下限）；表格的概念和設計原理（易用性、易讀性）；為什麼隻能幫你入門（不斷地優化、貼合業務是必然的）。一、基礎表格假設有個系統，現在需要將人員信息展示出來，這時也許就是一個簡單的表格。隨著信息的增加，業務的推進，表格可能變成下面這種情況。這時候表格就會變得很長，在視覺體驗上不會很好，所以此時就引入瞭固定列的概念。二、固定列+固定行這樣可以保證在表格長度很長的情況下，常用信息、重要信息、操作按鈕能始終出現在用戶的最佳可視范圍內。同理，如果表格高度非常高的的情況下，我們也可以使用固定行的設計，來將表頭信息始終展現出來。若展示出來的數據越來越多的話，或者操作按鈕越來越多瞭，此時固定列將無法滿足展示的需求，這時可以改成展開行、按鈕組的形式來展示。三、展開行+按鈕組將展開行與按鈕組的功能放在一起介紹，是因為他們有一個共同的特性，優先級分層，展開行是將信息分為瞭重要主要信息和次要信息，而按鈕組則是將按鈕分成瞭常用按鈕和非常用按鈕，也可以設計成預覽查看類和操作類按鈕等等。四、分頁+精準搜索當數據的逐漸增多，在一屏中展示大量的數據會讓用戶感到疲憊和無力，這時就可以引入分頁和精準搜索兩種組件，來幫助用戶更快、更舒適地查看和查找表格數據。五、模糊搜索+篩選當數據足夠多，或者無法滿足用戶的快速搜索的需求時，我們可以使用模糊搜索+篩選的方式，來加快用戶的搜索效率。六、樹表格+斑馬線+排序+自定義每頁數據量隨著產品的使用，用戶可能不再要求數據內容的展示程度（數據維度），而更希望能在數據結構上、視覺體驗上有一個更好的呈現方式，對於本次的人員信息，按部門形成樹形結構為例，對人員進行樹形結構展示。同時，這裡還出現瞭一些細微的變化，首先是表頭部分，出現瞭一個排序按鈕，用戶可以基於某一列來進行排序，其次是我們使用瞭隔行變色的設計，來減少用戶查看每行數據的困難程度，最後是分頁按鈕，增加瞭一個設定每頁可以顯示多少條數據的功能。七、合並行+合並列對於樹形表格，其實並不是所有用戶都能很好的接受他，雖然他很直觀，但在B端用戶中，他們可能跟習慣類似Excel中的一些展示形式。八、批量操作（刪除、修改、導入/導出）當需要操作的數據很多時，比如需要現在需要新增100個員工，用戶可能需要現在線下先用Excel將新員工的信息收集上來，然後再一個個錄入到信息中，又比如現在某個部門的人員集體辭職瞭，或者這個部門的人員全部調動到另一個部門瞭等等，這些同質化的反復操作，我們都應該將他做成批量操作。九、小結表格設計中可以用到的思路當然不止這些，比如表頭可以使用合並列來對數據進行一個分類。可以實現鼠標指向的那一行高亮，可以使用氣泡來增加隱藏字段的顯示，可以使用標註信息來增加表頭的內容等等，這些我會在下一篇中給大傢講到。但我認為，最基礎的部分就是第一篇中介紹的這些內容，這些功能熟悉後，將決定你設計表的一個能力下限達到一個及格水平，及格水平意味著你設計出來的表格可能不美觀、不好用，但一定是能用的，能滿足用戶需求的。最後需要重提一下，第一篇中的業務場景和解決方案略微偏離實際，而且還有些理想主義在裡面，但這並不影響，因為你需要瞭解的是，表格設計常用的手段有哪些，有固定行列位置、展開行、分頁、搜索/篩選等等，而不是糾結於我當前的解決方式是否合理。本文由 @何海不擇細流 原創發佈於人人都是產品經理。未經許可，禁止轉載。題圖來自 Unsplash，基於CC0協議。