axure元件库 文件上传_手把手教你打造一套属于产品经理自己的元件库
之前有篇文章聊完了如何打造一套屬于自己的原型圖設計規范，今天咱們來聊聊如何打造一套屬于自己的元件庫。
畢竟，每個追求效率的PM，總會擁有一個專屬自己的Axure元件庫，并不斷打磨優化。
今天就教大家一步一步創建屬于自己的Axure元件庫。
硬件環境：MacOs 10.15
版本：Axure PR 8.0
PM、UI、UE同學都會使用到一款原型圖神器，就是Axure。現在主流使用的基本上是Axure PR 8.0版本和9.0版本。
具體使用哪個版本，主要看team成員都用什么。
想要快速的做出原型圖，Axure真的是一款神器，只要需求提得明確。一名邏輯清晰，經驗豐富的產品很快就能搭建出一套還不錯的原型圖來。
如果是前期為了跑邏輯，或者直接展示給自己team人看的低保真圖，制作流程非常簡單。
當然，如果是高保真原型圖的話，那就需要費一番功夫了。
大部分產品經理的使用Axure的時候，都喜歡裝上一些常見元件庫。
比如iphone-base-UI，常見的ios基礎ui的icon很豐富，基本能滿足ios版需求；
比如iphone-bodies，果6或果6 plus的外框就夠用了，做APP原型圖時候更逼真；
比如icons這個庫， 常見icon都在里面，有需要的icon直接拖曳，方便；
比如小樓老師的庫，很多常用的元件都已經做好了，比如輪播圖，比如計算器，直接拖曳使用，非常的省時省力。
但隨著工作時間越長，在同一類產品上打磨越久后，有些常用的部件可能就需要自己動手豐富了。
今天就帶著大家一步一步搞定自己的元件庫，讓做原型圖的效率變得更高。
第一步，打開Axure，新建文件，保存名稱【這個隨便起，自己開心就好】
第二步，元件庫-漢堡包-創建元件庫，保存命名后會進入元件庫頁面
第三步，元件庫頁面區域右單擊添加文件夾，并命名成自己想做組件庫名稱。比如想建table庫，就把文件夾命名成table。
我這里演示就起了common。
第四步，添加新元件，在右邊頁面拖曳進入圖片，不用刻意調整圖片大小。雙擊圖片，上傳之前保存好的對應圖片，等圖片上傳后后調整至合適大小。
PS-1：阿里巴巴下面icon庫--iconfont是免費。很多PM、UI或者前端同學都會跑去下載自己喜歡的icon。可以自己調整色值和icon尺寸大小，格式有SVG、AI、PNG三種。自己習慣用什么顏色和尺寸就直接對對應的。
PS-2：Axure記得時不時就保存一下。
第五步，等所有元件都搞定之后，元件庫-刷新元件庫，之后咱們個人自制的元件庫就刷新在元件庫里了。
到了這一步，如果沒有分享的欲望，個人專屬元件庫就算完成了。
上面是步驟，下面分享一些技巧。
技巧1. 整體打包iconfont，批量建立對應元件庫，風格統一，主要是省事。
技巧2. 下載其他人分享的元件庫，把需要元件直接修改成適合自己的。
技巧3. 巧用截圖，懶得自己做，直接截圖，截圖完整干凈最好。比如你就想要個播放器的元件庫，既可以自己做個元件，還可以找個視頻的播放器插件，或者去視頻網站找個合適的視頻圖截取一下。
以上都是常見制作元件庫的方法步驟，但有一個問題需要注意。
從icon網站下載的圖標無法更改顏色，下載的icon是什么顏色，最后就是什么顏色。
所以如果想要做成我們想要的可以方便的修改顏色的產品經理使用的icon圖標，還可以利用Axure來自己制作真·屬于自己的icon元件庫。
下面是簡單的制作過程。
之前步驟一樣，只是在作圖時需要一點點方法和技巧。
這回用常見的咖啡icon來舉個例子。
我們先看看市面上的咖啡icon是什么樣子的，在iconfont中直接搜索咖啡。
基本都是一個小杯子，加上三條蒸汽的樣式。
大部分產品經理雖然沒有審美天賦，但我們擅長解析結構。
簡單用矩形和圓形勾出杯子的樣子。
之后用鋼筆工具 把咖啡杯的把手勾勒出來。
用矩形示意為咖啡杯下面的小盤。
再用鋼筆工具做出三條蒸汽，底部對齊，水平分布均勻。
之后把顏色調整成黑色，寬高調成合適尺寸，并將該圖標移動至（0，0）點。
保存文件，為該icon命名，之后在元件庫中刷新元件 ，就可以看到新的icon圖標了。
產品經理并非設計師，icon圖標是為了自己方便而制作的，所以力求簡潔干凈，能讓人看到就知道是什么為主，不用也不要去追求什么設計美感，看著可以起到示意作用即可。
制作屬于自己的元件庫屬于日積月累的事情， 遇到喜歡的icon，或者使用使用到元件，做過一次就保存下載，刷新到自己的元件庫中，等著下次復用。
非常的方便！
今天的分享就到了，記得關注我！
如果覺得納蘭說得有點意思，點贊收藏關注一下唄！
PM納蘭
產品經理，專注互聯網產品運營知識、軟硬件測評推薦以及相關教程分享。
總結
以上是生活随笔為你收集整理的axure元件库 文件上传_手把手教你打造一套属于产品经理自己的元件库的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 买联想笔记本电脑联想笔记本电脑如何
- 下一篇： prometheus命令_Prometh