工作效率系列 | 如何制作交互組件庫

3 評論 15815 瀏覽 140 收藏 6 分鐘

曾幾何時(shí),每次交互稿都是徒手畫,或者截個(gè)圖在現(xiàn)有的界面上改造。漸漸感到同一平臺,每個(gè)版本都有很多重復(fù)勞動,是時(shí)候做個(gè)交互組件庫了~

什么是組件庫?

就是類似axure左側(cè)欄的這一坨標(biāo)準(zhǔn)控件,方便直接拖拽使用。

1

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

交互組件庫的作用:

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

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

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

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

2

但對于某些Tab組合來說,每個(gè)Tab底下的內(nèi)容可能是差不多的,做交互的時(shí)候往往只需要表達(dá)第一個(gè)Tab下的頁面就可以了。這種我就只把第一個(gè)Tab的選中狀態(tài)做一下。

3

總得來說,怎樣對自己方便就怎樣做。

交互組件應(yīng)該具備的特點(diǎn):組件組件,最大的一個(gè)特點(diǎn)就是可組合性。

整理的時(shí)候,思考哪些UI組合是不同頁面都會共用的,把這些元素剝離出來,就成了交互組件。根據(jù)自己的經(jīng)驗(yàn),我會把組件歸為幾大類:

頂欄類

4

導(dǎo)航類

5

彈窗類

6

彈出浮層類

7

toast類

8

列表類

9

鍵盤類

10

icon類(各種png圖標(biāo))

11

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

12

單個(gè)交互組件應(yīng)該具備的特點(diǎn):

可編輯性。PNG圖標(biāo)、文字、選中……每一個(gè)元素都是可以單獨(dú)編輯的。

13

組件的顏色?

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

如何把各種組件想全?

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

組件邊上需要寫說明文字嗎?

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

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

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

 

作者:俞靜(微信公眾號:聽音樂做設(shè)計(jì)),現(xiàn)任網(wǎng)易云音樂交互負(fù)責(zé)人。

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 所以可以來一份嗎

    來自北京 回復(fù)
  2. 網(wǎng)易云音樂很不錯(cuò),不過我建議你們發(fā)現(xiàn)音樂功能里的歌單功能中的篩選功能可以組合篩選,而不是一次只能選一種。例如可以選擇歐美+70年代+搖滾這種。

    來自北京 回復(fù)
  3. 1024

    來自浙江 回復(fù)