本文作者主要是對企業后臺的數據表格頁面作一個簡單的階段性總結，enjoy~

近半年的工作中經常接觸到后臺頁面的設計，企業后臺數據的展示通常都是由大量的表格以及表單組成的，初接手時設計上存在很多困惑的地方。因為這類型的頁面和平面的排版不同，沒有印刷排版的經驗可以追溯，也不像普通移動端用戶界面，在網上有很多設計作品和文章可以參考，很多的設計只能通過我自身的感覺和嘗試決定。再加上平臺自身沒有成熟的設計規范可供參考，所以最初在設計上不免缺乏一些底氣。接手一段時間后，開始研究一些大廠如element、ant design的設計規范，仿照著做了一份設計規范，但終究是依葫蘆畫瓢，知其然不知其所以然。

近來對這個問題關注許久，查閱了網上許多資料，也抽空整理了一下網頁端的設計規范，在此綜合起來對企業后臺的數據表格頁面作一個簡單的階段性總結。

表格的類型

表格是一種對數據進行組織整理的手段。大體上可分為四類，入口型表格、設置型表格、純記錄型表格以及被動生成型表格。這四類表格對應提供的功能以及用戶行為是有所區分的。在我所負責的簽到和工作匯報的管理后臺頁面中只包含兩類表格：設置型表格與純記錄型表格。

設置型表格

用戶使用設置型表格主要進行的操作是快速掃視，搜索到需要進行增、刪、改、查的內容。簽到后臺中用到的設置型表格有（管理員對簽到規則以及人員規則進行查看和編輯）、簽到管理員設置（管理員對簽到管理員及其權限進行設置）。

純記錄型表格

純記錄型表格在大多數情況下只是作為一個數據的存放地而存在的。簽到后臺中用到的純記錄表格有簽到記錄表（員工及負責人查看或導出自己的簽到記錄）、各類明細報表（管理員及負責人查看或導出員工的簽到明細）。

在設計時應該注意什么

根據不同角色用戶對表格的使用行為中可以看出，在這兩類表格設計上最重要的就是易讀性和效率。即要在保證閱讀舒適性的同時突出重要信息以便于查找。

1. 用戶的目標是什么，而不是業務邏輯是什么

企業后臺頁面經常會出現的一個問題就是數據展示的邏輯是按照業務邏輯來展示，而非用戶的角度來展示的。當你質疑這一點時，產品經理還會言之鑿鑿地說“業務邏輯就是這樣的”，讓人啼笑皆非。

例如簽到記錄表，對用戶來說最重要的是「簽到狀態」這個信息，但是業務上的邏輯是先展示你的各種簽到明細，最后才展示簽到狀態。因此按照業務邏輯來設計的話就會將無用信息固定在了左側，用戶最關心的信息反而排列在最后一列，大大降低了使用效率。

2. 告訴用戶「你從哪里來」「你要到哪里去」

用戶在使用設置型表格和純記錄型表格時的主要目的都是檢視頁面、找到自己要操作的項。因此在頁面設計時要清晰地告訴用戶你現在在看什么，以及你關心的數據在哪里。

例如簽到記錄表，由于表格自身屬性原因，數據量大是無法避免的，用戶在查看表格時比較吃力，容易不知道自己現在看的是哪里，因此給這一行提供一個懸浮的狀態顯示。對于用戶關心的異常信息，可以通過標紅等方式去展示，讓用戶在掃視過程中就能快速找到目標。

3. 對不必要展示的信息進行隱藏或刪除

基于簡約至上的原則來對頁面中的每一項進行檢查，看是否有可以進行隱藏或刪除的信息，減少用戶的選擇以及頁面中的噪音。

例如頂部的標簽，可以由系統判斷員工所屬的簽到組的簽到規則來自動生成，而不是無差別地將所有的選項都放置在頂部，降低了用戶使用時的效率；另外也可以將用戶不常用的「異?！诡愡x項折疊起來；再比如說作為員工個人使用簽到記錄表時，自己是誰以及在哪個部門是再清楚不過的，因此固定在左側的「部門」和「人名」這一列占用了很大一部分位置，完全沒有必要展示的。

4. 不同場景下采用不同的處理方式

在和易讀性相平衡的前提下可以在不同的場景中使用不同的行高。純記錄型的表格可以緊湊一些，因為大多數數據不需要進行處理；數據量少、需要處理的數據類型多時可以留白多一些，這樣操作起來比較不容易出錯。

5. 規范很重要

不以規矩，不成方圓。企業后臺系統的設計在一定程度上是最容易被標準化和量化的設計，建立一份完整的設計規范，封裝進組件庫，前端建立代碼庫，這樣以后能省去很多繁瑣的標注，并且在工作交接的情況下能夠起到很大的作用。

現在我在設計中面臨的許多問題大都是因為沒有一份標準化的設計規范造成的。因為在我接手項目之初沒有花一些時間進行規范的梳理，現在我要花數倍于此的時間去填這個坑，嗚呼哀哉。

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

題圖來自 unsplash，基于 CC0 協議