Axure产品原型在手机上运行的方法

axure商城

【干货】Axure产品原型在手机上运行的完整教程,互联网的一些事

  图1 模拟丁香园的高保真原型

  在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌,就必须做产品的高保真原型进行模拟,这时如果做出来的原型能运行在手机端,那再好不过,如图1(注:上图是仿照丁香园的家庭用药,做的一个高保真原型,算是免费给丁香园打广告,是不是考虑给我点广告费?哈哈)。

原型制作软件有挺多,不过个人使用之后,最后还是依然坚持使用Axure,优点颇多,也可能是先入为主,这个教程Axure也是必须软件之一,适配为iphone5s。

1、首选是制作高保真原型,如图2:

【干货】Axure产品原型在手机上运行的完整教程,互联网的一些事

  图2 高保真的原型图

  (注:高保真原型最好不要用太多内部框架嵌套,加载速度有点慢,还是用动态面板慢慢做,层级多了要有耐心)

  iOS的屏幕尺寸目前是有限的几种,原型尺寸要和其一致。比如iphone5s视网膜下像素为640*1136(The default full screen size of the iPhone 5 is 320 x 568 px (w x h).就是说320*568已经可以铺满全屏,不过,由于Axure导出的原型在iOS上处理status bar时有问题,需要在高度上减去status bar的高度20,就为320*548,所以保证原型的高宽为320和548,如图3整体高度为548px:

【干货】Axure产品原型在手机上运行的完整教程,互联网的一些事

  图3 高宽为320*548

  2、F8进行生成设置,设置如下图4:

【干货】Axure产品原型在手机上运行的完整教程,互联网的一些事

  图4 配置设置

  按照上图,设置参数(注:不过闪屏页面一直无法出现,这个问题我也没得到解决,有解决的可以回复我)

  3、生成原型文件,上传到axureshare或者放置在EasyWebSevr的根目录下,用本机IP替代电脑名称,获得完整路径。(不清楚的点击上期内容如何用EasyWebSvr搭建axure本地环境)

  4、复制生成的html中原型链接,选择without Sitemap,如图5:

【干货】Axure产品原型在手机上运行的完整教程,互联网的一些事

  图5 复制链接

  5、在safari中粘贴链接,并打开,已经可以看到和屏幕宽度的界面,并添加到主屏幕,如图6:。

【干货】Axure产品原型在手机上运行的完整教程,互联网的一些事

  图6 添加到主屏幕

  6、可以通过桌面的快捷icon,进入原型,这个时候已经适配了手机,躺着桌面的icon,丝毫不会让人看得出是原型,下图7:

【干货】Axure产品原型在手机上运行的完整教程,互联网的一些事

  图7 test桌面icon快捷启动

  end!

本文由 Axure中文网 作者:Axure中文网 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
30

评论:

23 条评论,访客:23 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. millercomeon
    millercomeon发布于: 

    我在手机上查看的时候界面一直抖动是为什么原因,查看的效果和电脑上预览的很不像……求助

  2. 杨
    发布于: 

    谁会弄成可以在手机上看的那种

  3. 来姨妈的男孩
    来姨妈的男孩发布于: 

    搞糊涂了!第二部照图选择好之后 生成的话是直接生成html了 要上传到axure share的话需要回到主页面然后F4 上传了后链接在手机里打开的话 和电脑打开一个样的,不是手机的格式, 求纤细指教

    • 大师兄
      大师兄发布于: 

      不要生成左侧的sitemap就可以了

  4. 听海
    听海发布于: 

    请问哪里有7.0版本的中文版下载?没费的,谢谢!

  5. 徐
    发布于: 

    为什么添加到主屏后打开什么链接交互全没了,失效了?

  6. 藯藍づ枫叶
    藯藍づ枫叶发布于: 

    所有的手机都可以吗?

  7. 藯藍づ枫叶
    藯藍づ枫叶发布于: 

    如何用EasyWebSvr搭建axure本地环境,,,在哪里???

  8. 爆爆
    爆爆发布于: 

    这搞清楚动态面板的东西,第一步我就卡住了

  9. Nana
    Nana发布于: 

    到第3步的时候,卡住了,求指点。。。

    • IF浅吻
      IF浅吻发布于: 

      第三部主要是放到服务器上, 要下载一个本地服务器的软件,你可以放到axureshare,只是访问速度慢

    • 宇宙真理
      宇宙真理发布于: 

      说白就是生成了html网页。你在局域网的时候,可以建一个本地服务器EasyWebSvr。如果在公司里面有自己网页服务器,让他们给你开个目录,你把文件传上去,就可以直接访问了。

发表评论