組件就像積木一樣，當(dāng)設(shè)計(jì)好時(shí)，我們就可以使用它來(lái)搭自己想要的造型了，一些基礎(chǔ)的，重復(fù)性的工作不必再花更多的時(shí)間來(lái)做。

1、一次設(shè)計(jì)，重復(fù)使用

舉個(gè)簡(jiǎn)單的例子，我們需要提供一下類似淘寶那樣的橙色按鈕，肯定不希望每次都來(lái)設(shè)置它的樣式，最好是axure能提供現(xiàn)成的就更好了。那我們就把它做成組件唄，把交互樣式設(shè)計(jì)好，大家都可以用，統(tǒng)一了規(guī)范，是不是帶來(lái)了更高的效率了？

2、協(xié)作與共享

對(duì)于多人協(xié)作的場(chǎng)景來(lái)說，統(tǒng)一規(guī)范是必須的，但又不能每個(gè)人都設(shè)計(jì)淘寶的按鈕吧，可能導(dǎo)致每個(gè)人設(shè)計(jì)的按鈕大小、顏色都不一致。所以只需要一個(gè)人設(shè)計(jì)好，大家復(fù)用就OK了。

二、組件庫(kù)設(shè)計(jì)要點(diǎn)

1、樣式和交互

把要設(shè)計(jì)的組件的樣式和交互統(tǒng)一設(shè)計(jì)好，例如按鈕的高度、寬度、背景顏色、鼠標(biāo)經(jīng)過時(shí)的樣式，鼠標(biāo)點(diǎn)擊后的事件處理。

2、組件庫(kù)的分類：常用、業(yè)務(wù)分類、圖標(biāo)

如果我們?cè)O(shè)計(jì)的部件比較多的時(shí)候，我們可以給組件分類，在設(shè)計(jì)時(shí)建不同的文件夾，后期導(dǎo)入組件庫(kù)時(shí)就會(huì)根據(jù)這個(gè)文件夾分類，方便使用。

3、組合形狀：便于選擇

由于我們自定義組件時(shí)，經(jīng)常是會(huì)組合使用多個(gè)形狀的，在后期使用時(shí)，從組件庫(kù)拖到設(shè)計(jì)區(qū)域時(shí)，如果不提前編組的話，組件的每個(gè)形狀可以單獨(dú)選擇，不利于整體選擇。

4、給組件中的形狀命名：盡量不要使用中文

我們?cè)诮o組件中的形狀需要命名時(shí)（不是每個(gè)都要命名，只給需要的命名，如果使用中文命名，在導(dǎo)出html頁(yè)面后，如果上傳到你的服務(wù)器來(lái)查看時(shí)，可能會(huì)不能正常顯示。

三、組件庫(kù)的導(dǎo)入

設(shè)計(jì)好的組件就可以使用了，有兩種方式，第一種是將設(shè)計(jì)的組件庫(kù)源文件放到axure的應(yīng)用目錄里，一般在“我的文檔/Axure/Libraries”，直接放里面，重新打開axure就會(huì)自動(dòng)加載了。另外一種方式是在axure里，使用導(dǎo)入菜單來(lái)導(dǎo)入，如下圖：

四、實(shí)踐：從交互式按鈕開始

1、新建組件庫(kù)

打開axure，從組件庫(kù)的下拉菜單中選擇創(chuàng)建組件庫(kù)

2、拖動(dòng)矩形到設(shè)計(jì)區(qū)域并調(diào)整大小

從axure默認(rèn)的的組件庫(kù)中，拖一個(gè)矩形到設(shè)計(jì)區(qū)域，注意放在設(shè)計(jì)區(qū)域的左上角位置，然后調(diào)整矩形到合適的高度和寬度

3、設(shè)置邊框、填充顏色和文字顏色

對(duì)于淘寶這種橙色按鈕，是一種扁平化的樣式，所以我們?nèi)サ粜螤畹倪吙?，設(shè)置背景填充色為淘寶的橙色，文字顏色為白色，設(shè)置好字體大小，圓角半徑為1。

4、設(shè)置交互樣式

右鍵選擇形狀，從彈出菜單中選擇設(shè)置交互樣式：

設(shè)置鼠標(biāo)經(jīng)過時(shí)，背景填充色加深

5、測(cè)試一下

可以F5預(yù)覽一下效果，試試鼠標(biāo)經(jīng)過時(shí)是否和淘寶的按鈕樣式一致。

6、加載組件庫(kù)，實(shí)際測(cè)試一下

保存組件庫(kù)，新建一個(gè)axure設(shè)計(jì)頁(yè)面，在組件庫(kù)的下載菜單里加載剛剛設(shè)計(jì)的組件庫(kù)，拖動(dòng)按鈕到設(shè)計(jì)區(qū)域上，測(cè)試一下。

小結(jié)

關(guān)于組件庫(kù)的設(shè)計(jì)，及簡(jiǎn)單實(shí)踐的內(nèi)容到這里結(jié)束了。

通過組件化設(shè)計(jì)，可以極大地提高原型設(shè)計(jì)的效率，并且有利于協(xié)作哦！

本文由 @Axure原型設(shè)計(jì)工場(chǎng)?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。