很多小型設(shè)計(jì)研發(fā)團(tuán)隊(duì)都會(huì)遇到隨著系統(tǒng)的復(fù)雜度升級(jí)席爽，研發(fā)的速度變得越來(lái)越慢的情況西设。其中一條原因是因?yàn)樗麄儧](méi)有在設(shè)計(jì)和開(kāi)發(fā)的過(guò)程中使用組件系統(tǒng)。組件庫(kù)的建立對(duì)于團(tuán)隊(duì)和個(gè)人來(lái)說(shuō)都是一種非常高效的設(shè)計(jì)模型霸株。
什么是組件着绷？
舉個(gè)例子，裝修過(guò)家的同學(xué)都明白，在裝修前巢寡，先會(huì)設(shè)定家的定義喉脖，有做飯的區(qū)域，一定需要洗漱和睡覺(jué)抑月，還需要學(xué)習(xí)和娛樂(lè)树叽；我們可以把家看成系統(tǒng)，做飯這個(gè)場(chǎng)景下的廚房就是一個(gè)功能谦絮，而廚房中的水槽题诵、灶臺(tái)、冰箱等就可理解為組件层皱⌒远В回到軟件開(kāi)發(fā)中，我們也可將用戶使用場(chǎng)景作為組件系統(tǒng)叫胖，比如微信中的即時(shí)聊天就是一個(gè)組件系統(tǒng)草冈，而這個(gè)系統(tǒng)中又分了很多組件模塊，比如輸入聊天內(nèi)容瓮增、查看聊天記錄等.....在這些組件模塊中又包含了最基礎(chǔ)的組件細(xì)胞怎棱，如按鈕組件，按鈕組件并不是你想象中的一個(gè)簡(jiǎn)單按鈕绷跑，根據(jù)按鈕的使用場(chǎng)景拳恋，又分為按鈕的常態(tài)、禁用態(tài)砸捏、點(diǎn)擊狀態(tài)谬运、已點(diǎn)擊狀態(tài)。輸入框有可能可以通用在其他的功能中垦藏，而按鈕組件也是可以被重復(fù)使用在一些需要點(diǎn)擊確認(rèn)的界面中梆暖。我們可以得出一個(gè)組件所具有的特性是：獨(dú)立的、完整性掂骏、可自由組合式廷；
組件對(duì)于設(shè)計(jì)和開(kāi)發(fā)的重要性？
在可視化界面設(shè)計(jì)中芭挽，組件（components）就是界面特定元素組成的可被重復(fù)利用的原件。很多可視化的硬件系統(tǒng)在發(fā)布新版本軟件時(shí)蝗肪，附帶會(huì)更新自己最新的人機(jī)交互指南（Human Interactive Guideline ） 袜爪，比如Apple和Google都有自己的HIG，阿里也做過(guò)Ant design的設(shè)計(jì)通用規(guī)范薛闪，便于其他的開(kāi)發(fā)者在其系統(tǒng)上開(kāi)發(fā)新的應(yīng)用辛馆，能遵從其系統(tǒng)的交互規(guī)則，從而在一個(gè)硬件系統(tǒng)中能形成統(tǒng)一的交互體驗(yàn)，減少用戶在使用過(guò)程中的行為認(rèn)知負(fù)擔(dān)昙篙，提高易用性腊状。
在團(tuán)隊(duì)合作中，組件更顯重要苔可，如果同時(shí)有幾位設(shè)計(jì)師共同參與某一個(gè)系統(tǒng)的設(shè)計(jì)缴挖，那么有可能因?yàn)橐粋€(gè)新功能而無(wú)限疊加新的交互模式和設(shè)計(jì)元素。如果團(tuán)隊(duì)設(shè)計(jì)師共同協(xié)作使用組件時(shí)焚辅，我們就省去了再去規(guī)定一些相似的手勢(shì)操作及刷新映屋，包括一些常用的Toast、為空提示同蜻、無(wú)網(wǎng)絡(luò)等等棚点。這些若是做成通用組件，則會(huì)讓整個(gè)系統(tǒng)更加的簡(jiǎn)潔高效湾蔓。組件在被重復(fù)使用的過(guò)程中瘫析，也利于設(shè)計(jì)師修改，我們能想象在沒(méi)有組件化設(shè)計(jì)的過(guò)程中默责，若我們要對(duì)一個(gè)系統(tǒng)進(jìn)行換膚或者某一種按鈕進(jìn)行優(yōu)化設(shè)計(jì)贬循，我們首先需要整理按鈕在哪些地方出現(xiàn)，然后再讓開(kāi)發(fā)逐個(gè)修改傻丝，一旦形成組件設(shè)計(jì)甘有，只需要做完樣式，讓開(kāi)發(fā)修改這個(gè)按鈕組件葡缰，組件就會(huì)在其它地方生效新樣式亏掀。
對(duì)于開(kāi)發(fā)來(lái)說(shuō)更是經(jīng)常和組件打交道，軟件工程師開(kāi)發(fā)出各種各樣功能的組件泛释，然后將他們組合起來(lái)滤愕，就構(gòu)成了復(fù)雜的系統(tǒng)，并且這種系統(tǒng)是可快速更迭的怜校，如果你需要重構(gòu)其中的某一個(gè)功能組件间影，只需將所需修改的功能組件獨(dú)立出來(lái)重構(gòu)，無(wú)需牽一發(fā)而動(dòng)全身茄茁，以便隨時(shí)進(jìn)行功能更新魂贬。一旦開(kāi)發(fā)成組件，就可以在多個(gè)應(yīng)用中重復(fù)利用同一模塊裙顽，從而降低了時(shí)間和人力成本付燥。組件對(duì)于開(kāi)發(fā)來(lái)說(shuō)也便于梳理代碼和走查代碼集群。
什么時(shí)候適合引入組件設(shè)計(jì)愈犹？
若一個(gè)項(xiàng)目還在DEMO期键科，則沒(méi)有必要就開(kāi)始著手做組件庫(kù)，此時(shí)是快速驗(yàn)證商業(yè)模式的時(shí)候，所以無(wú)需考慮組件化勋颖；但是一旦DEMO被驗(yàn)證了嗦嗡，就應(yīng)該和開(kāi)發(fā)工程師商討組件規(guī)范，引入組件設(shè)計(jì)饭玲。
若一個(gè)項(xiàng)目超過(guò)兩個(gè)設(shè)計(jì)師共同設(shè)計(jì)侥祭，那么在一開(kāi)始就需要考慮簡(jiǎn)單的組件化，在設(shè)計(jì)過(guò)程中咱枉，不會(huì)出現(xiàn)同一個(gè)功能有不同的表現(xiàn)形式卑硫，而增加開(kāi)發(fā)負(fù)擔(dān)。我們可以想想一下蚕断，若沒(méi)有組件設(shè)計(jì)思維欢伏，每一個(gè)設(shè)計(jì)師在負(fù)責(zé)不同的功能時(shí)，就可能設(shè)計(jì)出不同的按鈕顏色亿乳，字體大小硝拧，導(dǎo)致的結(jié)果是一個(gè)系統(tǒng)中相同元素出現(xiàn)不同的表現(xiàn)形式，造成界面的混亂性葛假，對(duì)于開(kāi)發(fā)來(lái)說(shuō)代碼隨著功能的增加而越來(lái)越復(fù)雜障陶，越來(lái)越龐大，導(dǎo)致到后期根本無(wú)法繼續(xù)更迭聊训，或者開(kāi)發(fā)期限被無(wú)限的延后抱究，軟件質(zhì)量也變得很差。對(duì)于用戶來(lái)說(shuō)增加了軟件的認(rèn)知負(fù)擔(dān)带斑，易用性變得更加復(fù)雜鼓寺，體驗(yàn)也隨之變差。
當(dāng)多團(tuán)隊(duì)在同一個(gè)APP或者系統(tǒng)中開(kāi)發(fā)迭代時(shí)勋磕，更需要考慮組件系統(tǒng)妈候。此時(shí)可將組件庫(kù)分為核心基礎(chǔ)組件庫(kù)及衛(wèi)星組件庫(kù)，核心基礎(chǔ)組件庫(kù)越精簡(jiǎn)越好挂滓。所謂衛(wèi)星組件庫(kù)是基于核心組件庫(kù)建立起來(lái)的苦银，也就意味著很多核心基礎(chǔ)組件被運(yùn)用于衛(wèi)星組件庫(kù)。在這種階段赶站，需要專人來(lái)管理維護(hù)更新組件庫(kù)幔虏，此時(shí)團(tuán)隊(duì)設(shè)計(jì)師之間的溝通和反饋顯得尤為重要，從而保證組件庫(kù)的新鮮度和可被繼續(xù)使用的價(jià)值贝椿。
如何衡量組件設(shè)計(jì)的價(jià)值
在很多公司所计，Guideline和組件庫(kù)對(duì)于設(shè)計(jì)師來(lái)說(shuō)形同虛設(shè)，那是因?yàn)樵O(shè)計(jì)師和團(tuán)隊(duì)負(fù)責(zé)人并沒(méi)有認(rèn)識(shí)到其真正的價(jià)值团秽；當(dāng)設(shè)立組件庫(kù)和HIG時(shí)，我們就要有正向的數(shù)據(jù)反饋機(jī)制來(lái)衡量組件庫(kù)的效率及使用頻次。如果組件庫(kù)被使用的效率低习勤，則我們需要看看組件庫(kù)是否太過(guò)復(fù)雜和龐大踪栋，若某一個(gè)組件一直未被使用，則需要考慮現(xiàn)有的組件庫(kù)中是否有相似的組件可替代它图毕。
組件庫(kù)對(duì)于團(tuán)隊(duì)來(lái)說(shuō)是一種高效的協(xié)同設(shè)計(jì)模式夷都；對(duì)于個(gè)人來(lái)說(shuō)是可以積累不同的功能設(shè)計(jì)模型，從而使得設(shè)計(jì)師能在原有的組件模型上有更多的改進(jìn)和思考予颤。在生活和學(xué)習(xí)方面我們也可以善加利用組件思維來(lái)做事和整理思考囤官。
