打造沉浸编排体验图编辑器搭建策略

1. 打造沉浸编排体验图编辑器搭建策略夏⻥阿胥蚂蚁集团体验设计师

2. 夏⻥阿胥蚂蚁集团体验设计师蚂蚁集团体验设计师

3. 目录现状介绍设计解法案例说明图编辑器是什么？难点是什么？如何打造沉浸编排体验？如何从0到1搭建？

4. /01 现状介绍图编辑器是什么？难点是什么？

5. 图编辑器可以做什么？ ? 让我们来写一款公园⻔票计算软件正常价格是 80 元大于 60岁的老人或小于 10岁的儿童计算出游客的⻔票价格半价

6. 图编辑器可以做什么？ ? 让我们来写一款公园⻔票计算软件正常价格是 80 元大于 60岁的老人或小于 10岁的儿童计算出游客的⻔票价格半价

7. 图编辑器可以做什么？ ? 让我们来写一款公园⻔票计算软件正常价格是 80 元大于 60岁的老人或小于 10岁的儿童计算出游客的⻔票价格半价

8. 图编辑器可以做什么？ ? 让我们来写一款公园⻔票计算软件正常价格是 80 元大于 60岁的老人或小于 10岁的儿童计算出游客的⻔票价格半价

9. 图编辑器可以做什么？ ? 让我们来写一款公园⻔票计算软件正常价格是 80 元大于 60岁的老人或小于 10岁的儿童计算出游客的⻔票价格半价

10. 图编辑器可以做什么？ ? 让我们来写一款公园⻔票计算软件正常价格是 80 元大于 60岁的老人或小于 10岁的儿童计算出游客的⻔票价格半价

11. 图编辑器可以做什么？ ? 让我们来写一款公园⻔票计算软件正常价格是 80 元大于 60岁的老人或小于 10岁的儿童计算出游客的⻔票价格半价

12. 图编辑器可以做什么？ ? 让我们来写一款公园⻔票计算软件正常价格是 80 元大于 60岁的老人或小于 10岁的儿童计算出游客的⻔票价格半价

13. 图编辑器可以做什么？

14. 图编辑器可以做什么？

15. 常⻅的图编辑器

16. 常⻅的图编辑器流程图

17. 常⻅的图编辑器流程图 DAG图 XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX

18. 常⻅的图编辑器流程图 ER图 DAG图 XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXXXXX XXXX XXXX XXXX XXXXXXX XXXX XXXXXXX XXXX XXXXXXX XXXXXXX XXXXXXX XXXXXXX XXXX XXXXXXX XXXXXXX XXXX XXXX XXXX XXXXXXX XXXX XXXXXXX XXXXXXX XXXX XXXX XXXX XXXX XXXXXXX XXXXXXX XXXXXXX XXXX XXXX XXXX XXXX

19. 好在哪里？更高效 Before now 写代码可视化图形拖拉拽 Node Node Node Node 更灵活

20. 好在哪里？ Before now 平台定制服务用户自主拼装更高效更灵活 …… …… × N 平台 1 个图编辑器平台

21. 难在哪里？设计师这个编辑器我花费了 2 周搭建，但用户反馈一般用户画布使用很不便利，编排操作卡顿不流畅，操作效率低

22. 难在哪里？设计师这个编辑器我花费了 2 周搭建，但用户反馈一般用户画布使用很不便利，编排操作卡顿不流畅，操作效率低周期⻓

23. 难在哪里？设计师这个编辑器我花费了 2 周搭建，但用户反馈一般周期⻓用户画布使用很不便利，编排操作卡顿不流畅，操作效率低质量低

24. 为什么难设计？

25. 自由度高，路径复杂任务分配的权利交还到用户手中图编辑器常规页面 N 1 1 2 3

26. 操作入口多，难以查找编辑器中的任务多且密集 XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX

27. 交互模式复杂且灵活，状态难辨别不同场景下，同一个操作语义可能会存在不同的结果，为操作本身来带极大的不确定性点按拖动

28. 复杂高高自由度模型复杂度低低结构性任务结构性非结构性引用自《交互系统新概念设计：用户绩效和用户体验设计准则》

29. 复杂高高自由度模型复杂度低低结构性任务结构性非结构性引用自《交互系统新概念设计：用户绩效和用户体验设计准则》

30. /02 设计解法如何打造沉浸编排体验？

31.

32. 用户将如何使用图编辑器

33. 用户将如何使用图编辑器与复杂共存

34. 用户将如何使用图编辑器与复杂共存沉浸编排体验

35. 如何打造沉浸编排体验？

36. 如何打造沉浸编排体验？高焦虑激发担心淡漠低弱掌控轻松厌倦强 Cobb J A, Gouda M G. Flow theory[J]. IEEE/ACM Transactions on Networking, 1997, 5(5):661-674.

37. 如何打造沉浸编排体验？高焦虑激发担心淡漠低弱沉浸感掌控轻松厌倦强 Cobb J A, Gouda M G. Flow theory[J]. IEEE/ACM Transactions on Networking, 1997, 5(5):661-674.

38. 如何打造沉浸编排体验？高焦虑挑战激发担心淡漠低弱沉浸感掌控轻松厌倦强 Cobb J A, Gouda M G. Flow theory[J]. IEEE/ACM Transactions on Networking, 1997, 5(5):661-674.

39. 如何打造沉浸编排体验？高焦虑挑战激发担心淡漠低弱沉浸感掌控轻松能力厌倦强 Cobb J A, Gouda M G. Flow theory[J]. IEEE/ACM Transactions on Networking, 1997, 5(5):661-674.

40. 高焦虑挑战激发担心淡漠低弱沉浸感掌控轻松能力厌倦强

41. 高焦虑挑战激发担心沉浸感挑战掌控匹配能力淡漠低弱轻松能力厌倦强

42. 保护控制感高焦虑挑战激发担心为用户降低挑战沉浸感挑战掌控匹配能力淡漠低弱轻松能力厌倦强

43. 保护控制感高焦虑挑战激发担心淡漠低弱为用户降低挑战沉浸感挑战掌控轻松能力匹配提供灵活性能力为不同能力用户提供不同的挑战厌倦强维持沉浸感守住来之不易的心流

44. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流

45. 保护控制感为用户降低挑战

46. 保护控制感为用户降低挑战结果与预期匹配，充满掌控感

47. 保护控制感为用户降低挑战操作前操作界面熟悉结果与预期匹配，充满掌控感

48. 保护控制感为用户降低挑战操作前操作界面熟悉操作中转弯掉头操作简单结果与预期匹配，充满掌控感

49. 保护控制感为用户降低挑战操作前操作界面熟悉操作中转弯掉头操作简单操作后转向灯声音微弱但明确结果与预期匹配，充满掌控感

50. 提供灵活性为不同能力用户提供不同的挑战

51. 提供灵活性为不同能力用户提供不同的挑战小白、中级、专家都觉得好用

52. 提供灵活性为不同能力用户提供不同的挑战新手快速上手小白、中级、专家都觉得好用

53. 提供灵活性为不同能力用户提供不同的挑战新手快速上手中级熟悉后弹的不错小白、中级、专家都觉得好用

54. 提供灵活性为不同能力用户提供不同的挑战新手快速上手中级熟悉后弹的不错专家创造出更厉害的作品小白、中级、专家都觉得好用

55. 维持沉浸感守住来之不易的心流

56. 维持沉浸感守住来之不易的心流沉浸于内容的编排，专注当下

57. 维持沉浸感守住来之不易的心流氛围融合且沉浸沉浸于内容的编排，专注当下

58. 维持沉浸感守住来之不易的心流氛围融合且沉浸环境安静无噪音沉浸于内容的编排，专注当下

59. 维持沉浸感守住来之不易的心流氛围融合且沉浸环境安静无噪音工作流流畅且持续沉浸于内容的编排，专注当下

60. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流

61. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流小白、中级、专家都觉得好用沉浸于内容的编排，专注当下结果与预期匹配，充满掌控感

62. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流小白、中级、专家都觉得好用沉浸于内容的编排，专注当下操作前操作中操作后

63. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流操作前教会小白操作中满足中级操作后提效专家沉浸于内容的编排，专注当下

64. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流操作前教会小白营造氛围操作中满足中级减少噪音操作后提效专家减少断点

65. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流结果可预期教会小白营造氛围实时生效满足中级减少噪音提效专家减少断点操作前操作中操作后行为可预期直接操作防呆防错引导下一步操作支持可撤销

66. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流操作前行为可预期结果可预期实时生效操作中操作后直接操作防呆防错引导下一步操作支持可撤销教会小白满足中级新手引导降低自由度提供自定义营造氛围减少噪音减少断点提效专家提供快捷操作

67. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流操作前行为可预期结果可预期实时生效操作中直接操作操作后引导下一步操作防呆防错支持可撤销教会小白满足中级提效专家新手引导降低自由度提供自定义提供快捷操作营造氛围减少噪音减少断点提供氛围主题高亮核心模块提供全屏收起低频功能隐藏减少页面跳转减少模态切换

68. /03 案例说明如何从0到1搭建？ 01 保护控制感 02 提供灵活性 03 维持沉浸感

69. 用户如何使用图编辑器 Node Node Node

70. 用户如何使用图编辑器 Node Node Node 1 添加 Node

71. 用户如何使用图编辑器 Node Node Node Node 1 添加 2 Node 编排连接、编组、位置移动…… Node Node

72. 用户如何使用图编辑器 Node Node Node Node 1 添加 2 Node 编排连接、编组、位置移动…… Node Node 3 配置

73. 用户如何使用图编辑器 4 Node Node Node Node 1 添加 2 Node 编排连接、编组、位置移动…… Node Node 3 配置发布

74. 用户如何使用图编辑器 Node 1 添加 2 编排 Node Node Node 连接、编组、位置移动…… Node Node Node 3 配置 4 发布

75. 用户如何使用图编辑器 Node 2 Node Node Node Node Node Node 编排连接编组位置移动……

76. 01 保护控制感操作前行为可预期结果可预期操作中实时生效直接操作防呆防错操作后引导下一步操作支持可撤销

77. 保护-控制感操作前操作中行为可预测提供熟悉的布局用户初次进入编辑器，需找到各操作对象的位置操作后

78. 保护-控制感操作前操作中操作后 Before Steps 行为可预测强化操作对象的物理隐喻 After Flows data processing Node 1 Node 2 Node 3 Steps Steps Flows Flows data processing processing data Node 1 1 Node Node 2 2 Node Node 4 data analysis Node 3 3 Node data evaluation Node 4 4 Node data analysis analysis data data evaluation evaluation data

79. 保护-控制感操作前操作中行为可预测通过光标，符号化展示当前行为操作后

80. 保护-控制感操作前操作中行为可预测通过光标，符号化展示当前行为操作后

81. 保护-控制感操作前操作中行为可预测通过光标，符号化展示当前行为操作后

82. 保护-控制感操作前操作中行为可预测通过光标，符号化展示当前行为 … Hover Select Brush Drag 操作后

83. 保护-控制感操作前操作中行为可预测通过光标，符号化展示当前行为 … Hover Select Brush Drag 操作后

84. 保护-控制感操作前结果可预测在操作前直接呈现操作结果操作中操作后

85. 保护-控制感操作前结果可预测在操作前直接呈现操作结果操作中操作后

86. 保护-控制感操作前操作中操作后连线可视实时生效操作过程可视，并且与结果呈现一致拖动可视

87. 保护-控制感操作前操作中操作后连线可视实时生效操作过程可视，并且与结果呈现一致拖动可视

88. 保护-控制感操作前操作中操作后连线可视实时生效操作过程可视，并且与结果呈现一致拖动可视

89. 保护-控制感操作前操作中直接操作识别高频模态，设置默认语义默认拖拽画布：自定义编辑场景较少（查看为主）默认框选对象：自定义编辑场景较多（分组）操作后

90. 保护-控制感操作前操作中直接操作识别高频模态，设置默认语义默认拖拽画布：自定义编辑场景较少（查看为主）默认框选对象：自定义编辑场景较多（分组）操作后

91. 保护-控制感操作前操作中直接操作识别高频模态，设置默认语义默认拖拽画布：自定义编辑场景较少（查看为主）默认框选对象：自定义编辑场景较多（分组）操作后

92. 保护-控制感操作前操作中操作后直接操作需要频繁切换操作模式时，无需进行模态变化即可直接操作

93. 保护-控制感操作前操作中操作后直接操作需要频繁切换操作模式时，无需进行模态变化即可直接操作

94. 保护-控制感操作前操作中操作后直接操作需要频繁切换操作模式时，无需进行模态变化即可直接操作

95. 保护-控制感操作前操作中操作后 Before 防错防呆扩大控制范围，使操作区更确定 After

96. 保护-控制感操作前操作中操作后 Before 防错防呆扩大控制范围，使操作区更确定 After

97. 保护-控制感操作前操作中操作后 Before 防错防呆扩大控制范围，使操作区更确定 After

98. 保护-控制感操作前操作中操作后 Before 防错防呆避免不同交互语义的重叠，使行为更确定 After

99. 保护-控制感操作前操作中操作后 Before 防错防呆避免不同交互语义的重叠，使行为更确定 After

100. 保护-控制感操作前操作中操作后 Before 防错防呆避免不同交互语义的重叠，使行为更确定 After

101. 保护-控制感操作前防错防呆通过提示规避掉错误操作操作中操作后

102. 保护-控制感操作前防错防呆通过提示规避掉错误操作操作中操作后

103. 保护-控制感操作前操作中引导下一步操作对下一步场景预判，确定对象状态操作后添加元素后——选中态

104. 保护-控制感操作前操作中引导下一步操作对下一步场景预判，确定对象状态操作后添加元素后——选中态

105. 保护-控制感操作前操作中操作后添加元素后——选中态引导下一步操作对下一步场景预判，确定对象状态添加元素后——非选中态

106. 保护-控制感支持可撤销提供撤销功能操作前操作中操作后

107. 保护-控制感支持可撤销提供撤销功能操作前操作中操作后

108. 02 提供灵活性教会小白新手引导降低自由度满足中级提供自定义提效专家提供快捷操作

109. 提供-灵活性教会小白满足中级新手引导新手引导，帮助用户明确编排规则提效专家

110. 提供-灵活性教会小白满足中级提效专家 Before：自由移动 Process orchestration Step 1 Step 2 Node 1 Step 3 Node 1 减少用户犯错的机会 Node 1 Node 1 降低自由度 After：限定位置 Process orchestration Step 1 Step 2 Node 1 Step 3 Node 1 Node 1 Node 1

111. 提供-灵活性教会小白满足中级提效专家为不同需求（目标）的用户服务支持用户自定义配置常用操作

112. 提供-灵活性教会小白满足中级提效专家提供快捷操作鼠标提供多种输入方式 + 键盘 Unlive Superpoze 0:53 4:26 + 触控板专家

113. 03 维持沉浸感营造氛围提供氛围主题减少噪音提供全屏收起低频功能隐藏减少断点减少页面跳转减少模态切换

114. 维持-沉浸感营造氛围减少噪音减少断点浅色模式提供氛围主题为不同工作环境提供不同主题色

115. 维持-沉浸感营造氛围减少噪音减少断点浅色模式提供氛围主题为不同工作环境提供不同主题色深色模式

116. 维持-沉浸感营造氛围减少噪音以内容为中心，减少干扰支持收起侧边栏或全屏编辑减少断点

117. 维持-沉浸感营造氛围减少噪音以内容为中心，减少干扰支持收起侧边栏或全屏编辑减少断点

118. 维持-沉浸感营造氛围减少噪音减少断点减少弹窗跳转等断点不打断用户工作的心流 Before：流程动线复杂，需要跳转多个页面才，任务间无衔接 4 2 3 1 5 6 7 8 After：动线简短，流程连续 3 1 2 9

119. 保护控制感提供灵活性维持沉浸感为用户降低挑战为不同能力用户提供不同的挑战守住来之不易的心流操作前教会小白营造氛围操作中满足中级减少噪音操作后提效专家减少断点

120. 已应用于内部 10+ 产品

121. 未来还会做什么？ E xamples 综合案例 T emplates C omponents G lobal Style 功能模板组件全局样式

122. 还可以关注AntV X6 图编辑引擎 XFlow 图编辑应用级解决方案

123. 谢谢观看