原創(chuàng) | 企業(yè)后臺數(shù)據(jù)表格頁面設(shè)計總結(jié)

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

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

表格的類型

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

設(shè)置型表格

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

純記錄型表格

純記錄型表格在大多數(shù)情況下只是作為一個數(shù)據(jù)的存放地而存在的。簽到后臺中用到的純記錄表格有簽到記錄表(員工及負責(zé)人查看或?qū)С鲎约旱暮灥接涗洠⒏黝惷骷殘蟊恚ü芾韱T及負責(zé)人查看或?qū)С鰡T工的簽到明細)。

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

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

1.用戶的邏輯是什么,而不是業(yè)務(wù)邏輯是什么

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

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

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

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

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

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

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

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

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

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

5.規(guī)范很重要

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容