浅析企业后台的数据表格页面设计

浅析企业后台的数据表格页面设计近半年的工作中经常接触到后台页面的设计,企业后台数据的展示通常都是由大量的表格以及表单组成的,初接手时设计上存在很多困惑的地方。因为这类型的页面和平面的排版不同,没有印刷排版的经验可以追溯,

近半年的工作中经常接触到后台页面的设计,企业后台数据的展示通常都是由大量的表格以及表单组成的,初接手时设计上存在很多困惑的地方。因为这类型的页面和平面的排版不同,没有印刷排版的经验可以追溯,也不像普通移动端用户界面,在网上有很多设计作品和文章可以参考,很多的设计只能通过我自身的感觉和尝试决定。再加上平台自身没有成熟的设计规范可供参考,所以最初在设计上不免缺乏

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

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

表格的类型

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

设置型表格

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

纯记录型表格

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

在设计时应该注意什么

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

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

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

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

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

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

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

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

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

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

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

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

5. 规范很重要

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

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

本文由 @janedaring

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/7783.html

(0)

相关推荐

  • 广西巴马长寿村百岁老人频出的秘密:如何养生才能延年益寿?

    2012年,由黄渤携手管虎拍摄的《杀生》上映,电影讲述了一个与世隔绝的寨子,以及在这个由于盛产百岁老人而赐名长寿村的地方发生的一系列悬疑的故事。其实在我国广西,就有一个真实的长寿村巴马长寿村,电影中百岁老人盛产的原因是换血,这样神秘的延寿方法真的存在吗?现实中的长寿村中百岁老人长寿的秘密是什么呢?

    生活 2021年9月19日
  • 饺子包完怎么保存不干

    饺子包完怎么保存不干 要想坚持饺子不干,须要把刚包好的饺子静置在一旁,然后放入冰箱。如果没有冰箱,可以在饺子外撒上适量的干面粉,装入保鲜袋再放入凉水中。或在包饺子馅时参加恰当的水,坚持饺子的水份,既可以保留不干,口

    生活 2021年10月7日
  • 段永平再也回不了江湖了。

    昨天有媒体报道,步步高系“教父”段永平将“重出江湖”,牵头OPPO、vivo成立新公司,共同造车。

    科技 2021年10月28日
  • 形容天空的唯美语句(50条唯美星空心情说说)

    形容天空的唯美语句(50条唯美星空心情说说)蓝天白云对于某些地方来说是不常见,偶尔见到一次总觉的十分的美好。下面为大家带来形容蓝天白云很美句子,面对蓝天白云心情也舒畅。形容蓝天白云很美句子(一)1、浅蓝色的天幕,像一幅洁

    阅读 2021年4月12日
  • 写给母亲的一封信四百字,给妈妈的一封信四百字

    写信是我们表达感情的一种方式,可以增加人与人之间的感情。写信是人与人之间交流感情、经历、观点的最佳方式,也是人与人之间情感寄托的最佳摇篮。给母亲的信通常由三部分组成,第一部分是标题...

    2022年4月27日
  • 吊省的意思(字义,诗词)

    词组吊省的意思(字义,诗词)基本解释详细字义 吊省拼音:diào shěng注音:ㄉ一ㄠˋ ㄕㄥˇㄒ一ㄥˇ解释:吊唁慰问。基本字义
    吊diào(ㄉ一ㄠˋ)
    1、祭奠死者或对遭到丧事的人家、团体给予慰问:吊丧。吊孝

    阅读 2021年11月5日