前言

七巧plus作为公有云产品的明星应用，提供表单、流程、页面引擎，从零开始帮助用户搭建应用，从推出到现在已经积累了一批忠实用户。随着版本的迭代以及用户量的增长，此前初始版本的一些问题逐渐暴露出来，因此有了这一次的优化升级。

移动端设计优化

part1 -问题收集

1.问题收集与归类

这些问题主要集中在结构层、框架层以及表现层。我们通过多个渠道收集到了大量的体验问题，并将这些体验问题初步汇总如下。这使得我们对七巧plus的基础体验问题有了全局性感知。我们汇总的时候会把用户行为问题和诉求区分开来，为进一步的整理做准备。

2.划分用户角色，拆解用户核心体验路径

用户在使用产品时，都有固定的使用习惯和路径，了解用户的使用行为对提升体验至关重要。在七巧plus中，还要注意不同的身份角色在使用产品时的不同表现。因此我们需要先划分用户角色，再根据不同角色拆解用户核心体验路径，分析关键节点下的用户行为以及他们可能遇到的问题。

在七巧plus中，根据身份角色，用户可以划分为流程发起人和流程审批人两类。我们将发起流程和审批流程的环节进一步拆解如下：

1、发起流程细化为：打开七巧plus-寻找对应应用-进入应用发起流程-提交内容-查看提交结果

2、审批流程细化为：从通知和待办渠道获知审批单-打开七巧plus-点击待办入口-找到对应流程单-审批流程-回到待办列表。

3.绘制用户体验地图，归纳用户痛点

根据身份角色拆分体验路径后，可将收集到的问题归纳到不同身份角色下的相应节点，以便我们更清晰的了解用户遇到的问题。

在七巧plus使用过程中，我们分别从发起流程和审批流程的角度绘制角色体验地图，更方便我们清晰地了解不同身份角色的用户在使用产品时遇到的问题。通过归纳角色体验地图我们发现：

(1) 流程发起人：发起流程操作时路径冗余，界面信息复杂。我们给用户设计的操作路径并不是用户期望的，用户在使用时会有“复杂感”，影响发起效率。

(2)流程审批人：进入到流程审批页面时，用户不清楚流程的具体信息，对于审批操作的按钮也很难区分，用户使用时有“迷茫感”。

part2 -设计实现

1.缩短发起流程路径

我们分析发起流程路径上的用户行为，发现在发起流程时，用户需要先寻找对应的应用，点击进入到对应页面，再点击发起流程。整个流程很繁琐，用户容易迷失。

因此我们探索新的解决方案，首先在首页我们添加了基于应用和流程的全局搜索，对于有明确目标的用户提供精准的入口。另一方面，我们通过调整首页常用流程的逻辑，提出新的【快捷入口】的方案，整合流程和应用页面到首页，大幅地减少跳转。发起流程的效率提升效率两倍，提升了用户价值。

2.优化审批体验

同样的在审批流程之中， 审批人点击进入流程后，详情没有直观的显示流程的具体信息（流程标题、提单人、提单时间等） 。并且审批操作的样式区分度不明显，导致审批效率低下。

因此我们对于七巧的详情页进行了改造，加入了滑动tab，使表单页面更加的整体。在审批操作中我们基于尼尔森的协助记忆原则，对一系列审批操作打散，并根据使用频率、操作属性进行重构，强化用户对审批操作的统一认知，同时也更好的适配后台配置项的扩展。

part3 -设计升级

随着七巧plus的交互优化同时，我们基于收集的问题以及设计趋势的结合，对于七巧plus的设计风格进行重新定位，我们思考七巧plus这个平台对于使用者的气质表达。参考了国内外许多成熟的sass平台，如salesforce的Lightning Design System，微软的Azure、Monday以及道一新的产品原则——高效、简单、安全和令人愉悦。

1.应用图标设计优化

我们的应用图标是通过SVG文件和研发配合，通过代码控制颜色，以实现高自由度的自定义方案。在旧方案中的颜色呈现上，出现诸如明度不统一、色相太接近无法提供辨识度等问题。在搜集了各大saas平台大量的应用图标设计后，我们参考了google的material design平台的色系，围绕轻量感的概念更新了整体颜色。

2.半屏模态的运用

半屏模态弹窗是苹果提出的一个新的设计趋势，可以减少复杂表单页面的层级，让用户更清晰的知道自身所处的位置和需要处理的任务。在Monday的移动端设计中，也多次使用了这一组件。而在新版的七巧plus中，我们也加入了一些系列的模态弹窗元素，把原本的子表单、切换页面、加签等内容承载在模态弹窗里面，强化用户对于当前页面的感知，减少割裂感。

3.统一动效规范

互联网产品优雅的交互体验离不开动效的支撑，在这一版的七巧plus设计优化中，我们加入了全局的动效规范的想法。选取动效曲线中，我们参考ios的原生动画参数以及谷歌的动画准则，为七巧plus定制了一套动效规范。

这一批动效规范将应用于七巧plus的所有界面中，形成统一、愉悦的产品体验。

桌面端设计优化

part1 -竞品分析

桌面端的设计方案，我们参考了国外优秀竞品，将其中的设计细节进行拆解。我们分别从结构、字体、颜色、风格等方面进行深入分析。最终输了一份详尽的视觉分析报告，接下来便可结合七巧plus的业务及特色进行风格尝试。

part2 -设计实现

经过前期的设计分析之后，我们在风格层面有了明确的方向。而在功能框架的设计上，则是继续围绕“提高效率、优化体验”的目标进行方案优化。在与产品团队的共同努力下，通过设计评审不断打磨方案的完成度，最终输出设计方案。

总结

设计团队在一次次的思辨、实践和碰撞中，七巧Plus从1.0正式迈入2.0版本。内部测试中我们收到了各类的反馈和建议，持续优化产品的视觉和交互体验是我们接下来重点关注的事项。

我们也期望2.0的新设计，能够体现道一高效、简单、令人愉悦的产品原则，帮助企业更好的实现数字办公场景下的各项业务开发、搭建、使用，共同成长。