導語：提起中後台，除了高效、靈活和強大之外，不可忽視的還有它的海量數據。海量數據的篩選與呈現，直接決定決策人員的效率高低。本文作者主要是結合自己在實際工作中遇到的表格設計問題，針對Web端數據呈現方式之一，表格的設計進行探讨。

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

• 内部：由表頭、表體、表尾共3 部分組成；
• 外部：由篩選區域、操作按鈕區、分頁區共3 大類組成。

說完表格的組成，接下來将會從易讀性和易操作性兩個方面來分析下表格設計。

一、易讀性

1. 行與列

表格的組成，也可以看做行與列的自由組合，這種組合賦予了表格多樣性的特點。行與列構成了單元格的長與高，不同的長高會有疏密之分，充實與透氣之感。

B端中後台通常會對應不同的角色及場景需求，根據目的及信息主體的不同，讓用戶根據自己的需求來定義表格的展示列及列的順序，也可以通過行與列的顯隐變化，來更好的滿足信息的傳達。

但需要注意的是系統應記住用戶上一次的自定義列設置，減少用戶重複操作。

對于列的選擇，應盡量減少列的數量，既要展示用戶必要信息，又要避免出現用戶無關數據，以免信息冗餘，影響信息閱讀效率性。

對于用戶需要的非重點、輔助性信息可以通過入口提供的方式來解決。

默認排序，應從用戶目的出發，遵循用戶查看數據的習慣，尊重數據之間的關聯性，設計用戶查看、操作數據的路徑，而非随機排列。

2. 數據展示

B端中後台中的表格展示的數據多且雜，這就要為用戶先一步對數據進行梳理歸納，提高用戶獲取信息速度。

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

1）數據彙總展示

在表頭或者表尾分别提供了總計的數據，方便用戶進行快速查閱。

2）數據對齊展示

常用對齊方式有數字右對齊，文字左對齊，混合型文本左對齊，列标簽的對齊方式與數據的對齊方式保持一緻。這樣能形成的視覺邊界線，便于視線的流動，從而快速提升數據的浏覽、對比效率。

3）空數據展示

B端中後台數據類型較多，對于空數據，切忌不要與數據為“０”進行混淆，對于空數據通用做法是用“－”表示，而不是什麼都不顯示，會讓用戶誤以為是沒有數據還是“0”數據。

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

4）數據的關鍵屬性标識展示

對于用戶重點關注的數據狀态、上升和下降等，可以用符号進行标識，幫助用戶快速定位到目标信息。

3. 固定表頭、固定列和固定分頁

在有限屏幕内，有限的内容展示區域内，閱讀豐富且繁多的表格時，用戶不得不拖動橫向或縱向滾動條來閱讀信息。

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

1）固定表頭

在固定的小區域内滾動會非常局促，而且區域滾動和全屏滾動同時存在時體驗也很不好。固定表頭可幫助用戶識别信息，在全屏滾動上去後固定表頭，有利于用戶向下翻屏時能夠便利的閱讀數據。

2）固定列

固定列的内容可視業務及目标用戶的訴求而定，一般采用方法是固定比較重要信息，方便用戶進行數據定位與對比，最好可以讓用戶自定義，滿足不同用戶訴求。

3）固定分頁

分頁處理目前有放在上部、下部或上下部均有，需要根據場景來選擇。分頁固定目的是為了省去了用戶需要翻到頂部或底部進行操作的麻煩。

特别是可以自定義每頁的數量和需要橫向拖動數據查看，這就需要把分頁固定在底部，方便用戶橫向拖動滑條查看信息和進行翻頁操作。

4. 分頁

在Web端中的表格，涉及到跨頁的數據操作時，分頁會帶來不便。

但往往受限于數據加載的壓力，這種情況在大廠中尤其突出，加載數據都是億量級别的，在Web端和手機端都需要實時下載數據的終端，我們通常做法就是提供分頁展示數據來緩解服務器的壓力。

表格中的的數據内容超過一定“數量”時需要提供翻頁功能，而這個“數量”是由表頭的數據的高度、表格的行間距、目标用戶群體的顯示設備的配置等因素來決定。

原則上整張表不要超過一屏，考慮到每個用戶的使用習慣，我們一般提供可以讓用戶自定義每頁的顯示的數量，相比于跨屏翻頁而言，向下滾屏會更便利，也更符合浏覽信息路徑。

5. 全屏查閱

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

1. 特别是在小屏設備上，全屏模式下可以直接屏蔽掉左側導航欄、上方的報表區域和頂部的導航欄，可為用戶提供更多可視區域。
2. 在大量數據前面，可為用戶提供沉浸式閱讀體驗，讓用戶更加專注，可減少與表格無關的視覺幹擾。
3. 用戶可通過ESC鍵或關閉按鈕随時退出全屏模式，操作成本低。

二、易操作性

1. 篩選

在大量的表格信息中，如果沒有篩選查找信息簡直就是猶如大海撈針，而表格跟篩選是不分家的。

說到表格一定會說到篩選，篩選也就是數據過濾，常在數據量較大的場景中使用，其目的是通過關鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息内容。

對于表格外部篩選，如果有時間會單獨出一篇詳情介紹。這裡不展開詳細說。

篩選根據篩選功能的位置不同，可分為表外篩選和表内篩選。

• 表外篩選：篩選功能位于表格上方，與表内篩選的不同之處是過濾值可以不限“表格列”的内容、可單次進行多列的交叉篩選。
• 表内篩選：篩選功能位于表格内，也就是放置在列标簽上的篩選，受“表格列”内容的限制，僅能做單次單列的篩選。

2. 數據選擇

在信息列數較多的情況下，數據的選擇就尤為重要。當鼠标指針懸停在表格列或行時，給予視覺狀态的變化提示。

可以讓用戶捕捉到所在的位置，而不至于視覺上的錯行，能夠降低人的心理壓力和增加掌控感。根據數據選擇功能分為單個選擇和批量選擇。

1）單個選擇

鼠标指針懸停在整行時應與默認态有所區分。當标識選中行或選中行的數量，選中行可操作的命令狀态須同步，明示當前行可操作的命令或反饋當前已選行的數量。

2）批量選擇

提供選擇當前頁部分行、選擇全部行、取消選擇全部行三種功能；狀态反饋分為半選态 、未選态、全選态共三種。

1. 當用戶未進行選擇時，表頭的選擇框的狀态是未選态；
2. 當用戶選擇一行數據時，此時表頭的選擇框的狀态切換為半選态，同時反饋此行的數量；
3. 當用戶在表頭勾選“當前頁所有行”時，表頭的選擇框切換成了全選态，且給出了選擇“全部所有行”的操作。

3. 數據操作

對于數據的操作，主要針對表格内部來說。表格操作大體可分為顯性操作和隐形操作。

1）顯性操作

指操作選項顯示在行内，優點是明顯直觀，可以根據列表上的信息做出快速的判斷并且高頻發生的操作。

适用列數較少的列表。但弊端是信息過載，尤其是列數較多，可展示列數會随操作數增加而減少，同時誤操作率較高。對于危險系數比較高的操作，也不建議采用這種設計。

2）隐性操作

當鼠标懸停或點擊時才顯示其他低頻、高危的操作選項，優點是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，可減輕空間壓力，減少幹擾。

弊端是增加用戶的點擊次數和提高了操作門檻。列數較少的表格不适用隐性操作。

4. 數據下載

為方便用戶對數據進行再次整合分析、統計分析等，可提供數據下載功能及多種下載格式。

5. 空表

對于B端中後台來說，表格顯示最多就是兩種情況：一種就是表格有數據，這種最容易解決，有數據就顯示相應數據；還有一種表格是沒有數據，也就是空表狀态，這也是讓很多設計師容易忽略掉的頁面。

空表分兩種：可創建和純展示

1）可創建

是用戶有創建訴求，數據是由用戶或系統産生的，可創建分兩種：

1. 比較輕量的方式，是直接示意用戶創建數據，無須給出表格樣式。
2. 在表格的空白内容處加入創建的快捷入口，引導用戶新建。

2）純展示

沒有創建訴求的，數據是系統産生的，不是由用戶創建的，直接告之暫無數據。

三、寫在最後

看上去平淡無奇的數據表格，其實是非常重要的，通過合理的組織架構和呈現方式，使原本枯燥的數據呈現出生命力，這是一件很神奇的事。

而圍繞用戶目的與實際使用場景，為用戶準确高效的篩選信息，反映隐藏在數據背後的秘密，促進信息的理解，降低用戶的決策成本。設計一個準确、高效、易用的表格，更是一件考驗設計師功底的事。

作者：WOWdesign，研究設計價值最大化，涉及用戶體驗、品牌體驗、空間體驗。

本文由 @agoodesign 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部