如何制作交互組件庫

6 評論 19992 瀏覽 220 收藏 4 分鐘

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

什么是組件庫?就是類似axure左側欄的這一坨標準控件,方便直接拖拽使用。


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

交互組件庫的作用:

  • 提高個人工作效率
  • 方便多人合作
  • 使交互文檔具有統一美

哪些東西可以做成交互組件?只需記住一點:當你感覺到某種UI組合,每次都需要重新畫一遍的時候,就可以考慮把這種UI組合做成交互組件。

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

但對于某些Tab組合來說,每個Tab底下的內容可能是差不多的,做交互的時候往往只需要表達第一個Tab下的頁面就可以了。這種我就只把第一個Tab的選中狀態做一下??偟脕碚f,怎樣對自己方便就怎樣做。

交互組件應該具備的特點:組件組件,最大的一個特點就是可組合性。整理的時候,思考哪些UI組合是不同頁面都會共用的,把這些元素剝離出來,就成了交互組件。根據自己的經驗,我會把組件歸為幾大類:

頂欄類:

導航類:

彈窗類:

彈出浮層類:

toast類:

列表類:

鍵盤類:

icon類:

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

單個交互組件應該具備的特點:可編輯性。PNG圖標、文字、選中……每一個元素都是可以單獨編輯的。

組件的顏色?盡量以黑(性)白(冷)灰(淡)風格為主。

如何把各種組件想全?不用想全,邊做邊補。所以不同平臺的交互組件庫應該有專人維護更新,才能保證組件庫始終好用。這點其實知易行難,一定要提醒自己“磨刀不誤砍柴工”。

組件邊上需要寫說明文字嗎?個人喜好組件邊上不寫任何說明文字,組件的名字已經反映在axure文檔的側導航上。只要側導航分類符合心智模型(好找),頁面上清清爽爽的組件(方便拖拽),就能滿足我的需求了。

組件庫是給畫交互稿的人用的,不是給別人看的。給別人看的是另外一種東西,交互規則庫,那種需要說明文字。

因此,判斷一個交互組件庫是否好用的標準是:

  • 你自己是不是經常使用自己的組件庫
  • 別人樂不樂意使用你的組件庫

原文來自:網易UEDC

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. ? ? ?

    這一堆不能引用的圖片啊。。。
    作者能重新編輯一下不?
    謝謝了。

    來自北京 回復
  2. 前輩,可以分享一下ma?

    來自廣東 回復
  3. 求大神分享組件 6202945@qq.com,本人菜鳥初學,求帶入門~~

    來自廣東 回復
  4. 師兄您好,能否分享一下!郵箱2360205986@qq.com

    來自北京 回復
  5. 師兄您好,能否分享一下!

    來自北京 回復
  6. 新人入門,求分享組件學習研究~ 414035501@qq.com 謝謝大神!

    來自北京 回復