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

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

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

第一步：

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

第二步：

打開Axure，新建一個(gè)Axure文件。

（注意，這里不是雙擊打開這個(gè)組件庫(kù)，不是雙擊打開這個(gè)組件庫(kù)，不是雙擊打開這個(gè)組件庫(kù)）

第三步：

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

第四步：

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

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

第五步：

開始做我們的原型圖圖吧！拖拖拖，改改改，連線。所有的部件都是可以編輯的哦。可以通過(guò)（ctrl+減號(hào)）和（ctrl+加號(hào)）查看整體效果

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

四種背景效果都很合適

OK，大功告成，是不是很簡(jiǎn)單，無(wú)論是在屏幕上展示，還是打印出來(lái)交流，效果都是杠杠的。

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

就分享到這吧，再次標(biāo)注這套組件庫(kù)的下載地址：

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

密碼：56wx

不能下載的同學(xué)請(qǐng)?jiān)谶@篇文章下留言你的郵箱。

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

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