接着上一篇继续讲解产品经理基础教程之Axure RP 9 基础操作部分，本篇主要讲解如何使用第三方元件库，布局排布相关功能的使用，举例说明如何绘制草图，页面样式如何进行调整等内容。

(四)其它元件库

在网上有很多第三方元件库共享，我们可以下载使用。

元件库的文件名后缀为“.rplib”，可以通过元件功能面板的“+”按钮进行选择添加。

也可以直接双击元件库文件进行添加，添加完成的元件库，就能够像自带元件库一样使用了。

添加的外部元件库可以进行编辑与移除。

注：直接修改RP文件的文件名后缀为“.rplib”即可当做外部元件库使用。

(五)图片文件夹

除了元件库的添加，Axure RP 9同时也支持添加图片文件夹，作为元件库使用。

三、图标字体

除了常用的元件，我们在原型中还可以使用字体图标。实际上字体文件中所包含的文字都是矢量图形，所以字体文件中也可以包含图标。这里以比较知名的图标字体FontAwesome为例，Axure RP中Icons元件库里面所包含的图标元件，都是参考这套字体图标制作而成的。但是，和Icons元件库中的图标元件不同，使用图标字体需要先安装字体文件，并在安装字体文件之后重新启动Axure RP才能够正常加载字体。

字体图标资源下载地址：https://fontawesome.com/download

目前，FontAwesome已经商业化，如果未经购买，我们只能使用免费部分的字体。点击下载页面中的下载按钮，下载下来之后是两个ZIP格式的压缩文件。

1、完成系统字体的安装

将“fontawesome-free-X.X.X-desktop.zip”(X.X.X表示版本号，目前是5.6.3)文件解压。

“otfs”文件夹包含了字体安装文件，逐个双击进行安装。

另外，“svgs”文件夹中包含了所有图标单独的SVG文件，这些SVG文件和阿里巴巴图标库中下载的SVG图标一样，可以直接拖入或导入Axure RP元件库中使用。安装完三个字体文件之后，我们就可以使用这套图标字体了。但是，Axure RP中并不能直接使用这些图标字体，因为不能够直接输入。

2、借助Office软件完成输入

Word/Excel/PowerPoint中都带有插入符号的功能。

打开插入符号的的面板之后，我们选择字体系列就可以在文档中插入这些符号。

例如，我们插入一个Windows的商标，需要先选择“Font Awesome 5 Brands Regular”字体系列，然后选中Windows图标，再点击【插入】按钮，就完成了图标的插入。

最后，我们可以在文档中复制图标，粘贴到Axure RP的画布中进行使用。

3、为图标字体添加Web支持。

因为，我们制作的原型如果发布给他人进行浏览，在他人的系统中也需要安装字体才能够正常显示图标。很显然这样显得有些麻烦。为了让浏览原型的用户不用任何操作就能够正常浏览原型，我们需要为图标字体添加Web支持。

Web支持可以通过以下方式添加。

(1)在线CSS文件

字体官网提供了在线的CSS文件支持：https://fontawesome.com/start。

页面中，我们能够看到代码中的CSS文件链接。

将链接复制，然后打开Axure RP的HTML生成配置。

切换到【字体】设置面板，点击【+添加字体】按钮，输入一个自定义的字体标签，并将链接粘贴到下方的【CSS文件的URL】输入框中。

完成这个配置之后，只要浏览原型的用户网络畅通，就能够保证图标正常显示。

(2)本地CSS文件

如果不是在线发布原型，而是要把原型生成的HTML文件部署到自有服务器上，可以使用本地CSS文件。

在Axure RP的HTML生成配置中，【CSS文件的URL】填入CSS文件的相对路径“css/all.css”。

然后，生成HTML文件到指定的文件夹。

接下来，就需要用到我们下载的另外一个压缩文件“fontawesome-free-X.X.X-web.zip”。我们把压缩文件解压缩之后，将里面的“css”和“webfonts”文件夹复制到原型的HTML文件夹中，打开HTML文件，就能够正常显示图标了。

(3)@font-face

这种方式是使用代码完成Web字体支持，比较容易出错，所以不建议采用这种方式。

操作上也分为在线与本地两种，代码内容相近，只是代码中的字体文件路径(url)分别为网络路径和相对路径(本地)。

例如(相对路径)：

font-family: 'Font Awesome 5 Brands';

src: url('webfonts/fa-brands-400.eot');

src: url('webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),

url('webfonts/fa-brands-400.woff') format('woff'),

url('IaxureTBG/fa-brands-400.ttf') format('truetype'),

url('webfonts/fa-brands-400.svg#Font Awesome 5 Brands') format('svg');

完成设置后，生成HTML文件到指定的文件夹。

并且，将“fontawesome-free-X.X.X-web.zip”里面的“css”和“webfonts”文件夹复制到原型的HTML文件夹中。此时，打开HTML文件，就能够正常显示图标了。

四、元件样式

除了了解元件的基本用途，我们还需要了解如何编辑元件的样式。

例如，修改形状的填充颜色、修改边框的线段类型和改变文字字号等等。

不过不同类型的元件，样式设置会有一些区别。

样式的设置主要分为：

显示和隐藏：设置元件的初始可见状态。

位置和尺寸：元件的位置与尺寸，支持写入运算公式。

样式方案：创建新的样式方案和更新当前的样式方案。

透明：设置元件整体的透明度，包括元件与元件中的文字。

排版：设置元件上文字的样式，包括字体、字号、字色、文字阴影、粗体、斜体、文字下划线、文字删除线、文字下标、行列间距等。

填充：设置形状的填充颜色或填充图像，或者设置图片元件默认显示的图像。

线段：设置元件边框、线段元件以及连接线的线型、线宽以及线段颜色，还能设置线段两端的箭头类型以及元件四个边框的可见性。

阴影：设置元件的内部阴影和外部阴影。

圆角：设置矩形与图片的圆角，并可以单独取消部分圆角。

边距：设置元件中文字与边框之间的间距。

五、布局排列

每个原型都会使用到多个元件。

在编辑过程中让这些元件整齐有序的排列是非常有必要的。

在Axure RP的工具栏中，提供了一些实用的功能，帮助我们能够快速的完成功能元素的排布。

1、层级排序：工具栏中的【顶层】和【底层】按钮能够让我们快速的将元件置于顶层或底层，也可以通过快捷键和完成。

2、组合：元件可以组合到一起，方便统一的操作。工具栏中的【组合】和【取消组合】按钮能够让我们快速的将元件组合或拆分，也可以通过快捷键和完成。

3、对齐：工具栏中提供了多个元件的对齐功能，能够让多个元件快速的进行各个方向对齐或中心对齐。

4、分布：工具栏中提供了多个元件的分布功能，能够让多个元件快速的进行水平或垂直方向的等距分布。

六、绘制草图

绘制草图只是不同元件的搭配组合。

通过对元件和基础操作与功能的了解，我们应该可以完成这样的工作。

例如，知乎网站登录后的首页。

案例：知乎首页草图

注：本示例只包含原网页上半部分内容。

我们先来看一下基本模块组成。

然后，就通过元件去完成每一个模块的组建。

注：为了便于查看，截图中添加了灰色页面背景色。

线框草图一般通过默认元件库中的基本元件(形状、线段)与图标元件即可完成。

注：示例中原页面的部分图标使用了相似图标代替；非软件自带的元件库文件在随书资源中获取。

初学者可以从网络中选取一些内容简洁的页面，分析功能结构与元素组成，并模拟为线框草图。

本示例中使用了软件自带的默认元件库(Default)与FontAwesomeV5.5.0元件库。

七、页面样式

点击概要功能面板中的页面名称，或者画布的空白处即可切换到页面的交互、样式与说明的设置。

在页面的样式功能面板中，我们能够设置查看原型时，页面整体内容的排列方式是靠左还是居中。

另外，在页面样式的设置中，还可以设置页面的背景颜色或背景图片。

例如，为我们之前做好的页面导航栏，添加一个顶部带有阴影效果的通栏背景。

通过一个只有15像素宽的背景图片进行【填充】，【水平重复】后，横向铺满整个浏览器窗口的顶部。