UI設(shè)計(jì)數(shù)據(jù)可視化，表格數(shù)據(jù)如何展現(xiàn)？

在后臺(tái)系統(tǒng)、數(shù)據(jù)類(lèi)產(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ì)比和歸納。

二、表格的設(shè)計(jì)原則

2.1 易讀性

表格的層級(jí)一定要?jiǎng)澐值姆浅Ｇ逦?，層?jí)分明。你要讓用戶(hù)更關(guān)注的是數(shù)據(jù)本身，而不是花里胡哨的樣式。

2.2 可尋性

列表以易于瀏覽的邏輯排序，提供合適的搜尋組件幫助用戶(hù)快速查找信息。

2.3 高效性

表格要用最短的時(shí)間告訴用戶(hù)想要得到的信息。

2.4 靈活性

可以讓用戶(hù)根據(jù)自己的習(xí)慣及興趣自定義自己的表格展示，比如排序、篩選、調(diào)整表頭順序等功能。

三、表格的構(gòu)成

外部區(qū)域：標(biāo)題、操作區(qū)、篩選區(qū)；

內(nèi)部區(qū)域：表頭、表體、表尾。

介紹完表格的構(gòu)成，我們?cè)賮?lái)把每一個(gè)元素拆解出來(lái)詳細(xì)介紹。

四、表格元素解析

4.1 標(biāo)題

標(biāo)題是整個(gè)表格內(nèi)容概述的名稱(chēng)，此名稱(chēng)盡量簡(jiǎn)潔明了，不要太長(zhǎng)，能兩個(gè)字寫(xiě)清楚絕 對(duì)不用三個(gè)字。

如果標(biāo)題名稱(chēng)難以理解的話(huà)，可以加二級(jí)提示，有兩種常用樣式：tooltips（常用）、二級(jí)提示語(yǔ)。

標(biāo)題的位置一般在左上角。

4.2 操作區(qū)

對(duì)表格內(nèi)容的增刪改等操作的區(qū)域。

使用建議：

4.2.1 有且只有一個(gè)主操作

特殊情況下可以沒(méi)有主操作，但不能有兩個(gè)主操作。

4.2.2 樣式統(tǒng)一

同一個(gè)產(chǎn)品中，操作區(qū)樣式規(guī)范要保持一致。

4.2.3 操作的優(yōu)先級(jí)

根據(jù)使用的優(yōu)先級(jí)，把常用的操作放到一級(jí)展示，不常用的收到二級(jí)展示。

4.2.4 不同操作狀態(tài)區(qū)分要明確

不是所有的操作都是可以直接用的，比如有的操作在沒(méi)有選擇內(nèi)容的時(shí)候是Disable狀態(tài)，那這時(shí)候就要和其他可操作的有明顯的樣式區(qū)別，否則容易讓用戶(hù)分不清可不可以操作。

4.2.5 刷新按鈕

有很多同學(xué)對(duì)這個(gè)操作是不是有些疑惑？有人覺(jué)得瀏覽器都有刷新功能啊，干嘛還要多此一舉再加個(gè)刷新。其實(shí)這個(gè)刷新功能還是很有必要的，這個(gè)刷新只針對(duì)于列表內(nèi)的內(nèi)容。

在有的后臺(tái)管理界面中，因?yàn)閿?shù)據(jù)量很大，如果每次刷新都用瀏覽器自帶刷新的話(huà)，他會(huì)重新加載整個(gè)頁(yè)面的內(nèi)容，很不好用。很多情況下，用戶(hù)只想重新加載一下列表的內(nèi)容，那這個(gè)刷新就很好用啦。

同時(shí)刷新后要有即時(shí)反饋，告訴用你他點(diǎn)完操作后目前處于哪個(gè)階段中。