從易讀性和易操作性方面著手,教你如何做好表格設(shè)計(jì)
發(fā)布時(shí)間:2021-12-17 09:29 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

導(dǎo)語(yǔ):?提起中后臺(tái),除了高效、靈活和強(qiáng)大之外,不可忽視的還有它的海量數(shù)據(jù)。海量數(shù)據(jù)的篩選與呈現(xiàn),直接決定決策人員的效率高低。本文作者主要是結(jié)合自己在實(shí)際工作中遇到的表格設(shè)計(jì)問(wèn)題,針對(duì)Web端數(shù)據(jù)呈現(xiàn)方式之一,表格的設(shè)計(jì)進(jìn)行探討。

表格,是一種常見(jiàn)的信息組織整理手段。常用來(lái)展示、保存、對(duì)比分析、排序、篩選 、歸納等,是最清晰、高效的數(shù)據(jù)展現(xiàn)形式之一,由內(nèi)、外兩部分組成。

  • 內(nèi)部:由表頭、表體、表尾共3部分組成;
  • 外部:由篩選區(qū)域、操作按鈕區(qū)、分頁(yè)區(qū)共3大類組成。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

說(shuō)完表格的組成,接下來(lái)將會(huì)從易讀性和易操作性兩個(gè)方面來(lái)分析下表格設(shè)計(jì)。


易讀性


1. 行與列

表格的組成,也可以看作行與列的自由組合,這種組合賦予了表格多樣性的特點(diǎn)。行與列構(gòu)成了單元格的長(zhǎng)與高,不同的長(zhǎng)高會(huì)有疏密之分,充實(shí)與透氣之感。

B端中后臺(tái)通常會(huì)對(duì)應(yīng)不同的角色及場(chǎng)景需求,根據(jù)目的及信息主體的不同,讓用戶根據(jù)自己的需求來(lái)定義表格的展示列及列的順序,也可以通過(guò)行與列的顯隱變化,來(lái)更好的滿足信息的傳達(dá)。

但需要注意的是系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置,減少用戶重復(fù)操作。對(duì)于列的選擇,應(yīng)盡量減少列的數(shù)量,既要展示用戶必要信息,又要避免出現(xiàn)用戶無(wú)關(guān)數(shù)據(jù),以免信息冗余,影響信息閱讀效率性。對(duì)于用戶需要的非重點(diǎn)、輔助性信息可以通過(guò)入口提供的方式來(lái)解決。

默認(rèn)排序,應(yīng)從用戶目的出發(fā),遵循用戶查看數(shù)據(jù)的習(xí)慣,尊重?cái)?shù)據(jù)之間的關(guān)聯(lián)性,設(shè)計(jì)用戶查看、操作數(shù)據(jù)的路徑,而非隨機(jī)排列。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

2. 數(shù)據(jù)展示

B端中后臺(tái)中的表格展示的數(shù)據(jù)多且雜,這就要為用戶先一步對(duì)數(shù)據(jù)進(jìn)行梳理歸納,提高用戶獲取信息速度。

為便于對(duì)數(shù)據(jù)進(jìn)行對(duì)比分析,一般需要在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、平均值、總計(jì)等數(shù)據(jù)處理結(jié)果,減少用戶二次加工數(shù)據(jù)的過(guò)程,提升用戶閱讀信息的效率。

數(shù)據(jù)匯總展示

在表頭或者表尾分別提供了總計(jì)的數(shù)據(jù),方便用戶進(jìn)行快速查閱。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

數(shù)據(jù)對(duì)齊展示

常用對(duì)齊方式有數(shù)字右對(duì)齊,文字左對(duì)齊,混合型文本左對(duì)齊,列標(biāo)簽的對(duì)齊方式與數(shù)據(jù)的對(duì)齊方式保持一致。這樣能形成的視覺(jué)邊界線,便于視線的流動(dòng),從而快速提升數(shù)據(jù)的瀏覽、對(duì)比效率。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

空數(shù)據(jù)展示

B端中后臺(tái)數(shù)據(jù)類型較多,對(duì)于空數(shù)據(jù),切忌不要與數(shù)據(jù)為“0”進(jìn)行混淆,對(duì)于空數(shù)據(jù)通用做法是用“-”表示,而不是什么都不顯示,會(huì)讓用戶誤以為是沒(méi)有數(shù)據(jù)還是“0”數(shù)據(jù)。

最好做法就是為空數(shù)據(jù)做出釋義,可以加在“列標(biāo)簽”的名詞解釋文案中。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

數(shù)據(jù)的關(guān)鍵屬性標(biāo)識(shí)展示

對(duì)于用戶重點(diǎn)關(guān)注的數(shù)據(jù)狀態(tài)、上升和下降等,可以用符號(hào)進(jìn)行標(biāo)識(shí),幫助用戶快速定位到目標(biāo)信息。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

3. 固定表頭、固定列和固定分頁(yè)

在有限屏幕內(nèi),有限的內(nèi)容展示區(qū)域內(nèi),閱讀豐富且繁多的表格時(shí),用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來(lái)閱讀信息。

固定表頭、固定列和固定分頁(yè),能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。

固定表頭

在固定的小區(qū)域內(nèi)滾動(dòng)會(huì)非常局促,而且區(qū)域滾動(dòng)和全屏滾動(dòng)同時(shí)存在時(shí)體驗(yàn)也很不好。固定表頭可幫助用戶識(shí)別信息,在全屏滾動(dòng)上去后固定表頭,有利于用戶向下翻屏?xí)r能夠便利的閱讀數(shù)據(jù)。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

固定列

固定列的內(nèi)容可視業(yè)務(wù)及目標(biāo)用戶的訴求而定,一般采用方法是固定比較重要信息,方便用戶進(jìn)行數(shù)據(jù)定位與對(duì)比,最好可以讓用戶自定義,滿足不同用戶訴求。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

固定分頁(yè)

分頁(yè)處理目前有放在上部、下部或上下部均有,需要根據(jù)場(chǎng)景來(lái)選擇。分頁(yè)固定目的是為了省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩。

特別是可以自定義每頁(yè)的數(shù)量和需要橫向拖動(dòng)數(shù)據(jù)查看,這就需要把分頁(yè)固定在底部,方便用戶橫向拖動(dòng)滑條查看信息和進(jìn)行翻頁(yè)操作。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

4. 分頁(yè)

在Web端中的表格,涉及到跨頁(yè)的數(shù)據(jù)操作時(shí),分頁(yè)會(huì)帶來(lái)不便。

但往往受限于數(shù)據(jù)加載的壓力,這種情況在大廠中尤其突出,加載數(shù)據(jù)都是億量級(jí)別的,在Web端和手機(jī)端都需要實(shí)時(shí)下載數(shù)據(jù)的終端,我們通常做法就是提供分頁(yè)展示數(shù)據(jù)來(lái)緩解服務(wù)器的壓力。

表格中的的數(shù)據(jù)內(nèi)容超過(guò)一定“數(shù)量”時(shí)需要提供翻頁(yè)功能,而這個(gè)“數(shù)量”是由表頭的數(shù)據(jù)的高度、表格的行間距、目標(biāo)用戶群體的顯示設(shè)備的配置等因素來(lái)決定。

原則上整張表不要超過(guò)一屏,考慮到每個(gè)用戶的使用習(xí)慣,我們一般提供可以讓用戶自定義每頁(yè)的顯示的數(shù)量,相比于跨屏翻頁(yè)而言,向下滾屏?xí)憷,也更符合瀏覽信息路徑。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

5. 全屏查閱

表格全屏展示是非常有必要的:

  • 特別是在小屏設(shè)備上,全屏模式下可以直接屏蔽掉左側(cè)導(dǎo)航欄、上方的報(bào)表區(qū)域和頂部的導(dǎo)航欄,可為用戶提供更多可視區(qū)域。
  • 在大量數(shù)據(jù)前面,可為用戶提供沉浸式閱讀體驗(yàn),讓用戶更加專注,可減少與表格無(wú)關(guān)的視覺(jué)干擾。
  • 用戶可通過(guò)ESC鍵或關(guān)閉按鈕隨時(shí)退出全屏模式,操作成本低。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)


易操作性


1. 篩選

在大量的表格信息中,如果沒(méi)有篩選查找信息簡(jiǎn)直猶如大海撈針,而表格跟篩選是不分家的。

說(shuō)到表格一定會(huì)說(shuō)到篩選,篩選也就是數(shù)據(jù)過(guò)濾,常在數(shù)據(jù)量較大的場(chǎng)景中使用,其目的是通過(guò)關(guān)鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內(nèi)容。

對(duì)于表格外部篩選,如果有時(shí)間會(huì)單獨(dú)出一篇詳情介紹。這里不展開(kāi)詳細(xì)說(shuō)。

篩選根據(jù)篩選功能的位置不同,可分為表外篩選和表內(nèi)篩選。

  • 表外篩選:篩選功能位于表格上方,與表內(nèi)篩選的不同之處是過(guò)濾值可以不限“表格列”的內(nèi)容、可單次進(jìn)行多列的交叉篩選。
  • 表內(nèi)篩選:篩選功能位于表格內(nèi),也就是放置在列標(biāo)簽上的篩選,受“表格列”內(nèi)容的限制,僅能做單次單列的篩選。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

2. 數(shù)據(jù)選擇

在信息列數(shù)較多的情況下,數(shù)據(jù)的選擇就尤為重要。當(dāng)鼠標(biāo)指針懸停在表格列或行時(shí),給予視覺(jué)狀態(tài)的變化提示,可以讓用戶捕捉到所在的位置,而不至于視覺(jué)上的錯(cuò)行,能夠降低人的心理壓力和增加掌控感。根據(jù)數(shù)據(jù)選擇功能分為單個(gè)選擇和批量選擇。

單個(gè)選擇

鼠標(biāo)指針懸停在整行時(shí)應(yīng)與默認(rèn)態(tài)有所區(qū)分。當(dāng)標(biāo)識(shí)選中行或選中行的數(shù)量,選中行可操作的命令狀態(tài)須同步,明示當(dāng)前行可操作的命令或反饋當(dāng)前已選行的數(shù)量。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

批量選擇

提供選擇當(dāng)前頁(yè)部分行、選擇全部行、取消選擇全部行三種功能;狀態(tài)反饋分為半選態(tài) 、未選態(tài)、全選態(tài)共三種。

  • 當(dāng)用戶未進(jìn)行選擇時(shí),表頭的選擇框的狀態(tài)是未選態(tài);
  • 當(dāng)用戶選擇一行數(shù)據(jù)時(shí),此時(shí)表頭的選擇框的狀態(tài)切換為半選態(tài),同時(shí)反饋此行的數(shù)量;
  • 當(dāng)用戶在表頭勾選“當(dāng)前頁(yè)所有行”時(shí),表頭的選擇框切換成了全選態(tài),且給出了選擇“全部所有行”的操作。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

3. 數(shù)據(jù)操作

對(duì)于數(shù)據(jù)的操作,主要針對(duì)表格內(nèi)部來(lái)說(shuō)。表格操作大體可分為顯性操作和隱形操作。

顯性操作

指操作選項(xiàng)顯示在行內(nèi),優(yōu)點(diǎn)是明顯直觀,可以根據(jù)列表上的信息做出快速的判斷并且高頻發(fā)生的操作。

適用列數(shù)較少的列表。但弊端是信息過(guò)載,尤其是列數(shù)較多,可展示列數(shù)會(huì)隨操作數(shù)增加而減少,同時(shí)誤操作率較高。對(duì)于危險(xiǎn)系數(shù)比較高的操作,也不建議采用這種設(shè)計(jì)。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

隱性操作

當(dāng)鼠標(biāo)懸停或點(diǎn)擊時(shí)才顯示其他低頻、高危的操作選項(xiàng),優(yōu)點(diǎn)是界面簡(jiǎn)潔明快,信息密度低,可以幫助頁(yè)面突出更加重要的信息,可減輕空間壓力,減少干擾。

弊端是增加用戶的點(diǎn)擊次數(shù)和提高了操作門檻。列數(shù)較少的表格不適用隱性操作。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

4. 數(shù)據(jù)下載

為方便用戶對(duì)數(shù)據(jù)進(jìn)行再次整合分析、統(tǒng)計(jì)分析等,可提供數(shù)據(jù)下載功能及多種下載格式。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

5. 空表

對(duì)于B端中后臺(tái)來(lái)說(shuō),表格顯示最多就是兩種情況:一種就是表格有數(shù)據(jù),這種最容易解決,有數(shù)據(jù)就顯示相應(yīng)數(shù)據(jù);還有一種表格是沒(méi)有數(shù)據(jù),也就是空表狀態(tài),這也是讓很多設(shè)計(jì)師容易忽略掉的頁(yè)面。

空表分兩種:可創(chuàng)建和純展示

可創(chuàng)建

是用戶有創(chuàng)建訴求,數(shù)據(jù)是由用戶或系統(tǒng)產(chǎn)生的,可創(chuàng)建分兩種:

  • 比較輕量的方式,是直接示意用戶創(chuàng)建數(shù)據(jù),無(wú)須給出表格樣式。
  • 在表格的空白內(nèi)容處加入創(chuàng)建的快捷入口,引導(dǎo)用戶新建。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)

純展示

沒(méi)有創(chuàng)建訴求的,數(shù)據(jù)是系統(tǒng)產(chǎn)生的,不是由用戶創(chuàng)建的,直接告之暫無(wú)數(shù)據(jù)。

從易讀性和易操作性兩大方面,教你做好表格設(shè)計(jì)


寫(xiě)在最后


看上去平淡無(wú)奇的數(shù)據(jù)表格,其實(shí)是非常重要的,通過(guò)合理的組織架構(gòu)和呈現(xiàn)方式,使原本枯燥的數(shù)據(jù)呈現(xiàn)出生命力,這是一件很神奇的事。

而圍繞用戶目的與實(shí)際使用場(chǎng)景,為用戶準(zhǔn)確高效的篩選信息,反映隱藏在數(shù)據(jù)背后的秘密,促進(jìn)信息的理解,降低用戶的決策成本。設(shè)計(jì)一個(gè)準(zhǔn)確、高效、易用的表格,更是一件考驗(yàn)設(shè)計(jì)師功底的事。

Python Web開(kāi)發(fā)教程
我要自學(xué)網(wǎng)商城 ¥60 元
進(jìn)入購(gòu)買
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC