如何制作交互組件庫提升工作效率

2021-03-07 分類：網(wǎng)站建設(shè)

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

什么是組件庫？

就是類似axure左側(cè)欄的這一坨標準控件，方便直接拖拽使用。

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

交互組件庫的作用：

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

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

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

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

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

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

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

頂欄類：

導航類：

彈窗類：

彈出浮層類：

toast類：

列表類：

鍵盤類：

icon類：

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

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

組件的顏色？

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

如何把各種組件想全？

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

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

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

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

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

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

文章名稱：如何制作交互組件庫提升工作效率
網(wǎng)頁地址：http://www.aaarwkj.com/news8/104608.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站收錄、用戶體驗、App設(shè)計、網(wǎng)站維護、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

服務(wù)器的基礎(chǔ)知識 2021-03-07
優(yōu)秀企業(yè)網(wǎng)站應(yīng)具備哪些內(nèi)容？ 2021-03-07
中國社交電商和新零售的演變與優(yōu)勢 2021-03-07
五種個人站長的盈利模式 2021-03-06
APP、小程序、微商城都有哪些區(qū)別 2021-03-06
讀懂小程序、APP、H5區(qū)別，企業(yè)該如何選擇 2021-03-06
云主機應(yīng)該怎樣選？ 2021-03-06
MySQL數(shù)據(jù)庫安全之審計 2021-03-06

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

如何制作交互組件庫 提升工作效率

如何制作交互組件庫提升工作效率