教程-Axure产品原型也能在手机上完美运行

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

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

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

　　1、 首选是制作高保真原型，如图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 高宽为320*548

　　2、 F8进行生成设置，设置如下图4：

图4 配置设置

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

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

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

图5 复制链接

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

图6 添加到主屏幕

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

图7 test桌面icon快捷启动

end!

小编我拿公司的产品原型按步骤做了下，可以实现的哟！还把公司程序员给忽悠了一下。小编给大家把细节补充一下：

1. 使用axureshare比EasyWebSevr要方便

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

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

=======================我是分隔线=================

最近有几位小伙伴儿都提出同样一个疑问：想用Axure设计一个 APP原型 放到真实的移动设备中演示，但不知道应该使用什么尺寸？
若要解释清楚像素和分辨率需要的篇幅比较长，请大家参考百度百科。
这里金乌直接给大家提供一个常用的移动设备尺寸列表，制作原型时根据查询的尺寸在axure中设置大小即可，设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口（ include Viewport tag ），并进行配置即可。

如：

iPhone4 320*480
iPhone5  320*568

Samsung Galaxy S4 360*640

Viewport Sizes