手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

大數(shù)據(jù)可視化界面設計之十:數(shù)據(jù)可視化必修課:表格篇

2022-6-14    博博


前言


在后臺系統(tǒng)、數(shù)據(jù)類產(chǎn)品、B 端產(chǎn)品中,表格作為最常用的一種數(shù)據(jù)整理的組件,其重要性不用過多贅述。但如何更好的設計表格呢?想必多數(shù)剛接觸 B 端的設計師都有過這個困擾。

今天,我給大家整理了一份關于表格的攻略,希望能幫到你。


什么是表格


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

數(shù)據(jù)可視化必修課:表格篇

表格的設計原則


數(shù)據(jù)可視化必修課:表格篇

1. 易讀性

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

2. 可尋性

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

3. 高效性

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

4. 靈活性

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


表格的構成


外部區(qū)域:標題、操作區(qū)、篩選區(qū);

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

數(shù)據(jù)可視化必修課:表格篇

介紹完表格的構成,我們再來把每一個元素拆解出來詳細介紹。


表格元素解析


1. 標題

標題是整個表格內(nèi)容概述的名稱,此名稱盡量簡潔明了,不要太長,能兩個字寫清楚絕對不用三個字。如果標題名稱難以理解的話,可以加二級提示,有兩種常用樣式:tooltips(常用)、二級提示語。標題的位置一般在左上角。

2. 操作區(qū)

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

使用建議:

有且只有一個主操作

特殊情況下可以沒有主操作,但不能有兩個主操作。

數(shù)據(jù)可視化必修課:表格篇

樣式統(tǒng)一

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

數(shù)據(jù)可視化必修課:表格篇

操作的優(yōu)先級

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

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

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

數(shù)據(jù)可視化必修課:表格篇

刷新按鈕

有很多同學對這個操作是不是有些疑惑?有人覺得瀏覽器都有刷新功能啊,干嘛還要多此一舉再加個刷新。其實這個刷新功能還是很有必要的,這個刷新只針對于列表內(nèi)的內(nèi)容。在有的后臺管理界面中,因為數(shù)據(jù)量很大,如果每次刷新都用瀏覽器自帶刷新的話,他會重新加載整個頁面的內(nèi)容,很不好用。很多情況下,用戶只想重新加載一下列表的內(nèi)容,那這個刷新就很好用啦。

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

導出功能

此功能可以把列表內(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ù)處理難度會非常大,慎重選擇)。

導入功能

既然可以導出,就有導入。導入報表對文檔會有要求,一般都是固定格式的文檔,而且文檔與列表中的字段都可以一一對應上,才可以完美導入。導入功能中 word 和 excel 是最常用的格式。需要注意的是,導入文檔后最好有二次確認提示,告訴用戶上傳了哪些內(nèi)容,同時該內(nèi)容是否與現(xiàn)有的列表字段有沖突。

自定義內(nèi)容

自定義分兩種:

可以設置某列內(nèi)容是否展示(需要注意的是:列內(nèi)容展示數(shù)量可以不設置上限,但必須設置下限);可以設置每一列內(nèi)容的左右排序。

如果表格內(nèi)容比較多的情況下,這兩個功能是很有必要的,如果內(nèi)容少,則可忽略這兩個功能。

那怎么區(qū)分內(nèi)容的多與少呢?我的理解:常用分辨率下,一屏可顯示完整內(nèi)容的話為內(nèi)容少;反之則內(nèi)容多。

3.  Tab(標簽切換)

可以快速切換不同維度下的表格內(nèi)容。

使用建議:

  • 不同狀態(tài)區(qū)分要明顯;
  • Tab 數(shù)量不宜過多,如果不可避免的數(shù)量過多的話,一般有兩種方案:最多顯示出 5 個 Tab,超過 5 個 Tab 放在“更多里面”;交互上支持左右滑動 / 切換 Tab。
  • Tab 只放文本,最多可以放個 icon,盡量避免其他干擾信息;
  • Tab 信息要精簡。
4. 篩選區(qū)

篩選區(qū)是對表格數(shù)據(jù)的主觀再處理,用戶根據(jù)篩選功能可以得到更精準的信息。

搜索功能:

1)模糊搜索 or 精準搜索

搜索首先要確定哪幾個字段可以被搜索到,名稱?編號?等等…

模糊搜索使用的頻率居多,畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的,兩者皆可選擇,根據(jù)產(chǎn)品選擇即可。

2)單字段搜索

輸入單字段進行搜索,比較常用的方式之一。

數(shù)據(jù)可視化必修課:表格篇

3)多字段組合搜索

可以輸入多個字段進行組合搜索(取并集),一般交互方式為回車完成書寫。此方式比單字段搜索更加精準,數(shù)據(jù)量過大的時候優(yōu)勢就很明顯了。

數(shù)據(jù)可視化必修課:表格篇

4)切換類別搜索

可以設置幾個常用的類別來快速切換搜索的維度,方便用戶使用。

數(shù)據(jù)可視化必修課:表格篇

5)多類別組合搜索

多類別組合搜索適合更加復雜的列表內(nèi)容,并且類別名稱會展示出來,可以比較清晰的看到用戶用的哪種類別名進行搜索的。

數(shù)據(jù)可視化必修課:表格篇

 篩選的樣式

輸入框、下拉選擇、日期選擇器、單選、多選。

5. 表頭

每一列列表的小標題,是對整列內(nèi)容的描述。

表頭區(qū)域比較常用的幾個功能:排序、過濾、進一步解釋/說明、拖拽排序、拖拽增加 / 縮小列寬。

6. 表體

表體承載了表格的主要內(nèi)容,它的內(nèi)容形式有很多:文本、icon、進度條、標簽等等。表體樣式分為兩種:斑馬線和線條分割。

使用建議:

  • 內(nèi)容決定表格的高度,一般設置 2~3 種行高就可以滿足大部分場景了;
  • 把全局唯一且最重要的字段放在第一列,比如:名稱。同時可以把名稱固定在列表左側,就算列表橫向內(nèi)容過多的時候,也可以第一時間看出區(qū)別;
  • 要設置最大寬度和最大高度,避免特殊情況下的內(nèi)容展示;
  • 對齊方式:普通文本左對齊,數(shù)字類右對齊(記住就行,這是規(guī)范);
  • 最多支持二級列表,不可再多;
  • 可以把一些常用的操作放出來,放在列表最后一列。
7. 表尾

表尾主要是展示表格的統(tǒng)計信息、分頁、跳轉頁面等。每頁顯示條數(shù)常規(guī)情況下默認為 10/頁,最多 200/頁,再多的話加載速度會變慢,影響使用體驗。


列表詳情交互展現(xiàn)


1. 彈窗

模態(tài)對話框:用戶在當前頁面彈出一個彈窗,除此彈窗內(nèi)容外不可操作其他區(qū)域內(nèi)容,產(chǎn)品的主觀意識較強。

非模態(tài)對話框:也是彈出個彈窗,但是與模態(tài)對話框不同的是它不打擾其他用戶操作,此彈窗存在的時候,用戶同時也可以操作其他區(qū)域,產(chǎn)品的主觀意識較弱。

2. 抽屜

抽屜現(xiàn)在使用的頻率也是蠻高的,它的好處很明顯:在當前頁面彈出個抽屜,可展示的內(nèi)容區(qū)域比彈窗多了很多,同時如果區(qū)域不夠用的話,還可以增加 Tab 來展示更多信息。而且不同資源的抽屜切換也比較方便。

缺點就是:并不能完全讓用戶的聚焦于某個信息的詳情,存在一定程度的信息干擾。

3. 跳轉頁面

直接跳轉個新頁面作為詳情,好處就是可以展示更多的內(nèi)容信息以及可以讓用戶更聚焦于當前內(nèi)容。

缺點就是:新開頁面這種操作本身就比較重,如果在當前頁面可解決的事情,切記不要讓用戶新開頁面。

4. 嵌套

嵌套就是上面提到的二級列表,它一般用于一級列表的內(nèi)容補充,并且內(nèi)容不宜過多。


在最后


在數(shù)據(jù)可視化中,表格是最常見的一種,它的知識點有很多,本篇文章只是到目前為止我的一些認知,如果有漏掉的知識點歡迎指教,我們都是學生,都要學習。

作者:生活因你而火熱

轉載請注明:優(yōu)設網(wǎng)

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.88yangsc.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



更多精彩文章:

大數(shù)據(jù)可視化界面設計之一:可視化大屏設計快速入門指南

大數(shù)據(jù)可視化界面設計之九:超全面的數(shù)據(jù)可視化設計指南:設備篇

大數(shù)據(jù)可視化界面設計之十:數(shù)據(jù)可視化必修課:表格篇



分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.88yangsc.com

存檔