产品手札：一款做交互流程图的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，就可以自动建立下图这样的连接

快捷键cmd shift m

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

cmd shift d

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

cmd shift u

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

cmd shift 9

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

cmd shift f

最后划重点：

1.下载地址：https://abynim.github.io/UserFlows/，一些低版本非官网下载可能会遇到快捷键失灵的情况（亲测）

2.插件本身就支持汉语

3.支持自定义快捷键