2.3 Axure RP 8工作界面

打开经过汉化的Axure RP 8团队版，其工作界面包括7大区域，如图2-1所示。

2.3.1 菜单栏和工具栏

Axure RP 8 菜单栏的“文件”和“编辑”菜单比较直观，与 Office 系列软件的操作类似，具有自解释的特点，所以，在此只重点讲解一下Axure RP 8特有的菜单。

1.“布局”菜单

该菜单项主要用于进行页面元件的布局。

1）将多个元件变成一个组：选择多个元件后，在菜单栏选择“布局”→“组合”命令，或者使用〈Ctrl+G〉快捷键，取消组合可使用“布局”→“取消组合”命令，或者使用〈Ctrl+Shift+G〉快捷键。

2）将某个元件置为顶层/底层：可选择某个元件后，在菜单栏选择“布局”→“置为顶层”命令，或使用〈Ctrl+Shift+]〉快捷键。

如当前有三个不同颜色原型元件，其中绿色圆形元件位于最下方，如图2-2所示。

选择图 2-2 最下方的绿色圆形，在菜单栏选择“布局”→“置为顶层”命令，或使用〈Ctrl+Shift+]〉快捷键，可将绿色圆形的元件放置在最上方，操作后效果如图2-3所示。

将某个元件置为底层的方法与此类似，不过选择的是“布局”→“置为底层”命令，或使用〈Ctrl+Shift+[〉快捷键。

3）将某个元件上移/下移一层：可选择某个元件后，在菜单栏选择“布局”→“上移一层”命令，或使用〈Ctrl+]〉快捷键。例如选择图2-2绿色圆形元件进行该操作，可将该元件上移一层，此时它位于灰色和蓝色圆形的元件之间，操作后如图2-4所示。

将某个元件下移一层的方法与此类似，不过选择的是菜单栏的“布局”→“下移一层”命令，或使用〈Ctrl+[〉快捷键。

4）设置元件对齐方式：选择多个元件后，在菜单栏可选择“布局”→“对齐”命令，Axure RP 8 提供 6 种对齐方式，可选择多个元件后按照想要的方式进行对齐操作，如图2-5所示。

5）设置元件分布方式：包括水平方向平均分布和垂直方向平均分布方式，选中多个元件后，在菜单栏可分别选择“布局”→“分布”→“水平分布”命令和“布局”→“分布”→“垂直分布”命令进行操作。当垂直方向的多个元件进行垂直分布操作后，元件之间的垂直距离相同。当水平方向的多个元件进行水平分布操作后，元件之间的水平距离相同。

6）锁定/解锁元件的位置和大小：为了在操作其他元件时不影响某个元件，可将该元件设置为锁定状态，在菜单栏选择“布局”→“锁定”→“锁定位置和尺寸”命令，或使用〈Ctrl+K〉快捷键操作，锁定后的元件暂时不能移动位置。可在菜单栏使用“布局”→“锁定”→“解除锁定位置和尺寸”命令，或使用〈Ctrl+Shift+K〉快捷键。

7）将元件设置为母版：若某个或多个元件需要多次被使用，为了一次修改，处处更新，可将它们设置为母版。可在选择某个元件后，在菜单栏选择“布局”→“转换为母版”命令，母版内容将在后续章节详细讲解。

8）将元件设置为动态面板：若某个元件创建后发现有多种不同状态，需要根据不同的事件切换不同状态或调整面板大小，可将该元件设置为动态面板。可在选择某个元件后，在菜单栏选择“布局”→“转换为动态面板”命令，动态面板内容将在后续章节详细讲解。

2.“发布”菜单

该菜单主要用于预览、设置预览参数、生成HTML文件、将工程发布到Axure Share和生成Word说明书等操作。

下面对“发布”菜单下的常用操作进行介绍。

1）设置预览参数：在菜单栏选择“发布”→“预览选项”命令，或者使用〈Ctrl+F5〉快捷键，打开“预览选项”对话框，如图2-6所示。

其中：

● 选择预览HTML的配置文件：设置预览的HTML配置器，可单击“配置”按钮配置更多高级选项，如手机终端设备的配置。

●“打开”→“浏览器”：用于设置浏览器，可使用默认的浏览器，也可选择不打开浏览器，还可从本系统安装的浏览器中选择，如 IE 浏览器、火狐浏览器或谷歌浏览器等，建议使用谷歌或火狐浏览器。若选择的是“默认浏览器”时，使用〈F5〉快捷键预览时将使用默认浏览器打开。

●“打开”→“工具栏”：用于设置预览时，有开启、关闭、最小化、不加载工具栏。

2）预览：在菜单栏选择“发布”→“预览”命令，或者使用〈F5〉快捷键，可按照设置的预览参数预览原型，预览效果如图2-7所示。

3）生成 HTML 文件：在菜单栏选择“发布”→“生成 HTML 页面”命令，或者使用〈F8〉快捷键，打开“生成HTML”对话框，如图2-8所示。

生成HTML文件的内容后续将会有专门的章节进行讲解，在此不再赘述。

4）发布项目到Axure Share：Axure RP提供Axure的共享官网，可将本地的原型项目上传。在菜单栏选择“发布”→“发布到 Axure Share”命令，或者使用〈F6〉快捷键，“发布到Axure Share”对话框如图2-9所示。

单击图2-9的“发布”按钮，开始将项目的文件上传到Axure共享发布服务器，上传成功后会提示访问地址。发布到 Axure Share 的知识后续将会有专门章节进行讲解，在此不展开讲解。

2.3.2 页面面板

“页面”面板使用树形结构显示整个项目的页面列表，如图2-10所示。

与Axure RP 7.0相比，“站点地图”面板变更为“页面”面板，“页面”面板没有什么大的改变，主要的就是去掉了移动（↑、↓、→、←）和删除的图标。

“页面”面板的常用操作如下。

1.新建页面

单击“页面”面板工具栏的“”（添加页面）图标，可在所选择的页面后添加同级页面。也可选择某个页面后，选择“添加”菜单，可选择“文件夹”（在同级下方添加一个文件夹）、“上方添加”（在上方添加一个同级页面）、“下方添加”（在下方添加一个同级页面）和“子页面”（创建一个下级页面）四种方式创建页面或文件夹。

2.新建文件夹

单击页面面板区域工具栏的“”（添加文件夹）图标，可在所选择的节点后添加同级文件夹，也可选择某个页面后单击右键选择“添加”→“文件夹”命令创建一个新的文件夹。

3.编辑页面

在“页面”面板的树形菜单双击某页面，接着就会在“页面设计”面板显示该页面，并为可编辑状态。

4.重命名页面/文件夹

选择某个页面或文件后，接着单击左键进入重命名状态，或者选择后单击右键，选择“重命名”命令。

5.删除页面/文件夹

选择某个页面或文件夹后，单击“删除”键，如果带有子页面，将弹出删除提示框，在该提示框中单击“是”按钮后会将当前页面以及其子页面全部删除。

6.调整页面/文件夹顺序

若想改变同级页面或文件夹的先后顺序，或者将某个页面以及其子页面上升或下降一级，选中某页面或文件夹后右击，在出现的快捷菜单中选择“移动”，可进行上移、下移、降级和升级操作。

2.3.3 元件库面板

Axure RP 8 提供丰富的元件库，大部分都与 HTML 元素对应，如图片、按钮、表格、下拉列表、文本标签、文本段落、文本框、多行文本框、复选框、单选按钮、提交按钮、标题、表格和内联框架等元件。

最能体现Axure RP 8强大之处的元件包括：热区、动态面板、内联框架和中继器元件。其他特有的元件包括：矩形元件、椭圆元件、占位符元件、垂直菜单、水平菜单、树状菜单、水平线、垂直线元件和标记元件等。另外，Axure RP 8 还可加载官方或第三方的元件库，如苹果手机的诸多元件，提供良好的扩展功能。

元件的内容将会在第3章和第4章详细讲解，在此不再展开讲解。

2.3.4 母版面板

一般将需要重复使用的模板或内容定义为母版，如网站的页头、页尾或导航等。通过使用母版，如果母版行为元件不是设置为“脱离母版”，在需要进行修改时，只需要对母版进行修改，所有使用该母版的地方都会被同步修改，从而减少重复工作量。

某个模块定义好后，选中所需要的一到多个元件，右击选择“转换为母版”菜单，或者使用菜单栏的“布局”→“转换为母版”命令，打开创建母版对话框输入母版名称后，将该模块转换为母版。也可在母版面板单击（添加母版）图标添加母版。

母版的内容将会在第6章详细进行讲解，在此不做过多展开。

2.3.5 页面设计面板

“页面设计”面板区域是用于显示页面内容的区域，这些内容也被用于生成 HTML 文件或 PRD 文档。在默认情况下，不显示网格，只显示标尺，可在“页面设计”面板区域右击选择“栅格和辅助线”→“显示网格”可将网格显示出来，该区域如图2-11所示。

在页面设计面板区域右击后，可看到“栅格和辅助线”菜单下有多个选项，如图2-12所示。

单击“网格设置”选项可设置网格间距（默认为10个像素）。

在页面设计面板区域，需要重点掌握3个要点。

1.页面辅助线

辅助线主要用于对齐元件，也可设置编辑区域，例如可设置640×480的编辑区域，要求设计人员在此区域内进行设计。辅助线又分为页面辅助线和全局辅助线。

按住鼠标左键，在横向标尺区域往内容区域拖动，将会拉出一条水平辅助线，在纵向标尺区域往内容区域拖动，拉出一条垂直辅助线。页面辅助线默认为绿色，如图2-13所示。

2.全局辅助线

通过在横向和纵向标尺处拉出的是页面辅助线，只会在当前页面显示，若想在所有页面显示某些辅助线，可采用全局辅助线，全局辅助线默认为玫红色，有两种创建方法。

1）横向和纵向标尺按住〈Ctrl〉键拉出全局辅助线：该方法与页面辅助线创建方法类似，只在按住鼠标进行拖动时需要同时按住〈Ctrl〉键，这是创建单条全局辅助线的好方法。

2）使用创建辅助线对话框：该方法常被用于同时创建多条全局辅助线，可在某个页面设计区域右击，在菜单栏选择“栅格和辅助线”→“创建辅助线”命令，之后打开的创建辅助线对话框如图 2-14 所示，在该对话框中选中“创建为全局辅助线”选项，创建的辅助线即为在该原型所有页面显示的全局辅助线。

设置后的全局辅助线，如图 2-15 所示，可看到“页面设计”面板区域被分为两列，每列的宽度为60像素，每列的间距宽度为20像素，边距10像素。

“行”的设置与此类似，不过辅助线为水平线。可在任何页面选择全局辅助线后，按〈Delete〉删除键，或右击选择“删除”命令将其删除。

3.元件坐标

“页面设计”面板其余的 100、200、300 等刻度都是像素，左上角的坐标为 X0；Y0 （注：本书统一采用此种方式表示横纵坐标），在进行原型设计时，左上角相当于浏览器的左上角，为了尽可能贴近真实，设计人员在进行设计时需要注意网站和App的宽度和高度。

“页面设计”面板中的元件坐标是在“检视面板”的“样式”选项卡→位置尺寸中显示的“X 轴坐标”和“Y 轴坐标”，其数值分别是元件横向标尺和纵向标尺的像素值（以元件的左上角坐标为基点进行计算）。

2.3.6 检视面板

“检视”面板替换了在Axure RP 7.0版本中的“页面属性”面板、“元件交互和注释”面板和“元件属性和样式”面板三个面板。“检视”面板默认显示页面属性相关设置，当选择某个元件时，该面板将显示元件属性相关设置。

在默认情况下，属性和样式都是针对页面进行设置的，如图2-16所示。

例如选择某个图片元件时，“检视”面板的“属性”和“样式”选项卡将切换为该元件的属性和样式，可对其样式如尺寸、填充、阴影、圆角半径等进行设置，还可设置图片、交互用例等属性信息，如图2-17所示。

2.3.7 概要面板

“概要”面板替换了原来的“元件管理”面板，与之不同之处去掉了新增动态面板状态、移动（↑、↓）、删除元件图标。

“概要”面板显示当前页面所有元件名称以及其状态，如图2-18所示。

可在如图 2-18 所示的“概要”面板中对动态面板元件（如“State1”）进行管理，包括设置面板状态、编辑全部状态、设为隐藏、自动调整为内容尺寸等操作。选择某个动态面板后单击鼠标右键显示操作菜单项可执行相应操作，如图2-19所示。

还可对某个动态面板元件进行状态操作，选择某个状态如State1 后，单击鼠标右键进行添加、复制、编辑、删除状态、上移下移和删除操作，如图2-20所示。

可单击如图 2-18 所示的“概要”面板面板中操作栏的（排序与筛选）图标对显示元件进行过滤，如图 2-21 所示。大家可根据具体要求选择对应的子菜单项。如选择“母版”后将只显示所有的母版。