Axure教程 | Axure制作移动端APP原型步骤

Axure RP可以做平常的PC端原型设计，还可以做响应式原型，也可以做APP原型设计。

一、移动端APP基础原型设计

1、原型尺寸的历史

既然是设计移动端原型，理论上来说最佳的原型尺寸最好是和你的目标用户手机尺寸保持完全一致。

好比iPhone刚出来的时候，设计iOS APP原型使用iPhone自身分辨率320×480就是最合适的。

后来随着Android崛起，各种国产机盛行，屏幕割裂严重，部分PM使用720×1280设计原型，或者继续沿用之前的尺寸320×480。

再后来iPhone6/6plus发布，屏幕分辨率的分裂也越来越严重。

此时最好有一种通用方案来解决这个问题，兼顾所有的屏幕分辨率。

2、确定适配屏幕的方案

考虑到屏幕分辨率已经有数百种，并且兼顾用户量少的机型没有价值。所以一一兼顾所有的屏幕是不现实的事情。

所以大家都是兼顾用户量使用最多的几款分辨率。用户量很小的屏幕不处理。

如果有必要的话，部分屏幕单独处理。

手机屏幕分辨率的分布

Android分辨率分布

iOS分辨率分布

先考虑iPhone的原型尺寸

iPhone的分辨率是从320×480，到640×960，到640×1136，到750×1334，一直演变到1242×2208。

由于主要是750×1334最大、所以考虑它作为原型设计尺寸，然后看是否可以兼顾其他分辨率。

而第二分辨率占比是1242×2208，是1.5倍的等比关系。

第三分辨率640×1136,约等于0.85的关系。

至于其他的分辨率占比已经很低，不是等比关系。可以在碰到情况的在处理，甚至不处理。

所以iOS APP的视觉稿用750×1334来做比较适合，对于1242×2208，如果要求高就单独设计，要求不高就等比放大即可。而640×1336，直接等比缩小即可。

对于iOS APP的原型，我们PM只需考虑等比关系即可，那就是750×1334。考虑到画原型的时候方便与否，最好使用375×667。另外也是iOS官方定义的iphone6/6s/7的逻辑分辨率。

再考虑Android的原型尺寸

iPhone的分辨率太分散，只考虑占比最大的前几个，720×1280、1080×1920、480×854、540×960，总计占比77%。

其中720×1280是和750×1334等比关系,同理1080×1920,480×854，540×960都是约9:16。

所以其实还是一回事，原型直接使用375×667。

为什么不使用1280×720作为标准

可以，如果你们的用户群以Android为主，或者你们的PM都是用的Android手机。

另外就是大部分PM、UI使用的是是iPhone，所以更愿意以iPhone的逻辑分辨率来设计罢了。

包括Adobe的原型设计工具Experience Design CC也是推荐以375×667来设计，或者次选320×640。

延伸一下内容

建议使用iPhone6/iphone6s/iphone7来做了原型之后，使用手机来预览效果。

如果你使用Axure设计原型的话，建议375×667-20，这样方便在手机上直接查看原型。减去状态栏20px是因为Axure导出的原型在iOS上无法隐藏它。

二、移动端原型设计

1、设置原型大小

我们把原型的尺寸定为：375*647（减去了状态栏20PX的高度）

2、发布项目

其它的设置我就不多说了，主要说一下移动设备的设置。

以上是IPHONE6标准的尺寸，建议使用IPHONE6尺寸，缩小放大都比较好操作。

最重要的初始缩放倍数千万不要填写，填写以后默认就以iphone6的尺寸访问，需要你缩放一下才能够正常全屏显示，如果没有设置，则自动以你手机屏幕大小进行全屏显示。

3、查看项目

发布完以后，放至网上，这个时候我们就可以用手机进行访问了，我们可以看到无论是iphone5的4.3尺寸还是iphone6 plus的5.5尺寸都是显示正常并且正常全屏显示的。

使用苹果Safari浏览器预览：

使用苹果自己带的Safari浏览器文件打开原型网址。

请不要使用带工具栏的页面访问，这两个页面都是带工具栏的index.html,start.html

可以使用这个网址进行测试：https://test.hanhc.win/default.html

点击桌面生成的图标就可以访问了，现在看上去是不是不像是在访问网页呢。

三、APP功能点分析和基础准备工作【案例】

做好后，可以通过内嵌框架实现各个界面的跳转，可以设置不同的头部类型，返回时自动识别来时的界面，自动识别界面名称等。

原型在线地址：https://gyli30.axshare.com/

原型屏幕尺寸375*667px（iphone6/iphone6s/iphone7）

1、功能点

1、通过内嵌框架，实现手机壳内打开原型界面；

2、自动获取当前界面的标题名称，无需手动输入；

3、返回时自动识别来时的界面，无需手动添加链接；

4、通过全局变量，设置当前界面是否需要返回箭头；

5、通过母版+中继器，设置不同的头部底色，标题、返回箭头和顶部信息栏颜色自动匹配。

2、准备工作

1、素材：手机壳、顶部信息栏、头部背景图片、各个界面所需图片，下载文件中已包含所有素材；

2、新建【index】、【发现】等原型中的界面，将手机壳导入【index】界面；

3、在【index】界面拖入1个内嵌框架，尺寸375*667px，放在手机壳中间；

4、新建母版【头部_App】，在母版中拖入一个【中继器】（Rpt_Head）；

5、在中继器中，拖入一个图片元件（Background_Rpt_Head，375*65px），一个文字编辑元件（Title_Rpt_Head，375*45px），两个动态面板，其中一个显示头部信息栏（Info_Rpt_Head，375*20），另一个显示返回箭头（Return_Rpt_Head，60*45px）。

手机导航图片

手机模型图片

二、APP原型设计实现步骤

1、通过内嵌框架，实现手机壳内打开原型界面

在【index】界面，找到并双击内嵌框架，选择【发现】界面为默认打开界面。

2、自动获取当前界面的标题名称，无需手动输入

在【头部_App】母版界面，选中中继器，设置“每项加载时”事件，如下图，完成后将该母版拖入各个界面并发布，即可预览效果。

3、返回时自动识别来时的界面，无需手动添加链接

#、在【头部_App】母版界面，双击中继器进入并选中返回箭头元件（Return_Rpt_Head），设置“鼠标单击时”事件，如下图，完成后将该母版拖入各个界面并发布，即可预览效果。

4、通过全局变量，设置当前界面是否需要返回箭头

#、逻辑说明：【头部_App】加载时，如果全局变量“class”等于“空”时，显示返回箭头，如果等于“一级界面”时，隐藏返回箭头。

5、通过母版+中继器，设置不同的头部底色，标题、返回箭头和顶部信息栏颜色自动匹配

逻辑说明：在中继器color列设置值，如果背景图片为深色，则设置值为“浅色”，那么发布后“顶部信息栏”、“返回箭头”、“标题栏文字”都为白色。如果背景图片为浅色，则设置值为“深色”，那么发布后“顶部信息栏”、“返回箭头”、“标题栏文字”都为黑色。

对于时间比较紧的朋友，可以直接复制去用，无需学习怎么去做。

原型在线地址：https://gyli30.axshare.com/