網(wǎng)站建設中怎么做好表格的設計發(fā)布者：本站     時(shí)間：2021-02-20 10:02:03

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

內部：由表頭、表體、表尾共3部分組成；
外部：由篩選區域、操作按鈕區、分頁(yè)區共3大類(lèi)組成。
從易讀性和易操作性?xún)纱蠓矫?，教你做好表格設計

說(shuō)完表格的組成，接下來(lái)將會(huì )從易讀性和易操作性?xún)蓚€(gè)方面來(lái)分析下表格設計。

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

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

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

默認排序，應從用戶(hù)目的出發(fā)，遵循用戶(hù)查看數據的習慣，尊重數據之間的關(guān)聯(lián)性，設計用戶(hù)查看、操作數據的路徑，而非隨機排列。

從易讀性和易操作性?xún)纱蠓矫?，教你做好表格設計

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

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

數據匯總展示

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

從易讀性和易操作性?xún)纱蠓矫?，教你做好表格設計

數據對齊展示

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

從易讀性和易操作性?xún)纱蠓矫?，教你做好表格設計

空數據展示

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

最好做法就是為空數據做出釋義，可以加在“列標簽”的名詞解釋文案中。

從易讀性和易操作性?xún)纱蠓矫?，教你做好表格設計

數據的關(guān)鍵屬性標識展示

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

從易讀性和易操作性?xún)纱蠓矫?，教你做好表格設計

3. 固定表頭、固定列和固定分頁(yè)
在有限屏幕內，有限的內容展示區域內，閱讀豐富且繁多的表格時(shí)，用戶(hù)不得不拖動(dòng)橫向或縱向滾動(dòng)條來(lái)閱讀信息。

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

固定表頭

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

從易讀性和易操作性?xún)纱蠓矫?，教你做好表格設計

固定列

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

從易讀性和易操作性?xún)纱蠓矫?，教你做好表格設計

固定分頁(yè)

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

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