B端设计 | 数据表格

3 评论 16731 浏览 108 收藏 10 分钟

编辑导语:在B端内容服务设计中,数据表格也是经常需要涉及的要素。前面文章里,作者介绍了B端产品设计中的数据展示控件。本篇文章里,作者就结合实际案例,对B端产品设计中的数据表格操作进行分析。让我们一起来看一下。

上几篇从整体的范围讲述数据在页面中的录入、展示、反馈的一些建议。接下来的几篇分享内容,从设计的角度,思考与使用者息息相关的事。

一直以来认为B端服务设计内容是需要秉持严肃且认真的态度对待它,因为产品的使用对象也是有着专业能力的操作者,要从实际操作者角度选用贴合实际场景的控件。

设计中要考虑,既有通用的操作方式,也有专业程度较高人员操作方式(比如复杂的医疗类型数据需要有医学知识背景的操作者),会以医疗相关人员的行为来设计操控产品运行。

再进一步,就是要贴合专业程度不同操作者行为而不是引导行为。在适当时机加入些操作者和系统之间的互动过程,满足恰当的操作需要。

以一个实例来分享交互融入操作过程,旨在展示数据与操作之间的关系。依然是按照之前的方式,以业务场景需要,思考设计内容、方式。表格从来不是单独存在的,单独存在的表格是毫无意义的,它需与功能相互搭配使用。

B端设计 | 实例讲述——数据表格

上图是设计B端内容比较常见形式的表格,简要说下表格操作任务:对已经建立的方案可以进行启用/停用,并且对未启用的方案进行修改/删除,已启用的方案只有查看功能;在业务需求的类似的场景下,建立新方案可通过新建或是复制已有的方案。

因为是将操作细节内容分享出来,所以按照之前的分类(录入、展示、反馈)就不合适了,回归数据本身,这张图就是对数据处理,通过增、删、改、查四类方法,筛选出使用者需要的数据内容。拿到需求说明,罗列出有几项任务:

  • 新建方案;
  • 未启用数据可以修改,可以批量删除,可以批量启用;
  • 已启用数据只能查看和停用。

第一步是重组布局:从页面布局上进行分层组织,分层组织也是界面布局的重点。所以将查询模块和数据表格从布局上分开来看。

B端设计 | 实例讲述——数据表格

定义每一块区域,每一个模块中,只有唯一的一个优先级最高的操作功能,优先级最高也就是用户最关心的,最首要考虑的。通过查询模块的查询条件,可即选即得,实时刷新数据(当然系统能够承受住数据量的范围)。

简言之,「识别胜过记忆」和功能可见性类似,对于当前页面中用户需要的决策信息,应该直接凸显出来。

一、数据新增——新建/复制

新建与表格紧密联系,新建数据有两种形式:

  • 模态框浮层:此时新建数据容量小,从屏幕尺寸和使用来看,都是比较常见的做法。保存后,弹窗自动消失,新增数据及时传给父级页面,且自动刷新置顶新一条数据(模态层和父级页面同属一个页面)。
  • 跳转页:此种形式,一般是新建数据复杂,且量大,操作复杂,才会采用另起新页。但这个也有弊端,新增的数据需要用到本页的信息,如果另起新页,数据同步可能不一致。

此实例,新建的内容比较复杂,扩展的信息多样,也存在着堆叠浮层,所以用了跳转页。

B端设计 | 实例讲述——数据表格

B端设计 | 实例讲述——数据表格

复制:在选中条数据的状态处于 [已启用] 状态下,可激活【复制】功能;且复制只能针对一条数据;误操作选中多条进行复制会弹窗提醒用户,只可复制一条,因为在[已启用]状态下也会激活【停用】功能,所以在单/多选方式中采用多选控件。

B端设计 | 实例讲述——数据表格

二、数据操作——启用/停用

启用和停用两个互斥功能,都可进行批量操作,即使在错操作的基础上多选了几项数据,在用户确认的模态框也只做记录,展示用户选择的记录,不对操作结果产生影响。

B端设计 | 实例讲述——数据表格

启用/停用操作流程结束后,对应操作数据信息位置不变,创建时间不变,状态变为未启用/启用,操作变为启用、删除和停用。

另外当这条需要启用或是停用的数据的位置处在第二页以上的,操作完成后,停留在当前页码上。改变的只有操作的那条数据启用状态。

三、数据删除

此实例中的删除,敏感度没那么高,且依据业务的需要,本身单条数据的详细信息较多,因此只能允许对单条数据删除,不能批量操作。

B端设计 | 实例讲述——数据表格

数据有新增,也会有【删除】,它是需要慎重操作的功能,在实际业务中我们思考的是删除是谁有权限?误操作删除是否可恢复数据?删除的数据对其他数据是否有关联,会出现什么异常情况发生?

如果是物理删除,不可恢复的,所以提供删除功能是慎之又慎;而对于一般的逻辑删除,删除功能不必慎之又慎,而做出不必要的点击删除后的提醒,增加操作负担。

四、数据修改

数据修改和新增数据内容一致,不同的地方就是编辑是对已写入的数据进行修改,其他一致。不管是新增的数据还是修改的数据,数据量都很大,那么可以预见下,后期可考虑在编辑页面补充一个【暂存】功能。

B端设计 | 实例讲述——数据表格

【暂存】功能:有时候数据填不完或是网络不稳定,bug等,导致填写的数据丢失是得不偿失的,再次填写需要重新开始。

五、刷新

B端设计 | 实例讲述——数据表格

六、总结

工作中所要处理的页面内容,不会像设计稿那样好看,饱满。数据层次不齐,也不会顺顺当当的进行,总有各种各样的需求发生。

伴随各种各样的细节需要调整优化,设计能做的就是抓住每一个槽点,磨平它,和产品和开发朋友们协调处理。以功能为主导,考虑技术的实现方案、考虑多个需求的优先级。

在此以实例讲述希望能给大家做设计思考的引导,思考如何提升操作效率,

参考:尼尔森可用性原则、菲兹定律;

设计预测——分析现状进而推断未来的方向,针对因果关系来设立简洁而具说服力的假设。

 

本文由 @Ychen 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash,基于 CC0 协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 哈哈,一点都不低调

    回复
  2. 回复
    1. 必须好

      回复