如何搞定数据生产后台的设计体验优化?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组件应用指南!标题栏设计方式详解。

    本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面,帮你掌握UI组件中的标题栏设计。一、组件介绍顶部标题栏,是几乎所有 APP 页面设计中的第一个组件,用来展示页面的名称和放置一些层级较高的操作选…

    2023年3月2日 SEO操作
    03
  • 2020 UI/UED用户体验设计走向何方。

    大环境下对设计的影响,我们每天使用的工具发展趋势,我们如何相互协作,我们的主动意识如何影响设计变革。2020Ui用户体验设计趋势将走向何方?为"后真相时代"设计信息时代,大量虚假信息被用来推动政治…

    2023年2月20日 SEO操作
    00
  • 5000字干货!让界面设计更出彩的图片使用指南。

    在 UI 设计中,配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计,具有设计感的配图不仅是吸引用户的重要元素,能比原本平淡无奇的文字界面更让人产生点击欲望,还能体现出设计师的品…

    2023年3月1日 SEO操作
    08
  • 了解这 9 种交互机制,不怕跟开发相爱相杀了。

    产品文档/交互方案里往往需要对某个功能的产生逻辑、交互方式等进行说明。比如一个 Loading:加载前/中/后的状态该如何显示?展示范围是多少?先出文字还是图片?不写明白、有忽略的话,开发就会按照自己的想法去做…

    2023年3月2日 SEO操作
    06
  • 2017年应注意三个界面设计趋势

      配色中性或自然 介面设计当中的配色在近来越来越接近自然、以及中性。因为介面设计流行趋势紧跟使用者的喜好、往往、期待、需求等等,这些都来自於他们的日常生活。用户越来越希望体验到细致、亲近、创意等…

    2022年6月25日
    0107
  • 如何在 B 端设计中应用格式塔 7 大原则?来看详细分析。

    B 端产品主要是 Web 端产品,空间大、操作多,内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系,从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的…

    2023年3月1日 SEO操作
    010
  • 为什么你的交互方案过不了?大厂高手教你这 4 个方法。

    本周特邀前百度资深交互设计师薏薏来讲讲自己从交互小白一路升级打怪的过程,薏薏从纯理科转行设计,从 C 端近年转行 B 端,求职、工作中踩过不少坑,今天将分享其中的一部分心得体会。你是否和我有过同样的经历:…

    2023年3月2日 SEO操作
    04
  • 用户体验设计和网页设计之间的主要区别。

    每个人都喜欢能够轻松可靠地充分有效地执行的网站。当涉及到网站设计时,良好的功能和性能常常让位于视觉吸引力。当网站无法按预期运行时,缺乏对用户体验的深思熟虑可能会让用户感到失望。 在创建有效的商业网站时…

    2023年3月7日
    05

联系我们

QQ:951076433

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