產(chǎn)品經(jīng)理數(shù)據(jù)可視化必修課：表格篇

1、編輯導(dǎo)語(yǔ)：在我們的日常工作中，很多時(shí)候我們都會(huì)用到表格作為整理的一個(gè)組件，表格起到了很大的作用，可以清晰準(zhǔn)確的找到想要的數(shù)據(jù)，在數(shù)據(jù)可視化上也有重要的用處；本文作者分享了關(guān)于數(shù)據(jù)可視化中的表格設(shè)計(jì)，我們一起來(lái)學(xué)習(xí)一下。在后臺(tái)系統(tǒng)、數(shù)據(jù)類產(chǎn)品、 B 端產(chǎn)品中，表格作為最常用的一種數(shù)據(jù)整理的組件，其重要性不用過(guò)多贅述。但如何更好的設(shè)計(jì)表格呢？想必多數(shù)剛接觸B 端的設(shè)計(jì)師都有過(guò)這個(gè)困擾。今天，我給大家整理了一份關(guān)于表格的攻略，希望能幫到你。表格是一種數(shù)據(jù)可視化的一種形式，可以查看和處理大量數(shù)據(jù)，它主要承載了數(shù)據(jù)的收集、整理、組織、展示、對(duì)比和歸納。易讀性：表格的層級(jí)一定要?jiǎng)澐值姆浅Ｇ逦?，層?jí)分明。你

2、要讓用戶更關(guān)注的是數(shù)據(jù)本身，而不是花里胡哨的樣式?？蓪ば裕毫斜硪砸子跒g覽的邏輯排序，提供合適的搜尋組件幫助用戶快速查找信息。高效性：表格要用最短的時(shí)間告訴用戶想要得到的信息。靈活性：可以讓用戶根據(jù)自己的習(xí)慣及興趣自定義自己的表格展示，比如排序、篩選、調(diào)整表頭順序等功能。外部區(qū)域：標(biāo)題、操作區(qū)、篩選區(qū)；內(nèi)部區(qū)域：表頭、表體、表尾。介紹完表格的構(gòu)成，我們?cè)賮?lái)把每一個(gè)元素拆解出來(lái)詳細(xì)介紹。1）標(biāo)題標(biāo)題是整個(gè)表格內(nèi)容概述的名稱，此名稱盡量簡(jiǎn)潔明了，不要太長(zhǎng)，能兩個(gè)字寫清楚絕對(duì)不用三個(gè)字。如果標(biāo)題名稱難以理解的話，可以加二級(jí)提示，有兩種常用樣式： tooltips（常用）、二級(jí)提示語(yǔ)。標(biāo)題的位置一般在左

3、上角。2）操作區(qū)對(duì)表格內(nèi)容的增刪改等操作的區(qū)域。使用建議：有且只有一個(gè)主操作：特殊情況下可以沒有主操作，但不能有兩個(gè)主操作。樣式統(tǒng)一：同一個(gè)產(chǎn)品中，操作區(qū)樣式規(guī)范要保持一致。操作的優(yōu)先級(jí)：根據(jù)使用的優(yōu)先級(jí)，把常用的操作放到一級(jí)展示，不常用的收到二級(jí)展示。不同操作狀態(tài)區(qū)分要明確：不是所有的操作都是可以直接用的，比如有的操作在沒有選擇內(nèi)容的時(shí)候是 Disable 狀態(tài)，那這時(shí)候就要和其他可操作的有明顯的樣式區(qū)別，否則容易讓用戶分不清可不可以操作。刷新按鈕：有很多同學(xué)對(duì)這個(gè)操作是不是有些疑惑？有人覺得瀏覽器都有刷新功能啊，干嘛還要多此一舉再加個(gè)刷新。其實(shí)這個(gè)刷新功能還是很有必要的，這個(gè)刷新只針對(duì)于列

4、表內(nèi)的內(nèi)容。在有的后臺(tái)管理界面中，因?yàn)閿?shù)據(jù)量很大，如果每次刷新都用瀏覽器自帶刷新的話，他會(huì)重新加載整個(gè)頁(yè)面的內(nèi)容，很不好用。很多情況下，用戶只想重新加載一下列表的內(nèi)容，那這個(gè)刷新就很好用啦。同時(shí)刷新后要有即時(shí)反饋，告訴用你他點(diǎn)完操作后目前處于哪個(gè)階段中。導(dǎo)出功能：此功能可以把列表內(nèi)容導(dǎo)出為你想要的格式（一般為 word / pdf ）。數(shù)據(jù)量較大的列表中，導(dǎo)出功能可以很方便的把自己過(guò)濾的內(nèi)容下載到本地進(jìn)行其他需求的查看。導(dǎo)出內(nèi)容的范圍是哪些一定要事先想好，一般下載內(nèi)容的范圍以下幾種：導(dǎo)入功能：既然可以導(dǎo)出，就有導(dǎo)入。導(dǎo)入報(bào)表對(duì)文檔會(huì)有要求，一般都是固定格式的文檔，而且文檔與列表中的字段都可以一

5、一對(duì)應(yīng)上，才可以完美導(dǎo)入。導(dǎo)入功能中 word 和 excel 是最常用的格式。需要注意的是，導(dǎo)入文檔后最好有二次確認(rèn)提示，告訴用戶上傳了哪些內(nèi)容，同時(shí)該內(nèi)容是否與現(xiàn)有的列表字段有沖突。自定義內(nèi)容：自定義分兩種：如果表格內(nèi)容比較多的情況下，這兩個(gè)功能是很有必要的，如果內(nèi)容少，則可忽略這兩個(gè)功能。那怎么區(qū)分內(nèi)容的多與少呢？我的理解：常用分辨率下，一屏可顯示完整內(nèi)容的話為內(nèi)容少；反之則內(nèi)容多。Tab （標(biāo)簽切換）可以快速切換不同維度下的表格內(nèi)容。使用建議：不同狀態(tài)區(qū)分要明顯； Tab 數(shù)量不宜過(guò)多，如果不可避免的數(shù)量過(guò)多的話，一般有兩種方案：Tab只放文本，最多可以放個(gè)icon,盡量避免其他干擾信

6、息； Tab 信息要精簡(jiǎn)。4）篩選區(qū)篩選區(qū)是對(duì)表格數(shù)據(jù)的主觀再處理，用戶根據(jù)篩選功能可以得到更精準(zhǔn)的信息。搜索功能：模糊搜索 or 精準(zhǔn)收縮：搜索首先要確定哪幾個(gè)字段可以被搜索到，名稱？編號(hào)？等等 模糊搜索使用的頻率居多，畢竟有時(shí)候用戶不一定可以精準(zhǔn)的記住想要搜索的準(zhǔn)確信息。不過(guò)也不是絕對(duì)的，兩者皆可選擇，根據(jù)產(chǎn)品選擇即可。單字段搜索：輸入單字段進(jìn)行搜索，比較常用的方式之一。多字段組合搜索：可以輸入多個(gè)字段進(jìn)行組合搜索（取并集），一般交互方式為回車完成書寫。此方式比單字段搜索更加精準(zhǔn)，數(shù)據(jù)量過(guò)大的時(shí)候優(yōu)勢(shì)就很明顯了。切換類別搜索：可以設(shè)置幾個(gè)常用的類別來(lái)快速切換搜索的維度，方便用戶使用。多類別

7、組合搜索：多類別組合搜索適合更加復(fù)雜的列表內(nèi)容，并且類別名稱會(huì)展示出來(lái)，可以比較清晰的看到用戶用的哪種類別名進(jìn)行搜索的。篩選的樣式：輸入框、下拉選擇、日期選擇器、單選、多選。5）表頭每一列列表的小標(biāo)題，是對(duì)整列內(nèi)容的描述。表頭區(qū)域比較常用的幾個(gè)功能：排序、過(guò)濾、進(jìn)一步解釋/說(shuō)明、拖拽排序、拖拽增加 / 縮小列寬。6）表體表體承載了表格的主要內(nèi)容，它的內(nèi)容形式有很多：文本、 icon、進(jìn)度 條、標(biāo)簽等等。表體樣式分為兩種：斑馬線和線條分割。使用建議：7）表尾表尾主要是展示表格的統(tǒng)計(jì)信息、分頁(yè)、跳轉(zhuǎn)頁(yè)面等；每頁(yè)顯示條數(shù)常規(guī)情況下默認(rèn)為10/頁(yè)，最多200/頁(yè)，再多的話加載速度會(huì)變慢，影響使用體驗(yàn)。1）彈窗2）抽屜抽屜現(xiàn)在使用的頻率也是蠻高的，它的好處很明顯：在當(dāng)前頁(yè)面彈出個(gè)抽屜，可展示的內(nèi)容區(qū)域比彈窗多了很多，同時(shí)如果區(qū)域不夠用的話，還可以增加Tab來(lái)展示更多信息。而且不同資源的抽屜切換也比較方便。缺點(diǎn)就是：并不能完全讓用戶的聚焦于某個(gè)信息的詳情，存在一定程度的信息干擾。3）跳轉(zhuǎn)頁(yè)面直接跳轉(zhuǎn)個(gè)新頁(yè)面作為詳情，好