原创 | 企业后台数据表格页面设计总结

近半年的工作中经常接触到后台页面的设计,企业后台数据的展示通常都是由大量的表格以及表单组成的,初接手时设计上存在很多困惑的地方。因为这类型的页面和平面的排版不同,没有印刷排版的经验可以追溯,也不像普通移动端用户界面,在网上有很多设计作品和文章可以参考,很多的设计只能通过我自身的感觉和尝试决定。再加上平台自身没有成熟的设计规范可供参考,所以最初在设计上不免缺乏一些底气。接手一段时间后,开始研究一些大厂如element、ant design的设计规范,仿照着做了一份设计规范,但终究是依葫芦画瓢,知其然不知其所以然。

近来对这个问题关注许久,查阅了网上许多资料,也抽空整理了一下网页端的设计规范,在此综合起来对企业后台的数据表格页面作一个简单的阶段性总结。

表格的类型

表格是一种对数据进行组织整理的手段。大体上可分为四类,入口型表格、设置型表格、纯记录型表格以及被动生成型表格。这四类表格对应提供的功能以及用户行为是有所区分的。在我所负责的签到和工作汇报的管理后台页面中只包含两类表格:设置型表格与纯记录型表格。

设置型表格

用户使用设置型表格主要进行的操作是快速扫视,搜索到需要进行增、删、改、查的内容。签到后台中用到的设置型表格有(管理员对签到规则以及人员规则进行查看和编辑)、签到管理员设置(管理员对签到管理员及其权限进行设置)。

纯记录型表格

纯记录型表格在大多数情况下只是作为一个数据的存放地而存在的。签到后台中用到的纯记录表格有签到记录表(员工及负责人查看或导出自己的签到记录)、各类明细报表(管理员及负责人查看或导出员工的签到明细)。

在设计时应该注意什么

根据不同角色用户对表格的使用行为中可以看出,在这两类表格设计上最重要的就是易读性和效率。即要在保证阅读舒适性的同时突出重要信息以便于查找。

1.用户的逻辑是什么,而不是业务逻辑是什么

企业后台页面经常会出现的一个问题就是数据展示的逻辑是按照业务逻辑来展示,而非用户的角度来展示的。当你质疑这一点时,产品经理还会言之凿凿地说“业务逻辑就是这样的”,让人啼笑皆非。

例如签到记录表,对用户来说最重要的是「签到状态」这个信息,但是业务上的逻辑是先展示你的各种签到明细,最后才展示签到状态。因此按照业务逻辑来设计的话就会将无用信息固定在了左侧,用户最关心的信息反而排列在最后一列,大大降低了使用效率。

2.告诉用户「你从哪里来」「你要到哪里去」

用户在使用设置型表格和纯记录型表格时的主要目的都是检视页面、找到自己要操作的项。因此在页面设计时要清晰地告诉用户你现在在看什么,以及你关心的数据在哪里。

例如签到记录表,由于表格自身属性原因,数据量大是无法避免的,用户在查看表格时比较吃力,容易不知道自己现在看的是哪里,因此给这一行提供一个悬浮的状态显示。对于用户关心的异常信息,可以通过标红等方式去展示,让用户在扫视过程中就能快速找到目标。

3.对不必要展示的信息进行隐藏或删除

基于简约至上的原则来对页面中的每一项进行检查,看是否有可以进行隐藏或删除的信息,减少用户的选择以及页面中的噪音。

例如顶部的标签,可以由系统判断员工所属的签到组的签到规则来自动生成,而不是无差别地将所有的选项都放置在顶部,降低了用户使用时的效率;另外也可以将用户不常用的「异常」类选项折叠起来;再比如说作为员工个人使用签到记录表时,自己是谁以及在哪个部门是再清楚不过的,因此固定在左侧的「部门」和「人名」这一列占用了很大一部分位置,完全没有必要展示的。

4.不同场景下采用不同的处理方式

在和易读性相平衡的前提下可以在不同的场景中使用不同的行高。纯记录型的表格可以紧凑一些,因为大多数数据不需要进行处理;数据量少、需要处理的数据类型多时可以留白多一些,这样操作起来比较不容易出错。

5.规范很重要

不以规矩,不成方圆。企业后台系统的设计在一定程度上是最容易被标准化和量化的设计,建立一份完整的设计规范,封装进组件库,前端建立代码库,这样以后能省去很多繁琐的标注,并且在工作交接的情况下能够起到很大的作用。

现在我在设计中面临的许多问题大都是因为没有一份标准化的设计规范造成的。因为在我接手项目之初没有花一些时间进行规范的梳理,现在我要花数倍于此的时间去填这个坑,呜呼哀哉。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容