在Axure文档中导入动效视频
2015-05-25 本文已影响575人
一毛不长
我们都遇到过如何跟开发讲清楚动效设计的问题。最近在优化云音乐Android平台的动效，Material Design风格下的动效变得更为丰富而有层次，为了更清楚地向开发传达设计细节，我希望将做好的动效在Axure文档里表现为视频而非gif的形式，开发可以在看的过程中随时暂停/播放/来回拖动进度，以便更清楚地观察动效在每个阶段的状态。
在Axure导入动效视频，最简单的做法是使用软件自带的Inline Frame控件，具体操作如下：
1. 将Inline Frame控件拖到工作区
2. 将其属性设置为“video”，控件会变为如下形态，拖动控件四角可改变视频显示区域的大小
3.将动效视频上传至第三方视频网站，比如优酷。双击控件，在输入框中填写视频的url。
这样在生成的交互文档里，可以查看来自第三方网站的视频，视频嵌套的是该网站的播放控制器。
但是将视频上传到第三方网站毕竟有点麻烦，而且还避免不了来自第三方的广告。
重点来了，如果不想逼疯开发大哥们，教大家一种导入本地视频的方法，具体操作如下：
4. 使用记事本创建一个html文件，比如命名为“gridToPage.html”。贴如下代码：
若视频标题为中文，则在保存时需将编码改为UTF-8。
5. 将视频文件、“gridToPage.html”和Axure生成的html文件放在同一个文件夹下
6. 在Inline Frame的链接属性中，关联刚才创建的html文件而非视频文件，因为“gridToPage.html”已经放在同一个文件夹下，所以直接填写文件名即可。
这样在生成的交互文档上，可以控制视频播放了。鼠标在视频上悬浮时会出现如下播放控制条。
网易云音乐交互设计组
