产品新人必看：搭建自己的axure组件库

在我们进行原型设计时，很主要的一点是搭建自己的组件库。
为什么这么说呢？

虽然现在已经有许多开源的 Axure 组件库，但是呢，我们想着用这些组件库来节省画原型的韶光时，实际上，可能会摧残浪费蹂躏很多韶光在探求得当的组件元素上。

根据我以往的履历，总结了两种会降落画原型效率的环境：

1. 徒手画原型：每一次做新的原型，都从头开始画，利用到的组件可能只有导航栏、翻页条等十分常用的组件。

2. 过于依赖开源组件：只管即便利用组件画原型，但是利用的组件库不但有一个，分散在不同的地方，不知不觉在查找的韶光摧残浪费蹂躏了很多。

为什么明明有那么多的开源组件库可以利用，但是还会花费许多韶光在这上面呢？

当我们没有进入别人的情境时，一样平常是比较难完备把握住别人的东西的。

若想要化为己用，也是要像读书一样，读了想了用了，才能够节制和利用自若。

并且每个人的思维办法，每个公司的业务不同，就会造成开源组件库不一定适用的情形下。

以是搭建一套适宜自己的组件库，不断丰富，才能让自己在后续画原型中得心应手。

二、如何办理

我认为比较有效的方法是，搭建一套自己的组件库。
不过不是说要让自己从头搭建组件库，可以借用下面的公式。

自己的组件库=开源组件+自用整理

展开说便是：

在初步搭建好自己的常用组件库后，之后可以根据须要不断增加内容。

三、如何搭建组件库1. 要点

1）从开源组件库和原型中汲取

相信大家或多或少都存有一些组件库和原型，但是我们并不会全部组件用上，以是就可以从这些不同的组件库中，抽取出自己须要的，放入自己的组件库中。

比如 AntDesign 组件库中，【小工具】基本用不上，【按钮】用得上，那么我就把按钮搬到自己的组件库中，诸如此类。

2）从事情中总结常用的内容

每个行业、每个公司，都有其业务特性，因此无法完备复用别人的组件库和原型，以是须要我们梳理总结日常事情常会用到的内容，制作成组件。

例如，我们项目组对付【组织树】的利用频率较高，那么就把它做成组件，放入自己的组件库，这样下次利用起来就方便多了~

3）分类整理（移动端、网页端、图表等）

这里可以根据每个人的习气来分类，常日可以按照移动库、PC库、图表库来整理，方便拖拽利用~

2. 步骤

以 axure 组件库制作为例：

打开 Axure ，来到元件库区域，点击【创建元件库】。

根据自己的须要，保存文件库到相应位置。

1）开始制作；

2）分类组件：以 AntDesign web 版为例，会分为“布局、通用（按钮、图表、分割线）、导航、数据录入等等”，根据自己的常用习气来进行分类。

3）借用开源组件库：从常用的开源组件库中，选取适宜自己的、常用的，放入自己的组件库。
总结项目业务：

每个公司业务不同，不会有哪一个公用组件库可以完备适用自己的事情，以是我们须要在日常的原型制作中总结履历，制作通用的组件。
以我们的为例，常常在表单录入上利用较多，以是我就会把这一部分做成组件，方便后续复用。

4）保存组件库：打开 axure ，将组件库载入，之后就可以正常利用。

上面便是大略的 axure 组件库制作流程，软件的利用流程我们可以很随意马虎就能搜索到，以是这里就没详细展开，最主要的还是制作组件库的思想。

搭建一套自己顺手、易用的组件库才是终极目的。

3. 常用开源组件库

目前许多大的互联网公司都有自己的设计规范网站，上面会有相应的开源组件库分享。

除此之外，像 Axure 还有许多原型网站，会有许多人分享自己制作的原型及组件库。

下面便是我自己的一些常用网站：

1）Ant Design 蚂蚁设计

Ant Design 是阿里蚂蚁金服团队基于 React 开拓的 ui 组件，有着丰富的资源，包括移动端、pc 端。

https://ant.design/docs/resources-cn

2）Arco Design

飞书团队产品，基于 Byte Design 升级而来，是一个能力全面的企业级产品设计系统，以是紧张为pc版组件库（支持 axure rp9 利用）。

https://pro.arco.design/

3）TDesign 企业级设计体系

TDesign 是腾讯各业务团队在做事业务过程中沉淀的一套企业级设计体系。
有桌面版、移动端、小程序版的设计资源，目前 axure 组件组只有桌面版的（支持 axure rp9 利用）。

https://tdesign.tencent.com/

4）Element 饿了么设计规范

Element，一套为开拓者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
组件库为桌面（pc）版。

https://element.eleme.cn/#/zh-CN/resource

5）AxureUX.com

AxureUX 是一个交互原型素材原创分享平台，供应基于 Axure 的高质量通用组件模板库和行业原型模板的分享。

在【免费作品】中，可以***到移动端、后台管理、可视化图表、插画素材等元件库。
内容十分丰富，在原型设计上完备够用。

https://www.axureux.com/home/default.html

6）AxureShop产品原型网

这是一个 Axure 原创素材交易平台，可以在上面购买所须要的原型及组件库，也有免费的资源可以***，特点是axure资源十分丰富。

https://www.axureshop.com/

7）产品大牛

在产品大牛的【广场】上，有许多分享出来的免费原型及元件库，可以根据须要去***。

https://www.pmdaniu.com/

四、总结

在原型设计上，诚然很多内容都可以直接搜索到，但是那些知识都是分散的，想要让一个东西彻底变为自己的，那便是接管整理学习并运用。

以是我们搭建自己的组件库，也是这个浸染：将零散的组件整理成一个组件库，让自己能够随取随用。

作为产品新人，我们最怕的是什么，是一贯在低效地实行。

画原型本身没有错，也是我们产品新人该打牢的根本之一，最主要的还是不能低效地画原型，摧残浪费蹂躏大部分的韶光在上面。

搭建自己的组件库，不仅可以让自己更高效地利用组件，并且可以帮助我们思考和整理碎片内容。

不过呢，最主要的是搭建组件库的思想，就像是我们要搭建自己的知识库一样。

本文由 @阿无 原创发布于大家都是产品经理。
未经容许，禁止转载。

题图来自 Unsplash，基于CC0协议。