Axure炫技：如何让你的原型图动起来

下面我来介绍一下，如何在Mac上制作视频原型图

目录

一、使用工具介绍

二、制作原型图步骤&方法

• 第一步，设计草图
• 第二步，设置事件
• 第三步，视频录制
• 第四步，排序整理文件
• 第五步，加入交互、文字说明
• 第六步，附加音乐
• 第七步，导出视频

三、总结

一、使用工具介绍

Mac系统下使用工具： Axure、 Final cut pro / iMovie、QuickTime Player

Win系统下使用工具：Axure、绘声绘影x6、xbox

先用Axure做原型并加上事件，然后用QuickTime Player/xbox进行录屏，录好后将视频分类命名整理，最后用 Final cut pro或iMovie进行制作打包即可

二、制作原型图步骤&方法

2.1  第一步，设计草图

本篇文章主要是讲如何让原型图动起来，所以不详细说明原型图怎么画哈~

画一个带壳的原型图即可，然后将其他的原型图按照需要显示的顺序，叠加在带壳的原型图上。

2.2 第二步，设置事件

将画好的原型图，设置事件

2.3 第三步，视频录制

开始录屏了，为了视频能够流畅，录屏之前将原型先导出来，然后再打开index.html

2.4 第四步，排序整理文件

用数字排序后，直接导入视频编辑软件内方便合成视频做排序

2.5 第五步，加入交互、文字说明

2.6 第六步，附加音乐

如果觉得原型图视频太枯燥可以加一点音乐，实在不知道加什么音乐可以去…（你的作品给谁看呢？客户？老板？）那么你就去他们的朋友圈逛逛，有没有分享的音乐，然后下载放入即可~(加音乐的方式与加文字的方式是一样的)

2.7 第七步，导出视频

三、总结

这个技能也不是产品经理必备的，不过我倒感觉挺加分的，比如一些外包公司，需要给客户提供一些方案，这个时候给一个能动的原型不是更有胜算吗？也方便客户理解，对于外行人来说，毕竟看一个原型图是比较费脑的，如果再配上设计师的高保真的UI做这个的话，效果更赞

作者：Bass小南

来源：人人都是产品经理