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

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

cac55 2024-10-19 02:46 31 浏览 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 原创发布于人人都是产品经理。未经许可，禁止转载。

绘声绘色教程

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

相关推荐

202心事咨询室 | 大学生因情感纠纷遭网暴，该如何自救?: 专家：不必过度迎合外界认可，无需盲目扮演外向，内向的你正好踏实地学习本期来信人是一名因恋爱中隐瞒情感状态遭网络暴力的大学生。其在来信中坦言，长期讨好型人格、边界感模糊导致了人际关系崩坏。如今深陷舆论攻...

大学生必备神器:这个加速器让学习和游戏都起飞了: 作为一个大学生，深知查学术文献的痛苦。最近发现了KO加速器这个神器，彻底解决了我访问学术网站的痛点，学习效率大大提升。那些年我们踩过的坑说起大学生活的网络痛点，相信每个人都有一肚子苦水：期末周赶论文时...

不抠图，怎么把英文图片转换为英文繁体图片?这4个工具试试!: 当我们做跨境电商的时候，有时我们可能需要将英文图片转换为英文繁体图片。很多人可能不知道如何实现这一目标。有幸，有几个优秀的工具可以帮助我们达到这个目的，让我们一起来看看吧！1、看往ai图片工具看往ai...

Sublime Text 3 设置中文教程:没有中文选项?一招搞定界面汉化: 刚装SublimeText3时，对着全英文界面犯愁——不是看不懂，就是觉得用着不亲切，想调成中文，翻遍设置也没找到“语言选项”。后来才知道，这款软件默认不自带中文包，得靠插件来汉化。试了...

《无人深空》简体中文及繁体中文切换方法: 《无人深空》玩家们有不同的汉化需求。今天小编就给大家带来《无人深空》简体中文及繁体中文切换方法，一起来看吧。修改Binaries\CONFIG.ini内的Language=schinese改成Lang...

10秒教会你怎么英汉互译?_怎么汉翻译英: 10秒教会你英汉互译怎么把汉字转换成英文。评论区的小伙伴问我怎么样把汉字变成英文，下面我就给大家操作一下。·首先打开微信，可以选择一个朋友，比如点开朋友在对话框里面，或者可以用一个文件传输助手，我今天...

电脑怎么设置中文?详细步骤请查收怎么给电脑设置中文: 电脑作为现代科技的杰出代表，其各种功能令人叹为观止。其中，设置中文是电脑的基本功能之一，使得用户能够在母语环境中更加便捷地操作和交流。下面将详细介绍如何在电脑上设置中文语言，以满足用户的多样化需求。我...

真我V13如何设置简体中文真我V13修改语言方法介绍: 真我V13手机为用户们准备了多种语言，例如中文、英文、繁体以及其他外国语言等，但我们许多朋友一般还是使用简体中文的居多。下面一起瞧瞧真我V13设置简体中文的方法吧！真我V13修改语言方法介绍1、打开手...

输入法中的各种转换_输入法的转换快捷键: 在输入法使用过程中，可能会遇到各种转换问题，有的转换在一种输入法间能够完成，有的则要借助于多种方法、多个平台、跨输入法来完成。熟悉输入法的各种转换问题，对轻松驾驭输入法进行信息处理会有很大帮助。1....

电脑打字繁体字怎么改回来_电脑打字繁体字怎么改回来快捷键: 在电脑上改写繁体字可以通过使用中文输入法的转换功能或安装相关软件，如果是在线文字，可以使用在线繁简转换工具，如果是文字文件，可以使用相应的字体转换工具将文字文件改写成简体字。修改电脑字体详细教程：1....

如何转换 WPS文字中的繁体字和简体字?: 在处理文档时，经常会遇到需要在了便捷的繁简体转换功能，让你轻松应对不同场景的需求。以下是详细的操作方法和技巧。一、使用菜单栏快速转换（一）转换整篇文档打开文档：在WPS文字中打开需要进行繁简体转换...

国家电网新一代电子商务平台ECP2.0供应商注册-平台注册篇问题: [平台注册】问题1：用户如何在ECP2.0平台上进行注册？用户登录国网新一代电子商务平台主页https://ecp.sgcc.com.cn/ecp2.0/portal/点击“注册”按钮，选择“供应商“...

Type-C小家电专用:受电端取电SINK芯片ECP5701: PD协议是一种充电协议，全称为“USBPowerDelivery（USBPD）”，是由USB-IF（USBImplementersForum）组织制定的一种标准协议。它是一种基于USB接口的...

现场爆满!国网ECP2.0 新系统投标业务能力提升班成都站开班: 5月19日，由四川省电力企业协会举办的，电老虎网承办的【国网ECP2.0新系统投标业务能力提升班】在成都正式开班，为期三天。近百位学员参加了此次课程！这也是电老虎网举办投标业务能力提升班以来学员最多的...

1989年大营盘:我的初三补习年，苦里熬出不服输的光: 一、九十年代的“补习潮”与我的“二次机会”九十年代的十八线小县城，“读书”是农村娃最现实的改命运路。那时“补习”是常态，有人为了考学甚至连补好几年——能考上小中专的是县城尖子生，考上高中的算二等生，而...

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

一周热门

最近发表

首页
收录
顶部