手把手教你把移动Axure产品原型在手机上预览

众所周知,在进行移动APP开发工作之前,也就是移动产品经理需要跟大伙或者是团队成员讲解项目的需求的时候, 我们通常会设计出产品的移动app原型,

目前很多公司基本都是采用axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作等。当然也有一些专门的移动APP产品原型工具。比如墨刀、mockplus、乎之原型等。

乎之原型APP

但是,也有的时候客户、领导想在开发之前,看到产品的概貌,就必须做产品的高保真原型进行模拟,这时如果做出来的原型能运行在手机端,那是最好的演示方式。

今天,25学堂手把手教你怎么样把我们弄好的axure 产品原型在手机上预览呢?

6步轻松搞定哦!信不信由你!

 

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

2

图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:

3

图3  高宽为320*548

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

4

图4  配置设置

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

 

 

3、生成原型文件,上传到axureshare或者放置在本地服务器的根目录下,用本机IP替代电脑名称,获得完整路径。 这里就是需要构建一个可以访问的目录。

并且在同一个网络当中访问,如果你已经上传到外网上面,那就可以随时随地的访问了。

 

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

5

 

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

6

 

图6  添加到主屏幕

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

 

7

 

图7 test桌面icon快捷启动

end!

我在分享一个PS里面的动作,将你iphone5s截的图裁掉上面状态栏,并改成一半大小,直接在axure中用 ps裁剪动作,大家导入到自己的动作中,以后要模拟哪一个产品,需要截图的时候,就可以进行批处理,简单粗暴.

 

小编给大家把细节补充一下:

1. 使用axureshare比EasyWebSevr要方便

2. 在得到链接后,需要使用iphone手机上的safari浏览器

3. 一定要记住你设置的文件密码哟!访问链接时需要输入的。

 

如果大家还有不明白的地方,可以加我们25学堂的官方群,在群里咨询即可,我们会一一给大家做解答。

文章内容来源:http://www.jianshu.com/p/3dc243cd2b6c#

 

每天更新,
全站高品质素材免费下载!