1.2　基础概念

本节将按顺序介绍Axure RP软件界面上各个区域的功能，熟悉Axure RP的基础操作。然后对涉及的功能进行解释，掌握Axure RP的基础概念。

1.2.1　软件界面概述

在学习制作原型之前，先来了解一下Axure RP软件的界面。

如图1-6所示，Axure RP的界面包括如下几部分。

（1）菜单：包括文件、编辑、视图、项目、布局、发布、团队、账户和帮助。文件的管理、软件的设置等功能可以在菜单中找到。

（2）快捷功能：画笔、对齐等常用的功能按钮都平铺在这里。

（3）站点地图：Axure RP可以制作多个页面的原型。在站点地图里可展示多个页面的层级关系。

（4）元件库：“文字”“图片”“输入框”“按钮”等所有元件都放在这里。原型就是由这些元件组成的。

（5）母版：多个元件可以组成一个母版。母版可以在多个页面中重复使用。例如，网站导航栏就可以组成一个母版在每个页面中使用。

（6）画布：画布是用来画原型的地方。画原型的过程就是把元件从元件库中拖曳到画布上组成原型。

（7）属性设置：设置元件的样式和动作属性。动作属性是实现交互动画的主要手段。

（8）元件地图：元件地图可展示页面上所有元件的层级关系。元件的层级关系一般是通过一个叫做“动态面板”的元件来管理的。所以这里主要用来查看和管理“动态面板”。

虽然Axure RP的界面看起来有些复杂，但是有些功能在实际工作中很少用到。为了让读者能快速掌握Axure RP，下面重点介绍最常用的功能，并解释其中难懂的概念。其他功能将放在后面，在读者有一定基础之后再介绍。

提示：

如果不小心关闭了界面上的窗口，可以利用菜单“视图”∣“功能区”命令重新打开。

1.2.2　画布

Axure RP软件界面中心区域就是画布，如图1-7所示。一般把制作原型的过程叫做“画原型图”。原型就是在画布上画出来的。

画布分为以下3部分。

（1）中间空白区域用来放置“元件”。Axure RP是所见即所得的，画布上元件摆成的样子基本上就是最终原型的样子。

（2）顶部是页面标签。标签上显示页面的标题。页面的标题可以在站点地图中修改。

（3）左边和上边是标尺。上面的刻度是坐标（单位：像素），与计算机显示器的分辨率（单位：像素）对应。

设计原型前就应该考虑好原型要在什么设备上展示，按目标设备的分辨率规划原型的大小。

计算机显示器的分辨率与原型的坐标值是对应的。但是，手机的分辨率与原型的坐标值不是1∶1的。例如，如果想让原型在iPhone 7上的显示效果最佳，那么原型应该做成多大好呢？第9章会给出答案。

小知识：

画布上有一些快捷操作：

（1）Ctrl+鼠标滚轮，用于放大缩小页面。

（2）Shift+鼠标滚轮，用于横向滑动页面。

1.2.3　坐标

元件是放置在画布上的。元件在画布上的位置通过坐标来描述。元件的坐标值指的是元件左上角那个点的坐标值。例如，图1-8中文本框的坐标是x=0，y=0。按钮的坐标是x=212，y=130。

光标停在元件边缘时，Axure RP会自动提示元件的坐标、尺寸。x为横坐标，y为纵坐标，w为宽度，h为高度。

从标尺上可以看出，横坐标越向右值越大，纵坐标越向下值越大。坐标值为负数时，元件会超出屏幕显示范围。

1.2.4　元件库

做原型的过程就像是搭积木——把元件库里的元件拖曳到画布上，设好颜色、大小，就能“搭”出想做的网站/APP的样子。

Axure RP默认的元件库中提供了多种元件，如图1-9所示。

下面分别介绍这些元件。

1. 图形类元件

如图1-9中的矩形1、矩形2、矩形3、椭圆形和后面的占位符都属于图形类的元件。把它们拖曳到画布上如图1-10所示。

·单击元件，可以将其选中。

·拖曳元件，可以移动位置。

·拖曳元件边缘，可以改变大小。

·双击元件，可以在元件上输入文字。

在上方的快捷功能区（如图1-11所示）可以设置元件的文字格式，元件本身的颜色、阴影效果，以及边缘线的颜色、形式。

提示：

矩形2和矩形3没有边缘线。

图形类元件可以用来制作原型中的分隔框、背景、按钮等，其他用途有待用户在使用中发掘。其中，占位符常常用来代表图片。如图1-12中的占位符用来表示页面顶部的轮播图。

图形类元件可以改变形状，如图1-13所示。单击矩形，右上角会出现一个“小圆球”。单击小圆球，弹出形状菜单。单击其中任意一个图形（如五角星），矩形就会变为五角星。所有的图形类元件都可以相互转换。

如图1-14是图形类元件的一些应用。

除了上述图形，Axure RP还支持用“钢笔”功能画出任意形状。这个功能在第2章会详细介绍。

2. 按钮类元件

按钮类元件包括按钮、主要按钮和链接按钮，添加到画布上后如图1-15所示。

·按钮：是预先设置了倒角、加了文字的矩形。

·主要按钮：是预先设置了填充颜色的按钮。

·链接按钮：是没有边缘线的按钮。

其实，按钮类元件也属于图形类元件，只是样式不同而已。

3. 图片元件

把图片元件添加到画布上后如图1-16所示。

图片元件可以像“占位符”一样用来代表图片。

双击图片元件，会弹出文件对话框，选择一张图片即可添加图片到原型中。不过，Axure RP也支持直接将图片复制（Ctrl+C）、粘贴（Ctrl+V）到画布上。所以，实际工作中，除非有动态加载的需求，否则很少通过图片元件来添加图片。

下面举一个通过图片元件来动态加载图片的例子。

如图1-17a是一个照片编辑工具的原型。这个页面需要动态加载上一个页面中用户选择的照片。原型中，这个页面上放置了4个图片元件来占位。上一个页面中通过交互动作记录用户选中的照片。读取这个页面时，设置交互动作动态加载照片，如图1-17b所示。第5章会对这个案例做详细介绍。

4. 文字元件

把一级标题、二级标题、三级标题、文本标签、文本段落添加到画布上后如图1-18所示。

文字元件通常用来制作原型中的标题、简介和正文等。

双击文字元件，即可直接修改文字。通过快捷功能区（如图1-19所示），可以设置文字的字体、颜色和格式。

原型中通常要将文字设置为不同的样式，以此强调或弱化不同信息的重要程度，如图1-20所示。

5. 水平线和垂直线

水平线和垂直线通常用来制作原型中的分隔线和箭头等。

水平线和垂直线可以改变线的粗细、虚实、颜色，并且可以增加箭头，如图1-21所示。

6. 热区

“热区”在Axure RP的画布上看起来是一个浅绿色矩形，如图1-22所示。其实原型发布之后，热区是透明的。

热区有什么作用呢？其可以扩大点击区域。

例如，图1-23的原型交互效果是用户点击“标签”那一行进入个人相册页面。如果没有热区，要实现这个效果需要把“小机册”4个字、图片及底部白框都设置上交互动作。有了热区则可以在3个元件上放一层透明的热区，然后只在热区上设置交互动作即可。

如图1-23中的绿色部分就是热区。热区把点击区域扩大到了整行。

7. 内联框架

内联框架放在画布上如图1-24所示。

内联框架可以链接到原型内的页面或外部网页。双击内联框架，会弹出设置链接的对话框，如图1-25所示。

·链接到当前项目的某个页面：可以让当前原型中其他页面出现在内联框架所在的位置。

·链接到URL或文件：可以让任意网站的网页出现在内联框架所在的位置，包括网络视频。通过视频网站的视频分享功能获取分享链接，在超链接输入框中填写视频的分享链接，就可以实现在原型中显示视频的效果。

8. 动态面板

动态面板放在画布上后如图1-26所示。

新建的动态面板在元件地图上显示为两行，如图1-26中的标注框所示。其中，第一行是动态面板，第二行是动态面板的一个状态，名称为State1。动态面板可以添加多个状态。

动态面板和状态是什么关系呢？打个比方，动态面板相当于一个卡片盒，状态相当于卡片。一个卡片盒可以装多张卡片，但只有最上面的一张卡片可以被人看到。

动态面板常用来制作子页面。如图1-27所示案例中，需要给APP制作3个子页面，分别是“慈善项目”“跑团”“我的”页面。

制作原型时，先添加一个动态面板，然后在动态面板中添加3个状态，再分别在每个状态中制作一个子页面，如图1-28所示。

在元件地图中双击状态名称可以进入状态的页面，如图1-29所示。

制作完3个状态之后。默认情况下，“慈善项目”状态在最上层，所以只能看到“慈善项目”页面。通过一些交互设置，可以实现点击底部导航栏，切换显示其他两个子页面的效果。具体的设置方法会在第4章中详细介绍。

9. 中继器

中继器在画布上的样子如图1-30所示。可以看到，中继器元件有3个矩形。双击中继器，进入中继器的页面，如图1-31所示。在中继器页面中只有一个矩形。

中继器的作用就是“复制”，其实中继器翻译为“复制器”更准确些。中继器可以设置复制的次数、新的复制品如何摆放，以及每次复制时如何对元件做调整。例如，图1-30中的中继器的复制次数是3，新的复制品纵向排列，每次复制时改变矩形元件上的数字。

中继器还可以存储管理数据。如果原型需要输入、编辑数据，则可以用中继器来实现。在第5章中会有更详细的介绍。

10. 表单元件

Axure RP把一些常见的网页中用于输入、选择的元件统称为表单元件，包括文本框、多行文本框、下拉列表框、列表框、复选框、单选按钮和提交按钮。这些元件在画布上的样子如图1-32所示。

双击文本框和多行文本框可以直接编写内容。

双击下拉列表框和列表框，会弹出编辑窗口。在窗口中可以添加列表项、上下调整列表项顺序、删除列表项、清除全部列表项。还可以一次添加多个列表项（如图1-33所示），每行算作一个列表项。

单击复选框或单选按钮，则选中或取消选中复选框或单选按钮。双击复选框或单选按钮，可以编辑文字。

提示：

“提交按钮”与前面提到的按钮的区别是，提交按钮拥有默认Web交互样式，包括正常的样式、光标悬停的样式、鼠标单击的样式等，如图1-34所示。而前面提到的按钮只是类似矩形的元件，没有默认的样式。所以，提交按钮适用于Web网站原型，其他按钮适用于APP原型。

单选按钮可以设置成“组”。例如，选择3个单选按钮，如图1-35所示，可以在属性栏设置“组”名称。原型中同一组单选按钮，在同一时间内只能有一个处于选中状态。

11. 表格元件

表格元件在画布上的样子如图1-36所示。

表格元件除了制作表格，还可以用来做列表，如图1-37所示。

12. 菜单类元件

Axure RP中有3个菜单类元件，分别是树状菜单、水平菜单和垂直菜单。

（1）树状菜单在画布上的样式如图1-38所示。在树状菜单上右击，在弹出的快捷菜单中可以添加、编辑树状菜单上的节点。树状菜单自带了展开、收起子节点的交互效果。如果菜单层级比较多，用树状菜单表示会更清晰。

（2）水平菜单和垂直菜单在画布上的样式如图1-39所示。

在水平菜单、垂直菜单上右击，在弹出的快捷菜单中可以添加、编辑子菜单。这两种元件自带了交互效果：光标悬停时将弹出子菜单，光标移出时子菜单将隐藏。

提示：

水平菜单和垂直菜单适合制作层级比较简单的菜单，使用时可以根据整体页面布局来选择水平样式或垂直样式。

1.2.5　站点地图

站点地图可以管理原型中所有页面的层级。

新建原型时会默认添加4个页面，如图1-40所示。图1-40中可以看到顶层有一个index页面。index页面下有3个子页面page1、page2、page3。

右击页面会弹出快捷菜单，通过快捷菜单命令，可以添加、删除、重命名页面，如图1-41所示。

双击某一个页面，就可以在画布上打开这个页面，进行编辑、添加元件、添加交互等操作。

如图1-42是一个实际的游戏后台原型的站点地图。要做一个复杂的原型，需要先建立一个条理清晰的站点地图。很难想象如果没有站点地图，如何管理上百个页面。

1.2.6　母版

先看图1-43中的两个页面，可以发现两个页面的导航栏是相似的。如果查看整个原型的上百个页面，可以发现每个页面的导航栏都是相似的。

如果原型中的多个页面都拥有相同的模块，那么最好将这个模块做成母版（如图1-44所示）。

母版的好处有以下两点。

（1）快速复制：母版可以像元件一样直接拖曳到画布上。

（2）方便维护：双击母版即可修改。例如，导航栏中有一个字错了，没用母版就要去所有页面改这个字，如果用了母版，则只需要在母版中修改，那么引用了母版的所有页面会随之自动更新。

提示：

Axure RP为了方便区分母版和其他元件，在母版上加了一层红色遮罩。如果感觉母版的遮罩颜色有干扰，则可以在菜单栏中选择“视图”∣“遮罩”命令，勾掉母版的遮罩。

1.2.7　属性

Axure RP的属性设置区域有3个小窗口。如图1-45是选中一个矩形元件时，3个窗口的状态。

·属性：设置元件的动作和交互。第4章会详细解释Axure RP中交互的原理，以及如何设置交互。

·说明：如果原型比较复杂，元件上的交互较多，可以在说明窗口中写下一些备注信息，以防几个月后再打开原型时不记得元件的作用了。

·样式：设置元件的位置、尺寸、填充颜色、阴影、圆角、字体等视觉方面的属性。第2章会详细解释常用元件的样式设置方法。第3章会给出一些设计上的建议和规范。

1.2.8　元件地图

元件地图以列表形式展示页面上的所有元件。如图1-46中可以看到页面上的矩形、占位符、动态面板3个元件都显示在右侧的元件地图上了。

单击元件地图右上角的筛选按钮，在弹出的菜单中可以选择是否显示所有的元件，如图1-47所示。

下面通过实例来看看过滤的效果，如图1-48所示。图1-48a显示所有元件，图1-48b只显示动态面板。

提示：

复杂的原型会使用多个动态面板，每个动态面板又会有多个状态，从而形成一个复杂的层次关系。用元件地图可以更方便地查看这种层次关系。

1.2.9　发布原型

在画布上做好的原型，可以发布成HTML网页，让其他人看到。

在Axure RP界面右上角菜单下面的区域，放置的是发布相关的按钮，如图1-49所示。

1. 预览

单击“预览”按钮后，Axure RP会根据原型生成一个临时网页，并通过浏览器展示该原型的网页，如图1-50所示。

Axure RP生成的网页中左侧是导航栏，对应Axure RP原型中的站点地图。单击导航栏，可以切换原型中的不同页面。网页中右侧是原型，对应Axure RP原型画布上的所有元件。

提示：

仔细观察图1-50，可以发现Axure RP界面与网页并不完全相同。这是因为Axure RP界面对动态面板和母版做的遮罩在网页中是不显示的。另外，Axure RP中设置的背景、100%宽度等效果只有在网页中才会显示。

2. 共享

共享功能与预览功能类似，但也有不同，主要表现在以下两点。

·预览功能生成的是临时网页，关闭Axure RP后网页就失效了。

·共享功能生成的是长期网页，上传到Axure官方平台的服务器上，生成一段长期有效的网址。

（1）要使用共享功能，需要有一个Axure RP账号。单击“登录”按钮，弹出如图1-51所示对话框。

（2）注册并登录Axure RP账号之后，Axure RP界面会变成登录状态，如图1-52所示。

（3）登录后单击“共享”按钮，弹出对话框，如图1-53所示。

图1-53标题栏中的Axure Share就是Axure官方的原型发布平台。在Axure Share上可以保存原型文件，还可以生成原型网址。

在图1-53中还可以配置生成网页的方式，通常使用默认设置即可。在第9章会详细解释这里的配置选项，以及如何配置才能在手机上达到最佳显示效果。

·第一次共享一个原型时，选择第一项“创建一个新项目”。一个原型文件就是一个项目。如果原型涉密，还可以设置访问密码。

·第二次共享原型时，默认选择第二项“替换现有项目”。项目ID是Axure Share平台分配给每个项目的唯一ID。一般这个ID就是原型网址的前缀。

（4）发布过程如图1-54所示。原型文件会上传到Axure Share平台。

（5）发布成功后如图1-55所示。窗口中的链接就是Axure Share生成的原型网址。在浏览器中直接打开即可查看原型。

实际工作中，如果不方便面对面给同事演示原型，可以将原型网址发给同事查看。

3. 发布

单击“发布“按钮后会弹出如图1-56所示的菜单。

·预览：前面已经介绍过，这里不再赘述。

·预览选项：与共享时的配置网页样式一样。

·发布到AxShare：就是之前介绍的“共享”功能。

·生成HTML文件：会在本地生成HTML文件。可以调整本地存储地址，如图1-57中标注框所示。HTML文件可以直接打包分享给同事查看。

·在HTML文件中重新生成当前页面：含义如字面所述。当原型页面很多时，每次生成整个原型的HTML文件都要几分钟或十几分钟。如果只修改了一个页面，重新生成整个原型的HTML文件显然不合算。用这个选项可以只更新一个页面，几乎瞬间完成。相比“生成HTML文件”功能，它可以提高生成的效率。

·生成Word说明书：可以生成Word文档。看起来很方便的功能，但如果没有给每个元件做好命名和备注，Word文档几乎没法看明白。实际工作中也很少有人用这个功能。

·更多生成器和配置文件：可以配置Word文档、CSV文档、打印的样式。属于与生成文档配套的配置功能，同样比较“鸡肋”。

提示：

Chrome浏览器和用了Chrome内核的浏览器无法直接打开Axure RP生成的HTML文件。浏览器会给出提示，如图1-58所示。

这个页面提示了“如何打开Axure RP网页”的方法，可以依照提示下载相应插件，解决这个问题。

如果读者觉得下载安装插件的过程比较麻烦，笔者推荐使用微软的Edge浏览器，可以直接打开Axure RP网页。