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

在后臺系統(tǒng)、數(shù)據(jù)類產(chǎn)品、B端產(chǎn)品中，表格作為最常用的一種數(shù)據(jù)整理的組件，其重要性不用過多贅述。但如何更好的設(shè)計表格呢？想必多數(shù)剛接觸B端的設(shè)計師都有過這個困擾。今天，我給大家整理了一份關(guān)于表格的攻略，希望能幫到你。

一、什么是表格

表格是一種數(shù)據(jù)可視化的一種形式，可以查看和處理大量數(shù)據(jù)，它主要承載了數(shù)據(jù)的收集、整理、組織、展示、對比和歸納。

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

2.1 易讀性

表格的層級一定要劃分的非常清晰，層級分明。你要讓用戶更關(guān)注的是數(shù)據(jù)本身，而不是花里胡哨的樣式。

2.2 可尋性

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

2.3 高效性

表格要用最短的時間告訴用戶想要得到的信息。

2.4 靈活性

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

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

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

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

介紹完表格的構(gòu)成，我們再來把每一個元素拆解出來詳細介紹。

四、表格元素解析

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 刷新按鈕

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

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

同時刷新后要有即時反饋，告訴用你他點完操作后目前處于哪個階段中。