在后臺系統(tǒng)、數(shù)據(jù)類產(chǎn)品、B端產(chǎn)品中,表格是非常重要的一種數(shù)據(jù)整理的組件。那么,對于剛接觸B端的設(shè)計師怎樣才能更好的設(shè)計表格呢?
一、什么是表格
表格是一種數(shù)據(jù)可視化的一種形式,可以查看和處理大量數(shù)據(jù),它主要承載了數(shù)據(jù)的收集、整理、組織、展示、對比和歸納。
二、表格的設(shè)計原則
1、易讀性
表格的層級一定要劃分的非常清晰,層級分明。你要讓用戶更關(guān)注的是數(shù)據(jù)本身,而不是花里胡哨的樣式。
2、可尋性
列表以易于瀏覽的邏輯排序,提供合適的搜尋組件幫助用戶快速查找信息。
3、高效性
表格要用最短的時間告訴用戶想要得到的信息。
4、靈活性
可以讓用戶根據(jù)自己的習(xí)慣及興趣自定義自己的表格展示,比如排序、篩選、調(diào)整表頭順序等功能。
三、表格的構(gòu)成
外部區(qū)域:標(biāo)題、操作區(qū)、篩選區(qū);
內(nèi)部區(qū)域:表頭、表體、表尾。
介紹完表格的構(gòu)成,我們再來把每一個元素拆解出來詳細(xì)介紹。
四、表格元素解析
1、標(biāo)題
標(biāo)題是整個表格內(nèi)容概述的名稱,此名稱盡量簡潔明了,不要太長,能兩個字寫清楚絕 對不用三個字。
如果標(biāo)題名稱難以理解的話,可以加二級提示,有兩種常用樣式:tooltips(常用)、二級提示語。
標(biāo)題的位置一般在左上角。
2、操作區(qū)
對表格內(nèi)容的增刪改等操作的區(qū)域。
使用建議:
(1)有且只有一個主操作
特殊情況下可以沒有主操作,但不能有兩個主操作。
(2)樣式統(tǒng)一
同一個產(chǎn)品中,操作區(qū)樣式規(guī)范要保持一致。
(3)操作的優(yōu)先級
根據(jù)使用的優(yōu)先級,把常用的操作放到一級展示,不常用的收到二級展示。
(4)不同操作狀態(tài)區(qū)分要明確
不是所有的操作都是可以直接用的,比如有的操作在沒有選擇內(nèi)容的時候是Disable狀態(tài),那這時候就要和其他可操作的有明顯的樣式區(qū)別,否則容易讓用戶分不清可不可以操作。
(5)刷新按鈕
有人覺得瀏覽器都有刷新功能,干嘛還要多此一舉再加個刷新。其實(shí)這個刷新功能還是很有必要的,這個刷新只針對于列表內(nèi)的內(nèi)容。
在有的后臺管理界面中,因為數(shù)據(jù)量很大,如果每次刷新都用瀏覽器自帶刷新的話,就會重新加載整個頁面的內(nèi)容,很不好用。很多情況下,用戶只想重新加載一下列表的內(nèi)容,那這個刷新就會很好用。
同時刷新后要有即時反饋,告訴用戶點(diǎn)完操作后目前處于哪個階段中。
本文由培訓(xùn)無憂網(wǎng)長沙牛耳教育專屬課程顧問老師整理發(fā)布,更多相關(guān)課程請關(guān)注培訓(xùn)無憂網(wǎng)UI培訓(xùn)或添加老師微信:15033336050
注:尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://www.wg4j.cn/news-id-3843.html 違者必究!部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請自行核實(shí)或聯(lián)系我們,了解更多相關(guān)資訊請關(guān)注UI設(shè)計頻道查看更多,了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請試課。關(guān)注官方微信了解更多:150 3333 6050