3.1 常用基础元件

Axure RP 提供了很多基础元件，其中，矩形元件、占位符元件、图片元件、按钮元件、文本标签元件和热区元件等，都是非常简单也是使用非常广泛的元件。本节对这些常用基础元件进行详细讲解。

1.矩形元件

矩形元件是原型设计中最基础的一个元件，矩形元件一般用于表示一整块区域。在Axure RP 8中的“元件库”面板将三种元件拖到“页面设计”面板，如图3-1所示。

在Axure RP 8中，矩形元件并不只是用来表示矩形的，在“页面设计”面板区域加入矩形元件后，可以选中该元件，单击右上角的灰色小圆球，可将其转换为别的形状。例如选择图 3-1 中的左侧矩形元件，之后单击左上角的灰色小圆球，可选择将长方形切换为圆形、心型、箭头、星星型、三角形等形状，也可以转换为自定义形状，如图3-2所示。

可通过“检视”面板设置矩形元件的如下信息。

1）元件名称：在面板顶部设置。

2）元件属性：可在“检视”面板的“属性”选项卡设置事件（鼠标单击时、鼠标移入时、鼠标移出时等）、文本链接、形状、交互样式（鼠标悬停时样式、鼠标按下时样式、选中时样式、禁用时样式）、元件提示和选项组名称等。

3）元件样式：可在“检视”面板的“样式”选项卡设置矩形元件的 X 轴坐标、Y 轴坐标、宽度、高度、圆角角度、自动适合文本宽度、自动适合文本高度、填充颜色、边框颜色和字体等样式信息。

4）元件说明：可在“检视”面板的“说明”选项卡设置元件的说明信息。

2.图片元件

在Axure RP 8中，能导入任意尺寸的JPG、GIF和PNG图片，并且Axure RP软件还提供切图功能，能对大图片进行切图。

在“元件库”面板选择图片元件拖动到“页面设计”面板后，双击“页面设计”面板的图片元件图标，打开图片选择对话框，选择某个图片后单击“打开”按钮，对于较大的图片，会有如图3-3所示的提示图片是否优化的对话框。

在图 3-3 中选择“是”按钮后将对图片进行压缩优化，并在“页面设计”面板缩放图片大小。如果是 GIF 图片，不要选择优化图片，优化后将变成静态图片。

可通过“检视”面板设置图片元件的如下信息。

1）元件名称：在面板顶部设置。

2）元件属性：与矩形元件类似，不同之处在于可在这里设置图片元件的导入图片，或清空图片信息。

3）元件样式：与矩形元件类似。

4）元件说明：可通过“说明”选项卡设置。

可在“检视”面板设置图片的大小，也可直接在“页面设计”面板选择某个图片元件后，将鼠标移动到图形元件的 8 个小方块某一个，调整图片的宽度和高度。如果想宽度和高度等比缩小，可将鼠标移动到左上角、右上角、左下角或右下角的 4 个小方块，当鼠标改变形状时，在拖动时同时按住〈Shift〉键进行等比缩小操作。进行等比缩小时，所选择的点的对角位置保持不变。

3.占位符元件

占位符元件一般用在低保真线框图设计时。如果暂时没想好放置什么元件，或者图片区域暂时没有设计好图片时，使用占位符元件占位。可以对占位符元件的大小、位置等信息进行调整。事件、属性和样式设置与矩形元件无异。可以从“元件库”面板按住鼠标拖动一个占位符元件到“页面设计”面板，占位符元件如图3-4所示。

通过“检视”面板设置的占位符元件的信息与矩形元件类似，在此不再赘述。

4.按钮元件

按钮元件与矩形元件类似，不过默认带有圆角和文本。在Axure RP 8的“元件库”面板中，有 3 个按钮元件，分别为：（按钮元件）、（主要按钮元件）和（链接按钮元件）。将按钮元件、主要按钮元件和链接按钮元件从左往右拖动到“页面设计”面板后，如图3-5所示。

按钮元件的“检视”面板与矩形元件类似，也不再赘述。

5.一级/二级/三级标题元件

拖动“元件库”面板的一级标题元件、二级标题元件和三级标题元件到“页面设计”面板后，双击相应标题元件可设置该元件的文本内容，如图3-6所示。

6.文本标签元件

在“元件库”面板拖动文本标签元件到“页面设计”面板后，双击可设置文本标签元件的文字内容。图3-7所示为文本标签元件默认字体、颜色和字号。

一般需要设置文本标签元件字号、字体颜色、字体、加粗、斜体和下划线等信息，可在“检视”面板的“样式”选项卡进行设置，也可在工具栏进行设置，该部分工具栏如图 3-8所示。

7.文本段落元件

在“元件库”面板拖动文本段落元件到“页面设计”面板后，双击可设置文本段落元件的文字内容。如图 3-9 所示，文本段落元件更改了默认文字，使用的是默认字体、颜色和字号。

8.水平线/垂直线元件

水平线元件用于绘制水平线，常用来做上下分隔线，如页头、内容区域和页尾。可设置线条颜色、粗细、宽度和坐标等信息。

垂直线元件用于绘制垂直线，常用来做纵向的分隔线，如左侧、内容区域和右侧的分栏，可设置线条颜色、粗细、高度和坐标等信息。

在“元件库”面板拖动一个水平线元件和垂直线元件到“页面设计”面板，效果如图3-10所示。

9.热区元件

可在页面任何一个区域，也可在某个元件上方放置一到多个热区元件，如可在文本标签元件、按钮元件、矩形元件、图片元件等的某个区域上方添加热区元件。热区元件在“页面设计”面板呈淡黄色，但是在实际页面中并不显示，主要用于设置交互事件。例如在图片上的4个角设置了4个热区元件，如图3-11所示。

选中某个热区元件后，可在右侧“检视”面板的“属性”选项卡设置该元件的鼠标单击时、鼠标移入时、鼠标移出时、鼠标双击时、尺寸改变时、显示时和隐藏时等交互事件，来实现相对复杂的产品原型设计效果。