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