元件库导入_Axure 9——元件库基础

心已赠人 2023-01-07 10:08 479阅读 0赞

天天使用的工具，有些小技巧还是很懵懂...

--------------------

Axure 中，我们经常使用的就是各种各样的元件，比如：

*  矩形元件
 *  图片元件
 *  按钮元件
 *  文本框元件
 *  表格元件
 *  图标元件
 *  单选按钮元件等
 *

以上所以元件，都可以通过 Axure的“元件面板”进行集中管理，如下图所示：

![cbe37e94345481d63c1a3439a03a19e5.png][]

多个元件就可以组成一个元件库。

Axure 9 安装时，内置了4个元件库，分别如下：

*  Default(默认元件库)
 *  Flow(流程元件库)
 *  lcons (图标元件库)
 *  Sample UI Patterns( 示范UI元件库)

但在日常工作中，也需要你定制元件库。这一点，明天详细说明。

今天先说明，元件库基础

--------------------

**添加元件库**

市面上已有很多优秀的元件库，你可以直接引用。

此时，可以直接添加第三方元件库。

操作路径为：元件面板—>添加元件库，如下图所示。

然后在文件资源管理器中，找到所要添加的第三方元件库即可。

![afd3e98458ed204b0d1b40877d695ee3.png][]

注意：只有添加第三方元件库之后，才可以进行如下操作：

*  编辑元件库
 *  打开源目录
 *  移除元件库

如下图所示：

![11d6ff38dc140c59cc1ca5867c8e4549.png][]

以上操作的路径为：元件面板—>更多选择，如图所示：

![ba52b39aa567a0e45c1bf2e2ef476003.png][]

--------------------

**获取元件库**

在添加已经下载好的，第三方元件库的同时，也可以获取官方的元件库

网址如下：https://www.axure.com/support/download-widget-libraries

![a765fd8fee491acb29894d46263a95aa.png][]

不过，官方元件库大部分收费，部分免费，你可根据自己需求来下载。

--------------------

**添加图片文件夹**

最后，也是最想强调的就是，你之前所收集的各类图片(如ICON、背景图、截图等)文件夹，也可以导入到 Axure 中，方便直接拖拽使用。

操作路径：元件面板—>添加图片文件夹，如下图所示：

![bacbdb6930d0204135fbcd252f0fa413.png][]

下图，就是我添加图片文件夹之后效果。

![9b8a51b7a6a15ec3ee6f13621a64b69f.png][]

同理，当添加图片文件夹之后，也可以进行如下操作：

*  编辑元件库
 *  打开源目录
 *  移除元件库

--------------------

** 最后福利**

目前市面上，优秀的第三方元件库如下：

*  AntD Library  http://library.ant.design/
 *  Element  https://element.faas.ele.me/\#/zh-CN/resource
 *  Axure元件库 - Axure中文网  https://www.axure.com.cn/download/rplib/
 *  等等

如有补充，欢迎留言互动。

今天，只是基础。

明天，将给你分享， 元件库进阶！

[cbe37e94345481d63c1a3439a03a19e5.png]: /images/20221119/eb474b90229949618f319febbb053e1c.png
[afd3e98458ed204b0d1b40877d695ee3.png]: /images/20221119/d736b5fdfb3a49318f0e62a277f29432.png
[11d6ff38dc140c59cc1ca5867c8e4549.png]: /images/20221119/15e2425344474883a78bbbc21bd40100.png
[ba52b39aa567a0e45c1bf2e2ef476003.png]: /images/20221119/20995430cfb9443ebbda0a4a593d84dd.png
[a765fd8fee491acb29894d46263a95aa.png]: /images/20221119/504bc8f1781d4c409e3b55a18ecf62f5.png
[bacbdb6930d0204135fbcd252f0fa413.png]: /images/20221119/4aa725f23fb648a082c5621abeeb693f.png
[9b8a51b7a6a15ec3ee6f13621a64b69f.png]: /images/20221119/204bfdc0560f4435bc865591c8a2ab88.png