中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：B端產(chǎn)品設(shè)計(jì)師在日常工作中，如果有一套合適的組件庫(kù)就能夠大大提高自己的辦公效率。那么，怎樣建立自己的組件庫(kù)呢？

近兩年一直都在做B端產(chǎn)品相關(guān)的設(shè)計(jì)工作，深刻的體會(huì)到有一套組件庫(kù)對(duì)于B端產(chǎn)品的設(shè)計(jì)來(lái)說(shuō)是多么的香！

本文將結(jié)合B端項(xiàng)目，從多角度深入細(xì)節(jié)去解析組件庫(kù)，幫助我們理解、構(gòu)建組件庫(kù)。

一、組件庫(kù) UI kit 如何理解

這個(gè)概念對(duì)于大家來(lái)說(shuō)應(yīng)該都不陌生，但是還要總結(jié)下自己的理解：

組件庫(kù)是可以理解為是一個(gè)重復(fù)使用的界面設(shè)計(jì)元素的集合體，它是一個(gè)文件庫(kù)。

• 「組」是設(shè)計(jì)元素的組合方式；
• 「件」由不同的元件組成；
• 「庫(kù)」倉(cāng)庫(kù)，指儲(chǔ)存組件的地方，即一個(gè)Sketch文件。

這里提一下，組件庫(kù)在整個(gè)系統(tǒng)中扮演的是行為層面的對(duì)接，是團(tuán)隊(duì)內(nèi)部設(shè)計(jì)師和開(kāi)發(fā)間的橫向協(xié)作，是保證產(chǎn)品輸出一致的規(guī)范基礎(chǔ)，設(shè)計(jì)規(guī)范更像是一份說(shuō)明文檔，組件庫(kù)是設(shè)計(jì)規(guī)范組成里的一部分。

二、組件庫(kù)的好處

提高團(tuán)隊(duì)效率，保證產(chǎn)品一致的輸出。

1. 統(tǒng)一性

• 在團(tuán)隊(duì)中，避免多人多風(fēng)格的現(xiàn)象；
• 新成員加入，可快速接手工作；
• 在產(chǎn)品體系內(nèi)，保證所有產(chǎn)品都呈現(xiàn)一致的設(shè)計(jì)語(yǔ)言、產(chǎn)品調(diào)性、建立產(chǎn)品的連貫性、一致性；
• 在用戶側(cè)，統(tǒng)一的體驗(yàn)，減少用戶學(xué)習(xí)成本，提升使用體驗(yàn)。

2. 高效性

• 可以大大縮短設(shè)計(jì)和開(kāi)發(fā)團(tuán)隊(duì)重復(fù)開(kāi)發(fā)的時(shí)間，提升團(tuán)隊(duì)協(xié)作效率；
• 開(kāi)發(fā)新項(xiàng)目或迭代時(shí)，可減少溝通時(shí)間，快速適應(yīng)市場(chǎng)。

3. 靈活性

• 在組件庫(kù)的基礎(chǔ)上，根據(jù)產(chǎn)品發(fā)展，不斷更新維護(hù)庫(kù)，適應(yīng)變化。
• 是規(guī)范不是規(guī)定，只是搭建基層框架，需根據(jù)實(shí)際項(xiàng)目在不脫離的基礎(chǔ)的情況下，靈活應(yīng)用。

三、做組件庫(kù)的時(shí)機(jī)

做組件庫(kù)之前要思考時(shí)機(jī)是否恰當(dāng)，那什么時(shí)機(jī)才適合去做呢？

在B端產(chǎn)品中，做組件庫(kù)的時(shí)機(jī)要需要產(chǎn)品發(fā)展到較為穩(wěn)定的版本。

它需要有多個(gè)需求沉淀出內(nèi)容來(lái)，畢竟B端的組件庫(kù)需要結(jié)合業(yè)務(wù)設(shè)計(jì)出符合業(yè)務(wù)場(chǎng)景的樣式，真正可以組件化的邏輯和樣式是不可以憑空想象的。

所以前提是要產(chǎn)品有一定的發(fā)展，要足夠的了解業(yè)務(wù)邏輯，積累足夠的業(yè)務(wù)場(chǎng)景，再開(kāi)始著手設(shè)計(jì)組件庫(kù)。

對(duì)于我們產(chǎn)品目前已經(jīng)過(guò)了探索階段，處于向成長(zhǎng)階段過(guò)度的時(shí)期，整個(gè)公司這一季度把系統(tǒng)性提升產(chǎn)品和服務(wù)的競(jìng)爭(zhēng)優(yōu)勢(shì)提上了日程，畢竟做出產(chǎn)品差異化的前提需要做好底層架構(gòu)工作。

也是趁著這個(gè)機(jī)會(huì)，我們?cè)O(shè)計(jì)部門又一次全盤復(fù)盤了一下組件庫(kù)，迭代一個(gè)新版本，以更好地適應(yīng)產(chǎn)品的發(fā)展。

四、組件庫(kù)該怎么做

組件庫(kù)的設(shè)計(jì)可以具體歸納為三個(gè)階段。

1. 理解階段

我們?cè)谥谱鹘M件庫(kù)的過(guò)程中應(yīng)用到了兩個(gè)概念：原子化設(shè)計(jì)理論、結(jié)構(gòu)細(xì)分。

在結(jié)構(gòu)細(xì)分之前要了解什么是原子化，有關(guān)原子化的文章數(shù)不勝數(shù)，有心的童鞋可以自行百度學(xué)習(xí)。

結(jié)構(gòu)細(xì)分其實(shí)就是將各個(gè)獨(dú)立的模塊（組織）進(jìn)行打散（原子）、細(xì)化、整合、重組。舉個(gè)?：

理解了概念之后需要進(jìn)入實(shí)施階段。

2. 拆解階段

在結(jié)構(gòu)細(xì)分時(shí)，需要先從項(xiàng)目中篩選出滿足復(fù)用性和拓展性的可拆解的模塊。

對(duì)于B端的產(chǎn)品來(lái)說(shuō)我們?cè)诤Y選的時(shí)候根據(jù)舊版本內(nèi)容，把頁(yè)面窮舉羅列出來(lái)，分析相似性和可替換的模塊，然后利用思維導(dǎo)圖的方式羅列出可組件化的內(nèi)容，做成可替換的組件，使每個(gè)原子可獨(dú)立變化和替換。

這種多嵌套組合式的細(xì)分方式，讓組件最終呈現(xiàn)出來(lái)的樣式滿足多場(chǎng)景的業(yè)務(wù)需求。

我們?cè)诟鶕?jù)產(chǎn)品類型把組件分為：基礎(chǔ)組件、業(yè)務(wù)組件、數(shù)據(jù)可視化組件、常用模塊四大類別，具體細(xì)分見(jiàn)思維導(dǎo)圖：

具體的組件分類需根據(jù)產(chǎn)品類型具體定義。

3. 設(shè)計(jì)階段

拆解完之后就要進(jìn)入具體的設(shè)計(jì)階段了，在設(shè)計(jì)組件庫(kù)時(shí)要用產(chǎn)品思維去做，包括從規(guī)劃、設(shè)計(jì)、開(kāi)發(fā)、跟蹤完成一整個(gè)產(chǎn)品閉環(huán)。

具體的設(shè)計(jì)工作就是需要花費(fèi)精力和時(shí)間去完成了，需要逐個(gè)去繪制。

在整個(gè)設(shè)計(jì)過(guò)程中，我們也踩過(guò)一些坑，整理了以下幾點(diǎn)需要提前注意的事項(xiàng)，以防出現(xiàn)事后返工行為。

第一個(gè)點(diǎn)是命名規(guī)范。

衷心地給做組件庫(kù)的同學(xué)一個(gè)建議，鑒于每個(gè)人日常工作習(xí)慣不同對(duì)于一些概念理解會(huì)有偏差，做之前一定要和團(tuán)隊(duì)內(nèi)的小伙伴商量好命名格式，十分必要。

在我們第一版的組件庫(kù)中，由于命名的混亂導(dǎo)致在使用過(guò)程中浪費(fèi)很多時(shí)間在找組件上，所以我們又重新針對(duì)命名做了一次優(yōu)化。

修改后模塊更清晰了，操作更便捷了，工作效率又提高了。

第二個(gè)點(diǎn)是布局。

比如在項(xiàng)目中會(huì)涉及到一些篩選框、輸入框等，會(huì)出現(xiàn)標(biāo)題文本右對(duì)齊、內(nèi)容文本左對(duì)齊的情況，這時(shí)在做組件的時(shí)候就要定義不同的布局樣式。

這里還要提一下sketch的一個(gè)小問(wèn)題，雖然內(nèi)容被布局后，文本框可以根據(jù)文本長(zhǎng)短自適應(yīng)長(zhǎng)度，但整個(gè)組件的選區(qū)是固定原組件的大小，它不隨內(nèi)容的長(zhǎng)短發(fā)生變化，看下圖中示例：

在項(xiàng)目中調(diào)用這類組件后，在測(cè)量模塊間距的時(shí)候會(huì)發(fā)現(xiàn)這個(gè)問(wèn)題，我們暫時(shí)沒(méi)有找到除了手動(dòng)調(diào)整外的更好解決方案，或許sketch再更幾個(gè)版本這個(gè)小Bug就被解決了吧。

第三個(gè)點(diǎn)是業(yè)務(wù)場(chǎng)景的思考。

B端產(chǎn)品眾所周知它的特點(diǎn)是業(yè)務(wù)邏輯復(fù)雜，場(chǎng)景多，所以我們的產(chǎn)品在進(jìn)入市場(chǎng)后，都會(huì)有專門的前場(chǎng)人員到現(xiàn)場(chǎng)去做示范和講解產(chǎn)品如何使用。

針對(duì)不同權(quán)限的人員使用產(chǎn)品范圍不用，看到的頁(yè)面也不同，但我們要保證相同業(yè)務(wù)場(chǎng)景下相同產(chǎn)品功能一致性的輸出，降低用戶的學(xué)習(xí)成本。

所以我們?cè)谧龅讓咏M件的時(shí)候就要多場(chǎng)景的去考慮，以確保一致性輸出。

五、組件庫(kù)的應(yīng)用

組件庫(kù)構(gòu)建好之后，應(yīng)用的時(shí)候其實(shí)用到的是組件的重組，根據(jù)具體場(chǎng)景搭配出合適的組件。

特殊情況需分離組件在原基礎(chǔ)上做適當(dāng)調(diào)整，組件庫(kù)的存在只是提供了一個(gè)標(biāo)準(zhǔn)，是規(guī)范不是規(guī)定，所以具體的應(yīng)用還需具體分析。

團(tuán)隊(duì)內(nèi)的協(xié)作直接用Cloud可以同步文件，具體使用方式官方很詳細(xì)（丟個(gè)鏈接：https://www.sketch.com/docs/sketch-cloud/）。

文件有更新團(tuán)隊(duì)內(nèi)的成員都會(huì)第一時(shí)間看到，然后下載組件庫(kù)文檔替換舊版本即可。

六、組件庫(kù)的維護(hù)

開(kāi)發(fā)完組件庫(kù)以后，對(duì)于它的更新迭代要根據(jù)產(chǎn)品的發(fā)展不斷去維護(hù)的。

根據(jù)需求的多樣性組件庫(kù)最好也要有規(guī)定迭代周期，以保證滿足需求。

這里附上有贊的組件庫(kù)更新機(jī)制，感覺(jué)對(duì)于大部分公司還是蠻通用的。

組件庫(kù)需要持續(xù)保持簡(jiǎn)潔清晰的狀態(tài)，絕不能出現(xiàn)過(guò)于臃腫，反而給工作帶來(lái)負(fù)面效果。

本文由 @做設(shè)計(jì)的小仙草 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)Unsplash，基于 CC0 協(xié)議