Axure对移动原型设计的支持一直不太令人满意。它不像其他原型设计工具(Justinmind、墨刀等)那样提供移动设备的模板和相关交互组件。)，但Axure自由灵活的特性是其他原型设计工具无法替代的。通过掌握一些设计规范和方法，我们也可以通过Axure制作出一个完美的移动演示原型。
首先，你可以在下面的地址浏览电脑，访问我设计的移动终端原型模板。
00-1010在开始设计原型之前，我们需要做的第一步是选择合适的设计分辨率。目前，在用Axure设计移动终端原型时，常用的是两种分辨率尺寸(宽)375px*(高)667px和(宽)414px*(高)736px，这两种尺寸分别用主流移动设备Iphone7和Iphone7 PLUS的屏幕分辨率尺寸进行缩放。
有些朋友可能会奇怪，为什么我们在设计样机的时候不直接采用移动设备的实际分辨率。这主要是因为设计的便携性。毕竟我们输出的原型主要是用来演示的，而不是视觉稿，所以不需要达到这么高的精度。另外，如果我们根据移动设备的实际分辨率进行设计，在编辑排版组件时会很费时间，在电脑浏览器上查看也不方便。
我在原型设计中通常使用375px*667px的分辨率大小，因为Axure中常用的组件默认字体大小一般为14px或18px，正好匹配Iphone7上常用字体大小的比例，这个分辨率大小在电脑浏览器上只用一个屏幕就可以完整显示。
但是如果你在375px*667px分辨率输出的原型的Iphone7 PLUS上浏览，两边会有一些空白区域，但基本已经适应了各种主流移动设备，所以采用这个分辨率尺寸是综合衡量后的选择。
00-1010以上已经解释了为什么选择375px*667px作为移动终端的原型设计分辨率尺寸。在开始设计之前，我们需要根据这个大小在编辑区定义内容区。我通常使用辅助线来定义内容区域。例如，下图显示了用辅助线定义内容区域的效果。
其实我们在设计的时候并不需要限制原型的高度，因为在浏览移动设备的时候，我们可以通过滚动页面来查看高度以外的内容，这与移动产品的实际操作模式是一致的。但是在原型设计中，我们还是需要拖一条辅助线来识别原型设计的高度。其主要目的是识别第一屏的区域，对布局选择有一定的参考价值。
1. 选择适合的设计分辨率
辅助线不仅定义了内容区域，还帮助我们快速布局。辅助线的一个特点是，总是迟到的皮卡丘将组件拖近时，组件会自动吸附到辅助线的边缘，达到快速对齐的效果，对于有强迫症对齐的朋友来说，会极其贴心。辅助线的基本用法：当鼠标移动到编辑区的左侧和顶部时，长按标尺区并拖动到编辑区，即可生成水平或垂直辅助线，然后将辅助线拖动到相应的位置。
一般除了用辅助线定义内容区域外，我还会新建两条纵向辅助线来标识界面的左右空白区域。两边的空白建议用10px或者20px，比如我自己常用的是20px，所以这两条辅助线的位置在X轴上分别是20px和355px。此外，我们的组件一般需要在左右两边填充20px，将文本的显示限制在界面的空白区域。
添加一些使用辅助线的提示：
右键单击辅助线将其锁定，以防止辅助线在拖动组件时随其移动；您可以通过按住Ctrl键并拖动来创建全局辅助线。全局辅助线是在所有页面中生成相同的辅助线。选择“布局-网格和辅助线-锁定辅助线”保持所有辅助线锁定，不能删除；您可以在布局-网格和参考线-删除参考线中清除所有页面中的参考线；您可以在布局-网格和参考线-参考线设置中修改参考线的颜色或进行更多设置；
2. 定义内容区域
通过以上几点介绍了我们是如何利用辅助线建立基本布局规范的，下面是我总结的关于移动终端原型的其他基本设计规范。通过掌握这些规范或技巧，最终输出的原型效果可以更加美观和标准，你的设计效率也可以大大提高。此外，这些规范或技巧也基本适用于WEB端的原型设计。主要区别是设计分辨率和内容区域的定义，以后有机会我会整理分享。
菜单的高度为45px，导航栏的高度为45px，标签栏和工具栏的常用高度为60px。字体大小一般为偶数，常用的文字字体大小为12和14px，常用的标题字体大小为16px和18px。元素的宽度和
高度一般为5的倍数，例如45px、100px等；元件的距间和行距一般为10的倍数，常用10px、20px，按住ctrl键通过方向键移动元件，每次移动的距离刚好是10px。5. 页面属性的设置
为了方便进行设计我习惯将内容布局向左对齐，而在演示时内容居中显示更符合浏览习惯，所以需要在页面属性设置中将页面排列设置为水平居中,另外，页面的背景色推荐设置为#F9F9F9。
6. 导航栏的设置
导航栏是移动端APP中最常见的元件之一，它的位置一般是固定在界面最顶部的，所以建议将导航栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“上”，具体设置如下图：
7. 标签栏或工具栏的设置
标签栏或工具栏的位置一般是固定在界面最底部的，同样我们也需要将标签栏或工具栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。
通过这样的设置以后在有标签栏或工具栏的页面中，如果你的页面内容已经超出了一屏的高度，我们通常需要在内容正文区域的底部放置一个与标签栏或工具栏高度一致的热区元件当作占位符，它的作用是用来解决原型演示时标签栏或工具栏会挡住页面内容的情况。
8. 模态窗口交互设置
模态窗口交互是移动端产品中最常见的交互方式之一，它主要用作显示系统的重要信息，并请求用户进行操作反馈，例如：删除某个重要内容时，弹出对话框进行二次确认。在原型中我们可以通过简单的设置，实现跟移动端APP一致的模态窗口效果。
移动端模态窗口演示效果：
首先同样需要新建一个模态窗口的动态面板，在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。然后再在触发模态窗口的交互事件中按以下方式进行设置，重点是勾选“置于顶层”选项和设置“灯箱效果”，灯箱效果的背景颜色和透明度可以根据需要进行自定义。关于具体的设置和演示效果，可以参照我将在后面推荐的移动端元件库。
9. 输出选项的设置
到此为止已经介绍了关于移动端原型设计的一些规范和常用元件及交互效果的设置，那么当我们的原型设计完成以后在生成HTML之前我们还需要进行几项简单的设置。
设置位置：发布—生成HTML-移动设备，在界面中勾选“包含视口标签”，设置宽度为：device-width，设置缩放为：no，其它选项为空就可以了。
另外，你还可以设置主屏图标，然后在IOS设备中通过safari浏览器打开原型，就可以直接将它添加到主屏幕中了。通过主屏访问原型时将不会显示浏览器的相关工具界面，最终的演示效果几乎是跟操作实际的APP是一致的，你甚至可以根据需要定义状态栏的颜色。
设置方式：启动safari浏览器打开原型地址—点击浏览器底部的设置图标(正中间)—添加到主屏幕——完成添加即可。大家可以尝试使用下方演示地址进行添加看看效果。
添加到主屏和最终运行时的效果：
按照上述的设置之后，你将原型生成为HTML文件之后上传到你的服务器或原型托管平台，通过手机访问原型链接演示即可。
10. 其它的补充说明
如果我们设计的移动端原型不需要考虑在手机上演示的场景，仍然可以参照本文中相关的规范。我一般会在编辑区域放置一个设备模板，新建一个内容框架的动态面板用来放置页面的主要内容，而这个内容框架的尺寸同样是我们之前定义的内容区域尺寸(宽)375px*(高)667px。另外，内容框架的动态面板的属性中需要将滚动条设置为“自动显示垂直滚动条”，这样当框架的内容超出时可以拖动滚动条进行查看。
通过添加设备模板的设计区域效果
通过使用设备模板可以让输出的原型效果更标准和规范，如果我们在编辑界面中放置了设备模板，则不再需要对导航栏、标签栏或工具栏、模态窗口等动态面板进行固定到浏览器设置，你只需要拖动到设备模板对应的位置并置于内容框架上方即可。
如果你需要获取相关设备模板的图片，请通过下面的下载地址获取到。这套素材中包含了iphone、Android、IPAD等各种机型常用模板，而且都已经按标准尺寸定义好，只需要直接下载使用即可。使用方法：在创建Axure原型文件时建立一个模板母版，然后将设备图片导入到母版中，再将母版拖至设计界面区域。
常用移动端设备模板素材
11. 移动端元件库分享
最后分享的是AxureUX交互原型移动端元件库精简版，这套元件库基本是按照本文所介绍的相关规范和标准进行制作的，共由常用组件、信息输入、信息输出、信息反馈、综合系列等五大元件类型组成，其中还包含各类移动端基本元素、动态交互组件，以及各类常用界面模板，能助您快速的输出友好美观的移动端交互原型。
相关截图：
本文由 @windir 原创发布于人人都是产品经理。未经许可，禁止转载。