产品手札：一款做交互流程图的Sketch插件

简单的交互流程说明在产品输出物中总是不可缺少的一部分，在产品方案评审时，在研发人员开发过程中，在测试人员编写测试用例时，一份完整的交互流程说明可以起到保障最终产品上线验收时还原度失真的问题

总结自己输出交互流程说明的经历，可以分为几个阶段：

1.完全靠口述： 隔空对话，完全依赖双方的空间想象、记忆能力，很多时候过了一段时间自己也记不清了

2.纯线框流程图 + Axure： 场景带入感较弱，Axure *** 作成本过高，且页面结构过于复杂，重点还是自己太不能接受线框的效果

3.Sketch + Flinto 输出高保真可直接演示： 使用成本较高，两个软件都需要付费，虽然有都存在破解版，Flinto的破解版存在不完美，会出现Sketch导入到Flinto的画布颜色，位置存在bug，且使用Flinto还原可演示交互的耗时成本较大，非对外商用演示使用其实价值不高，所以也就开始转向第4种方案

4.Sketch + User flows 输出平面俯瞰交互流程图： User flows 作为插件装载到Sketch上之后可直接通过快捷键、指令 *** 作在已经做好的页面原型之间构建平面俯瞰的交互流程图

----------------------------

在Sketch内同时选中 要触发交互的组件 和要 指向的页面 ，快捷键cmd shift m，就可以自动建立下图这样的连接

在连接指向之间建立条件说明 ，在Sketch内同时选中 要触发交互的组件 和要 指向的页面 ，快捷键cmd shift d。条件说明可以输入是页面跳转的效果，条件判断等

取消连接指向，选中已经建立连接指向的发出方，快捷键cmd shift u

重绘连接，当遇到页面过多，连接指向过于混乱结构不清晰时，可以拖动每个画布之后，快捷键cmd shift 9，连接就会又重新构建好了

在所有的页面交互连接设置好了之后， 选择最开始的页面 ，cmd shift f，就可以 一键生成完整的交互流程图的画布 ，最后就可以到处为图片、PDF等各种格式

Sketch没有办法做交互动效。能制作动效的有Axure和Mockplus，推荐使用Mockplus，比较简单和方便。

制作完动效后可以将项目上传云端储存管理，推荐使用iDoc

通过口头或白板的形式，向团队成员描述设计图跳转逻辑，很难清晰完整传递信息。

成员疑问多，开发过程反复确认细节，项目上线时间被迫推迟。

用蓝湖，设计图逻辑连线、交互说明、分状态展示、高保真原型制作预览。

对设计图进行树状连线，清晰展示跳转逻辑。

还可在一旁添加细节说明，方便团队成员的理解。

---