编者按：本文是蚂蚁集团体验设计师夏鱼 & 阿胥在 SEE Conf 2022 的演讲内容，包括演讲视频及文字内容，欢迎享用。

今天的分享我们将从现状介绍，设计解法、案例说明三部分跟大家进行阐述。

在现状介绍的部分，我们将跟大家介绍那些你可能听起来很陌生，但其实可能很熟悉的图编辑器是什么以及难点是什么。在设计解法的部分，我们将介绍通过内部的实践沉淀出的一些可行性的设计解法，为相关领域的设计师提供一定的参考。在案例说明这一块，我们将通过实际的案例去介绍，在从0到1搭建图编辑器的过程中去如何应用这些解法。

一、现状介绍

1.1 图编辑器是什么

图编辑器听起来很陌生，但是其实你可能很熟悉。首先我先来给大家举一个例子，如果现在我们要来写一款公园门票的计算软件：

“
正常价格是 80 元

大于60岁的老人或小于10岁的儿童半价

计算出游客的门票价格
”

我们会如何来实现呢？

如果使用传统的方式，我们可能会写一串的代码（图1.1.1）。但是如果我现在告诉你，我们通过种简单的拖拽编排的方式（图1.1.2），便可以完成整个算法搭建，那你会不会觉得这是一件非常好的事情。没错，图编辑器产品就是在做这么一件事情。

我们日常的工作中其实有很多比较常见的图编辑器产品。比如流程图编辑器（图1.1.3），我们会经常使用流程图去梳理我们的业务逻辑。还有DAG图编辑器（图1.1.4），我们将结构化的代码封装成一个一个的组件，然后通过简单可视化的拖拽编排的方式，便能完成整个算法搭建，比如我们的蚂蚁信用分的规则就是通过这种方式搭建完成的。还有在数据库物理表中常见的一些表的分析查看时使用到的ER图编辑器（图1.1.5）也是一种常见图编辑产品。除此以外还有很多类型的图编辑器产品，在此处不再赘述，感兴趣的同学可以自行了解。

1.2 图编辑器的优点及应用现状

显而易见，图编辑器很好用。

首先它更高效，原来需要写很复杂的量的代码，我们现在通过可视化图形拖拽的方式便可以完成。而且它更灵活，它适用于平台丰富多样的定制服务，用户可以基于个性化的诉求去拼装出自己想要的算法。

这么好用的产品，我们很希望能把它发扬光大，但是在内部应用的时候，我们发现图编辑器有设计周期长和质量低两类比较明显的问题。

有的设计师反馈说，这个编辑器我花费了两周时间去搭建，但是用户反馈一般。图编辑器的搭建周期会非常的长。有的用户在使用新手设计师设计的图编辑器后会说，画布的使用很不便利，编排操作卡顿不流畅，操作的效率低，这说明我们的图编辑器产品可能存在一定质量低的问题。

1.3 图编辑器的设计难点

那为什么图编辑器产品它这么难设计呢啊，可能有接下来的几个原因：

01 自由度高，路径复杂

首先是与常规产品的常规工作流不同的是，图编辑器的用户动线非常复杂。比如用户登录注册流程中，核心页面的表单的动线是单一而且明确的。而在图编辑器产品的场景下，用户的动线复杂多样而且无序，这就给我们的设计决策带来了一定的挑战。

02 操作入口多，难以查找

一个任务尚且这么复杂，而图编辑器中任务的类型也很复杂，数量也更庞大。用户在使用图编辑器时，会经过编排、配置、查看、分析到完成等多种类型的工作流，每个任务流中的细分任务类型会非常的多，这导致用户的操作入口也很多，这也提升了计决策的难度。

03 交互模式复杂且灵活

除了图编辑器产品中的任务动线无序跟任务复杂以外，图编辑器产品其实还存在一个难点，就是它的交互模式复杂且灵活。举个例子啊，同样的一个点按拖动的手势，它在不同的场景下，其实可能代表着不同的一个交互语义。有的时候他可能是去圈选一些对象，有些时候呢，它可能代表着我们要去移动画布。那在编辑器场景中我们要去如何结合用户不同的诉求，为之匹配更合适的交互手势，其实也是一个比较大的设计难点。

综上所述，我们发现如果从自由度、任务结构性对我们常见的产品进行划分的话，图编辑器产品恰好就在复杂度最高的这么一个节点上，它确实是一类比较复杂难设计的产品。

二、设计解法

2.1 与复杂共存

那么这么复杂的产品我们要如何去设计它呢？如何在这么复杂的系统里给用户带来更好的一个使用体验呢？

前面说到图编辑器产品它很复杂，但是有时候这种复杂是没有办法消除的，因为用户本身它的诉求会非常的多样，功能也难免会复杂。而消除复杂不是简单的简化功能，简单只存在与大脑中。就像诺曼在设计心理学中说到的那样，用户可能最终要与这种复杂共存。

2.2 打造沉浸编排体验

那如果要与复杂共存的话，我们希望给用户带来什么样的一个体验？

我们希望用户是可以在使用图片信息产品中能够沉静，因为沉浸体验，其实也是心流体验，它是用户体验最极致的一种。

那么如何去打造沉浸的编排体验呢？

我们参考了心理学家提出的一个心流模型，如果说想要去营造一种沉浸的感受，其实我们要做到将用户遇到的挑战与用户的能力进行匹配。

这里面的关键点是将挑战与能力匹配。

在此基础上我们提出了保护控制感，提供灵活性以及维持沉浸感三个原则：

• 为什么要保护控制感？因为整个产品的复杂给用户带来了很大的不确定性，我们会尽量去降低这种复杂降低用户所遇到的挑战，来保护用户在使用图编辑器过程中的一种控制感。
• 那为什么要去提供灵活性呢？因为图编辑器产品的用户是非常复杂而且多样的，从小白到中级到专家，他们的使用经验以及个人的能力和诉求是各不相同的，我们要为不同能力的用户去匹配不同的挑战。
• 在我们保护了控制感以及灵活性的基础上，我们还要通过一些设计来去维持到用户的一个沉浸感受，守住用户来之不易的心流。

2.3 设计来源于生活

刚才讲到说保护控制感，提供灵活性以及维持沉浸感这三个原则稍微有一些抽象。它山之石可以攻玉，它们其实在我们的生活中的应用随处可见。接下来我会使用一些日常生活中常见的例子，为大家来介绍一下我们设计思路。

01 保护控制感

为用户降低挑战

我们可以想象一个生活中的场景：

当我们刚拿到驾拿到驾照，然后第一次坐上自己的汽车的时候，我们面对这么一个驾驶系统，其实会有一种非常强烈的不确定性。我们会担心，这个车的界面跟驾校的是不是一样？我能不能很顺利的驾驶它？我会不会在开的时候按错键甚至撞到别人？

我们发现，其实汽车本身的一些设计其实能够消除掉我们的这种不确定性，给我们的驾驶体验带来很强烈的控制感。比如我们在操作前会发现整个的驾驶界面与我们在驾校看到的并无差异，整个的操作界面是非常熟悉的。然后在操作过程中的时候，我们会发现这种转弯掉头的操作非常的顺畅和便利，并没有跟驾校有什么不同，而这种感受也是也能够消除到我们的一种的不确定性。接下来进入我们转向的调节操作，转向灯开启后，“哒哒哒”的声音虽然微弱，但是非常的明确，这种感受也弥补了我们的一个控制感。如果把汽车看做一个很复杂系统的话，其实图编辑产品跟它其实有异曲同工之处，我们在设计图编辑器产品的过程中，如果想要保护用户的控制感，也可以从操作前、操作中、操作后这三个维度来进行考虑。

02 提供灵活性

为不同能力的用户提供不同的挑战

接下来给大家介绍提供灵活性的原则。相信大家即使没有去系统的学过钢琴，可能也会有弹奏钢琴的一个体验。我们会发现如果把钢琴看作一个系统的话，它是堪称完美的。为什么呢？因为我们发现，即使是钢琴的小白用户，也可以通过简单的点按弹奏出悦耳的音调。而一个钢琴的中级用户通过短时间的学习能够弹出不错的歌曲。而我们的艺术大家们也可以通过钢琴这一个系统，创造出厉害的艺术作品。那么把图编辑器打造成像钢琴的那样一个系统，就是我们最终极的一个目标。所以我们希望图编辑器的灵活性是足够的。

03 维持沉浸感

守住来之不易的心流

接下来，我们可以回想一下我们在日常工作中，什么时候会进入一种非常专注非常沉静的心流状态。上图中的这个人，他在很专注的进行工作，他面前的工作区域是很亮，而周围很昏暗的。我们发现如果要保持在专注的状态，有这么几个要素：

• 首先它的氛围是融合而且沉静的，
• 而且他的环境非常的安静，没有噪音，
• 而且他的整个工作流是非常流畅，而且持续不会被别人打断的，

在这种状态下我们就会在工作的过程中进入而且并维持在一种比较沉浸的感受下。

2.4 设计原则的细化

如果刚才大家跟随我的思路，回想象了我们日常中的一些场景的话，你就会发现我们可以从生活中获取一些灵感用来推导我们搭建图编辑器的一些设计原则。

如果我们希望将我们图编辑器产品打造出一种沉浸的体验的话，我们希望这个系统能够像驾驶系统一样保证用户的结果与预期匹配，让用户对整个使用图编辑器有一种很强烈的掌控感，而且能够像钢琴系统一样让小白中级专家都觉得好用，并能像让用户沉浸于内容的编排，专注于当下。

所以在保护控制感这一块，我们可以从操作前、操作中、操作后进行设计。在提供灵活性这一块，我们可以通过教会小白、满足中级、提效专家进行设计。在维持沉浸感这一块，我们可以通过营造氛围，减少噪音，减少断点进行设计。下方这3个维度和9个原则，是我们本次提出的打造沉浸编排体验图编辑器的核心策略。

在我们内部实践的沉淀中，我们还总结出了一些常见的一些手段给相关领域的设计师进行参考。

比如在保护控制这一部分，我们建议设计师可以：

• 在操作前提供一些设计，帮助用户对自己的行为可预测、对结果可预测。
• 在操作中通过实时生效、直接操作、防呆防错等来强化用户使用图编辑器产品的一个控制感。
• 在操作后我们可以通过引导下一步操作并支持可撤销等手段来保护用户的控制感。

同样的在提供灵活性和保护沉浸感中，我们也同样总结出了一些设计手段供大家参考。

下面我们将通过实际的案例来跟大家介绍，在从0~1搭建图片及产品过程中，如何去应用这些解法。

三、案例说明

开车、弹钢琴、工作等场景是很容易被带入的。那在设计实操过程中，我们有哪些方法和手段来达成控制感、灵活度、沉浸感呢？

首先，我们可以了解下用户在【图编辑器】中的操作流程：

用户在使用图编辑器的过程中，通常包含添加元素、编排图形、配置、发布 4 个步骤，其中最复杂且最具特色的行为就是【编排】，因此我们以【编排】为例来进行介绍。

3.1 保护控制感

【控制感】体现在整个操作行为中：操作前，主要是能使行为符合预期；操作中，主要是保证操作智能顺畅；操作后，能根据情境引导下一步操作，也支持撤销。

操作前

01 行为可预期

a. 提供熟悉的布局

在开始一个行为时，熟悉的布局能让人快速上手。例如，在画画的时候，对于颜料、画笔、画纸都是有相对固定的摆放秩序的。同样，图编辑器也需要给用户相对熟悉的布局，例如左侧是组件选择，右侧是节点配置。

b. 强化操作对象的物理隐喻

找到功能入口后，用户就会开始查看操作对象。在看到操作对象这个阶段，可以通过强化操作对象的物理隐喻，例如，将可拖拽的元素卡片化，那么，用户可以更简易的领会“可拖拽”的这个行为。

c. 通过光标，符号化展示当前行为

在执行一个行为时，先是“看到”，看到后就会“指向”，指向操作对象的这个行为，我们可以通过光标形态的改变，通过光标的符号化，来提示用户当前的操作行为。拖拽、缩放、框选等行为，都会有不同的光标形态。

02 结果可预期

a. 在操作前直接呈现操作结果

相比“指向对象来预测行为”更具控制感的方式则是“当用户指向操作区的时候，就能直接获得操作的结果”。如图，指向可添加的阶段，就能直接呈现添加后的位置及连线。

操作中

01 实时生效

操作过程可视，并且与结果呈现一致

开始操作后，要注意整个过程尽可能做到实时生效。例如，连线、拖动，整个操作过程需要是可视的，并与结果呈现一致。

连线可视

拖动可视

02 直接操作

a. 识别高频模态，设置默认语义

同时，我们还需要关注用户的操作情境，让用户可以直接操作。以在画布空白处【点按-拖动】为例：

• 如果用户是以查看行为为主的话，我们将会将这个行为默认定义为 —— 拖拽画布
• 如果多选、编组等是高频行为等话，那我们默认这个行为是 —— 框选

默认拖拽画布

默认框选

b. 需要频繁切换操作模式时，无需进行模态变化即可直接操作

解决默认模态的问题后，还需考虑高频切换的场景。在需要高频切换的操作中，我们其实可以通过不同的区域触发不同的行为，无需进行模态变化即可直接操作。例如，连线可以直接从链接桩触发，完成后立马退出。

连线模式	连接桩触发，连完即退

03 防错防呆

在用户能实时掌控自己的操作后，我们可以做些什么来避免用户犯错呢？

a. 扩大控制范围，使操作区更确定

b. 避免不同交互语义的重叠，使行为更确定

如图所示，将图形“左右拉伸”与“连线出发点”放置在两个区域，避免两个行为的触发点重叠在同一个点。

c. 通过智能提示规避掉错误操作

以连线为例：连线出发时，提示可连接的点有哪些并高亮；接近连接点，智能吸附。这些举措都被用来增强用户能力，规避掉错误操作。

操作后

01 引导下一步操作

对下一步场景预判，确定对象状态

在一个行为结束后，有必要考虑引导用户进行下一步操作，以确保连贯性。以添加元素为例，添加完成后，有“选中态”、“非选中态”。但如何选择，需要根据用户行为来确定：

• 选中态：需要立马对添加元素进行操作，例如添加字段；
• 非选中态：需要持续选择并进行连接编排。

添加元素后——选中态

添加元素后——非选中态

02 支持可撤销

提供撤销功能

图编辑器是一个非常重交互的产品，用户的编辑过程是一系列连续的操作，非常高频，为了防止错误的操作，产品需要提供可撤销的功能，能够允许用户回退或重复上一步操作。

3.2 提供灵活度

提供灵活度，指针对不同能力层级的用户都能很好的使用图编辑器产品。

教会小白

新手引导

对于小白用户，需要提供新手引导，帮助用户明确编排规则

降低自由度

同时，从产品编排规则的制定出发，在流程有固定结构的情况下，限制自由移动，通过降低自由度的方式，来减少小白用户犯错的机会，也让其更易上手。

例如，在一横多纵的流程布局，用网格限制卡片的位置，而不是让用户可以将元素自由移动，会减少用户犯错：

Before：自由移动

After：限定位置

满足中级

提供自定义

对于中级用户而言，灵活性体现在面向不同的需求来服务，例如在图编辑器的工具栏中，我们可以支持用户自定义配置。

提效专家

提供快捷操作

对专家来说，快捷操作能帮助其提效。我们在提供不同的输入方式时，也需要将这些快捷方式在合适的位置露出，例如功能入口，例如右键。

鼠标

键盘、触控板

快捷键

3.3 维持沉浸感

营造氛围

提供氛围主题

提供不同的主题色，可以与周围的环境更加和谐。可参照新版的 Mac 电脑桌面提供动态壁纸，会随着时间的流逝而变化。

减少噪音

以内容为中心减少干扰

“减少噪音”实际上减少噪音就是让用户能将注意力集中在内容区：可以支持全屏及各面板的收起，但是将面板收起但时候，也需要考虑不影响用户的操作行为。例如，让操作面板在用户需要的时候出现，面板可自由拖动或放置到内容里，具体的规则设定，可以根据业务特性来看。

减少断点

减少弹窗跳转等断点

“减少断点”其实就是考虑在长时间需要沉浸的工作空间里，我们通过减少模态的弹窗、页面、抽屉的打断，来让用户可以持续的将注意力集中在内容区。

使用反馈

这几个大原则的指引下，我们应用在了内部 10+ 产品的设计实践中，能提升产品易用度的同时，也收到了用户关于操作更顺畅，工作体验更专注的反馈。

未来，我们还会做什么？

在设计指引产出，“提质”的问题解决后，我们会关注“提效”的问题，从用户行为出发，来沉淀图编排场景下的设计资产。并与前端工程师共建，将图编辑这部分的设计资产工程化。未来，大家也可以持续关注【X6 图编辑引擎 】及【XFlow图编辑应用级解决方案】。