起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識小廠B端啥都干-表格設計入門指南（上）
編輯導語：對于B端產品經理來說，表格一定是日常工作接觸最多的組件之一了，本篇文章作者向我們介紹了表格設計的入門指南，詳細地講述了表格設計的基礎部分內容，一起來學習一下吧。
眾所周知，表格是一種可以清晰、全面、高效地將數據展示出來的組件，作為B端產品，表格一定是產品設計工作中接觸最多的組件，今天我就以一個小場景來說說B端表格的應該如何入門。
關于本系列文章，有幾點需要提前告訴你：
- 無特別說明的業務案例，都是虛構案例，邏輯合理，但可能過于簡潔，不符合業務的復雜性；
- 使用的解決方案更像是一個臨時方案；
- 簡單的業務、臨時的方案是為了將你快速地帶入到場景中來，無需深究；
我是個野路子出身的產品經理，做過Java研發，后來轉做過2G、2B的產品經理，我的學習歷程是先看別人怎么做，想想為什么，然后嘗試自己做一下，最后再想辦法去學習怎么做，慢慢去提升。所以，我的文章通常會分為三個部分，本次B端表格設計入門指南將分為如下幾個部分：
- 上篇：表格常見的樣式、組件配合（看看別人怎么做的，為什么這么做，然后自己試一下）
- 中篇：表格的概念和設計原理（想辦法去學習）
- 下篇：只能幫你到入門了（慢慢去提升）
一、基礎表格
假設有個系統，現在需要將人員信息展示出來，這時也許就是一個簡單的表格。
隨著信息的增加，業務的推進，表格可能變成下面這種情況。
這時候表格就會變得很長，在視覺體驗上不會很好，所以此時就引入了固定列的概念。
二、固定列+固定行
這樣可以保證在表格長度很長的情況下，常用信息、重要信息、操作按鈕能始終出現在用戶的最佳可視范圍內。
同理，如果表格高度非常高的的情況下，我們也可以使用固定行的設計，來將表頭信息始終展現出來。
若展示出來的數據越來越多的話，或者操作按鈕越來越多了，此時固定列將無法滿足展示的需求，這時可以改成展開行、按鈕組的形式來展示。
三、展開行+按鈕組
將展開行與按鈕組的功能放在一起介紹，是因為他們有一個共同的特性，優先級分層，展開行是將信息分為了重要主要信息和次要信息，而按鈕組則是將按鈕分成了常用按鈕和非常用按鈕，也可以設計成預覽查看類和操作類按鈕等等。
四、分頁+搜索+篩選+排序
當數據的逐漸增多，在一屏中展示大量的數據會讓用戶感到疲憊和無力，這時就可以引入分頁，來減少用戶的視覺疲勞，同時再使用精準搜索+篩選這兩種組件，來幫助用戶更快、更舒適的查看和查找表格數據。
為了減少用戶的記憶成本，我們也可以使用模糊搜索；同時，基于用戶的習慣，或者說是視覺能力，我們也可以讓用戶來決定在每頁展示更多（也可能是更少）的數據量；最后，加入一個簡單的排序功能，一定能幫助用戶更快的去找到那些關鍵人物，如年齡最小的那個人、工號最靠前的那個人。
五、樹表格+斑馬線
隨著產品的使用，用戶可能不在要求數據內容的展示程度（數據維度），而更希望能在數據結構上、視覺體驗上有一個更好的呈現方式，對于本次的人員信息，我們以部門為區分依據，對人員進行樹結構調整。這里為了增加每行數據的辨識度，減少用戶的閱讀成本，還是用了一個隔行變色的設計。
六、合并行+合并列
對于樹形表格，其實并不是所有用戶都能很好的接受他，雖然他很直觀，但在B端用戶中，他們可能跟習慣類似Excel中的一些展示形式。
七、批量操作（刪除、修改、導入/導出）
當需要操作的數據很多時，比如需要現在需要新增100個員工，用戶可能需要現在線下先用Excel將新員工的信息收集上來，然后再一個個錄入到信息中，又比如現在某個部門的人員集體辭職了，或者這個部門的人員全部調動到另一個部門了等等，這些同質化的反復操作，我們都應該將他做成批量操作。
八、小結
表格設計中可以用到的思路當然不止這些，比如表頭可以使用合并列來對數據進行一個分類，可以實現鼠標指向的那一行高亮，可以使用氣泡來增加隱藏字段的顯示，可以使用標注信息來增加表頭的內容等等，這些我會在下一篇中給大家講到，但我認為，最基礎的部分就是第一篇中介紹的這些內容，這些功能熟悉后，將決定你設計表的一個能力下限達到一個及格水平，及格水平意味著你設計出來的表格可能不美觀、不好用，但一定是能用的，能滿足用戶需求的。
最后需要重提一下，第一篇中的業務場景和解決方案略微偏離實際，而且還有些理想主義在里面，但這并不影響，因為你需要了解的是，表格設計常用的手段有哪些，有固定行列位置、展開行、分頁、搜索/篩選等等，而不是糾結于我當前的解決方式是否合理。
本文由 @何海不擇細流 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
