表格是一種數(shù)據(jù)可視化的一種形式，可以查看和處理大量數(shù)據(jù)，它主要承載了數(shù)據(jù)的收集、整理、組織、展示、對比和歸納。
二 表格的設計原則
2.1 易讀性
表格的層級一定要劃分的非常清晰，層級分明。你要讓用戶更關注的是數(shù)據(jù)本身，而不是花里胡哨的樣式。
2.2 可尋性
列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶快速查找信息。
2.3 高效性
表格要用最短的時間告訴用戶想要得到的信息。
2.4 靈活性
可以讓用戶根據(jù)自己的習慣及興趣自定義自己的表格展示，比如排序、篩選、調整表頭順序等功能。
三 表格的構成
外部區(qū)域：標題、操作區(qū)、篩選區(qū)；
內(nèi)部區(qū)域：表頭、表體、表尾。
介紹完表格的構成，我們再來把每一個元素拆解出來詳細介紹。
四 表格元素解析
4.1 標題
標題是整個表格內(nèi)容概述的名稱，此名稱盡量簡潔明了，不要太長，能兩個字寫清楚絕對不用三個字。
如果標題名稱難以理解的話，可以加二級提示，有兩種常用樣式：tooltips（常用）、二級提示語。
標題的位置一般在左上角。
4.2 操作區(qū)
對表格內(nèi)容的增刪改等操作的區(qū)域。
使用建議：
4.2.1 有且只有一個主操作
特殊情況下可以沒有主操作，但不能有兩個主操作。
4.2.2 樣式統(tǒng)一
同一個產(chǎn)品中，操作區(qū)樣式規(guī)范要保持一致。
4.2.3 操作的優(yōu)先級
根據(jù)使用的優(yōu)先級，把常用的操作放到一級展示，不常用的收到二級展示。
4.2.4 不同操作狀態(tài)區(qū)分要明確
不是所有的操作都是可以直接用的，比如有的操作在沒有選擇內(nèi)容的時候是 Disable 狀態(tài)，那這時候就要和其他可操作的有明顯的樣式區(qū)別，否則容易讓用戶分不清可不可以操作。
4.2.5 刷新按鈕
有很多同學對這個操作是不是有些疑惑？有人覺得瀏覽器都有刷新功能啊，干嘛還要多此一舉再加個刷新。其實這個刷新功能還是很有必要的，這個刷新只針對于列表內(nèi)的內(nèi)容。
在有的后臺管理界面中，因為數(shù)據(jù)量很大，如果每次刷新都用瀏覽器自帶刷新的話，他會重新加載整個頁面的內(nèi)容，很不好用。很多情況下，用戶只想重新加載一下列表的內(nèi)容，那這個刷新就很好用啦。
同時刷新后要有即時反饋，告訴用你他點完操作后目前處于哪個階段中。
4.2.6 導出功能
此功能可以把列表內(nèi)容導出為你想要的格式（一般為 word / pdf）。
數(shù)據(jù)量較大的列表中，導出功能可以很方便的把自己過濾的內(nèi)容下載到本地進行其他需求的查看。
導出內(nèi)容的范圍是哪些一定要事先想好，一般下載內(nèi)容的范圍以下幾種：
- 當前頁所有列表內(nèi)容（常用，而且實現(xiàn)難度很低）；
- 經(jīng)過二次過濾后，導出所有頁上的列表內(nèi)容；
- 所有頁的列表內(nèi)容（不常用，而且實現(xiàn)及數(shù)據(jù)處理難度會非常大，慎重選擇）。
4.2.7 導入功能
既然可以導出，就有導入。導入報表對文檔會有要求，一般都是固定格式的文檔，而且文檔與列表中的字段都可以一一對應上，才可以完美導入。導入功能中 word 和 excel 是最常用的格式。需要注意的是，導入文檔后最好有二次確認提示，告訴用戶上傳了哪些內(nèi)容，同時該內(nèi)容是否與現(xiàn)有的列表字段有沖突。
4.2.8 自定義內(nèi)容
自定義分兩種：
- 可以設置某列內(nèi)容是否展示（需要注意的是：列內(nèi)容展示數(shù)量可以不設置上限，但必須設置下限）；
- 可以設置每一列內(nèi)容的左右排序。
如果表格內(nèi)容比較多的情況下，這兩個功能是很有必要的，如果內(nèi)容少，則可忽略這兩個功能。
那怎么區(qū)分內(nèi)容的多與少呢？
我的理解：常用分辨率下，一屏可顯示完整內(nèi)容的話為內(nèi)容少；反之則內(nèi)容多。
4.3 Tab（標簽切換）
可以快速切換不同維度下的表格內(nèi)容。
使用建議：
- 不同狀態(tài)區(qū)分要明顯；
-
Tab 數(shù)量不宜過多，如果不可避免的數(shù)量過多的話，一般有兩種方案：
- 最多顯示出 5 個 Tab，超過 5 個 Tab 放在“更多里面”；
- 交互上支持左右滑動 / 切換 Tab。
- Tab 只放文本，最多可以放個 icon，盡量避免其他干擾信息；
- Tab 信息要精簡。
4.4 篩選區(qū)
篩選區(qū)是對表格數(shù)據(jù)的主觀再處理，用戶根據(jù)篩選功能可以得到更精準的信息。
4.4.1 搜索功能：
4.4.1.1 模糊搜索 or 精準搜索
搜索首先要確定哪幾個字段可以被搜索到，名稱？編號？等等…
模糊搜索使用的頻率居多，畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的，兩者皆可選擇，根據(jù)產(chǎn)品選擇即可。
4.4.1.2 單字段搜索
輸入單字段進行搜索，比較常用的方式之一。
4.4.1.3 多字段組合搜索
可以輸入多個字段進行組合搜索（取并集），一般交互方式為回車完成書寫。此方式比單字段搜索更加精準，數(shù)據(jù)量過大的時候優(yōu)勢就很明顯了。
4.4.1.4 切換類別搜索
可以設置幾個常用的類別來快速切換搜索的維度，方便用戶使用。
4.4.1.5 多類別組合搜索
多類別組合搜索適合更加復雜的列表內(nèi)容，并且類別名稱會展示出來，可以比較清晰的看到用戶用的哪種類別名進行搜索的。
4.4.2 篩選的樣式
輸入框、下拉選擇、日期選擇器、單選、多選。
4.5 表頭
每一列列表的小標題，是對整列內(nèi)容的描述。
表頭區(qū)域比較常用的幾個功能：排序、過濾、進一步解釋/說明、拖拽排序、拖拽增加 / 縮小列寬。
4.6 表體
表體承載了表格的主要內(nèi)容，它的內(nèi)容形式有很多：文本、icon、進度條、標簽等等。表體樣式分為兩種：斑馬線和線條分割。
使用建議：
- 內(nèi)容決定表格的高度，一般設置 2~3 種行高就可以滿足大部分場景了；
- 把全局唯一且最重要的字段放在第一列，比如：名稱。同時可以把名稱固定在列表左側，就算列表橫向內(nèi)容過多的時候，也可以第一時間看出區(qū)別；
- 要設置最大寬度和最大高度，避免特殊情況下的內(nèi)容展示；
- 對齊方式：普通文本左對齊，數(shù)字類右對齊（記住就行，這是規(guī)范）；
- 最多支持二級列表，不可再多；
- 可以把一些常用的操作放出來，放在列表最后一列。
4.7 表尾
表尾主要是展示表格的統(tǒng)計信息、分頁、跳轉頁面等。每頁顯示條數(shù)常規(guī)情況下默認為 10/頁，最多 200/頁，再多的話加載速度會變慢，影響使用體驗。
五 列表詳情交互展現(xiàn)
5.1 彈窗
- 模態(tài)對話框：用戶在當前頁面彈出一個彈窗，除此彈窗內(nèi)容外不可操作其他區(qū)域內(nèi)容，產(chǎn)品的主觀意識較強。
- 非模態(tài)對話框：也是彈出個彈窗，但是與模態(tài)對話框不同的是它不打擾其他用戶操作，此彈窗存在的時候，用戶同時也可以操作其他區(qū)域，產(chǎn)品的主觀意識較弱。
5.2 抽屜
抽屜現(xiàn)在使用的頻率也是蠻高的，它的好處很明顯：在當前頁面彈出個抽屜，可展示的內(nèi)容區(qū)域比彈窗多了很多，同時如果區(qū)域不夠用的話，還可以增加 Tab 來展示更多信息。而且不同資源的抽屜切換也比較方便。
缺點就是：并不能完全讓用戶的聚焦于某個信息的詳情，存在一定程度的信息干擾。
5.3 跳轉頁面
直接跳轉個新頁面作為詳情，好處就是可以展示更多的內(nèi)容信息以及可以讓用戶更聚焦于當前內(nèi)容。
缺點就是：新開頁面這種操作本身就比較重，如果在當前頁面可解決的事情，切記不要讓用戶新開頁面。
5.4 嵌套
嵌套就是上面提到的二級列表，它一般用于一級列表的內(nèi)容補充，并且內(nèi)容不宜過多。
在最后
在數(shù)據(jù)可視化中，表格是最常見的一種，它的知識點有很多，本篇文章只是到目前為止我的一些認知，如果有漏掉的知識點歡迎指教，我們都是學生，都要學習。
作者：Luckgg
轉載請注明：學UI網(wǎng)》數(shù)據(jù)可視化必修課 – 表格篇
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司