本文作者主要是對(duì)企業(yè)后臺(tái)的數(shù)據(jù)表格頁(yè)面作一個(gè)簡(jiǎn)單的階段性總結(jié)，enjoy~

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

近來(lái)對(duì)這個(gè)問(wèn)題關(guān)注許久，查閱了網(wǎng)上許多資料，也抽空整理了一下網(wǎng)頁(yè)端的設(shè)計(jì)規(guī)范，在此綜合起來(lái)對(duì)企業(yè)后臺(tái)的數(shù)據(jù)表格頁(yè)面作一個(gè)簡(jiǎn)單的階段性總結(jié)。

表格的類型

表格是一種對(duì)數(shù)據(jù)進(jìn)行組織整理的手段。大體上可分為四類，入口型表格、設(shè)置型表格、純記錄型表格以及被動(dòng)生成型表格。這四類表格對(duì)應(yīng)提供的功能以及用戶行為是有所區(qū)分的。在我所負(fù)責(zé)的簽到和工作匯報(bào)的管理后臺(tái)頁(yè)面中只包含兩類表格：設(shè)置型表格與純記錄型表格。

設(shè)置型表格

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

純記錄型表格

純記錄型表格在大多數(shù)情況下只是作為一個(gè)數(shù)據(jù)的存放地而存在的。簽到后臺(tái)中用到的純記錄表格有簽到記錄表（員工及負(fù)責(zé)人查看或?qū)С鲎约旱暮灥接涗洠?、各類明?xì)報(bào)表（管理員及負(fù)責(zé)人查看或?qū)С鰡T工的簽到明細(xì)）。

在設(shè)計(jì)時(shí)應(yīng)該注意什么

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

1. 用戶的目標(biāo)是什么，而不是業(yè)務(wù)邏輯是什么

企業(yè)后臺(tái)頁(yè)面經(jīng)常會(huì)出現(xiàn)的一個(gè)問(wèn)題就是數(shù)據(jù)展示的邏輯是按照業(yè)務(wù)邏輯來(lái)展示，而非用戶的角度來(lái)展示的。當(dāng)你質(zhì)疑這一點(diǎn)時(shí)，產(chǎn)品經(jīng)理還會(huì)言之鑿鑿地說(shuō)“業(yè)務(wù)邏輯就是這樣的”，讓人啼笑皆非。

例如簽到記錄表，對(duì)用戶來(lái)說(shuō)最重要的是「簽到狀態(tài)」這個(gè)信息，但是業(yè)務(wù)上的邏輯是先展示你的各種簽到明細(xì)，最后才展示簽到狀態(tài)。因此按照業(yè)務(wù)邏輯來(lái)設(shè)計(jì)的話就會(huì)將無(wú)用信息固定在了左側(cè)，用戶最關(guān)心的信息反而排列在最后一列，大大降低了使用效率。

2. 告訴用戶「你從哪里來(lái)」「你要到哪里去」

用戶在使用設(shè)置型表格和純記錄型表格時(shí)的主要目的都是檢視頁(yè)面、找到自己要操作的項(xiàng)。因此在頁(yè)面設(shè)計(jì)時(shí)要清晰地告訴用戶你現(xiàn)在在看什么，以及你關(guān)心的數(shù)據(jù)在哪里。

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

3. 對(duì)不必要展示的信息進(jìn)行隱藏或刪除

基于簡(jiǎn)約至上的原則來(lái)對(duì)頁(yè)面中的每一項(xiàng)進(jìn)行檢查，看是否有可以進(jìn)行隱藏或刪除的信息，減少用戶的選擇以及頁(yè)面中的噪音。

例如頂部的標(biāo)簽，可以由系統(tǒng)判斷員工所屬的簽到組的簽到規(guī)則來(lái)自動(dòng)生成，而不是無(wú)差別地將所有的選項(xiàng)都放置在頂部，降低了用戶使用時(shí)的效率；另外也可以將用戶不常用的「異?！诡愡x項(xiàng)折疊起來(lái)；再比如說(shuō)作為員工個(gè)人使用簽到記錄表時(shí)，自己是誰(shuí)以及在哪個(gè)部門是再清楚不過(guò)的，因此固定在左側(cè)的「部門」和「人名」這一列占用了很大一部分位置，完全沒(méi)有必要展示的。

4. 不同場(chǎng)景下采用不同的處理方式

在和易讀性相平衡的前提下可以在不同的場(chǎng)景中使用不同的行高。純記錄型的表格可以緊湊一些，因?yàn)榇蠖鄶?shù)數(shù)據(jù)不需要進(jìn)行處理；數(shù)據(jù)量少、需要處理的數(shù)據(jù)類型多時(shí)可以留白多一些，這樣操作起來(lái)比較不容易出錯(cuò)。

5. 規(guī)范很重要

不以規(guī)矩，不成方圓。企業(yè)后臺(tái)系統(tǒng)的設(shè)計(jì)在一定程度上是最容易被標(biāo)準(zhǔn)化和量化的設(shè)計(jì)，建立一份完整的設(shè)計(jì)規(guī)范，封裝進(jìn)組件庫(kù)，前端建立代碼庫(kù)，這樣以后能省去很多繁瑣的標(biāo)注，并且在工作交接的情況下能夠起到很大的作用。

現(xiàn)在我在設(shè)計(jì)中面臨的許多問(wèn)題大都是因?yàn)闆](méi)有一份標(biāo)準(zhǔn)化的設(shè)計(jì)規(guī)范造成的。因?yàn)樵谖医邮猪?xiàng)目之初沒(méi)有花一些時(shí)間進(jìn)行規(guī)范的梳理，現(xiàn)在我要花數(shù)倍于此的時(shí)間去填這個(gè)坑，嗚呼哀哉。

本文由 @janedaring 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 unsplash，基于 CC0 協(xié)議