利用axure原型在手机上做真实模拟”APP”

2022-10-2309:14:45原型设计Comments923 views字数 886阅读模式

作者:Earon文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

微信公众号: EARON(ID: earonpm)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

Axure不仅能制作静态的视觉稿、页面,还能添加交互动作,是进行原型设计的最佳软件之一,更是产品经理和交互设计师必备的软件之一。对于产品经理来说,画完线框图,再加上交互就成了更加形象的原型图。一份生动形象且充满逻辑性的原型图,交到设计师或者程序员手中能令后续的工作进展的更加顺畅。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

Axure不但支持在PC端生成html网页形式的预览,同样也支持在移动端的预览(包括交互!)相比于PC端网页形式的预览,移动端的展示效果更加逼真,能近乎真实的模拟一个APP。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

那么如何把加了动效的原型图在手机上展示出来呢?这里介绍两个方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

方法一

1.按照将要展示的手机分辨率尺寸制作原型图,比如我想要在iphnoe5s上看那就是640* 1096 (除去state bar的40 所以注意并不是喔640*1136)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

2.注册一个axure share账号,用来在服务器上发布自己的作品文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

利用axure原型在手机上做真实模拟”APP”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

3. 发布设置:publish>previews options>点击configure文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

利用axure原型在手机上做真实模拟”APP”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

(preview options)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

利用axure原型在手机上做真实模拟”APP”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

(configure)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

  • 在左侧栏中选择:Mobile/Device文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

  • 右侧输入尺寸 (根据所想展示的手机而定)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

  • 勾选上[防止垂直方向移动] 和[自动关联号码]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

  • 用114*114的尺寸做一个模拟app的icon直接import文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

  • 勾选隐藏边框文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

利用axure原型在手机上做真实模拟”APP”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

发布到axure服务器后,会自动生成一个Link (记得勾选without sitemap)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

利用axure原型在手机上做真实模拟”APP”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

下面就是手机上的操作了:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

1.用手机上的safari浏览器打开刚刚生成的Link,网页加载完毕后点击[添加到主屏幕]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

利用axure原型在手机上做真实模拟”APP”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

2.输入你想给它的取“名字”,比如:Earon,点击添加文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

利用axure原型在手机上做真实模拟”APP”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

3.你就可以在桌面看到你的“app”啦文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

利用axure原型在手机上做真实模拟”APP”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

虽然不是一个真正的app,但是几乎所有的交互都可以实现,还是蛮逼真的:)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

方法二

类似PS有Psplay,Sketch有mirror一样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

Axure同样有一款叫Axure share的app文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

无需以上的设置,只需要按照屏幕尺寸设计,之后直接上传,就可以从手机端的Axure share 中看到上传的文件。直接打开即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

利用axure原型在手机上做真实模拟”APP”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

(随手做的丑图)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/29546.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/29546.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定