使用Axure打造最佳的移动端交互原型教程

一直以来Axure在对移动端原型设计方面的支持都不是十分理想，它没有像目前其它几类原型设计工具(Justinmind、墨刀等)一样提供移动端设备的模板和相关交互组件，但是Axure自由灵活的特性却同样的其它原型设计工具所无法取代的。通过掌握一些设计规范和方法，我们同样可以通过Axure制作出非常完美的移动端演示原型。

首先你可以通过手机或电脑访问以下地址，这是我设计完成的移动端原型模板。

演示地址：

在开始设计原型之前我们需要做的第一步是选择合适的设计分辨率，目前使用Axure设计移动端原型时普遍采用的是(宽)375px*(高)667px和(宽)414px*(高)736px两种分辨率尺寸，这两种尺寸分别是由目前主流的移动设备Iphone7和Iphone7 PLUS的屏幕分辨率尺寸等比缩放而定义出来的，同时也是Iphone7和Iphone7 PLUS的逻辑分辨率。

有朋友可能会疑惑在设计原型的时候为什么不直接采用移动设备实际的分辨率呢？因为这主要考虑到设计时的便携性，毕竟我们输出的原型主要是用于演示而不是视觉稿，所以不需要达到那么高的精度，另外如果按移动设备实际的分辨率进行设计，在对元件进行编辑和排版的时候会是一件很耗费时间的事情，同时也不方便在电脑浏览器上进行查看。

本人在进行原型设计的时候一般用的是375px*667px这个分辨率尺寸，因为Axure常用的元件默认的字号一般是14px或18px，这两种字号也刚好匹配Iphone7上常用字号的比例，而且这个分辨率尺寸在电脑浏览器上刚好一屏就可以显示完整。

上面已经介绍了为什么选择375px*667px作为移动端原型设计分辨率尺寸，在开始设计之前我们需要先按照这个尺寸在编辑区域中定义好内容区域。我一般是使用辅助线来定义内容区域的，例如下图是用辅助线定义好内容区域的效果。

事实上我们在设计时其实不用去限制原型的高度，因为在通过移动端设备进行浏览时可以通过滚动页面查看超出高度部分的内容，这跟实际的移动端产品的操作方式是一致的。而在原型设计的时候，我们还是需要拖一条用于标识原型设计高度的辅助线，它的主要作且是为了标识出首屏的区域范围，这对于布局选择是有一定的参考价值的。

辅助线的作用除了用来定义内容区域之外，同时它也能帮助我们快捷的进行布局。辅助线有一个特性就是当你拖动元件靠近它时，元件会自动吸附到辅助线的边缘达到快速对齐的效果，对于有对齐强迫症的朋友来说这个特性会感觉无比贴心。

辅助线的基本使用方法：鼠标移动到编辑区域的左侧和顶部的标尺区域长按并往编辑区域拖动时就可以生成横向或纵向的辅助线，将辅助线拖动到对应的位置即可。

一般除了用辅助线来定义内容区域的之外，我还会新建两条纵向的辅助线用于标识界面左右两侧的留白区域。建议两侧留白区域用10px或者20px，例如本人常用的是20px，因此这两条辅助线的位置分别在X轴的20px和355px的位置。除此之外，我们的元件一般还需要设置左右各20px的填充，用来将文字的显示限定在界面留白区域内。

补充几点辅助线的使用小技巧：

右击辅助线可以将其锁定，以防止拖动元件时会将辅助线会跟着一起移动；

可以通过按住Ctrl拖动创建全局辅助线，全局辅助线就是在所有页面中产生一条相同的辅助线；

在“布局—栅格和辅助线—锁定辅助线”中选中可以将所有的辅助线保持锁定状态且无法删除；

在“布局—栅格和辅助线—删除辅助线”中可以清除所有页面中的辅助线；

在“布局—栅格和辅助线—辅助线设置”中可以修改辅助线的颜色或进行更多设置；

通过以上几点介绍了我们如何使用辅助线来建立了一个基本的布局规范，而以下是我总结的其它关于移动端原型的基础设计规范。通过掌握这些规范或技巧，可以使最终输出的原型效果更美观和标准，而且能让你的设计效率大大的提升。

另外，这些规范或技巧同样基本适用于WEB端的原型设计，不同的主要是设计分辨率和内容区域的定义，以后有机会我会进行整理和分享。

列表菜单的高度为45px、导航栏的高度为45px、标签栏和工具栏常用高度为60px；

字号一般用偶数，常用的正文字号为12和14px，常用的标题字号为16px和18px；

元件的宽度和高度一般为5的倍数，例如45px、100px等；

元件的距间和行距一般为10的倍数，常用10px、20px，按住ctrl键通过方向键移动元件，每次移动的距离刚好是10px。