2022-6-14 博博
在后臺(tái)系統(tǒng)、數(shù)據(jù)類產(chǎn)品、B 端產(chǎn)品中,表格作為最常用的一種數(shù)據(jù)整理的組件,其重要性不用過多贅述。但如何更好的設(shè)計(jì)表格呢?想必多數(shù)剛接觸 B 端的設(shè)計(jì)師都有過這個(gè)困擾。
今天,我給大家整理了一份關(guān)于表格的攻略,希望能幫到你。
表格是一種數(shù)據(jù)可視化的一種形式,可以查看和處理大量數(shù)據(jù),它主要承載了數(shù)據(jù)的收集、整理、組織、展示、對(duì)比和歸納。
1. 易讀性
表格的層級(jí)一定要?jiǎng)澐值姆浅G逦?,層?jí)分明。你要讓用戶更關(guān)注的是數(shù)據(jù)本身,而不是花里胡哨的樣式。
2. 可尋性
列表以易于瀏覽的邏輯排序,提供合適的搜尋組件幫助用戶快速查找信息。
3. 高效性
表格要用最短的時(shí)間告訴用戶想要得到的信息。
4. 靈活性
可以讓用戶根據(jù)自己的習(xí)慣及興趣自定義自己的表格展示,比如排序、篩選、調(diào)整表頭順序等功能。
外部區(qū)域:標(biāo)題、操作區(qū)、篩選區(qū);
內(nèi)部區(qū)域:表頭、表體、表尾。
介紹完表格的構(gòu)成,我們?cè)賮戆衙恳粋€(gè)元素拆解出來詳細(xì)介紹。
標(biāo)題是整個(gè)表格內(nèi)容概述的名稱,此名稱盡量簡(jiǎn)潔明了,不要太長(zhǎng),能兩個(gè)字寫清楚絕對(duì)不用三個(gè)字。如果標(biāo)題名稱難以理解的話,可以加二級(jí)提示,有兩種常用樣式:tooltips(常用)、二級(jí)提示語。標(biāo)題的位置一般在左上角。
對(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ì)于列表內(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)出功能可以很方便的把自己過濾的內(nèi)容下載到本地進(jìn)行其他需求的查看。
導(dǎo)出內(nèi)容的范圍是哪些一定要事先想好,一般下載內(nèi)容的范圍包括以下幾種:
導(dǎo)入功能
既然可以導(dǎo)出,就有導(dǎo)入。導(dǎo)入報(bào)表對(duì)文檔會(huì)有要求,一般都是固定格式的文檔,而且文檔與列表中的字段都可以一一對(duì)應(yīng)上,才可以完美導(dǎo)入。導(dǎo)入功能中 word 和 excel 是最常用的格式。需要注意的是,導(dǎo)入文檔后最好有二次確認(rèn)提示,告訴用戶上傳了哪些內(nèi)容,同時(shí)該內(nèi)容是否與現(xiàn)有的列表字段有沖突。
自定義內(nèi)容
自定義分兩種:
可以設(shè)置某列內(nèi)容是否展示(需要注意的是:列內(nèi)容展示數(shù)量可以不設(shè)置上限,但必須設(shè)置下限);可以設(shè)置每一列內(nèi)容的左右排序。
如果表格內(nèi)容比較多的情況下,這兩個(gè)功能是很有必要的,如果內(nèi)容少,則可忽略這兩個(gè)功能。
那怎么區(qū)分內(nèi)容的多與少呢?我的理解:常用分辨率下,一屏可顯示完整內(nèi)容的話為內(nèi)容少;反之則內(nèi)容多。
可以快速切換不同維度下的表格內(nèi)容。
使用建議:
篩選區(qū)是對(duì)表格數(shù)據(jù)的主觀再處理,用戶根據(jù)篩選功能可以得到更精準(zhǔn)的信息。
搜索功能:
1)模糊搜索 or 精準(zhǔn)搜索
搜索首先要確定哪幾個(gè)字段可以被搜索到,名稱?編號(hào)?等等…
模糊搜索使用的頻率居多,畢竟有時(shí)候用戶不一定可以精準(zhǔn)的記住想要搜索的準(zhǔn)確信息。不過也不是絕對(duì)的,兩者皆可選擇,根據(jù)產(chǎn)品選擇即可。
2)單字段搜索
輸入單字段進(jìn)行搜索,比較常用的方式之一。
3)多字段組合搜索
可以輸入多個(gè)字段進(jìn)行組合搜索(取并集),一般交互方式為回車完成書寫。此方式比單字段搜索更加精準(zhǔn),數(shù)據(jù)量過大的時(shí)候優(yōu)勢(shì)就很明顯了。
4)切換類別搜索
可以設(shè)置幾個(gè)常用的類別來快速切換搜索的維度,方便用戶使用。
5)多類別組合搜索
多類別組合搜索適合更加復(fù)雜的列表內(nèi)容,并且類別名稱會(huì)展示出來,可以比較清晰的看到用戶用的哪種類別名進(jìn)行搜索的。
篩選的樣式
輸入框、下拉選擇、日期選擇器、單選、多選。
每一列列表的小標(biāo)題,是對(duì)整列內(nèi)容的描述。
表頭區(qū)域比較常用的幾個(gè)功能:排序、過濾、進(jìn)一步解釋/說明、拖拽排序、拖拽增加 / 縮小列寬。
表體承載了表格的主要內(nèi)容,它的內(nèi)容形式有很多:文本、icon、進(jìn)度條、標(biāo)簽等等。表體樣式分為兩種:斑馬線和線條分割。
使用建議:
表尾主要是展示表格的統(tǒng)計(jì)信息、分頁(yè)、跳轉(zhuǎn)頁(yè)面等。每頁(yè)顯示條數(shù)常規(guī)情況下默認(rèn)為 10/頁(yè),最多 200/頁(yè),再多的話加載速度會(huì)變慢,影響使用體驗(yàn)。
1. 彈窗
模態(tài)對(duì)話框:用戶在當(dāng)前頁(yè)面彈出一個(gè)彈窗,除此彈窗內(nèi)容外不可操作其他區(qū)域內(nèi)容,產(chǎn)品的主觀意識(shí)較強(qiáng)。
非模態(tài)對(duì)話框:也是彈出個(gè)彈窗,但是與模態(tài)對(duì)話框不同的是它不打擾其他用戶操作,此彈窗存在的時(shí)候,用戶同時(shí)也可以操作其他區(qū)域,產(chǎn)品的主觀意識(shí)較弱。
2. 抽屜
抽屜現(xiàn)在使用的頻率也是蠻高的,它的好處很明顯:在當(dāng)前頁(yè)面彈出個(gè)抽屜,可展示的內(nèi)容區(qū)域比彈窗多了很多,同時(shí)如果區(qū)域不夠用的話,還可以增加 Tab 來展示更多信息。而且不同資源的抽屜切換也比較方便。
缺點(diǎn)就是:并不能完全讓用戶的聚焦于某個(gè)信息的詳情,存在一定程度的信息干擾。
3. 跳轉(zhuǎn)頁(yè)面
直接跳轉(zhuǎn)個(gè)新頁(yè)面作為詳情,好處就是可以展示更多的內(nèi)容信息以及可以讓用戶更聚焦于當(dāng)前內(nèi)容。
缺點(diǎn)就是:新開頁(yè)面這種操作本身就比較重,如果在當(dāng)前頁(yè)面可解決的事情,切記不要讓用戶新開頁(yè)面。
4. 嵌套
嵌套就是上面提到的二級(jí)列表,它一般用于一級(jí)列表的內(nèi)容補(bǔ)充,并且內(nèi)容不宜過多。
在數(shù)據(jù)可視化中,表格是最常見的一種,它的知識(shí)點(diǎn)有很多,本篇文章只是到目前為止我的一些認(rèn)知,如果有漏掉的知識(shí)點(diǎn)歡迎指教,我們都是學(xué)生,都要學(xué)習(xí)。
轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
更多精彩文章:大數(shù)據(jù)可視化界面設(shè)計(jì)之一:可視化大屏設(shè)計(jì)快速入門指南
大數(shù)據(jù)可視化界面設(shè)計(jì)之九:超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:設(shè)備篇
大數(shù)據(jù)可視化界面設(shè)計(jì)之十:數(shù)據(jù)可視化必修課:表格篇