Axure RP原型设计案例教程02元件和元件库

AxureRP原型设计案例教程[AxureRP9]目录项目一原型设计基础项目二元件和元件库项目三元件样式和母版项目四标注、预览和输出原型项目五基础交互项目六使用动态面板实现交互项目七使用变量、条件和函数实现交互项目九音乐类App原型设计项目八使用中继器实现交互项目二任务一熟悉元件库和元件操作任务二熟悉和使用各种元件元件和元件库项目导读在AxureRP中，元件是组成页面内容及产品原型的基本元素。本项目将通过讲解“元件库”面板，元件基本管理、元件编辑和元件运算，AxureRP提供的常用元件、流程元件和图标元件，导入外部元件和自定义元件的方法，带领读者学习各种元件的使用方法，为接下来更好地设计原型做好准备。项目导读素质目标加强实践练习，提升专业技能。坚持求真务实的工作作风和严谨认真的工作态度。学习目标熟悉“元件库”面板。掌握元件基本管理操作。掌握元件编辑操作。掌握元件运算操作。熟悉AxureRP提供的常用元件、流程元件、图标元件的功能和使用方法。掌握导入外部元件的方法。掌握自定义元件的方法。能够使用AxureRP大致勾勒页面线框图。项目目标任务一熟悉元件库和元件操作任务描述本任务首先带领读者熟悉“元件库”面板，学习元件基本管理、元件编辑和元件运算等操作，然后绘制“优选超市”图标。任务准备全班同学每5人一组，各组选出组长。组长组织组员扫码观看“图标设计注意事项”视频，讨论并回答下列问题。问题1：图标是什么？优秀图标有哪些积极作用？问题2：设计图标有哪些注意事项？单击此处播放微课图标设计注意事项一、“元件库”面板AxureRP中的元件被组织成库，分类存放在“元件库”面板中。单击“元件库”面板右上方的

按钮可在不同元件库之间切换，在打开的下拉列表中选择所需元件库，在该下拉列表中选择“全部元件库”选项，可显示所有元件。在“元件库”面板中快速搜索某个元件先单击“搜索”按钮

然后在右侧的搜索框中输入元件名称再次单击“搜索”按钮

可隐藏搜索框注意：使用搜索功能时建议先将搜索范围设置为“全部元件库”二、元件基本管理添加元件基本管理选择重命名删除复制锁定组合排序隐藏对齐和分布移动添加选择重命名删除复制锁定对齐和分布二、元件基本管理添加元件将“元件库”面板中的元件拖到画布上，可在当前页面中添加元件。添加的元件会显示在“概要”面板中。二、元件基本管理加选或取消加选元件选择元件后，在按住“Shift”键或“Ctrl”键的同时单击其他元件默认情况下，在画布上的空白位置按下鼠标左键并拖动，释放鼠标后可选中拖动范围内的所有元件（包括部分选中的元件）注意：当基本工具栏中的当前选择模式为“包含选中”时，拖动范围需要完全覆盖元件才能将其选中。相交选中包含选中选择元件单击画布上的元件二、元件基本管理重命名元件为便于在当前页面的众多元件中查找某个元件或为元件添加交互效果，可以为元件重命名。删除元件选择一个元件后，在“样式”面板的“名称”编辑框中输入名称选择元件后按“Delete”键二、元件基本管理复制元件方法一：选择元件后按“Ctrl+C”组合键复制所选元件，然后按“Ctrl+V”组合键粘贴复制的元件方法二：复制元件后右击画布，在弹出的快捷菜单中选择“粘贴选项”选项下的选项，粘贴相应内容方法三：按住“Ctrl”键的同时拖动元件二、元件基本管理锁定元件选择元件后，按“Ctrl+K”组合键可锁定元件（选择锁定的元件时其边框呈现为红色），此时不能调整元件的位置和尺寸。取消锁定元件选择被锁定的元件，按“Ctrl+Shift+K”组合键精确移动元件选择元件后，在样式工具栏的“X”（水平位置）和“Y”（垂直位置）编辑框中单击并输入数值移动元件直接拖动元件或选择元件后按方向键二、元件基本管理组合元件将所选元件编组选择多个元件后，在基本工具栏中单击“组合”按钮

或按“Ctrl+G”组合键取消编组选择已编组的元件，在基本工具栏中单击“取消组合”按钮

或按“Ctrl+Shift+G”组合键为统一管理和编辑元件，可将多个元件编组。二、元件基本管理排序元件调整元件顺序在“概要”面板的元件上按下鼠标左键并上下拖动右击元件后在弹出的快捷菜单中选择“顺序”选项下的相应选项通常位于上方的元件会遮挡位于下方的元件。相应快捷键隐藏元件重新显示元件右击被隐藏的元件，在弹出的快捷菜单中选择“设为可见”选项为显示下方元件，可暂时将位于上方的元件隐藏。右击元件，在弹出的快捷菜单中选择“设为隐藏”选项，被隐藏的元件在画布上呈现为浅黄色。二、元件基本管理对齐和分布元件提示用户也可通过“概要”面板对元件进行上述基本管理操作。注意：在对齐和分布元件时，通常会以选择的第一个元件为基准。选择多个元件后，在基本工具栏中单击对齐和分布按钮三、元件编辑1．调整元件尺寸选择元件后，在元件边框的任一控制点（小方块）上按下鼠标左键并拖动，可调整元件尺寸。水平位置垂直位置宽度高度单击该按钮可等比例调整元件尺寸精确调整元件尺寸选择元件后，在样式工具栏的“W”（宽度）和“H”（高度）编辑框中单击并输入数值。按住“Shift”键的同时拖动鼠标，可按比例调整元件尺寸。三、元件编辑2．改变元件形状右击所选元件（可同时选择多个），在弹出的快捷菜单中选择“选择形状”选项，在打开的形状面板中选择任一形状，可改变所选元件的形状。提示不同类型的元件有不同的功能，元件的基本编辑方法并不适用于所有元件。原件的基本编辑方法是否适用于所有原件？注意：改变元件形状不会影响元件的属性、交互和注释。三、元件编辑3．编辑元件锚点方法一：将鼠标指针移到元件边框上，当鼠标指针呈

形状时双击★拖动锚点→调整锚点位置★拖动锚点的两个手柄→调整边框形状★按住“Ctrl”键的同时拖动锚点手柄→只调整该手柄的长短★单击边框→添加新的锚点★选中锚点后按“Delete”键，或者右击锚点后在弹出的快捷菜单中选择“删除”选项→删除锚点★双击锚点，或者右击锚点后在弹出的快捷菜单中选择“曲线”或“折线”选项→使锚点在曲线锚点和折线锚点间转换进入编辑锚点模式：方法二：右击所选元件后在弹出的快捷菜单中选择“变换形状”/“编辑点”选项方法三：在基本工具栏中选择编辑点工具编辑内容：0102按空格键或“Esc”键退出编辑锚点模式：03三、元件编辑3．编辑元件锚点将该元件的所有锚点转换为曲线锚点或折线锚点右击元件在弹出的快捷菜单中选择“变换形状”选项下的“曲线连接各点”或“折线连接各点”选项四、元件运算使用元件运算功能可以绘制形状更加复杂多样的元件。在画布上选择元件（通常是两个及以上）并右击所选元件，在弹出的快捷菜单中选择“变换形状”选项下的相应选项，可应用元件运算功能。四、元件运算合并使用合并功能可以将多个形状融合为单个路径，从而形成一个新的形状，且合并后的形状颜色为合并前最底层形状的颜色。去除使用去除功能可以从最底层的形状中减去所有与上层形状重合的部分，且除最底层形状外，其余形状消失，最终形状保留最底层形状的颜色。四、元件运算相交使用相交功能可以只保留多个形状的相交部分，删除其他部分，且保留部分的颜色为最底层形状的颜色。排除使用排除功能可以消除两个形状重叠的部分，形成一个新的形状。若有两个以上形状重叠，则保留该重叠部分，且排除后的形状颜色为最底层形状的颜色。四、元件运算结合使用结合功能可以将多个形状复合成一个新的形状（保留所有原始路径），且最终形状的颜色为最底层形状的颜色。分开使用上述功能制作出新的形状后，若保留有完整原始路径，使用分开功能可以将其分散为原始形状；若新形状包含多个封闭路径，则会分散为多个新的形状。分散为原始形状分散为多个新的形状步骤1启动AxureRP，将“元件库”面板中的矩形3元件拖到画布上，在样式工具栏的“W”和“H”编辑框中分别输入“34”和“32”，设置其尺寸。步骤2按住“Ctrl”键的同时向上拖动矩形以复制矩形，并设置复制矩形的尺寸为42×9。调整复制矩形的位置，使其底部与原矩形顶部对齐，最后选中这两个矩形，单击基本工具栏中的“居中对齐”按钮，使它们在垂直方向上中心对齐。单击此处播放微课绘制“优选超市”图标任务实施——绘制“优选超市”图标通过绘制“优选超市”图标，带领读者进一步练习元件基本管理、元件编辑和元件运算等操作。任务实施——绘制“优选超市”图标步骤4

将圆形元件拖到画布上，设置其尺寸为16×16。按住“Shift”键的同时依次选中梯形（原复制矩形）和圆形，单击“居中对齐”按钮

和“顶部对齐”按钮

，调整圆形的位置。水平向左复制一个圆形，设置其尺寸为13×13，并使复制圆形右侧与原圆形左侧对齐。参照上述方法在原圆形右侧复制一个小圆形。步骤3选中复制矩形并双击其边框，进入编辑锚点模式。首先选中矩形左上角的锚点，在“样式”面板“点位”区域的“X”编辑框中输入相应数值，使该锚点水平向右移动6（X值加6），然后参照上述方法将右上角的锚点水平向左移动6。任务实施——绘制“优选超市”图标步骤6水平向下复制步骤5中绘制的形状并使其与原形状的间距为2，选中复制的形状和下方矩形，右击所选形状，在弹出的快捷菜单中选择“变换形状”/“去除”选项，形成一个新的形状。步骤5选中梯形和3个圆形，右击所选形状，在弹出的快捷菜单中选择“变换形状”/“合并”选项，合并成一个新的形状。首先双击新形状的边框，进入编辑锚点模式，然后选中多余的锚点并按“Delete”键将其删除，最后分别调整最左侧和最右侧锚点的手柄，调整其形状。任务实施——绘制“优选超市”图标步骤8绘制一个尺寸为10×10的圆形，并调整其位置，使其在垂直方向上与下方形状中心对齐，且与下方形状底部的间距为7。使用去除（或排除）功能，在下方形状上减去刚才绘制的圆形，形成一个新的形状。步骤7参照步骤3，将下方形状最上方的两个锚点分别向下移动1，调整其形状。步骤9选中以上绘制的形状，按“Ctrl+G”组合键编组，并在“概要”面板中单击元件组名称（确保该组处于选中状态）后输入“优选超市”，最后按“Enter”键为元件组重命名。步骤10至此，“优选超市”图标就绘制完成了，保存文件并关闭软件。任务二熟悉和使用各种元件任务描述本任务首先带领读者学习AxureRP提供的常用元件、流程元件、图标元件的功能和使用方法，以及导入外部元件、自定义元件的方法，然后绘制商城类App状态栏和标签栏。全班同学每5人一组，各组选出组长。组长组织组员扫码观看“App页面的组成”视频，讨论并回答下列问题。问题1：App页面主要由哪些部分组成？问题2：App页面各组成部分的尺寸一般是多少？单击此处播放微课App页面的组成任务准备一、常用元件一、常用元件1．基本元件一、常用元件1．基本元件没有实际意义，当设计师需要在页面中预留一块位置又暂时不确定放什么内容时，可以使用占位符元件。提示在其他元件上添加和编辑文本的方法与形状元件基本相同，此后将不再赘述。形状元件矩形圆形占位符元件

进入文本编辑模式，输入相应内容。方法一：双击形状元件在形状元件上添加文本

方法二：右击形状元件在弹出的快捷菜单中选择“编辑文本”选项

一、常用元件1．基本元件图片元件使用图片元件可以将JPG、PNG、GIF、BMP和SVG等格式的图片导入AxureRP页面中。当控制点为白色时导入图片，图片尺寸会自动适应图片元件的尺寸；双击任一控制点，控制点变为黄色，此时导入的图片会保持其原始尺寸导入图片将图片元件拖到画布上，双击元件，在打开的“打开”对话框中选择图片后单击“打开”按钮批量导入图片可同时选中外部文件夹中的多张图片并将它们拖到AxureRP的画布上一、常用元件1．基本元件双击左边框或右边框中部的控制点，可调整文本框宽度；双击上边框或下边框中部的控制点，可调整文本框高度

双击文本元件边框任一角上的控制点，可使文本框中的内容变为一行且文本框大小正好与当前文本内容相匹配。

选中文本元件后，拖动文本元件边框上的任一控制点

双击文本元件，可进入文本编辑模式，修改其中的文本。

调整文本框的大小

一、常用元件1．基本元件热区元件（隐形元件）为了使用户可以在画布上看到该元件，系统默认将其呈现为浅绿色。用户可以将热区元件覆盖到其他元件上，实现一些特殊的交互效果。一、常用元件2．表单元件一、常用元件2．表单元件文本框和文本域元件文本框元件主要用于接收单行文本输入。文本域元件主要用于接收多行文本输入。设置文本框中要输入的文本类型右击文本框元件，在弹出的快捷菜单中选择“输入类型”选项下的选项设置文本框中能输入的最大字符数选择“编辑最大长度”选项，在打开的“文本字段最大长度”对话框的“最大长度”编辑框中输入数值并单击“确定”按钮

选择“只读”选项，用户将无法在文本框中输入内容或更改文本框中的已有内容登录注册页中的用户名和密码输入框，以及页面中的搜索框等都属于文本框一、常用元件2．表单元件在画布上只可以查看元件的视觉效果，要想测试元件的交互效果，可单击工作界面右上方的“预览”按钮，在浏览器窗口中进行预览。提

示如果想要测试元件的交互效果，你知道该如何操作吗？一、常用元件2．表单元件下拉列表元件下拉列表元件可显示多个列表项供用户选择（单选）。

双击下拉列表元件，在打开的“编辑下拉列表”对话框中可添加、删除、排序和重命名列表

单击该对话框中的“编辑多项”按钮批量编辑列表项

将该列表项设置为默认显示的选项（显示在下拉列表元件中）

在“编辑下拉列表”对话框中勾选某一列表项前的复选框若没有勾选任何列表项，下拉列表元件中将默认显示第一个列表项一、常用元件2．表单元件列表框元件列表框元件可显示多个列表项供用户选择，并且支持单选和多选。用户在选择列表项时，可按住“Ctrl”键实现多选一、常用元件2．表单元件复选框元件允许用户选择一个或多个选项。复选框元件

使该元件默认显示为选中状态

方法一：右击复选框元件后在弹出的快捷菜单中选择“选中”选项。方法二：选中复选框元件后在其方框上单击。一、常用元件2．表单元件单选按钮元件单选按钮元件允许用户从多个选项中选择一个选项。

要实现多选一的效果，需要将多个单选按钮元件创建为选项组。

选中多个单选按钮元件右击所选元件，在弹出的快捷菜单中选择“指定单选按钮的组”选项打开“选项组”对话框，在其中设置组名称后单击“确定”按钮一、常用元件3．菜单|表格元件一、常用元件3．菜单|表格元件树元件树元件主要用于制作树状菜单。单击该按钮可折叠或展开树状菜单勾选该复选框，可为菜单项添加图标。在右键快捷菜单中选择“编辑图标”选项，可在打开的对话框中设置菜单项图标的样式设置折叠/展开按钮的样式

在打开的“树属性”对话框中为树元件设置个性化图标

右击树元件中的任一节点，在弹出的快捷菜单中选择“编辑树属性”选项一、常用元件3．菜单|表格元件表格元件表格元件主要用于制作表格数据。

全选表格或者选中对应的行、列

单击表格元件左上角、左侧或顶部的浅灰色圆角矩形一、常用元件3．菜单|表格元件水平菜单和垂直菜单元件水平菜单和垂直菜单元件常用于制作导航菜单。

添加、删除或编辑菜单项

右击菜单|表格元件，在弹出的快捷菜单中选择相应选项

为水平菜单和垂直菜单中的菜单项添加子菜单后，预览时将鼠标指针移到该菜单项上将显示其子菜单项项

一、常用元件4．标记元件标记元件主要用于为原型添加注释。二、流程元件流程元件是指用于绘制流程图的元件，位于流程元件库（Flow）中。部分流程元件的含义流程元件含

义流程元件含

义

开始或结束

数据传递

要执行的操作

手动操作

判断

流程图之间的接口

注释或说明

准备或起始

页面跳转的标记

数据的输入与处理注意：流程元件需要连接起来才能组成流程图。二、流程元件选中流程元件，在基本工具栏中单击“连接”按钮

进入连接模式，将鼠标指针移到流程元件上，此时可看到流程元件上显示的4个连接点。在任一连接点上按下鼠标左键并拖动，到另一流程元件的连接点后释放鼠标，即可连接两个元件。二、流程元件默认情况下，连接线会开启自动重排功能，当移动被连接的元件时，连接线会跟随元件的位置自动变化。此时，选中连接线，可看到其控制点呈现为黄色。若拖动控制点调整其形状，会关闭自动重排功能，此时连接线上的控制点变为白色。要再次开启自动重排功能，可选中连接线后单击“样式”面板中的“重置连线”按钮

。选中连接线后，单击图中右下角的一组按钮，可以更改连接线的类型（如直角折线、圆角折线、直线、曲线）。右击元件，在弹出的快捷菜单中选择“变换形状”/“编辑连接点”选项，可进入编辑连接点模式。在该模式下可调整连接点的位置，以及添加和删除连接点，方法与编辑锚点基本相同。知

识

库二、流程元件选中连接线，在样式工具栏的“箭头样式”下拉面板中可为连接线添加箭头或设置箭头样式，且连接线的每一端都可以设置为不同的箭头样式。三、图标元件图标元件位于图标元件库（Icons）中，这些元件均为矢量图形（改变尺寸不会失真）。使用它们可以提升原型设计效率。通常，用户需在“元件库”面板中搜索所需图标元件（AxureRP提供的图标元件非常多），如搜索“上传”图标元件。四、导入外部元件在AxureRP中，用户除了可以使用系统自带的3个元件库添加元件，还可以从外部导入并使用更多元件。四、导入外部元件外部导入方法在“元件库”面板中单击“添加元件库”按钮

，在打开的“打开”对话框中选择元件库文件（.rplib）后单击“打开”按钮即可。双击保存在本地的元件库文件，弹出“添加元件库”对话框），在其中单击“确定”按钮，即可将元件库文件导入AxureRP的“元件库”面板。在“元件库”面板中单击“添加图片文件夹”按钮

，在打开的对话框中选择文件夹后单击“选择文件夹”按钮，可将文件夹中的图片添加到“元件库”面板中作为元件使用。单击该按钮会在AxureRP中打开当前元件库文件单击该按钮会取消导入元件库操作四、导入外部元件“元件库”面板的其他功能：获取：在“元件库”面板中单击“选项”按钮，在打开的列表中选择“获取元件库”选项，可在打开的网页中选择并下载元件库文件。编辑：选择“编辑元件库”选项，可在打开的元件库文件中编辑元件。删除：选择“移除元件库”选项，可删除当前元件库。若导入的图片为SVG格式，使用对应的元件时，右击画布上的元件，在弹出的快捷菜单中选择“变换图片”/“转换SVG图片为形状”选项，可将该图片元件转换为形状元件，进而方便对其进行编辑。知

识

库你知道该如何将图片元件转换为形状元件吗？五、自定义元件1．新建和保存元件库文件选择“文件”/“新建元件库”选项可新建元件库文件可添加、重命名和删除元件等“页面”面板会变为“元件”面板新建元件库文件在该元件库文件中绘制所需元件，绘制完成后保存元件库文件在AxureRP中导入保存的元件库文件，即可在不同文件中使用自定义的元件将元件库文件导入“元件库”面板后，对应元件库中元件的数量和名称取决于元件库文件中“元件”面板中元件的数量和名称。提

示在画布上绘制完元件，保存元件库文件选择“文件”/“保存”选项，在打开的“另存为”对话框中设置相关参数并单击“保存”按钮

五、自定义元件2．绘制元件在绘制元件时，除了可以使用元件库中的已有元件，还可以使用基本工具栏“插入”下拉列表中的工具。在“插入”下拉列表中选择矩形、圆形或某一形状工具后，在画布上按下鼠标左键并拖动，可绘制相应形状。若在拖动时按住“Shift”键，可等比例绘制形状。添加文本在“插入”下拉列表中选择文本工具

后，在画布上单击并输入文本在画布上按下鼠标左键并拖动以绘制文本框并输入文本编辑现有文本在文本上双击，进入文本编辑模式进行修改。多次单击添加多个锚点，可绘制其他形状。结束开放路径的绘制在绘制最后一个锚点时双击或按“Esc”键。闭合路径将鼠标指针移到第1个锚点上，当鼠标指针呈

形状时单击。按住“Shift”键的同时移动鼠标并单击，可在45°倍数的方向添加锚点。选择“插入”下拉列表中的绘画工具

，并在画布上单击添加第1个锚点。0102在其他位置单击添加第2个锚点绘制直线路径在其他位置按下鼠标左键并拖动（此时锚点会出现两个手柄）绘制曲线路径五、自定义元件2．绘制元件锚点手柄02绘制任意形状五、自定义元件2．绘制元件用户也可通过按相应快捷键调用上述工具来快速绘制元件，前提是要在“偏好设置”对话框的“画布”选项卡中勾选“启用单键快捷键”复选框。小

技

巧你知道如何采用快捷键绘制元件吗？任务实施——绘制商城类App状态栏和标签栏单击此处播放微课绘制商城类App状态栏通过绘制商城类App状态栏和标签栏，带领读者进一步练习不同元件的使用方法，以及导入外部元件和自定义元件的方法。步骤1绘制状态栏背景。步骤2绘制时间标签。步骤3

绘制“信号”图标。1．绘制商城类App状态栏任务实施——绘制商城类App状态栏和标签栏步骤4参照上述方法再复制两个矩形，并设置它们的尺寸分别为3×11和3×14。选中刚绘制的4个矩形，首先单击基本工具栏中的“底部对齐”按钮

使它们底对齐；然后按“Ctrl+G”组合键编组，并在“概要”面板中单击元件组名称输入“信号图标”；最后按“Enter”键为元件组重命名。步骤5按住“Shift”键的同时依次选中时间标签和“信号”图标，单击“中部对齐”按钮

，使“信号”图标在水平方向上与时间标签中心对齐，最后调整“信号”图标在水平方向上的位置。任务实施——绘制商城类App状态栏和标签栏步骤6在“元件库”面板的搜索框中输入“Wifi”（搜索范围需设置为“全部元件库”），查找该元件并将其拖到画布上，设置其尺寸为19×14，并使其与“信号”图标间距为5且在水平方向上中心对齐。在“概要”面板中将该元件重命名为“Wi-Fi图标”。参照“Wi-Fi”图标的绘制方法绘制“电量”图标（尺寸为23×12）。步骤7选中绘制的所有元件并编组，在“概要”面板中将组重命名为“状态栏”。至此，状态栏元件就绘制完成了。按“Ctrl+S”组合键，在打开的“另存为”对话框中设置文件名为“状态栏”并设置保存路径，最后单击“保存”按钮保存元件库文件。任务实施——绘制商城类App状态栏和标签栏步骤8新建文件，在“元件库”面板中单击“添加元件库”按钮

，在打开的“打开”对话框中选择刚才保存的元件库文件并单击“打开”按钮，将绘制的状态栏元件添加到“元件库”面板中。添加到“元件库”面板中的元件，可通过直接拖动操作应用到页面中。任务实施——绘制商城类App状态栏和标签栏单击此处播放微课绘制商城类App标签栏步骤1打开在项目一任务三中制作的“商城类App架构图.rp”文件，在“页面”面板中双击“首页”页面将其打开。在“样式