UI交互设计案例教程 第三章

03使用AxureRP实现线框原型设计签到签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。扫码下载文旌课堂APP扫码签到

相对于抽象的文字描述来说，线框原型可以更加直观地展示产品的结构与内容，使客户能够更加清楚地了解产品意图，利于项目整体的推进。

使用产品原型设计软件AxureRP可以快速、准确地制作出线框原型。本章将重点介绍AxureRP软件的使用方法和技巧，并结合实际案例讲解AxureRP在实际线框原型设计中的应用，以培养学习者的动手实践能力。单元导读★熟悉AxureRP软件的操作界面知识目标★加强实践练习，不断提高自身的专业技能★学习爱岗敬业、一丝不苟、精益求精的工匠精神

思政目标★掌握AxureRP的基本操作★掌握使用AxureRP制作线框原型的方法与技巧★掌握使用AxureRP预览和发布原型的方法

技能目标学习目标3.1

初识AxureRP3.1.1软件的安装与汉化

可以从Axure官网（）下载软件的最新版本，软件有PC和Mac两个版本，下载时注意选择与系统相对应的版本。

下载并安装之后会发现，软件为英文界面，如果不习惯使用英文版，可以使用汉化文件将其汉化。将汉化文件下载解压之后，复制并粘贴整个Lang文件夹到软件安装目录下（一般为C:/ProgramFiles(x86)/Axure/AxureRP10），就可以完成软件汉化了。

★提示：汉化包下载网址为“/84384”，目前AxureRP10为新出版本，并没有官方汉化版，因此同学们可以使用文中网址，也可以自行查找，但基本使用方法相同。

需要注意的是，从AxureRP10开始，使用软件前必须先注册账号，并且使用AxureRP10创建的文件不能在低版本软件中打开。3.1

初识AxureRP3.1.2熟悉AxureRP操作界面

为便于学习和理解后面的知识，本节将带领大家初步认识AxureRP10的操作界面，并了解其主要功能。AxureRP10的操作界面如图所示。AxureRP10操作界面3.1

初识AxureRP3.1.2熟悉AxureRP操作界面

AxureRP操作界面主要由菜单栏、工具栏、画布等区域构成，不同的界面区域有不同的功能，接下来将简单介绍常用界面区域的功能。

（1）菜单栏：位于界面顶部，其中集成了AxureRP的大部分功能，选择菜单项可执行相应功能。

（2）工具栏：包括主工具栏和样式工具栏。主工具栏中包括选择工具、形状工具、文本工具等常用工具。要使用某个工具，单击选择即可。样式工具栏中包括字体、字号、填充、阴影等，使用它们可以为画布区域的对象设置样式属性。知识链接：工具栏中所包含的内容可以自行设置。选择“视图/工具栏/自定义主工具栏”菜单项，会弹出对话框。单击选择对话框中的工具，该工具便会显示于工具栏区域，勾选对话框右下角的“在图标下显示功能名称”复选框，工具栏区域便会显示工具名称，如果追求极简界面，取消勾选就可以隐藏工具名称。3.1

初识AxureRP3.1.2熟悉AxureRP操作界面

（3）画布：用来绘制原型的区域，支持负坐标的显示，画布区域的灰色部分就是负坐标区域。画布的基本操作包括返回原点、移动画布和缩放画布。

①返回原点：按快捷键“Ctrl+9”，可以快速返回画布原点。

②移动画布：拖动滚动条可移动画布；按住快捷键“空格”的同时按下鼠标左键拖动画布也可以移动画布；使用键盘上的快捷键“↑”“↓”“←”“→”同样可以移动画布。

③缩放画布：按住快捷键“Ctrl”的同时滚动鼠标滚轮或按快捷键“+”“–”可以缩放画布；另外，使用缩放工具也可以实现画布缩放，如图所示。3.1

初识AxureRP3.1.2熟悉AxureRP操作界面

（4）页面功能面板：页面是构成项目文件的基本单元，使用页面功能面板可以对页面和页面文件夹进行添加、删除、排序等操作。

（5）大纲功能面板：使用大纲功能面板可以查看当前页面中的所有元件、母版和动态面板，并且可以对这些元件进行选择、编辑、排序、重命名和组合，大纲功能面板如图所示。

（6）元件库功能面板：元件库中的元件是组成页面内容的基本元素，可以将其中的元件直接拖到画布上应用。通过元件库功能面板可以载入额外的库，也可以创建自定义元件库，还可以从本地驱动器加载图像文件夹。大纲功能面板3.1

初识AxureRP3.1.2熟悉AxureRP操作界面

（7）母版功能面板：母版是由若干元件组成的元件集，可以在文件中重复使用，以提高原型制作效率。使用母版功能面板可以对母版和母版文件夹进行添加、删除、排序等操作。

（8）样式功能面板：使用样式功能面板可以设置元件和页面样式。

（9）交互功能面板：使用交互功能面板可以为页面和选定元件添加、删除和编辑各类交互，以及交互样式和交互事件。母版功能面板

交互功能面板3.1

初识AxureRP3.1.2熟悉AxureRP操作界面

（10）注释功能面板：使用注释功能面板可以为元件和页面添加注释说明，并且在生成文档时包含添加的注释，以便用户查看。要添加页面注释，可单击页面空白处，然后单击注释功能面板的“页面概述”文本框并输入文本，再单击文本框右上角的“格式”按钮，可以设置注释文本的格式。

AxureRP操作界面中的各个功能板块可以随意移动位置，具体方法为:按下鼠标左键并拖动功能板块，使其成为一个自由浮动的窗口，然后可以根据自己的喜好随意拖动到任何位置。注释功能面板自由浮动窗口3.2AxureRP基本操作3.2.1文件的基本操作1．新建和打开文件

当启动AxureRP之后，系统会自动创建一个文件。如要自行创建新文件，可以选择“文件/新建”菜单项或按快捷键“Ctrl+N”。

如要打开某个现有文件，可以选择“文件/打开...”菜单项，然后在弹出的“打开”对话框中选择已有的文件。选择“文件/最近打开文件”菜单项可以选择最近打开过的文件，单击文件名称即可再次打开该文件，单击“最近打开文件”子菜单最下方的“清空历史记录”按钮将清空这些记录。新建、打开文件

“最近打开文件”子菜单3.2AxureRP基本操作3.2.1文件的基本操作1．新建和打开文件

知识链接：在新建与打开文件时，要注意文件类型，不同类型的文件在AxureRP中的作用是不同的，我们常用的文件大致有以下三类。（1）“.rp”文件：是软件生成的源文件，只有通过这种文件才能对文件进行后续编辑与修改。（2）“.rplib”文件：是元件库文件，其中包含多个元件。将其导入元件库功能面板中，可以拖曳其中的元件到画布中使用；如果在AxureRP中打开，则可以对其中的元件进行修改。（3）“HTML”文件：将制作的原型生成为HTML文件后，可以通过浏览器打开并查看。3.2AxureRP基本操作3.2.1文件的基本操作2．保存文件

首先选择“文件/保存”菜单项，或者按快捷键“Ctrl+S”，在弹出的“另存为”对话框中输入文件名，选择保存位置；然后单击“保存”按钮，即可将文件保存到指定位置。已经保存过的文件，如想要另行保存，可以选择“文件/另存为...”菜单项，或按快捷键“Ctrl+Shift+S”。

如果创建的是元件库文件，在保存时文件扩展名将自动变为“.rplib”。选择“文件/保存”菜单项，可将文件直接使用默认文件名保存到默认位置，选择“文件/另存为...”菜单项，则可以在弹出的“另存为”对话框中设置文件名与保存位置。3.2AxureRP基本操作3.2.1文件的基本操作3．备份文件

从备份恢复文件

在AxureRP软件中，如果因意外情况导致文件丢失，可以先选择“文件/从备份恢复文件”菜单项，在弹出的“从备份恢复文件”对话框中，选择需要恢复的文件并单击“恢复”按钮；接着在弹出的“另存为”对话框中选择保存位置，并单击“保存”按钮保存文件。3.2AxureRP基本操作3.2.1文件的基本操作3．备份文件

偏好设置面板

选择“文件/备份设置”菜单项会弹出“偏好设置”对话框，可以从中选择备份间隔时间，还可以根据自己的喜好对软件界面做一些外观、使用习惯上的修改。3.2AxureRP基本操作3.2.2页面的基本操作1．管理页面

添加页面

使用界面左侧的页面功能面板可以对页面进行管理，并且可以无限制地添加页面。

常见的页面操作主要包括以下六个。（1）添加页面。单击页面功能面板右上角的“添加页面”按钮；或右键单击页面，在弹出的快捷菜单中选择“添加”子菜单中的“在上方...”“在下方...”或“子页面”，可在当前页面的上方、下方添加页面，或为其添加子页面。（2）打开页面。如要打开某个页面，只需要快速双击页面功能面板中的对应页面名称即可。（3）删除页面。右键单击页面，在弹出的快捷菜单中选择“删除”，或选中页面按快捷键“Delete”，均可删除页面。3.2AxureRP基本操作3.2.2页面的基本操作1．管理页面

（4）重命名页面。在页面名称上缓慢双击，或右键单击页面名称在弹出的快捷菜单中选择“重命名”，均可进入重命名状态，当输入新名称后，按快捷键“Enter”可重命名页面。（5）组织页面。当需要重新安排页面排序与层级时，可以直接按下鼠标左键并拖动页面，也可以选中页面后按快捷键“Ctrl+方向键”。

★提示：使用页面功能面板还可以对文件夹进行添加、删除、重命名等操作，具体操作方法与页面操作方法相同。需要注意的是，当删除文件夹时会同时删除它所包含的页面，所以在删除时，AxureRP会给出确认提示。3.2AxureRP基本操作3.2.2页面的基本操作1．管理页面

（6）管理打开的页面。已经打开的页面名会以选项卡形式显示在画布上方，单击选项卡可以在不同页面间切换；拖动选项卡可以调整页面顺序；单击页面选项卡右侧的“×”按钮可关闭页面；右键单击选项卡，可根据需要在弹出的快捷菜单中选择“关闭标签页”“关闭所有标签页”或“关闭除当前标签页外的其他标签页”；当页面过多无法全部显示时，可以单击画布右上角的▼按钮显示页面列表，如图所示。管理打开的页面3.2AxureRP基本操作3.2.2页面的基本操作2．设置页面属性

使用样式功能面板可以设置页面属性。3.2AxureRP基本操作3.2.2页面的基本操作2．设置页面属性

（1）页面尺寸。在默认情况下，页面会根据画布中的元件自动计算调整尺寸；有需要时也可以手动设置页面宽度和高度；当设计的原型需要适配多种设备时，还可以创建自适应视图。（2）页面样式。在该处可以选择、添加、编辑和管理页面样式，具体操作方法如下。①将已有的页面样式应用于当前页面：单击Default下拉列表框右侧的下拉按钮，在其下拉列表中选择已有的页面样式名称即可。②添加新的页面样式：单击“管理页面样式”按钮

，弹出“页面样式管理”对话框，如图所示。在该对话框中，单击“添加”按钮即可添加新的页面样式，选中新建页面样式后，编辑对话框右侧对应的页面属性以设置页面样式，设置好后单击“确定”按钮即可。3.2AxureRP基本操作3.2.2页面的基本操作2．设置页面属性

③管理页面样式：在“页面样式管理”对话框中，单击上方按钮可以对页面样式进行添加、复制、删除、排序等操作，双击对话框左侧的页面样式名称还可以对页面样式进行重命名。添加、管理页面样式3.2AxureRP基本操作3.2.2页面的基本操作2．设置页面属性

④修改当前所应用的页面样式：在样式功能面板中，修改当前样式的页面属性后，页面样式名称后会加星号，单击“将修改保存回样式中”按钮

即可将所做修改保存到样式中。（3）页面对齐方式。可以在此选择“左对齐”或“水平居中”，以确定页面内容与浏览器窗口的对齐方式。需要注意的是，页面对齐方式不影响AxureRP画布中元件的对齐方式。（4）填充。可以使用颜色或图像填充页面。（5）视觉保真度。分为常规保真度和低保真度，当设置为低保真度时，画布内容将转换为灰色，字体将转换为手写字体。修改当前所应用的页面样式

3.2AxureRP基本操作3.2.3自适应视图

在进行原型设计时，要考虑手机、平板、电脑等多种终端的适应问题。为此，可创建自适应视图。

在样式功能面板中单击“添加自适应视图”按钮，如之前创建过自适应视图，则会提示从现有视图中选择并创建，如果没有创建过则会弹出“自适应视图”对话框，在对话框中可以对自适应视图进行管理。

添加自适应视图3.2AxureRP基本操作3.2.3自适应视图

单击对话框上方的按钮可以添加、复制、删除不同大小的页面；在左侧列表框中选中自适应视图中的页面，可以在右侧编辑该页面的名称、宽、高和继承对象；还可以在“预设”下拉列表中选择AxureRP自带的尺寸。设置好后单击“确定”按钮，即可创建自适应视图。

“自适应视图”对话框

预设尺寸3.2AxureRP基本操作3.2.3自适应视图

自适应视图中的页面会以灰色选项卡的形式显示在页面标签栏下方，单击选项卡可以打开相应页面，蓝色选项卡表示当前页面，如图所示。自适应视图选项卡3.2AxureRP基本操作3.2.3自适应视图

自适应视图中的页面被组织成继承链，前一个页面为后一个页面的父页面，子页面会继承父页面的属性。第一个页面被称为基本页面，通常会在基本页面中完成主要的设计，再为每一个子页面添加额外的细节。在编辑父页面时，子页面会同步改变，而在编辑子页面时不会影响父页面。当勾选“AffectAllViews”（影响所有视图）复选框时，所有选项卡会呈现浅蓝色且有蓝色边框，此时编辑任意页面上的元件都会同时改变其他页面上的此元件，如图所示。影响所有视图3.2AxureRP基本操作3.2.3自适应视图

如果当前页面中创建了自适应视图，样式功能面板如图所示。单击“Edit

Views”（编辑视图）按钮会弹出“自适应视图”对话框，单击“RemoveViews”（删除视图）按钮，可删除当前页面中所创建的所有视图。样式功能面板3.2AxureRP基本操作案例练习3-1搭建原型页面结构

为了帮助同学们更好地理解AxureRP中页面的应用，本案例将以微信为例，依据绘制好的页面结构图在AxureRP中搭建App原型的页面结构。该结构图主要以通讯录为例，给到了其下的三级页面，如图所示。

微信的部分页面结构图

3.2AxureRP基本操作案例练习3-1搭建原型页面结构

搭建页面结构之前首先来分析App结构，“微信App”是软件名称，没有对应的页面，一般会对应一个文件夹，App中所有页面都放在该文件夹中。“微信”“通讯录”等都是打开微信App后的一级页面，而“新的朋友”是通过单击“通讯录”页面中的按钮打开的，因此应放在“通讯录”页面的下一级，依次类推。最终搭建的微信原型页面结构。

微信原型页面结构3.2AxureRP基本操作案例练习3-1搭建原型页面结构步骤1启动AxureRP，单击页面功能面板右上角的“添加文件夹”按钮

新建一个文件夹，右键单击新建文件夹，在弹出的快捷菜单中先选择“重命名”，重命名文件夹为“微信App”；然后按住鼠标左键向上拖动文件夹将其置顶。步骤2

将文件自带的页面“Page1”拖动到文件夹中，并右键单击页面，在弹出的快捷菜单中选择“添加/在下方添加页面”添加一个新页面。之后使用相同方法再添加两个页面。添加文件夹

在下方添加页面3.2AxureRP基本操作案例练习3-1搭建原型页面结构步骤3

在最上方页面名称处双击，输入“微信”，然后按快捷键“↓”选中下一个页面并输入“通讯录”，使用此方法将下面两个页面分别重命名为“发现”和“我”。重命名页面3.2AxureRP基本操作案例练习3-1搭建原型页面结构步骤

4

右键单击“通讯录”页面，在弹出的快捷菜单中先选择“添加/子页面”，为“通讯录”添加子页面，并重命名为“新的朋友”；然后单击页面功能面板右上角的“添加页面”按钮

，再添加5个页面，并分别命名，作为“通讯录”页面的二级页面。“通讯录”页面的二级页面步骤

5

使用上述方法在“新的朋友”和“标签”下创建三级页面并命名，此时微信原型页面结构便搭建完成了。3.3元件的使用3.3.1元件库

元件库中保存了各种各样的元件，这些元件可以直接用于绘制原型图。Axure

RP软件自带了五个预先安装的元件库。

元件库默认元件库（default）流程图元件库（flow）图标元件库（icons）示例UI模式（sampleUIpatterns）示例窗体模式（sampleformpatterns）3.3元件的使用3.3.1元件库1．默认元件库在默认元件库中，包含五种类型的元件，下面将分别进行介绍。（1）常用元件：是搭建页面内容的基本元件，包括形状、图片、按钮、文本和线段元件，一般用于绘制页面中的背景、边框、按钮以及分割线等。（2）互动元件：主要用于制作交互效果，其中包括动态面板、中继器、热区、内联框架和快照元件。（3）表单元件：是用于提交内容的元件，用户在此类元件中输入数据并单击“提交”按钮，可以将输入的内容提交至服务器。（4）菜单和表格元件：常用于绘制草图，其中包括树状菜单、表格和菜单元件。（5）标记元件：主要用于为原型添加注释说明或绘制流程图。3.3元件的使用3.3.1元件库2．流程图元件库

流程图元件库中包含各种可用于绘制流程图的形状，使用时可以直接将形状从库中拖到画布中使用。3．图标元件库

图标元件库中包含了大量由Axure团队制作并发布的图标，由于该元件库中的图标皆为矢量图标，因此当改变图标尺寸时并不会导致图标失真。4．示例UI模式元件库

示例UI模式元件库中包含容器元件、导航元件和内容元件。其中，导航元件类别中的导航栏元件，在制作界面导航栏时可以直接拖到画布中使用。5．示例窗体模式元件库

示例窗体模式元件库中包含按钮元件、输入元件、其他元件和示例表单元件。3.3元件的使用3.3.1元件库知识链接：在元件库功能面板上方的元件库类别下拉列表中可以切换元件库，或者选择全部元件库以方便查看库中的全部内容。单击元件库功能面板右上角的按钮，在弹出的菜单中选择“导入本地元件库”“浏览在线元件库”或“导入图片文件夹”可以导入元件库；对自行添加的元件库可以在此菜单中选择“编辑元件库”或“移除元件库”编辑或移除元件库。切换元件库

导入、编辑或移除元件库3.3元件的使用3.3.2元件的基本操作1．使用元件

要使用库中的某个元件，可在库中选中元件并将其拖到画布上。1）查看元件间距离

在画布上移动元件时，会有红线显示其与附近其他元件间的距离。在不移动时，若要查看元件间距离，需要在选择元件后，按住快捷键“Alt”并将光标悬停在另一个元件上。查看元件间的距离3.3元件的使用3.3.2元件的基本操作2）锁定和隐藏元件（1）锁定或解锁元件。右键单击选中元件，在弹出的快捷菜单中，选择“锁定/锁定或解锁位置和尺寸”，可锁定或解锁元件。在选中元件后，按快捷键“Ctrl+K”或“Ctrl+Shift+K”可实现同样功能。在画布中，锁定的元件边框为红色，并且只能在样式功能面板中改变其位置和尺寸，无法使用鼠标拖动和缩放。（2）隐藏元件。选中元件，单击样式功能面板或工具栏中的“隐藏”按钮

可隐藏元件。隐藏的元件在画布中显示为黄色。隐藏元件3.3元件的使用3.3.2元件的基本操作2．选择元件

使用鼠标单击元件可将其选中。要同时选择多个元件，可在按住快捷键“Shift”的同时依次单击各个元件，也可以通过拖动鼠标的方式实现批量选中。在使用拖动鼠标方式框选元件时，可以单击界面左上角的“选择”下拉按钮，并在其下拉列表中选择“选择相交”或“选择包含”，以更改选择模式。“选择相交”表示鼠标拖动的选框只要触碰到元件，即可选中该元件，“选择包含”表示鼠标拖动的选框只有将整个元件包围，才能选中该元件。

除此之外，还可以右键单击界面空白处，在弹出的快捷菜单中选择“全选”“向上全选”或“向下全选”来批量选择元件。选择模式下拉列表批量选择元件3.3元件的使用3.3.2元件的基本操作3．编辑元件在AxureRP中，可以自由编辑元件。1）改变元件形状

选中形状元件，右键单击所选元件，在弹出的快捷菜单中选择“选择形状...”，再在弹出的形状列表中选择任意形状，即可将其改为所选形状。改变形状并不会影响元件的交互和注释。2）编辑控制点

当选中元件后，双击其边框或右键单击所选元件，在弹出的快捷菜单中选择“变换形状/编辑控制点”，可进入编辑控制点模式，并自动选中工具栏中的控制点工具

。3.3元件的使用3.3.2元件的基本操作3）形状转换

在绘制较为复杂的图标或图形时，会用到形状转换功能。在画布中右键单击元件，在快捷菜单的“变换形状”子菜单中选择相关选项，或者在样式功能面板的元件位置与尺寸区域单击相关按钮，可应用形状转换功能。形状转换3.3元件的使用3.3.2元件的基本操作不同的选项会使选中的元件发生不同的改变。（1）水平翻转和垂直翻转：将形状沿Y轴和X轴翻转。（2）合并

：可将多个形状联合到单个路径中，形成一个新的形状，合并后的形状颜色由合并前最底层的形状颜色所决定。为便于说明，打开本课配套素材“素材与实例/第3章/形状转换”文件夹中的“合并.rp”，同时选中所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/合并”。合并3.3元件的使用3.3.2元件的基本操作（3）相减

：可从最底层的形状中减去所有与上层形状重合的部分，且除最底层形状外，其余形状消失并保留最底层形状的颜色。为便于说明，打开本课配套素材“素材与实例/第3章/形状转换”文件夹中的“相减.rp”，同时选中所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/相减”，效果如图所示。相减3.3元件的使用3.3.2元件的基本操作（4）相交

：可只保留多个形状的相交部分，删除其他部分，且保留部分显示的颜色为最底层形状的颜色。为便于说明，打开本课配套素材“素材与实例/第3章/形状转换”文件夹中的“相交.rp”，同时选中所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/相交”，效果如图所示。相交3.3元件的使用3.3.2元件的基本操作（5）排除

：可消除每个形状重叠的区域，形成一个新的形状，多个形状重叠的部分显示的颜色为最底层形状的颜色。打开“相交.rp”文件，同时选择所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/排除”，效果如图所示。排除3.3元件的使用3.3.2元件的基本操作（6）组合：可将多个形状组合形成一个新的形状，但会保留原始路径。选择所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/组合”，效果如图所示。组合3.3元件的使用3.3.2元件的基本操作（7）分散：使用上述功能制作出新的形状后，右键单击该形状，在弹出的快捷菜单中选择“变换形状/分散”，对于保留原始路径的形状会分散为原始形状；对于形成新形状、新路径的形状，会分散为新的形状。分散为新的形状

分散为原始形状

★提示：右键单击选中元件，在弹出的快捷菜单中选择“组合”，或按快捷键“Ctrl+G”，可将当前选中元件组合为一组，既保留原元件的形状，也保留原元件的路径。要注意区分该“组合”与“形状转换”子菜单中“组合”的区别。3.3元件的使用3.3.2元件的基本操作4．绘制元件

在AxureRP中，除了可以直接使用元件库中的元件之外，还可以通过工具栏“插入”类别中的工具绘制其他自己需要的元件。

要使用形状工具绘制元件，可在界面左上方的工具栏“插入”类别中选择形状工具后，在画布上按下鼠标左键并拖动，在拖动时按住快捷键“Shift”可以绘制正圆、正方形等形状。“插入”类别3.3元件的使用3.3.2元件的基本操作4．绘制元件

要添加文本，需要先在工具栏中选择文本工具并在画布中单击输入文本，或者在画布上按下鼠标左键并拖动以绘制文本框；然后在文本框中输入文本。此外，还可以在现有形状中输入或编辑文本，双击形状或选择形状后按下快捷键“Enter”，或右键单击形状，在弹出的快捷菜单中选择“编辑文本”，均可在形状中输入文本。

使用钢笔工具绘制元件，需要先在工具栏中选择钢笔工具，然后在画布中单击创建点，接着在其他位置单击即可绘制一条直线，重复以上操作以绘制元件，在绘制最后一个点时双击鼠标左键，即可完成绘制。如果想要使绘制的元件为闭合形状，需要将鼠标放在第一个点上，当光标呈

状时单击鼠标。

在绘制点时，按下鼠标左键并拖动会为当前绘制的点添加两条控制手柄，接着在其他位置单击并拖动可绘制出曲线。绘制曲线3.3元件的使用3.3.2元件的基本操作

5．设置元件属性

在样式功能面板和工具栏中可以设置元件属性，在样式功能面板中可以设置的元件属性。样式功能面板3.3元件的使用3.3.2元件的基本操作（1）位置与尺寸。

选中元件后，样式功能面板中的“元件位置与尺寸”区域。在X和Y编辑框中输入数值可改变元件位置，在W和H编辑框中输入数值可改变元件宽和高；在旋转编辑框中输入数值可旋转元件；在圆角半径编辑框中输入数值，或左右拖动元件左上角的倒三角形，可改变元件的圆角半径；单击“取消圆角”按钮的任意角，使按钮中的该角变为灰色，则对应的角显示为直角，再次单击又可将该角变为蓝色并显示为圆角；单击位置与尺寸区域顶部的对齐按钮，可以改变元件位置，以及元件对齐方式，当选中多个元件单击对齐按钮时，将以选择的第一个元件为基准；当选中的元件中有文本时，单击“适应文本宽度”和“适应文本高度”按钮，元件的宽和高将随着文本发生改变。元件位置与尺寸区域3.3元件的使用3.3.2元件的基本操作（2）元件样式。通过设置元件的各项属性可以改变元件样式，其设置方法与页面样式的设置方法基本相同。（3）不透明度。在选中元件后，在不透明度编辑框中输入数值，或左右拖动滑块，可改变元件的整体不透明度。（4）排版。选中带有文本的元件后，在排版区域可设置文本的字体、字重、字号、行距等属性，如图所示。单击“更多文本选项”按钮，可在弹出的面板中对文本进行加粗、斜体、基线、字母大小写、文本阴影等设置，如图所示。排版区域

“更多文本选项”面板3.3元件的使用3.3.2元件的基本操作（5）填充。选中元件后，单击该区域的颜色块，可以设置元件填充颜色为单色或渐变。单击“设置图像”按钮

，可在弹出的面板中单击“选择图片”按钮以选择图像；单击面板中九宫格方框中的小方框，小方框变为蓝色，表示填充图像的对齐方式。

当所选元件有填充图像时，“设置图像”按钮

将自动变为“编辑图片”按钮，要删除填充图像，可单击“编辑图片”按钮，然后在图像框中单击

按钮。编辑图像

3.3元件的使用3.3.2元件的基本操作（6）边框。元件边框颜色和填充颜色的设置方法基本相同。此外，在厚度编辑框中输入数值可改变元件的边框厚度。单击“更多边框选项”按钮，可在弹出的面板中选择边框的图案样式，以及箭头样式；单击可见性下的蓝色边框，边框会变为灰色，此时元件中对应方位的边框将为不可见模式，再次单击即可变为蓝色，并在元件中显示该边框。边框

（7）阴影。选中元件后，勾选该区域的“启用”复选框，可为元件添加阴影，单击“内阴影选项”按钮，可在弹出的面板中为元件添加内阴影。（8）边距。选中带有文本的元件后，在L、T、R、B编辑框中输入数值可改变元件中文本与对应边框的距离。3.3元件的使用3.3.2元件的基本操作6．元件注释

注释说明是用文字对相应元件进行详细说明，如优先级、功能类型、交互效果及交互条件等，以便于程序员在开发时清楚各元件的程序实现详情与细节。

要为某个元件添加注释，可在选中元件后先单击注释功能面板中的“注释”灰色文本框，然后在其中输入注释内容。

单击“注释”灰色文本框右上角的按钮，在弹出的菜单中，可以选择注释包含的内容。当选择“包含交互”和“包含元件文本和交互”时，如果该元件已添加了交互，此时会自动生成有关该元件交互的详细注释文本。添加元件注释

包含交互

3.3元件的使用3.3.2元件的基本操作6．元件注释

当先选中元件再添加注释时，系统会给元件和对应的注释自动分配相同的数字，以表明两者之间的对应关系，便于在预览和为开发输出说明文档时查看。如果未选中元件就编辑了注释文本，在注释文本的数字右侧会出现“分配元件”按钮，单击该按钮会弹出一个搜索列表，在该列表中可以选择或搜索需要分配注释数字的元件。

要删除元件注释，可以右键单击注释区域，在弹出的快捷菜单中选择“删除”，或者选中注释区域按快捷键“Delete”，选中的注释区域会呈现蓝色边框，如图所示。注释区域

3.3元件的使用3.3.2元件的基本操作

同一个元件可以有多个注释，每个注释的序号都不相同，如要改变注释序号，可以右键单击注释区域，在弹出的快捷菜单中选择“编辑数字”，并输入数字。当用鼠标上下拖动注释区域，改变注释排序时，注释序号会按排序自行改变。元件注释的序号

要复制、粘贴元件注释到其他元件，需要先复制元件，然后右键单击目标元件，再在弹出的快捷菜单中选择“特殊粘贴/粘贴元件注释”。3.3元件的使用3.3.3自定义元件库

选择“文件/新建元件库”菜单项，可自定义元件库，此时的页面功能面板会被元件功能面板所代替。此功能面板与页面功能面板的用法基本相同，不同的是，元件功能面板用于新建和管理元件。

绘制完元件后选择“文件/另存为”菜单项，在弹出的“另存为”对话框中设置文件名和保存位置，单击“保存”按钮保存文件。之后，将绘制的元件导入元件库功能面板中即可像使用内置元件一样将其拖到画布上使用。新建元件库

★提示：除自行绘制元件外，也可以在网上下载图标并导入元件库功能面板中使用。需要注意的是，在下载图标时，要尽可能下载SVG格式，这样在导入图标后，右键单击图标，在弹出的快捷菜单中选择“转换图片/转换SVG为形状”，可对所选图标进行样式编辑。3.3元件的使用案例练习3-2制作状态栏元件

通过第2章的学习我们知道，手机界面上方的状态栏是固定的。为方便后面的设计，本案例制作一个状态栏元件，后面可以直接拿来使用。状态栏元件效果

3.3元件的使用案例练习3-2制作状态栏元件步骤1

启动AxureRP，选择“文件/新建元件库”菜单项，进入绘制元件界面。从默认元件库中拖动矩形1到画布中，设置其尺寸为375×20，作为状态栏背景，如图所示。状态栏背景3.3元件的使用案例练习3-2制作状态栏元件步骤2

拖动4个矩形1到画布中，尺寸分别设置为20×40、20×60、20×80、20×100，间距为20，同时选中4个矩形后单击“底端对齐”按钮

对齐矩形，然后右键单击选中的矩形，在弹出的快捷菜单中选择“组合”，组合4个矩形，并设置填充颜色为黑色，无边框。

按住快捷键“Shift”的同时，按下鼠标左键拖动边框将其缩放到合适大小，并移动至适当位置，表示信号强度，如图所示。信号强度

★提示：在AxureRP中，要想设置元件为无边框，需要将边框厚度设置为0。3.3元件的使用案例练习3-2制作状态栏元件步骤3

从默认元件库中拖动文本标签到画布中，输入“中国移动”，设置字号为11，并移动到合适位置；使用同样方法分别输入时间和电量，设置字号为12，并移动到合适位置。状态栏文本步骤4

从图标元件库中分别拖动电池和WIFI到画布中，分别缩放后放至合适位置。至此，就完成了状态栏元件的绘制。3.3元件的使用案例练习3-2制作状态栏元件步骤5

选择“文件/另存为...”菜单项，在弹出的“另存为”对话框中输入文件名为“状态栏”并单击“保存”按钮保存元件。后面用到元件时，将“状态栏”文件导入元件库功能面板中，然后拖曳到画布中即可使用。知识链接：先在元件库功能面板中的元件库类别下拉列表中选择全部元件库；然后单击顶部的“搜索元件”按钮

，在搜索框中输入元件名称，即可在下方显示相应元件。3.3元件的使用案例练习3-3制作弹出框外形

需要提醒用户，让用户确认信息时，界面中会出现一些提醒机制，以达到告知用户信息和强制用户做出选择的目的，此时就需要用到弹出框。

本案例制作一个最基础的弹出框，让学习者了解弹出框的基本形式，并通过实践熟悉元件的使用。弹出框效果

3.3元件的使用案例练习3-3制作弹出框外形步骤1

启动AxureRP，从默认元件库中拖动矩形3到画布中，设置其尺寸为400×40，然后双击元件，在其中输入“弹出框”，并设置文本水平和垂直居中，使文本位于矩形的正中间，设置字符间距为2，如图所示。矩形3和文本3.3元件的使用案例练习3-3制作弹出框外形步骤2

先从默认元件库中拖动矩形2到画布中，设置其尺寸为400×230；然后右键单击矩形2元件，在弹出的快捷菜单中选择“调整顺序/置底”，将其置于底层，并使其与步骤1中所绘矩形的X、Y值相同。矩形23.3元件的使用案例练习3-3制作弹出框外形步骤3

选中矩形2，在样式功能面板的阴影区域，勾选“启用”复选框为其添加阴影，颜色使用默认值，设置X、Y偏移值为0，模糊值为15。添加阴影3.3元件的使用案例练习3-3制作弹出框外形步骤

4

同时选中两个矩形，设置圆角半径为5；为了使弹出框看起来整体性更强，选择矩形3，在样式功能面板中单击“取消圆角”按钮下面的两个角，使其呈灰色，此时矩形3下面的两个角显示为直角，如图所示。设置矩形的圆角半径步骤

5

按快捷键“Ctrl+S”，在“另存为”对话框中选择保存位置，输入文件名“弹出框”，单击“保存”按钮保存文件。至此，弹出框就绘制完成了。3.3元件的使用案例练习3-4绘制小鱼图案

本案例主要通过使用形状转换功能绘制小鱼图案，效果如图所示。小鱼图案效果3.3元件的使用案例练习3-4绘制小鱼图案相交步骤

1

启动AxureRP，先从默认元件库中拖动椭圆到画布中，设置其尺寸为800×610，按住快捷键“Ctrl”的同时按住鼠标左键向下拖动椭圆，以复制一个椭圆；然后将复制的椭圆拖到合适位置，并在同时选中两圆后单击“相交”按钮，此时只留下两圆重叠区域。3.3元件的使用案例练习3-4绘制小鱼图案合并步骤

2

对相交形成的图形执行步骤1的操作，但这次单击“合并”按钮

，得到一个新的图形。选择合并之后的图形，设置H为304，作为鱼身。3.3元件的使用案例练习3-4绘制小鱼图案制作鱼尾步骤

3

从流程图元件库中拖动三角形到画布中，设置其尺寸为300×280，旋转值为90°。双击三角形边框进入编辑控制点模式，在左边两角的附近各添加两个控制点，然后双击两角顶点将控制点转换为曲线，并进行适当调整，作为鱼尾。选择鱼尾，按快捷键“Ctrl+D”复制图形备用。3.3元件的使用案例练习3-4绘制小鱼图案鱼身、鱼尾、眼睛的位置

进行合并、相减操作步骤

4

拖动椭圆到画布中，先设置其尺寸为100×100，作为鱼的眼睛，将鱼尾和眼睛拖动到合适位置，并将鱼尾置于底层；然后选中鱼尾和鱼身并单击“合并”按钮，合成一个新的图形；再选中合并形成的图形和眼睛并单击“相减”按钮，此时合并形成的图形会减去与眼睛重叠的部分。3.3元件的使用案例练习3-4绘制小鱼图案拖动控制点

制作鱼鳍步骤

5

选择步骤4中相减形成的图形，按快捷键“Ctrl+D”复制该图形备用。选择步骤3中复制的图形并双击其边框，拖动控制点进行调整。将调整之后的图形与步骤4中相减形成的图形相交摆放，同时选中后单击“相减”按钮，获得鱼鳍。3.3元件的使用案例练习3-4绘制小鱼图案步骤

6

选择鱼鳍，按快捷键“Ctrl+D”复制一个鱼鳍，右键单击复制的鱼鳍，先在弹出的快捷菜单中选择“变换形状/垂直翻转”，使鱼鳍沿X轴翻转；然后将两个鱼鳍分别拖到鱼身的上下两侧，同时选中所有图形，单击“垂直分布”按钮，使鱼鳍均匀分布在鱼身的上下两侧。步骤

7

设置小鱼图案的填充颜色为蓝色“#0285BD”，无边框，对图案进行美化。最后将文件保存。至此，小鱼图案就绘制完成了。3.3元件的使用案例练习3-5绘制移动端App引导页

引导页是新用户打开App时最先看到的页面，决定了用户对产品的第一印象，可以使用户在未使用产品之前就对产品的风格、功能和特点有所了解。本案例绘制移动端App引导页。移动端App引导页效果

3.3元件的使用案例练习3-5绘制移动端App引导页设置页面尺寸步骤

1

启动AxureRP，在页面功能面板中双击默认页面，将其重命名为“引导页”。在样式功能面板中单击“自动”下拉按钮，在其下拉列表中选择“iPhone11Pro...”，设置页面尺寸为375×812。3.3元件的使用案例练习3-5绘制移动端App引导页步骤

2

单击样式功能面板中的“设置图像”按钮

，在弹出的面板中单击“选择图片”按钮，弹出“打开”对话框，在其中选择“素材与实例/第3章/案例/渐变背景图.jpg”，单击“打开”按钮，将图像导入画布中。步骤3

此时“设置图像”按钮变为“编辑图片”按钮

，单击它，在弹出的面板中设置图片的缩放方式和对齐方式。编辑图片3.3元件的使用案例练习3-5绘制移动端App引导页步骤

4

将本课配套素材“素材与实例/第3章/案例3-5”中的图片“音乐图像.jpg”拖到画布中，设置图像尺寸为375×390，设置表示音乐图像位置的X、Y值为16、175，使图像位于画布中间偏上的位置。知识链接：除直接将图片拖到画布中外，在AxureRP中添加图片的方法还有以下四种。①将默认元件库中的图片元件拖到画布中，双击它或者右键单击图片元件，在弹出的快捷菜单中选择“导入图片”，在弹出的“打开”对话框中选择需要导入的图片。②单击元件库功能面板中的按钮，先在弹出的菜单中选择“导入图片文件夹”，将文件夹中的图片导入元件库中；再从元件库中拖动图片到画布中使用。当文件夹中内容改变时，AxureRP元件库中的内容也会自动更新。3.3元件的使用案例练习3-5绘制移动端App引导页知识链接：③从图形编辑器中直接复制，并粘贴到AxureRP中。④为形状元件设置填充图像。

导入图片时，图片元件会根据导入的图片调整尺寸。如果需要图片元件尺寸不变，双击元件任意控制点，使控制点由黄色变为白色，即可在导入图片时使图片元件尺寸不变。再次双击控制点可将其变为黄色。3.3元件的使用案例练习3-5绘制移动端App引导页步骤

5

右键单击音乐图像，在弹出的快捷菜单中选择“编辑文本”，输入“寻找感动瞬间”，设置文本颜色为浅粉色“#FFF4FA”，字体为“华文楷体”，字号为20，设置文本右对齐和底端对齐，表示文本右边距的R值为47。在图片中添加文本并编辑3.3元件的使用案例练习3-5绘制移动端App引导页知识链接：Axure中对图片的编辑包括以下三种方式。①调整颜色。单击样式功能面板上方的“调整颜色”按钮，先在弹出的面板中勾选“调整颜色”复选框，然后左右拖动滑块即可更改图片颜色。单击面板右上方的“重置”按钮可使颜色恢复默认值，如图所示。②分割和裁剪。右键单击图片元件，在弹出的快捷菜单中，选择“分割”或“裁剪”；或者在工具栏中选择“分割”或“裁剪”工具后，在图片上按下鼠标左键并拖动，均可分割或裁剪图片。调整颜色3.3元件的使用案例练习3-5绘制移动端App引导页知识链接：③固定边角。在缩放图片时，为防止图片边角被扭曲，可以右键单击图片，在弹出的快捷菜单中选择“转换图片/固定边角”，此时橙色三角形会出现在图片上方和左侧，拖动三角形可确定需保留的区域。固定边角3.3元件的使用案例练习3-5绘制移动端App引导页步骤

6

从默认元件库中拖动椭圆到画布中，设置其尺寸为13×13，填充颜色为粉色“#F9C2E3”，无边框。选中椭圆，按住快捷键“Ctrl”和“Shift”的同时将其向右拖动，在水平位置复制1个椭圆，执行以上操作再复制两个椭圆，设置彼此的间距为10，设置后3个椭圆的填充不透明度为50%；将4个椭圆组合，放置在X为154，Y为740的位置，作为引导页的指示器，如图所示。圆点指示器3.3元件的使用案例练习3-5绘制移动端App引导页步骤

7

从流程图元件库中拖动圆角矩形到画布中，设置其尺寸为66×26，位置为“300，30”，圆角半径为20，边框色为“#F9C2E3”，无填充颜色，不透明度为50%，边框厚度为1；双击圆角矩形，输入“跳过”，设置字号为13，默认字体，设置文本水平和垂直居中，文本颜色为浅粉色“#F9C2E3”，如图所示。跳过按钮3.3元件的使用案例练习3-5绘制移动端App引导页步骤

8

拖动椭圆到画布中，置于最底层，设置其尺寸为375×300，填充颜色为“径向”渐变，中心颜色为“#8C1854”，不透明度为90%，边缘颜色吸取背景颜色，不透明度为0%，边框为无，作为音乐图像的投影，与图像重叠，如图所示。步骤

9

将文件保存。至此，移动端App的引导页就绘制完成了。

★提示：在AxureRP中，导入的图片可以为JPG、PNG、GIF、BMP和SVG等格式。绘制图像投影3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图

绘制线框图要养成先分析再动手的习惯，还要注意各组成部分的尺寸和间距规范。本案例绘制中国建设银行手机App首页线框图。中国建设银行手机App首页图片位于本课配套素材“素材与实例/第3章/案例3-6”中，原图与线框图的对比效果如图所示。原图与线框图效果

3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图此界面大致分为以下四部分。①状态栏，一般为固定的无须设计部分，因此可以直接使用案例练习3-2中制作的状态栏元件。②通栏图片，此部分为整个界面的亮点，较为抢眼。③正文内容，其中包括功能图标、图片和文字，在绘制时要把握好彼此之间的轻重，线框图应尽可能清晰明了，过多的图标可以使用矩形表示。④底部导航栏，iOS系统中底部导航栏为49px，但此界面在iPhone手机中应用时需要预留出主页指示器的位置。3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图

南宋诗人朱熹的诗句：“问渠那得清如许？为有源头活水来。”借水之清澈暗喻，人要心灵澄明就得认真读书，时时补充新知识。这也告诉我们，只有紧跟时代潮流，不断学习新知识，才能达到新境界。绘制线框图不是只会应用软件就够了，还需要具备把控界面布局和合理设计产品功能结构的能力，另外还要清楚当下潮流，这样绘制出的线框图才能满足客户需求，获得用户喜爱。嘉言善行3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

1

启动AxureRP，在样式功能面板的“自动”下拉列表中选择“iPhone11Pro...”，设置页面尺寸为375×812，将案例练习3-2所做的状态栏元件导入元件库功能面板中，并将其拖到画布中，放置在画布原点，设置其背景的填充颜色为灰色“#AAAAAA”，无边框，内容的填充颜色为白色，如图所示。状态栏元件3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

2

通过测量原图得知，此界面的页边距为16，在界面左侧的竖标尺处按下鼠标左键向右拖动至X为16处释放鼠标，此时画布中会出现一条参考线。采用同样的方法再拖动一条参考线到X为359处。创建参考线3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

3

从流程图元件库中拖动矩形到画布中，设置其尺寸为375×338，填充颜色为灰色“#AAAAAA”，无边框，位置坐标为“0，0”，并将其置底；从默认元件库中拖动图片元件到画布中，设置其尺寸为111×100，拖动到合适位置，单击“调整颜色”按钮，在弹出的面板中勾选“调整颜色”复选框，拖动滑块将图片元件设置为黑白色，表示原界面中通栏图片的中心区域。通栏图片效果图和颜色数值3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

4

从流程图元件库中拖动圆角矩形到画布中，按住元件左上方的倒三角形向右拖动，使圆角矩形的左右两边显示为半圆，设置其尺寸为194×26，位置为“120，50”，填充颜色为浅灰色“#D7D7D7”，无边框，不透明度为30%，作为搜索框；从图标元件库中拖动搜索和麦克风到搜索框中，设置它们的尺寸分别为15×14和10×15，颜色为白色，不透明度为50%。从默认元件库中拖动文本标签到搜索框中，输入“龙支付”，设置字号为11，文本颜色为白色，不透明度为30%；同时选中前面所绘元件，单击“水平居中”按钮，使所有元件基于底层的搜索框水平居中对齐。搜索框3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

5

从图标元件库中拖动隐藏式菜单栏、降序和加号到画布中，并设置合适的大小和颜色；拖动文本标签到画布中，输入“北京市”，设置字号为14，设置上述元件与搜索框水平居中对齐。拖动椭圆到画布中，设置其尺寸为6×6，填充颜色为深灰色“#555555”，边框色为白色，并拖动到合适位置，作为加号的提醒圆点。

本课提供有通栏图标的元件库，将本课配套素材“素材与实例/第3章/案例3-6/建设银行图标.rplib”导入元件库功能面板中，并分别拖动到画布中使用。输入图标文本，设置图标文本的字号为13，颜色为深灰色“#333333”，字符间距为1，并拖到合适位置，以上作为通栏图标的内容。通栏图标3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

6

拖动圆角矩形到画布中，设置其尺寸为343×45，并使圆角矩形两边显示为半圆；拖动矩形到画布中，设置W值为4，旋转值为330°，并拖动到合适位置。选中圆角矩形和矩形，单击“相减”按钮

，形成一个新的图形，如图所示。

设置上述图形的填充颜色为浅灰色“#F2F2F2”，无边框；拖动文本标签到圆角矩形上并输入相应文本，设置其字号分别为14和11，颜色为深灰色“#333333”，然后设置文本与圆角矩形水平居中对齐。相减圆角矩形上的文本3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

7

拖动10个矩形3到画布中，设置它们的尺寸为29×29，相互间的间距为40，上方一排与步骤6中相减所形成的图形间距为22，作为正文部分的图标；绘制图标文本，设置其字号为12，文本颜色为灰色“#555555”，字符间距为1，与图标间距为4。正文图标3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

8

拖入3个图片元件，设置其中一个尺寸为343×77，其余两个尺寸为164×36，调整颜色为黑白色，大的图片元件位置为“16，545”，小的图片元件距大的图片元件间距为72。设置小的图片元件圆角半径为5，且底部两个圆角显示为直角，相互间的距离为15。正文图片3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

9

拖入文本标签，输入“青春不一样”，设置字号为20，文本颜色为黑色，字符间距为1.2，与小的图片元件间距为16，与左边的参考线对齐。至此，正文部分的内容就绘制完成了。步骤

10

在绘制底部导航栏时，要空出主页指示器的位置，因此设置底部导航栏高度为83（底部导航栏49加主页指示器34），在工具栏中选择线段工具，在“0，729”处按下鼠标左键并拖动到“375，729”处以绘制一条直线线段，设置其边框色为“#D7D7D7”，厚度为1。3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

11

参照上述方法绘制底部导航栏中的图标，如图所示。在首页界面中，首页图标会有特殊状态，因此设置首页图标的填充颜色为深灰色“#555555”，文本颜色为灰色“#7F7F7F”，如图所示。底部导航栏效果

首页图标3.3元件的使用案例练习3-6根据中国建设银行手机App首页绘制线框图步骤

12

将文件保存。至此，界面线框图就绘制完成了。

★提示：在绘制线框图时，需注意元件的命名要准确，对同一图形或同一组中的元件要进行组合，这样便于元件的管理，以及后续的查找与修改。元件命名与组合示例如图所示。元件命名与组合示例3.4母版3.4.1创建和删除母版

创建母版的方式有两种：一种是将现有元件转换为母版，另一种是新建母版。下面分别介绍。

（1）将现有元件转换为母版。选择画布中的元件并右键单击，在弹出的快捷菜单中选择“转换为母版”，在弹出的“创建母版”对话框中输入母版名称，单击“继续”按钮，即可创建母版，如图所示。将现有元件转换为母版3.4母版3.4.1创建和删除母版

（2）新建母版。单击母版功能面板右上角的“添加母版”按钮，可创建一个母版，并进入其重命名状态。

在母版功能面板中右键单击母版，在弹出的快捷菜单中选择“删除”，可删除母版。要删除母版，需要将其从所有页面中移除，并且其下级母版会被一起删除。创建新母版3.4母版3.4.2编辑母版要对创建好的母版进行编辑，可在母版功能面板中双击母版名称或者在画布中双击母版元件，进入母版编辑模式，此时母版名称会以选项卡形式显示在画布上方。编辑母版的方法与常规的原型编辑方法一致。除编辑母版内容外，还可设置母版的页面属性。（1）画布颜色：更改母版画布颜色的方法与为元件设置填充颜色的方法一致。需要注意的是，母版的画布颜色只会在编辑母版内容时显示，不会影响应用母版的页面。（2）页面说明：可以单击注释功能面板的“页面概述”灰色文本框为母版添加注释说明。（3）页面交互：在编辑母版内容时添加的交互行为，也会显示在添加了该母版的页面中。要同时给多个页面添加或删除母版，先在母版功能面板中右键单击母版，在弹出的快捷菜单中选择“添加到页面”或“从页面移除”，打开“添加母版到页面”或“从页面移除母版”对话框；然后从中选择要添加母版的页面及位置，或要删除母版的页面，如图所示。3.4母版3.4.3应用母版1．将母版添加到页面中要在页面中添加母版，可在母版功能面板中按下鼠标左键将母版拖到画布中。画布中的母版元件会有粉色边框。同时给多个页面添加或移除母版3.4母版3.4.3应用母版2．拖放设置为满足不同情况的需要，在拖动母版到页面时提供了三种不同的放置方式，可在母版功能面板中右键单击母版，在快捷菜单的“拖放设置”子菜单中进行选择。（1）选择“任意放置”，可以将母版拖到画布中的任意位置。（2）选择“锁定到母版中所在位置”，将母版拖到画布中时，母版会自动锁定到在母版编辑模式下元件在画布中的位置。（3）选择“从母版中脱离”，将母版拖到画布中时，母版与母版功能面板中的母版脱离联系，变为普通元件。已拖动到画布中的母版，可以通过右键单击画布中的母版，从弹出的快捷菜单中选择“锁定到母版中所在位置”或“从母版中脱离”来改变母版的属性。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏

本案例使用母版绘制建设银行App的底部导航栏。建设银行App底部导航栏的原图和线框图。在本课配套素材“素材与实例/第3章/案例3-7”文件夹中，为同学们准备好了导航栏中的图标“建设银行底部导航栏图标.rplib”，在绘制底部导航栏时可以先将该文件导入元件库功能面板中。原图与线框图步骤1启动AxureRP，将建设银行的底部导航栏图标导入元件库中。在母版功能面板中单击“添加母版”按钮，添加母版并将其重命名为“建设银行底部导航栏”，如图所示。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏添加母版步骤2

双击母版名称，进入母版编辑界面，在工具栏中选择矩形工具，在画布原点按下鼠标左键并拖动绘制尺寸为375×83的矩形。设置矩形填充颜色为白色，边框色为浅灰色“#D7D7D7”，厚度为1，设置除上边框外其他边框不可见，作为导航栏背景，如图所示。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏导航栏背景步骤3

从导入的元件库中拖动首页图标到画布中，设置边框色为深灰色“#7F7F7F”，厚度为2，位置为“27，8”；采用同样的方法将其他图标拖到画布中，设置图标间距离为54，并使所有图标基于首页图标水平居中对齐。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏步骤4拖动5个文本标签到画布中，依次输入图标文本，设置字号为12，文本颜色为深灰色“#7F7F7F”，与首页图标间距为7。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏知识链接：

想要使用母版实现页面间的跳转，需要先了解AxureRP中的交互，它的创建与管理通常在交互功能面板中实现。交互主要由事件、例和动作三部分组成，如图所示。①事件是发生在元件或页面上的触发交互的行为。当事件发生时，附加于该事件的例便会开始执行。例如，单击、双击、按下等操作都可归为事件。②例是元件和页面进行交互的动作列表，一个事件可以分配多个动作，当分配动作时，例会自动添加到事件中。③动作是元件和页面激发事件时发生的改变。交互功能面板步骤5

设置图标选中状态的样式。同时选中所有图标和文本，在交互功能面板中单击“添加样式效果”按钮，在展开的列表中选择“选中样式”，在打开的“选中样式”面板中单击“确定”按钮，添加选中样式。

同时选中所有文本，单击“选中样式”按钮，在弹出的面板中勾选“字体颜色”复选框，并设置字体颜色为蓝色“#2565B5”，单击“完成”按钮。采用相同方法，设置所有图标的填充颜色为蓝色“#2565B5”，无线段颜色，如图所示。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏文本和图标的选中样式步骤6

采用相同方法，设置所有图标内部图形的填充颜色和线段颜色为白色。选中所有图标和文本，单击“选中样式”按钮，预览当前所选元件的选中样式效果，如图所示。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏选中样式预览3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏步骤7

分别将图标和对应的文本组合，为方便管理和后期选择，还要为组合命名，如图所示。在页面功能面板中单击“添加页面”按钮，新建4个页面，将5个页面分别重命名为“首页”“信用卡”“投资理财”“悦享生活”“我的”，如图所示。双击“首页”页面进入该页面，在样式功能面板页面尺寸下的自动下拉列表中选择“iPhone11Pro...”，设置页面尺寸为375×812，对其余4个页面做相同操作。

对组合命名

新建页面管理步骤8

在本课配套素材“素材与实例/第3章/案例3-7”文件夹中有各个页面的截图，拖动图片到相应页面中，设置图片尺寸为375×729。在母版功能面板中右键单击“建设银行底部导航栏”母版，先在弹出的快捷菜单中选择“拖放设置/任意放置”，然后拖动母版到各个页面底部。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏步骤9在母版编辑页面，选择“首页”组合，在交互功能面板中单击“新增交互”按钮，先在展开的列表中选择“单击/打开链接/首页”，然后单击“确定”按钮建立交互，如图所示。对其余图标组合做相同操作。对图标组合设置跳转页面交互步骤10

在页面功能面板中双击“首页”页面，进入该页面，无须选择元件，直接在交互功能面板中单击“新增交互”按钮，先在展开的列表中选择“页面载入/设置选中/首页”，然后单击“确定”按钮建立交互，如图所示。对其余页面做相同操作。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏设置页面载入时的交互步骤11

将文件保存。至此，使用底部导航栏母版实现页面交互就制作完成了。3.4母版案例练习3-7使用母版绘制建设银行App的底部导航栏步骤12

要注意，页面交互在画布中不能体现，需要使用预览功能在浏览器中进行查看。单击工具栏中的“预览”按钮，可在默认浏览器中查看首页页面，在浏览器