編輯導(dǎo)語：搭建自己的axure組件庫(kù)對(duì)于原型設(shè)計(jì)來說十分重要，本篇文章作者分享了搭建axure組件庫(kù)的方法，介紹了一些常用的相關(guān)網(wǎng)站應(yīng)用，感興趣的一起來看一下，希望對(duì)你有幫助。

一、引言

在我們進(jìn)行原型設(shè)計(jì)時(shí)，很重要的一點(diǎn)是搭建自己的組件庫(kù)。為什么這么說呢？

雖然現(xiàn)在已經(jīng)有許多開源的 Axure 組件庫(kù)，但是呢，我們想著用這些組件庫(kù)來節(jié)省畫原型的時(shí)間時(shí)，實(shí)際上，可能會(huì)浪費(fèi)很多時(shí)間在尋找合適的組件元素上。

根據(jù)我以往的經(jīng)驗(yàn)，總結(jié)了兩種會(huì)降低畫原型效率的情形：

1.?徒手畫原型：每一次做新的原型，都從頭開始畫，使用到的組件可能只有導(dǎo)航欄、翻頁條等十分常用的組件。

2.?過于依賴開源組件：盡量使用組件畫原型，但是使用的組件庫(kù)不只有一個(gè)，分散在不同的地方，不知不覺在查找的時(shí)間浪費(fèi)了很多。

為什么明明有那么多的開源組件庫(kù)可以使用，但是還會(huì)花費(fèi)許多時(shí)間在這上面呢？

• 對(duì)開源組件庫(kù)不熟悉，并且組件庫(kù)分散，內(nèi)容多，很難找到想要的組件；
• 自己畫，太浪費(fèi)時(shí)間，無法復(fù)用；
• 不是自己經(jīng)手的東西，加上不是很熟悉，使用起來也是比較費(fèi)勁的。

當(dāng)我們沒有進(jìn)入別人的情境時(shí)，一般是比較難完全把握住別人的東西的。

若想要化為己用，也是要像讀書一樣，讀了想了用了，才能夠掌握和使用自如。

并且每個(gè)人的思維方式，每個(gè)公司的業(yè)務(wù)不同，就會(huì)造成開源組件庫(kù)不一定適用的情況下。

所以搭建一套適合自己的組件庫(kù)，不斷豐富，才能讓自己在后續(xù)畫原型中得心應(yīng)手。

二、如何解決

我認(rèn)為比較有效的方法是，搭建一套自己的組件庫(kù)。不過不是說要讓自己從頭搭建組件庫(kù)，可以借用下面的公式。

自己的組件庫(kù)=開源組件+自用整理

展開說就是：

• 在常用的開源組件中分類整理出自己所需和常用的；
• 再加上一些自己項(xiàng)目業(yè)務(wù)所需要的頻率較高的內(nèi)容，自己組件。

在初步搭建好自己的常用組件庫(kù)后，之后可以根據(jù)需要不斷增加內(nèi)容。

三、如何搭建組件庫(kù)

1. 要點(diǎn)

1）從開源組件庫(kù)和原型中汲取

相信大家或多或少都存有一些組件庫(kù)和原型，但是我們并不會(huì)全部組件用上，所以就可以從這些不同的組件庫(kù)中，抽取出自己需要的，放入自己的組件庫(kù)中。

比如 AntDesign 組件庫(kù)中，【小工具】基本用不上，【按鈕】用得上，那么我就把按鈕搬到自己的組件庫(kù)中，諸如此類。

2）從工作中總結(jié)常用的內(nèi)容

每個(gè)行業(yè)、每個(gè)公司，都有其業(yè)務(wù)特性，因此無法完全復(fù)用別人的組件庫(kù)和原型，所以需要我們梳理總結(jié)日常工作常會(huì)用到的內(nèi)容，制作成組件。

例如，我們項(xiàng)目組對(duì)于【組織樹】的使用頻率較高，那么就把它做成組件，放入自己的組件庫(kù)，這樣下次使用起來就方便多了~

3）分類整理（移動(dòng)端、網(wǎng)頁端、圖表等）

這里可以根據(jù)每個(gè)人的習(xí)慣來分類，通常可以按照移動(dòng)庫(kù)、PC庫(kù)、圖表庫(kù)來整理，方便拖拽使用~

2. 步驟

以 axure 組件庫(kù)制作為例：

打開 Axure ，來到元件庫(kù)區(qū)域，點(diǎn)擊【創(chuàng)建元件庫(kù)】。

根據(jù)自己的需要，保存文件庫(kù)到相應(yīng)位置。

1）開始制作；

2）分類組件：以 AntDesign web 版為例，會(huì)分為“布局、通用（按鈕、圖表、分割線）、導(dǎo)航、數(shù)據(jù)錄入等等”，根據(jù)自己的常用習(xí)慣來進(jìn)行分類。

3）借用開源組件庫(kù)：從常用的開源組件庫(kù)中，選取適合自己的、常用的，放入自己的組件庫(kù)。總結(jié)項(xiàng)目業(yè)務(wù)：

每個(gè)公司業(yè)務(wù)不同，不會(huì)有哪一個(gè)公用組件庫(kù)可以完全適用自己的工作，所以我們需要在日常的原型制作中總結(jié)經(jīng)驗(yàn)，制作通用的組件。以我們的為例，常常在表單錄入上使用較多，所以我就會(huì)把這一部分做成組件，方便后續(xù)復(fù)用。

4）保存組件庫(kù)：打開 axure ，將組件庫(kù)載入，之后就可以正常使用。

上面就是簡(jiǎn)單的 axure 組件庫(kù)制作流程，軟件的使用流程我們可以很容易就能搜索到，所以這里就沒詳細(xì)展開，最重要的還是制作組件庫(kù)的思想。

搭建一套自己順手、易用的組件庫(kù)才是最終目的。

3. 常用開源組件庫(kù)

目前許多大的互聯(lián)網(wǎng)公司都有自己的設(shè)計(jì)規(guī)范網(wǎng)站，上面會(huì)有相應(yīng)的開源組件庫(kù)分享。

除此之外，像 Axure 還有許多原型網(wǎng)站，會(huì)有許多人分享自己制作的原型及組件庫(kù)。

下面就是我自己的一些常用網(wǎng)站：

• 常見的設(shè)計(jì)規(guī)范組件庫(kù)：Ant Design 、Arco Design、TDesign、Element等；
• 常用的網(wǎng)站：AxureUX.com、axureshop、產(chǎn)品大牛等。

1）Ant Design 螞蟻設(shè)計(jì)

Ant Design 是阿里螞蟻金服團(tuán)隊(duì)基于 React 開發(fā)的 ui 組件，有著豐富的資源，包括移動(dòng)端、pc 端。

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

2）Arco Design

飛書團(tuán)隊(duì)產(chǎn)品，基于 Byte Design 升級(jí)而來，是一個(gè)能力全面的企業(yè)級(jí)產(chǎn)品設(shè)計(jì)系統(tǒng)，所以主要為pc版組件庫(kù)（支持 axure rp9 使用）。

https://pro.arco.design/

3）TDesign 企業(yè)級(jí)設(shè)計(jì)體系

TDesign 是騰訊各業(yè)務(wù)團(tuán)隊(duì)在服務(wù)業(yè)務(wù)過程中沉淀的一套企業(yè)級(jí)設(shè)計(jì)體系。有桌面版、移動(dòng)端、小程序版的設(shè)計(jì)資源，目前 axure 組件組只有桌面版的（支持 axure rp9 使用）。

https://tdesign.tencent.com/

4）Element 餓了么設(shè)計(jì)規(guī)范

Element，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)。組件庫(kù)為桌面（pc）版。

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

5）AxureUX.com

AxureUX 是一個(gè)交互原型素材原創(chuàng)分享平臺(tái)，提供基于 Axure 的高質(zhì)量通用組件模板庫(kù)和行業(yè)原型模板的分享。

在【免費(fèi)作品】中，可以下載到移動(dòng)端、后臺(tái)管理、可視化圖表、插畫素材等元件庫(kù)。內(nèi)容十分豐富，在原型設(shè)計(jì)上完全夠用。

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

6）AxureShop產(chǎn)品原型網(wǎng)

這是一個(gè) Axure 原創(chuàng)素材交易平臺(tái)，可以在上面購(gòu)買所需要的原型及組件庫(kù)，也有免費(fèi)的資源可以下載，特點(diǎn)是axure資源十分豐富。

https://www.axureshop.com/

7）產(chǎn)品大牛

在產(chǎn)品大牛的【廣場(chǎng)】上，有許多分享出來的免費(fèi)原型及元件庫(kù)，可以根據(jù)需要去下載。

https://www.pmdaniu.com/

四、總結(jié)

在原型設(shè)計(jì)上，誠(chéng)然很多內(nèi)容都可以直接搜索到，但是那些知識(shí)都是分散的，想要讓一個(gè)東西徹底變?yōu)樽约旱模蔷褪俏照韺W(xué)習(xí)并應(yīng)用。

所以我們搭建自己的組件庫(kù)，也是這個(gè)作用：將零散的組件整理成一個(gè)組件庫(kù)，讓自己能夠隨取隨用。

作為產(chǎn)品新人，我們最怕的是什么，是一直在低效地執(zhí)行。

畫原型本身沒有錯(cuò)，也是我們產(chǎn)品新人該打牢的基礎(chǔ)之一，最重要的還是不能低效地畫原型，浪費(fèi)大部分的時(shí)間在上面。

搭建自己的組件庫(kù)，不僅可以讓自己更高效地使用組件，并且可以幫助我們思考和整理碎片內(nèi)容。

不過呢，最重要的是搭建組件庫(kù)的思想，就像是我們要搭建自己的知識(shí)庫(kù)一樣。

本文由 @阿無 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。