使用Axure制作移动端交互原型学习笔记

1. 选择适合的设计分辨率：

一般是(宽)375px*(高)667px和(宽)414px*(高)736px两种分辨率尺寸（优先前者）。，因为Axure常用的元件默认的字号一般是14px或18px，

2. 定义内容区域：

使用辅助线来定义内容区域的，例如下图是用辅助线定义好内容区域的效果。然后我们在设计时其实不用去限制原型的高度，因为在通过移动端设备进行浏览时可以通过滚动页面查看超出高度部分的内容。

3. 神奇的辅助线：

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

辅助线的作用除了用来定义内容区域之外，同时它也能帮助我们快捷的进行布局。辅助线有一个特性就是当你拖动元件靠近它时，元件会自动吸附到辅助线的边缘达到快速对齐的效果。如下：

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

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

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

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

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

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

其他的一些可参考点

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

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

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

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

4. 页面属性的设置

进行设计我习惯将内容布局向左对齐，而在演示时内容居中显示更符合浏览习惯，所以需要在页面属性设置中将页面排列设置为水平居中,另外，页面的背景色推荐设置为#F9F9F9。

5. 导航栏，标签栏或工具栏的设置

导航栏的位置一般是固定在界面最顶部的，所以建议将导航栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“上”。

标签栏或工具栏的位置一般是固定在界面最底部的，同样我们也需要将标签栏或工具栏转换为动态面板，然后在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。

注意：如果需要撤销动态面板状态，则右击元件，展开属性工具栏，点击从首个状态中脱离。如果需要多个元件一起作为导航栏或工具栏，则先将所需元件选中组合后再设置为动态面板状态。

6. 模态窗口交互设置：

模态窗口交互是移动端产品中最常见的交互方式之一，首先同样新建一个模态窗口的动态面板，在面板的属性设置中设置为“固定到浏览器”，水平固定选项为“居中”，垂直固定选项为“下”。然后再在触发模态窗口的交互事件中按以下方式进行设置，重点是勾选“置于顶层”选项和设置“灯箱效果”，灯箱效果的背景颜色和透明度可以根据需要进行自定义。

7. 输出选项的设置：

当我们的原型设计完成以后在生成HTML之前我们还需要进行几项简单的设置。

设置位置：发布—生成HTML-移动设备，在界面中勾选“包含视口标签”，设置宽度为：device-width，设置缩放为：no，其它选项为空就可以了。

另外，你还可以设置主屏图标，然后在IOS设备中通过safari浏览器打开原型，就可以直接将它添加到主屏幕中了。通过主屏访问原型时将不会显示浏览器的相关工具界面，最终的演示效果几乎是跟操作实际的APP是一致的，你甚至可以根据需要定义状态栏的颜色。

设置方式：启动safari浏览器打开原型地址—点击浏览器底部的设置图标(正中间)—添加到主屏幕——完成添加即可。大家可以尝试使用下方演示地址进行添加看看效果。

8. 其它说明：

我一般会在编辑区域放置一个设备模板，新建一个内容框架的动态面板用来放置页面的主要内容，而这个内容框架的尺寸同样是我们之前定义的内容区域尺寸(宽)375px*(高)667px。另外，内容框架的动态面板的属性中需要将滚动条设置为“自动显示垂直滚动条”，这样当框架的内容超出时可以拖动滚动条进行查看。如果我们在编辑界面中放置了设备模板，则不再需要对导航栏、标签栏或工具栏、模态窗口等动态面板进行固定到浏览器设置，你只需要拖动到设备模板对应的位置并置于内容框架上方即可。

并且最好将设备模板作为母版保存下来，可以省很多时间。