起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識數據可視化必修課：表格篇
編輯導語：在我們的日常工作中，很多時候我們都會用到表格作為整理的一個組件，表格起到了很大的作用，可以清晰準確的找到想要的數據，在數據可視化上也有重要的用處；本文作者分享了關于數據可視化中的表格設計，我們一起來學習一下。
在后臺系統、數據類產品、B端產品中，表格作為最常用的一種數據整理的組件，其重要性不用過多贅述。但如何更好的設計表格呢？想必多數剛接觸 B 端的設計師都有過這個困擾。
今天，我給大家整理了一份關于表格的攻略，希望能幫到你。
一、什么是表格
表格是一種數據可視化的一種形式，可以查看和處理大量數據，它主要承載了數據的收集、整理、組織、展示、對比和歸納。
二、表格的設計原則
易讀性：
表格的層級一定要劃分的非常清晰，層級分明。你要讓用戶更關注的是數據本身，而不是花里胡哨的樣式。
可尋性：
列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶快速查找信息。
高效性：
表格要用最短的時間告訴用戶想要得到的信息。
靈活性：
可以讓用戶根據自己的習慣及興趣自定義自己的表格展示，比如排序、篩選、調整表頭順序等功能。
三、表格的構成
外部區域：標題、操作區、篩選區；
內部區域：表頭、表體、表尾。
介紹完表格的構成，我們再來把每一個元素拆解出來詳細介紹。
四、表格元素解析
1）標題
標題是整個表格內容概述的名稱，此名稱盡量簡潔明了，不要太長，能兩個字寫清楚絕對不用三個字。
如果標題名稱難以理解的話，可以加二級提示，有兩種常用樣式：tooltips（常用）、二級提示語。
標題的位置一般在左上角。
2）操作區
對表格內容的增刪改等操作的區域。
使用建議：
有且只有一個主操作：
特殊情況下可以沒有主操作，但不能有兩個主操作。
樣式統一：
同一個產品中，操作區樣式規范要保持一致。
操作的優先級：
根據使用的優先級，把常用的操作放到一級展示，不常用的收到二級展示。
不同操作狀態區分要明確：
不是所有的操作都是可以直接用的，比如有的操作在沒有選擇內容的時候是 Disable 狀態，那這時候就要和其他可操作的有明顯的樣式區別，否則容易讓用戶分不清可不可以操作。
刷新按鈕：
有很多同學對這個操作是不是有些疑惑？有人覺得瀏覽器都有刷新功能啊，干嘛還要多此一舉再加個刷新。其實這個刷新功能還是很有必要的，這個刷新只針對于列表內的內容。
在有的后臺管理界面中，因為數據量很大，如果每次刷新都用瀏覽器自帶刷新的話，他會重新加載整個頁面的內容，很不好用。很多情況下，用戶只想重新加載一下列表的內容，那這個刷新就很好用啦。
同時刷新后要有即時反饋，告訴用你他點完操作后目前處于哪個階段中。
導出功能：
此功能可以把列表內容導出為你想要的格式（一般為 word / pdf）。
數據量較大的列表中，導出功能可以很方便的把自己過濾的內容下載到本地進行其他需求的查看。
導出內容的范圍是哪些一定要事先想好，一般下載內容的范圍以下幾種：
- 當前頁所有列表內容（常用，而且實現難度很低）；
- 經過二次過濾后，導出所有頁上的列表內容；
- 所有頁的列表內容（不常用，而且實現及數據處理難度會非常大，慎重選擇）。
導入功能：
既然可以導出，就有導入。導入報表對文檔會有要求，一般都是固定格式的文檔，而且文檔與列表中的字段都可以一一對應上，才可以完美導入。導入功能中 word 和 excel 是最常用的格式。需要注意的是，導入文檔后最好有二次確認提示，告訴用戶上傳了哪些內容，同時該內容是否與現有的列表字段有沖突。
自定義內容：
自定義分兩種：
- 可以設置某列內容是否展示（需要注意的是：列內容展示數量可以不設置上限，但必須設置下限）；
- 可以設置每一列內容的左右排序。
如果表格內容比較多的情況下，這兩個功能是很有必要的，如果內容少，則可忽略這兩個功能。
那怎么區分內容的多與少呢？
我的理解：常用分辨率下，一屏可顯示完整內容的話為內容少；反之則內容多。
3）Tab（標簽切換）
可以快速切換不同維度下的表格內容。
使用建議：
不同狀態區分要明顯；
① Tab 數量不宜過多，如果不可避免的數量過多的話，一般有兩種方案：
- 最多顯示出 5 個 Tab，超過 5 個 Tab 放在“更多里面”；
- 交互上支持左右滑動 / 切換 Tab。
② Tab 只放文本，最多可以放個 icon，盡量避免其他干擾信息；
③ Tab 信息要精簡。
4）篩選區
篩選區是對表格數據的主觀再處理，用戶根據篩選功能可以得到更精準的信息。
搜索功能：
模糊搜索 or 精準收縮：
搜索首先要確定哪幾個字段可以被搜索到，名稱？編號？等等…
模糊搜索使用的頻率居多，畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的，兩者皆可選擇，根據產品選擇即可。
單字段搜索：
輸入單字段進行搜索，比較常用的方式之一。
多字段組合搜索：
可以輸入多個字段進行組合搜索（取并集），一般交互方式為回車完成書寫。此方式比單字段搜索更加精準，數據量過大的時候優勢就很明顯了。
切換類別搜索：
可以設置幾個常用的類別來快速切換搜索的維度，方便用戶使用。
多類別組合搜索：
多類別組合搜索適合更加復雜的列表內容，并且類別名稱會展示出來，可以比較清晰的看到用戶用的哪種類別名進行搜索的。
篩選的樣式：
輸入框、下拉選擇、日期選擇器、單選、多選。
5）表頭
每一列列表的小標題，是對整列內容的描述。
表頭區域比較常用的幾個功能：排序、過濾、進一步解釋/說明、拖拽排序、拖拽增加 / 縮小列寬。
6）表體
表體承載了表格的主要內容，它的內容形式有很多：文本、icon、進度條、標簽等等。表體樣式分為兩種：斑馬線和線條分割。
使用建議：
- 內容決定表格的高度，一般設置 2~3 種行高就可以滿足大部分場景了；
- 把全局唯一且最重要的字段放在第一列，比如：名稱。同時可以把名稱固定在列表左側，就算列表橫向內容過多的時候，也可以第一時間看出區別；
- 要設置最大寬度和最大高度，避免特殊情況下的內容展示；
- 對齊方式：普通文本左對齊，數字類右對齊（記住就行，這是規范）；
- 最多支持二級列表，不可再多；
- 可以把一些常用的操作放出來，放在列表最后一列。
7）表尾
表尾主要是展示表格的統計信息、分頁、跳轉頁面等；每頁顯示條數常規情況下默認為 10/頁，最多 200/頁，再多的話加載速度會變慢，影響使用體驗。
五、列表詳情交互展現
1）彈窗
- 模態對話框：用戶在當前頁面彈出一個彈窗，除此彈窗內容外不可操作其他區域內容，產品的主觀意識較強。
- 非模態對話框：也是彈出個彈窗，但是與模態對話框不同的是它不打擾其他用戶操作，此彈窗存在的時候，用戶同時也可以操作其他區域，產品的主觀意識較弱。
2）抽屜
抽屜現在使用的頻率也是蠻高的，它的好處很明顯：在當前頁面彈出個抽屜，可展示的內容區域比彈窗多了很多，同時如果區域不夠用的話，還可以增加 Tab 來展示更多信息。而且不同資源的抽屜切換也比較方便。
缺點就是：并不能完全讓用戶的聚焦于某個信息的詳情，存在一定程度的信息干擾。
3）跳轉頁面
直接跳轉個新頁面作為詳情，好處就是可以展示更多的內容信息以及可以讓用戶更聚焦于當前內容。
缺點就是：新開頁面這種操作本身就比較重，如果在當前頁面可解決的事情，切記不要讓用戶新開頁面。
4）嵌套
嵌套就是上面提到的二級列表，它一般用于一級列表的內容補充，并且內容不宜過多。
在數據可視化中，表格是最常見的一種，它的知識點有很多，本篇文章只是到目前為止我的一些認知，如果有漏掉的知識點歡迎指教，我們都是學生，都要學習。
作者：友設青年，公眾號：友設青年
本文由 @友設青年 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
寫得好棒！學習了～
漏掉的點可以推薦一些設計資料啥的降低年輕設計師們的使用門檻嘛，比如ant Design的組件庫以及規范就很好用】呀