可以看到，在画交互原型图之前，还有一堆准备工作要做。所以千万不要在接到一个任务的时候，就立马打开原型设计软件开始做图了。
一、目的
画交互原型图的目的是什么？这一点很重要，首先明确目的，才能在具体画交互原型图的时候有纲领性的思想。
画交互原型图最朴素的目的就是，将想法同步给组内的每一位成员，包括UI、开发、测试和领导等等。最起码的两点要求，一是将产品逻辑讲清楚，二是要让人看得懂。所以需要文档结构清晰明了、语言表达通俗易懂。
二、规范的交互原型图结构
规范的交互原型图结构实际上就是从上文描述的目的出发，不断地演进成大家都普遍认可的文档结构。
规范的交互原型图结构由如下五要素组成：
1.更新日志
更新日志以天为单位。
2.迭代记录
迭代记录以版本号为单位。
虽然跟更新日志一样，都是对文档变更进行记录。但迭代记录能更清晰的看到每个版本都做了哪些事。有新人加入团队时，能很快的了解产品演进的始末，更快的跟上产品思路。也方便将来做复盘。如果产品本人离职，也方便做工作交接。
3.产品结构图
产品结构图会忽略掉很多细节，只展现页面层级结构，而且只表达正常情况下的页面关系。目的还是为了简单，一下子就看得懂，方便记忆。
比如，会忽略掉复杂的页面跳转关系，而只表达主干道上的页面流程。会忽略掉众多的状态判断，而只表达正常情况的页面流程。
4.原型图
原型图的最高境界就是，只要原型图往外一发，无需过多言语解释，开发就能看得懂这个产品是怎么运作的。
原型图即页面的具象化表达，最后呈现在产品上也仅有UI视觉的差别。不建议做动态原型图，一方面是因为费时费力，另外一方面是查看起来需要不断的点击才能看到原貌，不够直观，其实也很不方便开发。
这里讲几个画原型图的好习惯：
1）结构清晰
将大的功能块聚集在一起，并用黄色底做区分。一个横排表达完一个完整逻辑。这样开发就可以分块查看功能，并一个横排看完一个完整的逻辑。
不建议用箭头在原型图里面连来连去，有时候这些线条还互相交织，这样会让原型图看起来很不简洁，将来改动起来，仅处理线条的关系都要改半天。你可以在交互说明里注明页面跳转关系，开发看得懂。
2）高频复用页面模块化
你可以将一些高频复用的页面独立出来。这样不仅使得交互图更简洁，其实也更符合开发思维。开发在写代码的时候也是按模块化的思维来写，这样能提高代码的复用率，提高效率。如果重复的页面总是不停的出现，开发就会疑惑这个页面跟前面的页面有什么区别。
下图举的是将边界场景独立出来的例子。其实如果某个逻辑（某个功能块）复用率很高，也可以独立出来。
3）页面编号
像编排书籍插图一样，在页面底部注明“图xx：页面名”，如下图的“图40：设置页”。在功能块顶部注明功能块名称，如下图的“设置页面”。
这样实际上是在交互图里面建立了一个无形的索引。当你需要页面跳转的时候，就可以在交互说明里说：跳转到设置页面下的图40：设置页，大家都能很轻松的找到。
4）尽量不要干扰设计师发挥创意
总得原则是：需要设计师发挥创意的地方不要太具象。
这里的具象指的是配色、插图、按钮控件等视觉元素，当然也别太抽象了，抽象派的画风让UI设计师无法确定自己的设计是否正确。
另外说明一点，不是原型图里面有配色等具象化的表达就是错误的。因为有时候有些地方你已经想得很清楚了，你不希望UI设计师再在这个地方靠自己理解出图，从而有可能偏离你的设想。你就可以反其道而行之，把这些地方画得非常具象，并告诉设计师这就是我设想的效果。
5）尽量让页面布局呈现最终要实现的效果
注：这里是说布局，不是说视觉，所以跟上文不冲突。
黑白灰是交互图的三原色，我们可以使用不同深浅的灰色来表达页面内部层级结构和需要突出的重点。
页面比例，目前刘海屏水滴屏的屏幕比例基本都是18:9或18.5:9，不过依旧可以按16:9来做设计，这个我倒是感觉都没什么关系。也可以查一下目前主流用户的屏幕分辨率来定。
相同层级的字体大小颜色要保持一致。
页面内容尽量贴近真实情况，这样你就能提前了解内容布局是否合理了。比如文字的长短、图片的大小、控件大小等等
该对齐的地方要对齐，页面要做工整。
最后，最重要的是要了解当下流行的视觉设计趋势。要是给出一份老土的布局结构，UI设计师难免会左右为难。
6）复杂逻辑在页面旁附上逻辑流程图
少去繁杂的言语表述，开发看起来更简单。
7）图表化表达
图表化表达能使繁杂的信息更有条理。
比如这里众多的按钮变化及对应提示，我规整到一张表格里面的说明。
总之，好的交互图能明确的表达自己的想法，并方便别人阅读。如果有机会能多看看别人做的交互图，吸取别人的优点，能让自己更上一层楼。
5.交互说明
交互说明即页面旁的标注。
原型图毕竟是静态图片，无法表达动态效果，这就需要把逻辑变化写在交互说明里。
交互说明要素——即交互说明需要包含哪些信息内容：
1）操作方式
明确定义：
点击（默认单击）、
双击（默认间隔150ms）、
滑动（比如滑动横向距离超过屏幕1/4触发、向下滑动刷新、从屏幕边缘滑入）、
长按（默认3秒）、
双指缩放（两指间的距离伸缩定义缩放比例）
……
特别是自定义的手势，要描述好具体定义。
2）限制条件
比如最多显示个数、一次请求返回内容数量、最多显示多少字符数、输入限制值（比如用正则表达式自动校验）等
3）默认状态、点击状态、特殊状态、错误状态
原型图呈现的是默认状态，如果存在其他状态一定要写明对应状态的处理方式（包括服务端和客户端的分工）。
4）按钮状态变化说明
按钮经常会有几种状态，要写明不同状态下按钮的样式变化和文案变化。
下面展现的是“应用下载按钮”的状态变化。从下载到安装完成一共有6个状态变化。
5）页面跳转方式
特殊的页面响应方式要注明，比如：
淡入淡出、
从底部弹出、
以某个中心点展开页面、
阻尼效果——减速进入、加速退出、加速进入（“Duang”一下的效果）、减速退出（“咻”一下的效果）
还有页面旋转啊什么的，好多，注明就行。
这里也说几个写交互说明的好习惯：
1）站在开发的角度写交互说明
3）切勿长篇大论，尽量言简意赅，达意即可。不用写why（思考过程），表达清楚how（怎么做）即可。
4）画完交互原型图后，自己再反复看几遍，看是否有场景还没考虑到、逻辑有没有不完善的地方、文字校对一遍看有没有错误、纠正表述模糊的地方。
以上讲完了所有交互原型图的要义。
总而言之，交互原型图包含如下五要素：
平时工作中多加刻意练习内化为自己的文档编写习惯，如果有机会多看别人画的交互原型图将大有裨益。
说到这，我信守诺言，将交互原型图模板的Axure源文件奉上。
做了一定删减和脱敏处理。源文件需要用AxureRP8打开。我也将源文件转换为.png和HTML格式，一并打包在了下载链接中。