当前位置：网站首页 > 技术文章 > 正文

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

cac55 2024-10-19 02:46 25 浏览 0 评论

前不久我进入一家创业型公司，我开始发现，老板不看xxx.Html 原型图的，老板只看视频版本的原型图，而给开发人员的原型图就是xxx.Html的，所以每次做原型的时候我都会做两套。一个简单的视频原型展示：

下面我来介绍一下，如何在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

打开QuickTime Player

选择新建屏幕录制

2.4 第四步，排序整理文件

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

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

推荐用

打开后，一个初始画面

点击此按钮将视频导入

然后将视频拖入视频编辑区域，在控件区域点击T图标，可选择不同的文字样式，选择一款拖入“视频编辑区域即可”

文字编辑完后，是这个样子就对了

之后可以加一些转场，切换页面用(最常见的渐变)

做到这个时候就差不多了

2.6 第六步，附加音乐

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

2.7 第七步，导出视频

点击导出按钮

导出视频并设置参数(一般选择720p就可以了)

恭喜你大功告成，发了邮件后就等着涨工资吧

三、总结

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

分享作品

作者：Bass，微信号：zouwei1228

本文由 @Bass 原创发布于人人都是产品经理。未经许可，禁止转载。

绘声绘色教程

上一篇：绘声绘色如何描述（绘声绘色的作用）
下一篇：版式需要"绘声绘色"!有图有文更完美

相关推荐

14款健身APP蹿红看看下载最多的是哪款?: Zombies,Run!（$3.99，安卓，iOS）如果你的运动理念是：除非有人追，否则绝不跑起来，那么这款APP应该适合你。Zombies,Run！这款程序把单调的跑步过程变身为躲避僵尸的游戏...

微软官方彩蛋庆祝《回到未来》纪念日: 2015年10月21日，是MartyMcFly和Brown博士回到未来的时间。现在，这一天真的到了，那么当时影片中展示的一些科技产品究竟有多少实现了呢？作为一家走在技术前沿的公司，日前，微软就在M...

时尚圈最潮同志情侣帅到没朋友（同志情侣微信头像）: 来源：MSN时尚综合|2015-03-0419:45:15男演员ZacharyQuinto（中）与男模MilesMcMillan（右）于纽约街头公开热吻。情人节这个拥有不同起源传说，最早可以...

IE浏览器阻止过期ActiveX控件或将影响网银的使用: IE浏览器网银IE浏览器网银如果经常使用IE浏览器浏览网页的用户，可能都有遇到过浏览器窗口提示安装ActiveX控件的情况，一般情况下用户也是会选择直接安装。ActiveX控件广义上是指微软公司的整...

如何使Microsoft Band连接到WP设备: 如果你幸运地购买到了MicrosoftBand，那么恭喜你。现在我们（winbeta）推出了“帮助系列”，那些尚未买到MicrosoftBand的朋友可以了解设备的一些新功能，以及设备的其他关键特...

毕业生不得不看的五大骗局全揭秘（毕业生防骗）: 目前，距离高校大学生毕业已不足100天，大部分毕业生都十分忙碌。论文定稿、答辩，参加招聘、面试等成了应届毕业生的头等大事。但随着毕业季的临近，不法分子专门针对毕业生的诈骗高发期也随之来临。360手机安...

菠萝觅生活是O2O应用流量入口最大的供应商: 现在主流的传统O2O生活服务，他们其实都有一个共通点，那就是各行其道。打车有快的，滴滴，外卖有饿了么，买机票有去哪儿网…每个APP都有着自己的核心竞争力。而用户呢?既想拥有海量有趣应用，又担心占用过多...

WP8.1版MSN健康应用，现已支持锁屏计步: IT之家（www.ithome.com）：WP8.1版MSN健康应用，现已支持锁屏计步@WP之家报道，微软今天已将必应系列应用品牌归为MSN，除此之外，WP8.1版MSN健康和天气应用也获得一些新的...

短信就能传播手机病毒?看完推理惊呆了!: 很多人都收到过一种带网址的陌生短信，有的人会点击网址看看，有的还会在好奇心驱使下回复短信。近日《北京新发现》栏目报道了一起离奇的电信诈骗案，事主耿先生的银行卡从未离身，但是在收到一条带网址的陌生短信，...

微软OneClip:我承包了你的剪贴板（微软onedrive云空间）: 不久前，Twitter用户WalkingCat曝光了微软一款名为OneClip的应用。这是一款剪贴板应用，根据描述这款应用将覆盖Windows10（包括桌面和移动）、iOS和Android平台，可以...

Windows 10手机应该是什么样?微博用户给出了概念图: 随着Windows10发布的不断临近，WindowsPhone的用户对Windows10的旗舰手机的期望也越来越高，我们WP中文网也在微博上发出了同样的问题，搜集用户对Windows10的硬...

云管家出席武汉2015年支付宝O2O生态峰会: 2月4日，蚂蚁金服O2O生态峰会在武汉启幕。此次峰会展现了2015年蚂蚁金服在O2O领域的开放思路和策略，以及合作伙伴对O2O的创新观念及思路分享，吸引了武汉近3000名企业大佬、众多创业者、第三方服...

微软将于下周开启Windows开发中心帐号迁移工作: 自下周开始微软将启动Windows开发中心的帐号迁移工作。根据WindowsBuildingApps博客透露Windows开发中心帐号迁移工作将会分为几个阶段。首个阶段从下周开始持续到今年7月份...

如何解绑已经合并的MSN账户和Skype账户?: 如果您绑定的账户已经充值，建议您把产品消耗完毕后，再进行解绑。当您需要解绑合并的账户时，可登入Skype点卡账户自助操作。输入Skype或MSN账号、密码登录账户：登录后，可在页面左下角选择语言"中文...

微博账号已显示所属MCN机构，成为目前第二个上线该功能的平台: 7月25日，多位网友发现，部分微博大V的个人主页已经显示其所属的MCN机构名称，微博也成为目前第二个上线该功能的平台。【来源：中新经纬】声明：此文版权归原作者所有，若有来源错误或者侵犯您的合法权益，您...

取消回复欢迎你发表评论:

一周热门

最近发表

首页
收录
顶部