如何搞定数据生产后台的设计体验优化?B端案例实战。

给用户提供的是一款专业资料查询阅读的 App,用户最看重的是资料覆盖是否全面,内容是否严谨。这就辛苦了公司的数据生产团队,必须非常及时和高效率地拿到一手原始资料,进行翻译编辑校对等工作后发布给用户阅读。

如何搞定数据生产后台的设计体验优化?B端案例实战!

为了保证效率和质量,公司自行开发数据生产后台,数据团队成员在此协作数据生产。具体逻辑如下图所示:

如何搞定数据生产后台的设计体验优化?B端案例实战!

  • 主编是最高权限角色。负责创建数据生产任务,并且对最终生产的数据质量进行把关后发布给用户。
  • 编辑负责领取数据生产中的编辑任务,完成任务后提交给审核。
  • 审核对编辑生产的数据进行校对,如果不符合可打回编辑修改,符合数据可提交给主编进行终审。

随着数据生产后台的迭代,功能越来越多。原来的页面框架已经承载不了,因此我决定重新梳理,系统优化体验。

找到重点

B 端系统逻辑很复杂,为了能系统的优化体验,我试图用某对象有若干属性,属性有不同的状态。状态不同操作不同,不同操作有不同的权限这个框架来梳理。

如何搞定数据生产后台的设计体验优化?B端案例实战!

这个框架梳理到接近完成时我放弃了。仅仅是鸟瞰全局就花了很多时间,如果再接着梳理细节,还不知道要花多久才能正式开始设计。

如何搞定数据生产后台的设计体验优化?B端案例实战!

于是我转换思路,评估不同页面的体验问题严重程度,从难到易逐个击破。评估的方法用某个页面哪个角色执行哪些任务,任务频次、重要程度如何。

如何搞定数据生产后台的设计体验优化?B端案例实战!

根据评估结果,显然「条目编辑页」和「工作台页」是最应该优化的。

梳理任务

下图就是「条目编辑页」的老版本界面。根据不同的角色功能略有不同,但总体来说都是用户依次切换条目,并根据每个条目提供的参考资料等对内容进行编辑或审核。

如何搞定数据生产后台的设计体验优化?B端案例实战!

别急着马上找页面上明显的问题,为了彻底消灭体验问题,首先应该梳理不同角色在页面上做的操作。

如下图所示,编辑角色选择未编辑的条目查看任务说明后编辑内容和设置参考文献,之后保存草稿表示完成该条,接着继续选择未编辑的条目进行操作,直到所有条目完成后提交子任务。

审核和主编角色的审核流程基本一致,区别在于主编能自由打回到前面环节的任一角色。审核和主编在选择待审核条目后,查看内容和任务说明,对于不合格的条目能自行编辑或者填写审核意见,待子任务全部处理完成后提交。

如何搞定数据生产后台的设计体验优化?B端案例实战!

如果审核和主编在首次审核提交后有不合格的条目,那编辑得再次修改提交,审核和主编也要再次审核。和首次区别在于需要查看或者撰写审核/申诉意见。

如何搞定数据生产后台的设计体验优化?B端案例实战!

根据以上流程图,将角色和核心任务抽象后,可以简化为 5 个步骤(选择子任务在前一个页面完成,不算在内),如下图所示。

如何搞定数据生产后台的设计体验优化?B端案例实战!

如果把步骤放在页面上,除了左侧主菜单占用太大面积,整个操作动线依次从上到下从左到右似乎没什么问题,但真是如此吗?

如何搞定数据生产后台的设计体验优化?B端案例实战!

确定问题

我们之所以用电脑而不是手机来做数据生产管理系统,是因为在电脑上有更大的屏幕来呈现内容,键盘鼠标精准快捷地操作也能提高效率。如果我们仔细分析每个步骤用户的需求,就发现并没有合理地利用电脑大屏幕的优势。

对于步骤 1 选择待处理条目而言,因为用户要处理完所有条目后才能提交,因此最好能一目了然的知道哪些条目需要处理,哪些不需要。可以非常方便地选择待处理的条目,用列表呈现更好。

如何搞定数据生产后台的设计体验优化?B端案例实战!

对于步骤 2 查看附属内容,绝大多数都是在对条目主体内容进行编辑之前查看,处理过程中偶尔需要打开看一眼。因此不需要一直展现占据空间。应该提供隐藏,这样能给真正需要展示大量信息的步骤 3 处理主体内容留出更多空间。

如何搞定数据生产后台的设计体验优化?B端案例实战!

优化方案

经过以上分析,最终得到「条目编辑页」的优化方案。

  1. 去掉全局导航,提供返回工作台按钮。给用户长时间处理条目的沉浸环境,也给真正需要展示的内容留出更多空间。
  2. 提供工具栏。不同的角色有不同的操作,后续可能会增加其他操作。弹性的工具栏区域可以满足以后的扩展。
  3. 条目改为列表。显示每个条目的状态,帮助用户一览全局,快速选择应该操作的条目。
  4. 附属内容可显示或隐藏。将更多空间留给主体内容。

如何搞定数据生产后台的设计体验优化?B端案例实战!

优化后的「条目编辑页」与 Keynote 的界面神似,我在设计前并没有想到去参考办公软件。

如何搞定数据生产后台的设计体验优化?B端案例实战!

只能说制作幻灯片的步骤抽象后和条目编辑的步骤几乎一致。另外如今的网页早已不是纯粹展示信息的地方,随着前端技术发展,大多数 SaaS 其实和本地软件的交互、功能一样复杂。所以网页和本地软件的边界也越来越模糊。

「工作台」的优化相对来说更简单。根据产品规划,很长时间内我们都不会增加新的大模块。左侧导航优势是利于扩展,但占用的面积过大。改成顶部导航后,留给主任务与子任务列表的空间更大,利于各种角色监视任务进度,或者选择某个任务去执行。

如何搞定数据生产后台的设计体验优化?B端案例实战!

结果反馈

该优化上线之后得到了数据生产团队的夸奖,并且上线之后一年功能迭代没有调整整体框架,说明我制订的框架扩展性不错。

在经历这个项目之前,我好久没有做 B 端产品的设计。为了锻炼我的 B
端设计技能,我特地没有去网上看相关的设计经验文章,或者找竞品分析。学习别人的思路和方案难免也被别人的框架给固化。要知道不是每次都有竞品可以分析,总会涌现出新的平台和产品类型,有能力应对新平台没有竞品的情况,才是真正厉害的设计师。

通过这个项目我掌握了不同角色的任务分析,用户任务的抽象,根据步骤的需求和内容类型决定模块的大小和控件。相信这些技能以后也可以复用在其他新型 B 端产品的设计。

作者:龙爪槐守望者

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/235140.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月2日 11:31
下一篇 2023年3月2日 11:31

相关推荐

  • 极光风如何设计?用案例详述热门的极光风设计趋势。

    作为设计师都会时刻关注设计趋势,以 UI 设计来说每年都会出现很多相关的趋势总结,基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向,带给用户更好的感官体验。最近黑马哥结合落地产品所呈现出来的设…

    2023年3月1日 SEO操作
    020
  • ui设计难学吗。

    UI设计是什么?难学吗?有到外面培训班参加ui基础班学习课程之后说,学ui设计真惨!尤其是女生学ui,太难了!是的,如果没有一点点美学基础,直接上机就是画图标icon,这种新手级别的学生学ui设计肯定是有一定难度…

    2023年2月22日 SEO操作
    03
  • 如何做好标签设计?分析总结标签设计的体验细节。

    在移动端产品中,标签不是核心内容,甚至有点不起眼,但是谁都无法忽略它的存在。特别是在电商平台中,标签已经成为了不可或缺的设计形式。今天我们就来总结下标签设计的细节。文章主要分为 3 部分:标签是什么?标…

    2023年3月1日 SEO操作
    06
  • 如何用 Figma 搭建系统组件库?百度MEUX为你详解。

    组件库是一个强大的提效工具,对于设计师和开发来说有了统一的标准,输出的效率也会大大提高。 随着设计工具的不断发展,Figma 逐渐成为各大公司的主流设计软件。Figma 强大的组件库能力,非常适合团队设计系统的建…

    2023年3月1日 SEO操作
    018
  • 大厂都在用! 万字干货带你读懂并应用 Design Token。

    随着近几年 Figma 等一系列在线设计工具的崛起,相信设计师对设计系统的都有了更深的了解。其实设计系统的建设是一个非常庞大而复杂的工程。我们通过各种设计规范等对产研流程提效,但还是会经常遇到一些棘手的问题…

    2023年3月1日 SEO操作
    015
  • B端功能入口如何设计?归纳B端常见的功能入口设计。

    一、功能入口概述不论是在设计中还是生活中,入口对于我们来说都很重要。比如当你需要进入到一个空间时,你需要知道门的位置并清楚如何打开它。比如下图中左侧的门就非常明显,而右侧的门则需要仔细辨认了。还有的…

    2023年3月7日 SEO操作
    07
  • 如何做好可视化大屏业务?京东高手总结了这份方案。

    在可视化大屏业务中,设计师如何快速了解业务并产出合理的方案呢?我们把日常工作做了梳理,为了大家有更好的阅读体验,文章将拆分为需求理解与设计方案制定两部分,本篇介绍可视化大屏业务需求理解与设计。一、大…

    2023年3月2日 SEO操作
    02
  • 微交互精彩的两处

    第一,用动效给予回馈 合理地在页面设计当中正确地将动效与微交互结合设计,它能够极大的提升用户体验。何谓合理的使用?很明显,并非所有的动效都能呈现出良好的效果,只有同时具备良好的功能性,还能够令用户感觉…

    2022年6月25日
    0126

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息