axure怎么整合元件（产品经理教程-Axure）
axure怎么整合元件（产品经理教程-Axure）产品经理、产品设计、原型设计、交互设计、axure添加的外部元件库可以进行编辑与移除。产品经理、产品设计、原型设计、交互设计、axure也可以直接双击元件库文件进行添加，添加完成的元件库，就能够像自带元件库一样使用了。产品经理、产品设计、原型设计、交互设计、axure
接着上一篇继续讲解产品经理基础教程之axure RP 9 基础操作部分，本篇主要讲解如何使用第三方元件库，布局排布相关功能的使用，举例说明如何绘制草图，页面样式如何进行调整等内容。
（四）其它元件库
在网上有很多第三方元件库共享，我们可以下载使用。
元件库的文件名后缀为“.RPlib”，可以通过元件功能面板的“ ”按钮进行选择添加。
产品经理、产品设计、原型设计、交互设计、axure
也可以直接双击元件库文件进行添加，添加完成的元件库，就能够像自带元件库一样使用了。
产品经理、产品设计、原型设计、交互设计、axure
添加的外部元件库可以进行编辑与移除。
产品经理、产品设计、原型设计、交互设计、axure
注：直接修改RP文件的文件名后缀为“.rplib”即可当做外部元件库使用。
（五）图片文件夹
除了元件库的添加，Axure RP 9同时也支持添加图片文件夹，作为元件库使用。
产品经理、产品设计、原型设计、交互设计、axure
三、图标字体
除了常用的元件，我们在原型中还可以使用字体图标。实际上字体文件中所包含的文字都是矢量图形，所以字体文件中也可以包含图标。这里以比较知名的图标字体FontAwesome为例，Axure RP中Icons元件库里面所包含的图标元件，都是参考这套字体图标制作而成的。但是，和Icons元件库中的图标元件不同，使用图标字体需要先安装字体文件，并在安装字体文件之后重新启动Axure RP才能够正常加载字体。
字体图标资源下载地址：https://fontawesome.com/download
目前，FontAwesome已经商业化，如果未经购买，我们只能使用免费部分的字体。点击下载页面中的下载按钮，下载下来之后是两个ZIP格式的压缩文件。
产品经理、产品设计、原型设计、交互设计、axure
1、完成系统字体的安装
将“fontawesome-free-X.X.X-desktop.zip”（X.X.X表示版本号，目前是5.6.3）文件解压。
产品经理、产品设计、原型设计、交互设计、axure
“otfs”文件夹包含了字体安装文件，逐个双击进行安装。
产品经理、产品设计、原型设计、交互设计、axure
另外，“svgs”文件夹中包含了所有图标单独的SVG文件，这些SVG文件和阿里巴巴图标库中下载的SVG图标一样，可以直接拖入或导入Axure RP元件库中使用。安装完三个字体文件之后，我们就可以使用这套图标字体了。但是，Axure RP中并不能直接使用这些图标字体，因为不能够直接输入。
2、借助Office软件完成输入
Word/Excel/PowerPoint中都带有插入符号的功能。
产品经理、产品设计、原型设计、交互设计、axure
打开插入符号的的面板之后，我们选择字体系列就可以在文档中插入这些符号。
例如，我们插入一个Windows的商标，需要先选择“Font Awesome 5 Brands Regular”字体系列，然后选中Windows图标，再点击【插入】按钮，就完成了图标的插入。
产品经理、产品设计、原型设计、交互设计、axure
最后，我们可以在文档中复制图标，粘贴到Axure RP的画布中进行使用。
产品经理、产品设计、原型设计、交互设计、axure
3、为图标字体添加Web支持。
因为，我们制作的原型如果发布给他人进行浏览，在他人的系统中也需要安装字体才能够正常显示图标。很显然这样显得有些麻烦。为了让浏览原型的用户不用任何操作就能够正常浏览原型，我们需要为图标字体添加Web支持。
Web支持可以通过以下方式添加。
（1）在线CSS文件
字体官网提供了在线的CSS文件支持：https://fontawesome.com/start。
页面中，我们能够看到代码中的CSS文件链接。
产品经理、产品设计、原型设计、交互设计、axure
将链接复制，然后打开Axure RP的HTML生成配置。
切换到【字体】设置面板，点击【 添加字体】按钮，输入一个自定义的字体标签，并将链接粘贴到下方的【CSS文件的URL】输入框中。
产品经理、产品设计、原型设计、交互设计、axure
完成这个配置之后，只要浏览原型的用户网络畅通，就能够保证图标正常显示。
（2）本地CSS文件
如果不是在线发布原型，而是要把原型生成的HTML文件部署到自有服务器上，可以使用本地CSS文件。
在Axure RP的HTML生成配置中，【CSS文件的URL】填入CSS文件的相对路径“css/all.css”。
产品经理、产品设计、原型设计、交互设计、axure
然后，生成HTML文件到指定的文件夹。
接下来，就需要用到我们下载的另外一个压缩文件“fontawesome-free-X.X.X-web.zip”。我们把压缩文件解压缩之后，将里面的“css”和“webfonts”文件夹复制到原型的HTML文件夹中，打开HTML文件，就能够正常显示图标了。
产品经理、产品设计、原型设计、交互设计、axure
（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文件到指定的文件夹。
产品经理、产品设计、原型设计、交互设计、axure
并且，将“fontawesome-free-X.X.X-web.zip”里面的“css”和“webfonts”文件夹复制到原型的HTML文件夹中。此时，打开HTML文件，就能够正常显示图标了。
四、元件样式
除了了解元件的基本用途，我们还需要了解如何编辑元件的样式。
例如，修改形状的填充颜色、修改边框的线段类型和改变文字字号等等。
不过不同类型的元件，样式设置会有一些区别。
产品经理、产品设计、原型设计、交互设计、axure
样式的设置主要分为：
显示和隐藏：设置元件的初始可见状态。
位置和尺寸：元件的位置与尺寸，支持写入运算公式。
产品经理、产品设计、原型设计、交互设计、axure
样式方案：创建新的样式方案和更新当前的样式方案。
透明：设置元件整体的透明度，包括元件与元件中的文字。
排版：设置元件上文字的样式，包括字体、字号、字色、文字阴影、粗体、斜体、文字下划线、文字删除线、文字下标、行列间距等。
填充：设置形状的填充颜色或填充图像，或者设置图片元件默认显示的图像。
线段：设置元件边框、线段元件以及连接线的线型、线宽以及线段颜色，还能设置线段两端的箭头类型以及元件四个边框的可见性。
阴影：设置元件的内部阴影和外部阴影。
圆角：设置矩形与图片的圆角，并可以单独取消部分圆角。
边距：设置元件中文字与边框之间的间距。
五、布局排列
每个原型都会使用到多个元件。
在编辑过程中让这些元件整齐有序的排列是非常有必要的。
在Axure RP的工具栏中，提供了一些实用的功能，帮助我们能够快速的完成功能元素的排布。
产品经理、产品设计、原型设计、交互设计、axure
1、层级排序：工具栏中的【顶层】和【底层】按钮能够让我们快速的将元件置于顶层或底层，也可以通过快捷键<Ctrl Shift [>和<Ctrl Shift ]>完成。
2、组合：元件可以组合到一起，方便统一的操作。工具栏中的【组合】和【取消组合】按钮能够让我们快速的将元件组合或拆分，也可以通过快捷键<Ctrl G>和<Ctrl Shift G>完成。
3、对齐：工具栏中提供了多个元件的对齐功能，能够让多个元件快速的进行各个方向对齐或中心对齐。
4、分布：工具栏中提供了多个元件的分布功能，能够让多个元件快速的进行水平或垂直方向的等距分布。
六、绘制草图
绘制草图只是不同元件的搭配组合。
通过对元件和基础操作与功能的了解，我们应该可以完成这样的工作。
例如，知乎网站登录后的首页。
产品经理、产品设计、原型设计、交互设计、axure
案例：知乎首页草图
注：本示例只包含原网页上半部分内容。
我们先来看一下基本模块组成。
产品经理、产品设计、原型设计、交互设计、axure
然后，就通过元件去完成每一个模块的组建。
产品经理、产品设计、原型设计、交互设计、axure
注：为了便于查看，截图中添加了灰色页面背景色。
线框草图一般通过默认元件库中的基本元件（形状、线段）与图标元件即可完成。
注：示例中原页面的部分图标使用了相似图标代替；非软件自带的元件库文件在随书资源中获取。
初学者可以从网络中选取一些内容简洁的页面，分析功能结构与元素组成，并模拟为线框草图。
本示例中使用了软件自带的默认元件库（Default）与FontAwesomeV5.5.0元件库。
七、页面样式
点击概要功能面板中的页面名称，或者画布的空白处即可切换到页面的交互、样式与说明的设置。
产品经理、产品设计、原型设计、交互设计、axure
在页面的样式功能面板中，我们能够设置查看原型时，页面整体内容的排列方式是靠左还是居中。
另外，在页面样式的设置中，还可以设置页面的背景颜色或背景图片。
例如，为我们之前做好的页面导航栏，添加一个顶部带有阴影效果的通栏背景。
产品经理、产品设计、原型设计、交互设计、axure
通过一个只有15像素宽的背景图片进行【填充】，【水平重复】后，横向铺满整个浏览器窗口的顶部。
产品经理、产品设计、原型设计、交互设计、axure
