元件怎么玩儿？--Axure自学--学会20%的功能，满足80%的日常使用（2）

2 元件

元件是组成原型的一部分，并且是最重要的一部分。
我主要介绍自带的元件库以及阿里巴巴的Iconfont矢量库的使用。
希望你也已经安装好了Axure RP 9了。

2.1 元件的作用

元件有啥作用？它就是用来表达原型内容的主要元素。
我做了一个十分简易的弹出框原型可以直观地进行理解：

在右侧的 「OUTLINE」 中，Page1下的多个元件（都是从元件库中拖拽出来的），分别为：

1. 打扰了按钮–矩形
2. 确认按钮–矩形
3. 文件夹「弹出框文字内容」–文字第一行、文字第二行、文字第三行–文字
4. 关闭–形状
5. 弹出框标题–矩形
6. 弹出框-边框–矩形
   他们组成了右侧画布中所展示的弹框界面，俗话说就是它的长相。原型还有另一个更好理解的名字，叫做线框图，也就是由多众线条/形状组合而成的图形。
   当然，以上都是我给元件命名、按类别进行组合后所展示的结果， 就像我上一篇中1.4 一些你需要记住的好习惯所提到的，要给你的元件命名，并且善用组合；后期做交互的时候你会感谢这个操作！ 。

2.2 元件在哪儿

2.2.1 自带的元件库

上一篇文章(自学Axure–学会20%的功能，满足80%的日常使用（1）)有提到过，
软件自带的元件库可以在界面左下方 「library」 中找到，分为三类：

1. 默认 Defalut
2. 流程图 FLow
3. 图标 Icons
   

网络上也有许多元件库可供下载，但是学习前期的话暂不需要话太多时间去寻找其他有特殊用途的元件库，默认的已经足够使用。

2.2.2 Iconfont

阿里巴巴的Iconfont可以点击 这里 进行跳转。

2.3 元件怎么玩

2.3.1 Iconfont怎么玩？

这里有大量的矢量图标可供挑选，那么怎么将他们应用到原型设计中呢？

Step1：搜索一个音量的小图标

STEP2：点击一个你心仪的音量小图标

弹出的图标界面中，可以进行：

1. 调整图标颜色：提供颜色调整，可以直接使用hex code调色
2. 调整图标大小：提供图标大小调整（16、32、48、64、128）
3. 下载图标：提供多格式的图标下载

• SVG：可缩放的矢量图形
• AI：类似PSD的分层文件格式
• PNG：便携式网络图形

4. 复制图标：提供SVG代码复制

STEP3：复制SVG
当然，你也可以调整颜色、调整大小再复制，但是我一般不这么做，因为放到原型中通过Axure也是可以进行调整的。

STEP4：粘贴到画布中

把小喇叭放到画布中后，左侧OUTLINE中最顶部就多了一个小喇叭的元件标签，此时该元件只能调整大小，而不能调整颜色（右下角红色圆圈处，调整填充色的地方是灰色的）

STEP5：拖动顶点，调整成合适的大小

STEP6：将SVG转化成形状（shapes），调整小喇叭的颜色

将SVG转化成shapes后，左侧OUTLINE中的小喇叭元件不再是SVG，而是变成一个组合后的GROUP文件夹，里面有两个元件组成。右侧的填充颜色按钮也可用了。 里面的shape是可以分别改变颜色的。

STEP7：养成好习惯，给小喇叭取个名字！ 「我是音量」

2.3.2 自带元件库怎么玩？

部分自带元件有自己的特有属性，可以进行一些特定的交互。就像玩游戏时的不同角色，有不同的技能。
自带元件库分了三类，我主要是介绍使用的最多的第一类默认元件–Defalut。具有特有属性的元件也都集中在默认元件中。

2.3.1.1 修改样式

还是以这个小弹窗为例，我将它拆解出来，一共由三类元件组成：

1. 矩形
2. 文本
3. Icon（小喇叭是Iconfont中复制来的，叉×是从第三类Icons中拖入画布的
   

首先以 「文本」 元件为入手，对 「STYLE」 的操作界面进行介绍。其他元件的 「STYLE」 操作界面都是一样的。
「文本」 和平时使用的文本差不多，是带有文本格式的元件，虽然自带元件库中有这几个元件可供选择，但是他们之间是可以通过 「STYLE」 进行调整的，自带的元件就是提供了一套标准的字体大小来供使用者使用，也就是类似Word工具栏上的样式推荐一样。
将元件拖入画布中，双击元件便可进行文本编辑了。

Word里的样式功能：

编辑好文本后，可以对文本元件进行样式修改，操作界面在右侧的 「STYLE」 窗口：

一些常规性的操作就不多做介绍，在这里介绍一下边框、圆角、和填充的效果：

1. 边框(BORDER)：
   首先，需要展示边框，它的粗细参数(THICKNESS)一定要大于零，面板上还提供了边框的颜色、类型（实线虚线等）的选择。特别说一下 「可见性visiblility」 ， 点击后会出现边框的上、下、左、右的线条示意，单击线条，线条便会消失，那么元件对应的边框位置便会不可见。
   
2. 圆角(CORNER)：
   关于圆角，是用来柔和元件边框的四个角的。当参数为0的时候，四个角的角度为直角，数字越大，角度越柔和。
   另外，圆角的可见性也和边框的可见性一样，当你单击一个角，会使那个角的圆角属性失效，恢复成直角。
   
3. 填充(PADDING)：
   填充调整的是文本与边框之间的距离。参数越大，距离越远。
   
4. 编辑顶点：
   编辑顶点是可以修改边框的形状的，通过单击的方式可以在边框上面添加顶点，通过拖动顶点的方式，可以改变边框的形状。
   
   Step1：通过单击新增顶点
   
   Step2：拖动顶点，以达到自己想要的形状
   

2.3.1.2 小交互：点击-隐藏

弹窗出现，需要给予的动作有点击“确认”、“取消”、“关闭”，界面给予的反馈一般是将这个弹窗关闭。那么我们在设计交互的时候，第一是选择点击动作的对象是谁，第二是选择点击后效果实现的对象是谁。
Step1：首先把组成弹窗的几个元件组合起来，并命名
选中目标元件，点击顶部菜单栏的GROUP按钮（或者CTRL+G/CMD+ALT+G），这一步的目的是组合出点击后效果实现的对象。

Step2：选择点击动作的对象
此处演示的是关闭动作，所以我选择了弹窗右上角的叉×。

1. 单击叉 × 元件，同时将右侧面板切换到 「交互Interactions」
2. 点击新建交互 「New Interaction」

Step3：选择交互事件–单击
单击新建交互 「New Interaction」 后，会出现一个下拉列表，分为 「EVENTS」 和 「STYLE EFFECTS」 。
「EVENTS」 便是确定触发交互的事件，有单击、双击、鼠标移入移出等；
**「STYLE EFFECTS」**便是确定该元件触发了某项交互事件后，带来的样式变化。

在这个例子里，我们想要实现的效果是：

1. 单击右上角的 ×，
2. 实现 「灵魂的质问弹窗」 的关闭效果。
   所以右上角 「EVENTS」 事件，则选择 OnClick。

Step4：选择交互动作–显示/隐藏
选择了 OnClick 后，会继续有一个选择列表弹出来，这个选择列表是 「添加动作」 列表。这里的动作，就是为了实现窗口关闭效果。
仔细想想，一个窗口关闭了，其实相当于用户看不见它了。那么 **「关闭」**这个 动作 就可以通过 「显示/隐藏;show/hide」 来实现。

Step5：选择动作的对象-- 灵魂的质问弹窗
最后一步就是选择实现step4动作的目标对象，在这里就是指 「灵魂的质问弹窗」 这个窗口了。由于我们step1时就将涉及到窗口的元件组合成一个整体（文件夹的形式展示着），所以在这一步选择对象时，就选中整个代表着 「灵魂的质问弹窗」 的文件夹即可。否则，就需要将所有元件一个一个分别添加进目标对象里，这是件麻烦事，后期交互多了还容易出错，所以要记住 「善用组合」 。

Step6：完成。预览后点击 ×，看一下关闭效果吧
预览链接：灵魂的质问弹窗
密码：liucong

---

下一期内容：热区、动态面板？这都是些啥？