之前有篇文章聊完了如何打造一套屬于自己的原型圖設(shè)計(jì)規(guī)范，今天咱們來聊聊如何打造一套屬于自己的元件庫。

畢竟，每個(gè)追求效率的PM，總會(huì)擁有一個(gè)專屬自己的Axure元件庫，并不斷打磨優(yōu)化。

今天就教大家一步一步創(chuàng)建屬于自己的Axure元件庫。

硬件環(huán)境：MacOs 10.15

版本：Axure PR 8.0

PM、UI、UE同學(xué)都會(huì)使用到一款原型圖神器，就是Axure。現(xiàn)在主流使用的基本上是Axure PR 8.0版本和9.0版本。

具體使用哪個(gè)版本，主要看team成員都用什么。

想要快速的做出原型圖，Axure真的是一款神器，只要需求提得明確。一名邏輯清晰，經(jīng)驗(yàn)豐富的產(chǎn)品很快就能搭建出一套還不錯(cuò)的原型圖來。

如果是前期為了跑邏輯，或者直接展示給自己team人看的低保真圖，制作流程非常簡(jiǎn)單。

當(dāng)然，如果是高保真原型圖的話，那就需要費(fèi)一番功夫了。

大部分產(chǎn)品經(jīng)理的使用Axure的時(shí)候，都喜歡裝上一些常見元件庫。

比如iphone-base-UI，常見的ios基礎(chǔ)ui的icon很豐富，基本能滿足ios版需求；

比如iphone-bodies，果6或果6 plus的外框就夠用了，做APP原型圖時(shí)候更逼真；

比如icons這個(gè)庫， 常見icon都在里面，有需要的icon直接拖曳，方便；

比如小樓老師的庫，很多常用的元件都已經(jīng)做好了，比如輪播圖，比如計(jì)算器，直接拖曳使用，非常的省時(shí)省力。

但隨著工作時(shí)間越長(zhǎng)，在同一類產(chǎn)品上打磨越久后，有些常用的部件可能就需要自己動(dòng)手豐富了。

今天就帶著大家一步一步搞定自己的元件庫，讓做原型圖的效率變得更高。

第一步，打開Axure，新建文件，保存名稱【這個(gè)隨便起，自己開心就好】

第二步，元件庫-漢堡包-創(chuàng)建元件庫，保存命名后會(huì)進(jìn)入元件庫頁面

第三步，元件庫頁面區(qū)域右單擊添加文件夾，并命名成自己想做組件庫名稱。比如想建table庫，就把文件夾命名成table。

我這里演示就起了common。

第四步，添加新元件，在右邊頁面拖曳進(jìn)入圖片，不用刻意調(diào)整圖片大小。雙擊圖片，上傳之前保存好的對(duì)應(yīng)圖片，等圖片上傳后后調(diào)整至合適大小。

PS-1：阿里巴巴下面icon庫--iconfont是免費(fèi)。很多PM、UI或者前端同學(xué)都會(huì)跑去下載自己喜歡的icon。可以自己調(diào)整色值和icon尺寸大小，格式有SVG、AI、PNG三種。自己習(xí)慣用什么顏色和尺寸就直接對(duì)對(duì)應(yīng)的。

PS-2：Axure記得時(shí)不時(shí)就保存一下。

第五步，等所有元件都搞定之后，元件庫-刷新元件庫，之后咱們個(gè)人自制的元件庫就刷新在元件庫里了。

到了這一步，如果沒有分享的欲望，個(gè)人專屬元件庫就算完成了。

上面是步驟，下面分享一些技巧。

技巧1. 整體打包iconfont，批量建立對(duì)應(yīng)元件庫，風(fēng)格統(tǒng)一，主要是省事。

技巧2. 下載其他人分享的元件庫，把需要元件直接修改成適合自己的。

技巧3. 巧用截圖，懶得自己做，直接截圖，截圖完整干凈最好。比如你就想要個(gè)播放器的元件庫，既可以自己做個(gè)元件，還可以找個(gè)視頻的播放器插件，或者去視頻網(wǎng)站找個(gè)合適的視頻圖截取一下。

以上都是常見制作元件庫的方法步驟，但有一個(gè)問題需要注意。

從icon網(wǎng)站下載的圖標(biāo)無法更改顏色，下載的icon是什么顏色，最后就是什么顏色。

所以如果想要做成我們想要的可以方便的修改顏色的產(chǎn)品經(jīng)理使用的icon圖標(biāo)，還可以利用Axure來自己制作真·屬于自己的icon元件庫。

下面是簡(jiǎn)單的制作過程。

之前步驟一樣，只是在作圖時(shí)需要一點(diǎn)點(diǎn)方法和技巧。

這回用常見的咖啡icon來舉個(gè)例子。

我們先看看市面上的咖啡icon是什么樣子的，在iconfont中直接搜索咖啡。

基本都是一個(gè)小杯子，加上三條蒸汽的樣式。

大部分產(chǎn)品經(jīng)理雖然沒有審美天賦，但我們擅長(zhǎng)解析結(jié)構(gòu)。

簡(jiǎn)單用矩形和圓形勾出杯子的樣子。

之后用鋼筆工具 把咖啡杯的把手勾勒出來。

用矩形示意為咖啡杯下面的小盤。

再用鋼筆工具做出三條蒸汽，底部對(duì)齊，水平分布均勻。

之后把顏色調(diào)整成黑色，寬高調(diào)成合適尺寸，并將該圖標(biāo)移動(dòng)至（0，0）點(diǎn)。

保存文件，為該icon命名，之后在元件庫中刷新元件 ，就可以看到新的icon圖標(biāo)了。

產(chǎn)品經(jīng)理并非設(shè)計(jì)師，icon圖標(biāo)是為了自己方便而制作的，所以力求簡(jiǎn)潔干凈，能讓人看到就知道是什么為主，不用也不要去追求什么設(shè)計(jì)美感，看著可以起到示意作用即可。

制作屬于自己的元件庫屬于日積月累的事情， 遇到喜歡的icon，或者使用使用到元件，做過一次就保存下載，刷新到自己的元件庫中，等著下次復(fù)用。

非常的方便！

今天的分享就到了，記得關(guān)注我！

如果覺得納蘭說得有點(diǎn)意思，點(diǎn)贊收藏關(guān)注一下唄！

PM納蘭

產(chǎn)品經(jīng)理，專注互聯(lián)網(wǎng)產(chǎn)品運(yùn)營(yíng)知識(shí)、軟硬件測(cè)評(píng)推薦以及相關(guān)教程分享。

總結(jié)

以上是生活随笔為你收集整理的axure元件库 文件上传_手把手教你打造一套属于产品经理自己的元件库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。