元件怎么玩儿？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文件夹，里面有两个元件组成。右侧的填充颜色按钮也可用了。