2.2 基本元件

基本元件，顾名思义是组成界面原型的基础元素。在Default元件库中，基本元件包括矩形、按钮、标题、文本、占位符、水平线、垂直线、图片和热区。

2.2.1 矩形类

把矩形、按钮、标题、文本标签和文本段落分别拖入设计区域，在概要面板中可以看到，每个元件后面括号里的类型都是“矩形”，如图2-16所示，这就说明这些元件本质上都是矩形，在属性和样式上有相同或相似的地方，笔者把它们都归为“矩形类”。

图2-16

矩形类中的元件通常用来做页面的布局，通过修改形状、背景颜色和填充内容等样式，用来表现页面不同区域的用途、层次和重要性。

1.矩形类元件基本介绍

矩形

Axure RP8.0中有3个默认样式不同的矩形，分别为矩形1 、矩形2和矩形3，如图2-17所示。其中，矩形1是带边框矩形，矩形2和矩形3为无边框矩形且填充颜色为不同深度的灰色，双击可设置矩形的文本内容。这3个不同样式的矩形，正好符合1.2.1节中提到的“按照元素的级别梯度使用不同深度的灰色来制作低保真原型”的原则。

图2-17

另外，Axure RP8.0中还有一个椭圆形元件，它在属性、样式选项上和矩形基本是相同的，此处不再赘述。

按钮

Axure RP8.0中有3个默认样式不同的按钮，分别为按钮、主要按钮和链接按钮，如图2-18所示，按钮中默认填充BUTTON文本，双击可修改文本。“按钮”带边框且填充颜色为白色，“主要按钮”无边框且填充颜色为蓝色。当原型中以“按钮组”的形式出现时，如确认、取消、保存、返回，主要按钮的颜色一般会稍亮一些。链接按钮无边框、无填充颜色，且文本颜色为蓝色，因为带颜色的文本一般认为是可以单击的。

图2-18

标题、文本标签、文本段落

Axure RP8.0中提供了3个级别的标题，分别为一级标题、二级标题和三级标题，如图2-19所示，它们的文本字体大小不同，其他样式均相同，双击可修改。文本标签和文本段落（见图2-20）的区别在于，文本标签为单行文本，文本段落为多行文本（自动换行）默认字体大小也不同。

图2-19

图2-20

2.管理元件样式

可以根据实际需要修改各元件的默认样式，例如，当UI效果图出来后，可以直接把主要按钮的颜色修改为效果图上的颜色，这样所有主要按钮的样式都会自动更新，省去了单独修改每一个按钮的麻烦；还可以创建新的元件样式以供快速调用，例如，商品管理页面的新增按钮、删除按钮、返回按钮的默认样式和交互样式应该有所区别，通过创建不同的按钮样式来快速设置。学过网页开发的读者不难发现，此功能和CSS中的类有些相似。

应用方法1

（1）执行菜单中的【项目>元件样式编辑】命令，如图2-21所示，打开元件样式管理器。

图2-21

（2）在元件样式管理器中，修改已有样式，如图2-22所示。

①选择左侧的样式名称。

②修改右侧的项目。

图2-22

（3）在元件样式管理器中，创建新样式，如图2-23所示。

①为了不打乱已有样式的顺序，选中最后一个样式名称，单击加号。

②命名新样式，然后设置右侧的项目。

图2-23

（4）选中需要应用样式的元件，选择样式面板中的样式名称，即可成功应用样式，如图2-24所示。

图2-24

应用方法2

（1）在设计区域设置好样式，然后在样式面板中单击“更新”，如图2-25所示，该样式被更新，但已经拖入设计区域的元件样式不会变更。

图2-25

（2）在设计区域设置好样式，单击“创建”，如图2-26所示，打开元件样式管理器，命名后单击“保存”按钮，无须再次设置右侧的项目，即可创建新样式。

图2-26

（3）选中需要应用样式的元件，选择样式面板中的样式名称，即可成功应用样式。

3.矩形类元件共通样式

既然上述元件都被归为了“矩形类”，那么它们可以设置的样式项目应该是相同的，如图2-27所示。

图2-27

位置·尺寸：可以设置x轴坐标和y轴坐标、宽度和高度、元件角度和文本角度、水平翻转和垂直翻转、自动适合文本宽度和自动适合文本高度。除了在样式面板中修改上述参数外，在设计区域拖动元件可以直接改变元件的位置；拖曳元件四周和四角的定位点可以直接改变元件的尺寸，按住Shift键同时拖动鼠标可以按照原比例改变尺寸；双击元件四周和四角的定位点，可以让元件的尺寸修改为“自动适合文本宽度/高度”或高度与宽度同时自适应文本内容。

改变元件的默认样式：快速修改该元件的样式，与Word中的“快速样式”类似。选项中默认为基本元件的若干个样式，可以更新已有样式或创建新样式。

填充颜色：可以设置为纯色填充或渐变填充。

阴影：可以设置外部阴影和内部阴影。

边框：可以设置边框的粗细、颜色、线段类型和可见性。

圆角半径：可以分别设置四角的圆角半径。

字体：设置常规的字体样式。

行间距：设置元件内文本内容的行间距。

项目符号：设置元件内文本换行时是否显示项目符号。

对齐：设置元件内文本在水平和垂直方向的对齐方式。

填充：设置元件内文本距离元件四周各边框的距离。

上述元件都是以矩形为基础而制作出来的。按钮就是改变了矩形的默认大小、边框和填充颜色，默认显示BUTTON文字的矩形；标题、文本标签、文本段落就是取消了矩形边框和填充颜色、默认显示文本且自适应文本高度和宽度的矩形。

4.矩形类元件属性

交互：设置元件交互动作。不同的元件有不同的事件，如“鼠标单击时”“选中时”等，在制作交互案例时再具体讲解，如图2-28所示。

图2-28

文本链接：双击元件选中文本时，该属性被激活，可以为元件中的文本添加超链接，而且自动设置了文本的鼠标悬浮和鼠标按下时的文本样式。

形状：修改元件的形状，有若干种形状备选，也可以转换为自定义形状。

交互样式设置：可以设置鼠标悬停时、鼠标按下时、选中和禁用状态下元件的样式。

引用页面：设置后，该元件的文本内容修改为引用页面的名称，且单击该元件可以跳转至引用页面。

禁用：勾选后该元件将无法与用户做任何交互。

选中：勾选后该元件处于选中状态，常用于配合其他交互事件动态改变元件的样式。

设置选项组名称：当若干元件设置为同一选项组时，该选项组内的元件在同一时刻只能有一个被选中。

元件提示：用于设置鼠标悬浮时提示的文字。

2.2.2 占位符

占位符可以用来替代一些暂时无须做详细设计的区域，这些区域一般没有交互动作或只有一些基础的、常规的交互动作，比较容易说明区域内要放置的内容，如图2-29所示。当然也可以使用普通的矩形，但可能从视觉上感觉“占位”的效果不是很明显。如果把占位符设置成长宽相等，很像“×”，可以充当“关闭”按钮。另外，既然占位符起到的是临时替代的作用，那么它就应该仅出现在低保真原型中；在高保真原型中，占位符的作用就很有限了。

图2-29

1.应用场景

场景1

诸如Logo、广告位和轮播图等只是图片的区域，可以使用占位符临时替代。

场景2

若页面中的部分区域已经明确了内容是什么，但暂时无须做具体的布局，可以先使用占位符替代。

如教育类产品Web端的课程详情页面，在这个页面中可能关注的第一个业务流程是用户查看课程介绍并完成购买的过程，除此之外，页面中还会有相关课程推荐、相关套餐推荐等内容来引导用户获取更多感兴趣的信息。那么在设计第一个业务流程的页面时，其他内容就可以暂时无须关注细节，先使用占位符替代。

场景3

在多人协作时，若在页面中必须放置一些内容，只是还没有进行设计，此时可以使用占位符，提醒团队中的其他成员不要在这个位置设计其他内容，若其他成员也有一些设计想法，那么可以进行线下交流讨论。

2.占位符样式

占位符不能设置圆角半径，不能设置边框可见性，其他的项目和矩形相同，不再赘述。

3.占位符属性

占位符的属性和矩形相同，不再赘述。

2.2.3 水平线和垂直线

水平线和垂直线一般只作为基本的图形来使用，可以用来分隔页面的不同区域、制作不同类型的箭头等，也可以通过改变线段的粗细程度和颜色来制作一些比较有质感的效果，如图2-30所示。

图2-30

下面制作一个有渐变颜色的线段，效果如图2-31所示。

图2-31

（1）拖入一个水平线元件至设计区域，修改线宽为最粗，如图2-32所示。

图2-32

（2）设置线段颜色，如图2-33所示。

①选择填充类型为“渐变”。

②单击第一个颜色滑块，设置颜色为#3399FF。

③在第一个颜色滑块的右侧单击鼠标，增加一个颜色滑块，设置颜色为#00FFFF，并拖动至中间位置。

④单击最右侧的颜色滑块，设置第3种颜色为#00FF99。

⑤设置渐变角度为0。

图2-33

（3）设置完成后，按F5键在浏览器中预览效果，如图2-34所示。

图2-34

2.2.4 图片

通过图片元件可以把外部的图片导入原型中。此方法通常在制作高保真原型时使用得比较多，如图2-35所示。

图2-35

1.导入图片

拖入一个图片元件至设计区域，双击该元件可以导入外部图片，也可在右侧的属性面板中单击“导入”按钮，如图2-36所示。若导入的图片过大，会询问是否进行优化，如图2-37所示。若单击“是”按钮，Axure会适当压缩图片；若单击“否”按钮，则以原图大小导入。

图2-36

图2-37

2.调整图片大小

拖曳图片四周和四角的定位点，可以改变图片大小，按住Shift键同时拖曳可按原比例缩放，双击任何一个定位点可以恢复至原来的大小，如图2-38所示。

图2-38

3.切割图片

选中图片，在样式面板中单击“切割”按钮，如图2-39所示，也可以在图片上单击右键并选择【切割图片】命令，在图片中想要切割的位置单击，原来的图片便被切割成4份，如图2-40所示。

图2-39

图2-40

4.裁剪图片

选中图片，在样式面板中单击“裁剪”按钮，如图2-41所示，也可以在图片上单击右键并选择【裁剪图片】命令，然后拖动图像内部的定位点设置要裁剪的区域。

图2-41

（1）单击设计区域右上角的“裁剪”按钮，图片会保留所选区域，如图2-42所示。

图2-42

（2）单击设计区域右上角的“剪切”按钮，图片保留所选区域以外的部分，如图2-43所示。

图2-43

5.转换为图片

在制作低保真原型时，一般会使用占位符、矩形或按钮代替图片，那么在逐渐完善为高保真原型时，如果把这些元件删掉替换成图片，还要调整其位置尺寸，是非常麻烦的。可以在非图片元件上单击右键，选择【转换为图片】命令，如图2-44所示，然后双击这些元件就可直接导入外部图片了，并且可以维持之前的元件大小。

图2-44

2.2.5 热区

可以把热区理解成一种特殊的透明矩形，它在设计区域中有一层浅绿色的遮罩，如图2-45所示，但在浏览器中是透明的。热区同样可以添加交互动作，实现一些常规元件难以实现的效果。

图2-45

场景1

只想给一张大图的部分区域添加交互动作时，可以把热区覆盖到图片上，如图2-46所示，然后调整尺寸至添加交互的范围，给热区添加交互动作。

图2-46

场景2

想扩大元件的可交互范围时，可以应用热区。例如，移动App界面中有些图标的视觉范围是比较小的，但为了提升用户体验，单击图标周围一定范围内的区域时应该都可以触发交互动作，此时就可以把热区覆盖到图标上，如图2-47所示，然后调整尺寸至合理的范围，给热区添加交互动作。

图2-47

2.2.6 案例：修改按钮的交互样式

案例描述

自定义按钮样式，鼠标悬浮至按钮上时改变样式，如图2-48所示。

图2-48

案例难度：★☆☆☆☆

案例技术

元件样式管理、交互样式设置。

制作步骤

首先准备元件——两个主要按钮，如图2-49所示。

图2-49

（1）拖入两个“主要按钮”至设计区域，把文字分别修改为“确认”和“取消”。

（2）尺寸分别设置为55像素×35像素。目前这两个按钮应用的样式名称均为Primary Button。

然后设置两个按钮的默认样式。不直接在按钮的样式面板中修改，而是在元件样式管理器中添加可以复用的样式，目前还没有做其他操作，“确认”和“取消”按钮的样式名称均为Primary Button，目的是将这两个按钮应用为不同的样式。

（1）修改“确认”按钮的样式，如图2-50所示。

①把“确认”按钮的填充颜色改为#22C27C。

②单击样式面板中的“更新”按钮，修改“确认”按钮的样式。

图2-50

（2）创建“取消”按钮的样式，如图2-51所示。

①把“取消”按钮的填充颜色改为#CCCCCC。

②单击样式面板中的“创建”按钮。

③在元件样式管理器中，将该按钮命名为Default Button。

图2-51

接着设置两个按钮的鼠标悬浮样式，同样在元件样式管理器中添加可以复用的样式。

（1）设置“确认”按钮的鼠标悬浮样式，如图2-52所示。

①执行菜单栏中的【项目>元件样式编辑】命令，打开元件样式管理器。

②单击加号。

③命名为Primary Button Hover。

④设置填充颜色为#3A995D。

图2-52

（2）用同样的方法添加一个新的样式作为“取消”按钮的鼠标悬浮样式，样式名称为Default Button Hover，填充颜色为#999999。

最后设置两个按钮的交互样式。

（1）设置“确认”按钮的交互样式，如图2-53所示。

①选中“确认”按钮，单击“交互样式设置”下的“鼠标悬停”，打开交互样式设置管理器。

②勾选“元件样式”，选择Primary Button Hover。

图2-53

（2）用同样的方法设置“取消”按钮的交互样式，选择Default Button Hover。

（3）设置“完成”后，按F5键在浏览器中预览效果。