3.2 元件的使用

元件库中那些元件，都是干什么用的？

这就说来话长了！元件库中的元件有好几种类型，我给你一一介绍吧！

3.2.1 使用软件自带元件库

在Axure RP 8.0中，软件自带了3个元件库，分别是默认元件库、流程图元件库和图标元件库。下面按照次要到重要的顺序来介绍这3个元件库。

1.图标元件库（Icons）

图标元件库是Axure团队基于FontAwesome图标字体中的各种图标制作发布的形状元件，直接拖曳到编辑区即可使用，无须安装FontAwesome字体文件（图3-5）。

2.流程图元件库（Flow）

流程图元件库包含的是各种流程图的形状，通过这些形状可以构建流程图（图3-6）。

流程图形状的含义如表3-1所示。

流程图在使用时，各个形状之间的连线需要在快捷功能中选择【连接】，通过这个连线工具绘制形状间的连接线（图3-7）。

在选择【连接】开启连线工具之后，将鼠标指针指向形状的连接点，单击并拖动到另一形状的连接点松开，即可完成连接。另外，选中或者双击某个连接线还可以为线段输入文字（图3-8）。

连接线可以改变线段与两端箭头的样式，这个操作在快捷功能中也可以实现（图3-9）。

3.默认元件库（Default）

默认元件库中包含3种类型的常用的元件。

● 基本元件

基本元件是搭建页面内容的形状、图片、线段、热区及容器元件（图3-10）。

形状：形状元件包括各种矩形、形状按钮和文本，常用于页面中的一些背景形状、文字标题与按钮。图3-10中的第1、2行元件除了图片都是形状元件。这些元件可以通过改变属性与样式进行互相转换。如果需要编辑这些元件上的文字，双击这些元件即可进入编辑状态，如果只是添加文字，也可以选中该元件直接输入文字。

图片：图片元件一般用于为页面添加各种图片或图标，双击该元件即可导入默认显示的图片。如果需要为图片元件添加文字，可以选中该元件并直接输入文字。修改已有的文字可以在元件上单击鼠标右键，在弹出的快捷菜单中选择【编辑文本】命令，即可进入编辑状态。

线段：线段包括水平线和垂直线，常用于页面中的一些分隔线。这两个元件可以通过改变角度互相替代。另外，线段与形状也可相互转换。

热区：热区是一个透明元件，最常用的是它透明的特性，例如，在一张图片中的两个位置上添加单击的交互，就可以在这两个位置上放置两个热区，然后为热区添加单击的交互。

动态面板：动态面板是容器类元件，在之后将有详细的说明。

内联框架：内联框架容器类元件，简称框架，可以在页面的某个区域嵌入项目中的其他页面或某个URL指向的网页，还可以嵌入一些多媒体文件，如MP3、AVI、SWF等文件。

中继器：中继器是容器类元件，在之后将有详细的说明。

基本元件使用非常广泛，常见的页面基本上都可以用这些元件完成搭建。

● 表单元件

表单元件是用来获取用户输入的元件。在前端开发中，通过此类元件可以制作各类表单，并通过提交按钮，将用户输入的内容提交至服务器（图3-11）。

文本框：单行文本框和多行文本框用于获取用户输入的文字。

列表框：下拉列表框和列表框用于获取用户选择的选项。元件默认的选项可通过双击元件，在弹出的窗口中进行设置。

单选按钮：具有选中与未选中两种状态。一般在使用时会有多个单选按钮，并属于互斥关系，只允许用户选择其一。

复选框：具有选中与未选中两种状态。可单独使用，也可多个一起使用，一般表示用户可自由选择或者取消选择。

提交按钮：在编程开发中，该元件被单击时，能够将用户填写完成的表单数据提交到服务器。但是，在原型制作中不涉及与服务器的交互，所以显得多余，特别是它的样式不能调整且只有几种简单的交互触发，所以，一般都用基本元件中的形状按钮或图片按钮来代替它。

● 菜单与表格元件

菜单与表格元件在搭建对样式无要求或要求较低的线框图时，使用起来比较方便（图3-12）。

树状菜单：垂直方向的菜单，节点可以展开与折叠。

表格：可以添加行与列，但不可合并多个单元格。

水平菜单与垂直菜单：可以添加菜单项和子菜单项。

菜单与表格元件的常用操作，如添加删除行、节点或菜单项等，可以在节点、单元格或者菜单项上单击鼠标右键，在弹出的快捷菜单中完成。

● 标记元件

标记元件主要用来进行功能标注或者展现界面业务流程（图3-13）。

页面快照：能够指向项目中的某个页面，呈现该页面的缩略图。

除页面快照之外的元件都是形状或线段元件，这些元件均可使用基本元件通过改变样式制作出来。

老师，我大概对这些元件有了些印象，但是怎么通过这些元件搭建页面还是没有什么概念。

好吧！我来找个页面，指出里面都能用哪些元件来完成页面的构建，给你参考（图3-14）。

老师，为什么两个矩形并排放一起中间是粗线啊？

这与元件的边框对齐设置有关系。

如果发现并排的形状或图片元件之间的边框比较粗，可以在导航菜单【项目】的选项列表中选择【项目设置】，在弹出的窗口中将{边框对齐方式}设置为【边框重合】（图3-15）。

3.2.2 使用自定义元件库

老师，我想问问你怎么用别的元件库。

点这里，想用哪个选哪个（图3-16）！

老师，这个我会！ 我是想问问你怎么用别的元件库，比如你网站上分享的那些。对了，就像你截图中后一个元件库，是怎么弄到软件的元件库列表中的？

这个只需要载入即可。

如果需要使用其他元件库，可以在元件库面板中单击功能列表按钮，在打开的列表中选择【载入元件库】命令（图3-17）。