曾幾何時(shí)，每次交互稿都是徒手畫，或者截個(gè)圖在現(xiàn)有的界面上改造。漸漸感到同一平臺(tái)，每個(gè)版本都有很多重復(fù)勞動(dòng)，是時(shí)候做個(gè)交互組件庫(kù)了。今天@imsilentfish?以網(wǎng)易云音樂(lè)為案例，給大家聊聊如何打造一個(gè)超實(shí)用的交互庫(kù)！

什么是組件庫(kù)？就是類似axure左側(cè)欄的這一坨標(biāo)準(zhǔn)控件，方便直接拖拽使用。

但如何制作滿足自己產(chǎn)品需要的交互組件庫(kù)，一開始是模糊的。最初只是根據(jù)自己的需要隨便列一些出來(lái)，在做的過(guò)程中逐漸清晰。

交互組件庫(kù)的作用：

• 提高個(gè)人工作效率
• 方便多人合作
• 使交互文檔具有統(tǒng)一美

哪些東西可以做成交互組件？

只需記住一點(diǎn)：當(dāng)你感覺(jué)到某種UI組合，每次都需要重新畫一遍的時(shí)候，就可以考慮把這種UI組合做成交互組件。

上面所說(shuō)的“重復(fù)勞動(dòng)”對(duì)不同人來(lái)說(shuō)可能定義不盡相同。比如對(duì)我來(lái)說(shuō)，即使把Tab的選中狀態(tài)變一下，也是一種重復(fù)勞動(dòng)。那我就會(huì)把不同Tab的選中狀態(tài)都做一份。這樣等到要制作“我的音樂(lè)”相關(guān)交互的時(shí)候，直接把下面第二個(gè)組件拖過(guò)去就可以了。

但對(duì)于某些Tab組合來(lái)說(shuō)，每個(gè)Tab底下的內(nèi)容可能是差不多的，做交互的時(shí)候往往只需要表達(dá)第一個(gè)Tab下的頁(yè)面就可以了。這種我就只把第一個(gè)Tab的選中狀態(tài)做一下?？偟脕?lái)說(shuō)，怎樣對(duì)自己方便就怎樣做。

交互組件應(yīng)該具備的特點(diǎn)：

組件組件，最大的一個(gè)特點(diǎn)就是可組合性。整理的時(shí)候，思考哪些UI組合是不同頁(yè)面都會(huì)共用的，把這些元素剝離出來(lái)，就成了交互組件。根據(jù)自己的經(jīng)驗(yàn)，我會(huì)把組件歸為幾大類：

頂欄類：

導(dǎo)航類：

彈窗類：

彈出浮層類：

toast類：

列表類：

鍵盤類：

icon類：

另外，一些常用的主界面和內(nèi)容頁(yè)我也會(huì)做成組件。這樣當(dāng)我要拿搜索頁(yè)說(shuō)事兒的時(shí)候，就可以直接把整個(gè)搜索頁(yè)拖過(guò)去，而不需要花時(shí)間再搭一遍積木了。

單個(gè)交互組件應(yīng)該具備的特點(diǎn)：可編輯性。PNG圖標(biāo)、文字、選中……每一個(gè)元素都是可以單獨(dú)編輯的。

組件的顏色？

盡量以黑（性）白（冷）灰（淡）風(fēng)格為主。

如何把各種組件想全？

不用想全，邊做邊補(bǔ)。所以不同平臺(tái)的交互組件庫(kù)應(yīng)該有專人維護(hù)更新，才能保證組件庫(kù)始終好用。這點(diǎn)其實(shí)知易行難，一定要提醒自己“磨刀不誤砍柴工”。

組件邊上需要寫說(shuō)明文字嗎？

個(gè)人喜好組件邊上不寫任何說(shuō)明文字，組件的名字已經(jīng)反映在axure文檔的側(cè)導(dǎo)航上。只要側(cè)導(dǎo)航分類符合心智模型（好找），頁(yè)面上清清爽爽的組件（方便拖拽），就能滿足我的需求了。

組件庫(kù)是給畫交互稿的人用的，不是給別人看的。給別人看的是另外一種東西，交互規(guī)則庫(kù)，那種需要說(shuō)明文字。

因此，判斷一個(gè)交互組件庫(kù)是否好用的標(biāo)準(zhǔn)是：

• 你自己是不是經(jīng)常使用自己的組件庫(kù)
• 別人樂(lè)不樂(lè)意使用你的組件庫(kù)

聽(tīng)音樂(lè)做設(shè)計(jì)，掃一掃關(guān)注我們~

「優(yōu)設(shè)2月份優(yōu)秀教程合集」

地圖圖標(biāo)教程：
《PS教程！手把手教你打造一個(gè)配色小清新的地圖圖標(biāo)》

卡通動(dòng)物肖像：
《AI教程！教你繪制六個(gè)扁平化風(fēng)格的卡通小動(dòng)物肖像》

卡通人物肖像：
《AI教程！教你繪制扁平化風(fēng)格的卡通人物肖像（四人組合篇）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com