很多小伙伴常常抱怨沒有好的組件庫，導致每次畫原型的時候自己一個按鈕一個按鈕繪制，效率低下。這個組件庫來自有著多年經(jīng)驗的中夢科技設(shè)計總監(jiān)@姚歲歲 ，從設(shè)計師的角度設(shè)計組件庫，相信能讓你的原型發(fā)揮出不一樣的光彩。

每次看到網(wǎng)絡上別人的原型圖，都覺得好高檔，好羨慕啊，但自己做的原型圖卻樣式很low。雖然有人會說，原型嘛，又不是做視覺設(shè)計，干嘛要看起來高大上，保證功能才是第一的。但是如果能很簡單的出一份高檔的原型圖，無疑會有利于展現(xiàn)自己的專業(yè)水準，在和甲方、BOSS、同事的溝通中占據(jù)更有利的優(yōu)勢，被大家所認可。

所以，作為一名目標是項目經(jīng)理的設(shè)計師，從視覺的角度規(guī)劃了一套組件庫，這里分享這套原創(chuàng)的組件庫，和使用方法，讓你簡單幾步便能輸出高端大氣上檔次的原型圖。

第一步：

先下載這套組件庫（文末有下載地址）。

第二步：

打開Axure，新建一個Axure文件。

（注意，這里不是雙擊打開這個組件庫，不是雙擊打開這個組件庫，不是雙擊打開這個組件庫）

第三步：

在左側(cè)“部件”的面板中，點擊按鈕彈出菜單，選擇菜單中的“載入部件庫”，選擇剛下載的這套組件庫文件。

第四步：

載入這套組件庫后，我們可以看到里面分了幾個大類，先拖第一個背景色到編輯區(qū)

選擇合適的背景色，在底部的“頁面樣式”面板中改變底色

第五步：

開始做我們的原型圖圖吧！拖拖拖，改改改，連線。所有的部件都是可以編輯的哦?？梢酝ㄟ^（ctrl+減號）和（ctrl+加號）查看整體效果

最后：”文件”->”導出為圖片”，在ps中稍微補修改一下頁面的大小，即可獲得如下下效果。（PS中“圖像”->“修改畫布大小”，向右下方延伸）

四種背景效果都很合適

OK，大功告成，是不是很簡單，無論是在屏幕上展示，還是打印出來交流，效果都是杠杠的。

這套組件庫里到底包涵了哪些東西，也分享給大家看看

就分享到這吧，再次標注這套組件庫的下載地址：

鏈接：https://pan.baidu.com/s/1E5dSruVP6oLzA_EdEN77Ig

密碼：56wx

不能下載的同學請在這篇文章下留言你的郵箱。

作者：姚歲歲（站酷號Stwo_S2），中夢科技設(shè)計總監(jiān)，4年互聯(lián)網(wǎng)產(chǎn)品設(shè)計經(jīng)驗。

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