一、提取產(chǎn)品中的共用部分；

首先要提取產(chǎn)品中的共用部分。我列舉了一些，這些都是極為常見的組件。

1. 導(dǎo)航

2. 按鈕

3. 表單

4. Tab

5. 翻頁(yè)

這個(gè)翻頁(yè)其實(shí)是有點(diǎn)問(wèn)題的，少了個(gè)當(dāng)前選中狀態(tài)，不知道現(xiàn)在是第幾頁(yè)啊。所以說(shuō)組件的提取要考慮周全，所有可能的狀態(tài)都要設(shè)計(jì)。

6. 表格

7. 進(jìn)度條

8. 彈窗、列表、錯(cuò)誤提示……等等，還有很多。這些都是我前面說(shuō)的經(jīng)過(guò)實(shí)踐驗(yàn)證的設(shè)計(jì)模式，是久經(jīng)考驗(yàn)的展現(xiàn)與交互方式，完全有理由統(tǒng)一設(shè)計(jì)，提取成組件。

二、制作成通用組件

找到了這些共用元素，下面到具體制作環(huán)節(jié)，關(guān)于工具的使用我不會(huì)講太多，也沒(méi)有必要講，主要是思路與觀念。我用Sketch錄了3段操作演示，有利于幫助大家理解。

下面這段視頻主要是講，我是如何在實(shí)際設(shè)計(jì)過(guò)程中進(jìn)行組件化的操作。

1. Sketch Symbol；我們把這個(gè)列表項(xiàng)提取為一個(gè)組件，現(xiàn)在看其實(shí)沒(méi)什么變化。我們先復(fù)制幾個(gè)出來(lái)，讓它成為一個(gè)列表。然后我們到組件頁(yè)面去，發(fā)現(xiàn)剛才提取的組件就在這里。我們嘗試把圓形的頭像改成方形，嗯，去掉邊框。回到列表界面來(lái)，發(fā)現(xiàn)整個(gè)列表的頭像都變成方形了，但我們只在組件里做了一次修改，就達(dá)到這樣的效果。這也就是前面所說(shuō)的，組件化便于修改設(shè)計(jì)。

Sketch symbol—在線播放—優(yōu)酷網(wǎng)

2. Sketch Overrides；下面這段視頻是講如何把組件的樣式與內(nèi)容分離開。

還是剛才的組件，不過(guò)我把頭像右邊代表兩行文字的矩形換成了真正的文字，我要把它當(dāng)作通訊錄界面來(lái)設(shè)計(jì)。現(xiàn)在我們回到列表界面，發(fā)現(xiàn)列表里每一項(xiàng)都變成了姓名+電話號(hào)碼。然后我們?cè)诿恳豁?xiàng)的Overrides選項(xiàng)中輸入數(shù)據(jù)，因?yàn)檫@是在組件之外輸入的信息，它只會(huì)影響那一條內(nèi)容。用這種方式把每個(gè)列表項(xiàng)都填上數(shù)據(jù)。現(xiàn)在我們?cè)龠M(jìn)到組件里，做點(diǎn)樣式修改，比如把電話號(hào)碼顏色改成灰色?；氐搅斜?，所有電話號(hào)碼都變灰了，內(nèi)容保持不變。這樣就實(shí)現(xiàn)了樣式與內(nèi)容的分離，降低耦合度對(duì)設(shè)計(jì)同樣適用。

Sketch Overrides—在線播放—優(yōu)酷網(wǎng)

3. Sketch Symbol 的嵌套；下面這段視頻是講組件的嵌套。

組件小的可以只有一個(gè)按鈕，大的可以是一個(gè)交互極其復(fù)雜的多步篩選項(xiàng)。所以復(fù)雜組件內(nèi)再嵌入簡(jiǎn)單組件，這是很常見的事情。

我給剛才的組件又增加了一個(gè)按鈕，我們把這個(gè)按鈕也提取成組件，可以看到它出現(xiàn)在了列表項(xiàng)組件的右側(cè)。回到列表界面，每個(gè)列表項(xiàng)都有了按鈕，我們選中所有列表項(xiàng)，把按鈕文字成呼叫。然后右邊還有另一個(gè)界面，這里也需要一個(gè)按鈕。我們?cè)诖瞬迦胫疤崛〉陌粹o組件，把按鈕文字改為訂閱。如此一來(lái)，按鈕組件就既存在于界面中，也存在于其他組件中。這時(shí)候如果想對(duì)按鈕的樣式做點(diǎn)調(diào)整，我們?cè)龠M(jìn)入按鈕組件，改成灰底白字?；氐浇缑嬷?，發(fā)現(xiàn)各處按鈕都一起變了。

組件化的思想不限于設(shè)計(jì)工具，雖然Sketch很先進(jìn)，很利于實(shí)現(xiàn)這種工作方式。但PS也有相應(yīng)的功能，能夠以另一種形式實(shí)現(xiàn)組件化。所以可以說(shuō)設(shè)計(jì)從來(lái)都不會(huì)被工具所局限。

Sketch Symbol嵌套—在線播放—優(yōu)酷網(wǎng)

一個(gè)組件就是一個(gè)完整的產(chǎn)品

設(shè)計(jì)組件不是把它搬到另一個(gè)地方，然后各處集中引用這么簡(jiǎn)單。開頭我們就說(shuō)過(guò)，組件化思維的精髓是獨(dú)立、完整、自由組合。剛才我們做到了獨(dú)立，同時(shí)也需要做到完整。

把每個(gè)組件當(dāng)做一個(gè)獨(dú)立產(chǎn)品來(lái)設(shè)計(jì)，考慮空狀態(tài)、極端情況、尺寸變化，盡可能靈活適應(yīng)各使用場(chǎng)景。

就拿下圖按鈕來(lái)說(shuō)，我們必須考慮它的各種狀態(tài)、極端情況、尺寸變化，還有所有附帶的交互效果。這才能稱之為一個(gè)獨(dú)立完整的組件，滿足其他組件對(duì)一個(gè)按鈕的所有要求。除了最標(biāo)準(zhǔn)的默認(rèn)、按下、禁用狀態(tài)，還要考慮按鈕的尺寸變化，發(fā)生服務(wù)器交互時(shí)每個(gè)狀態(tài)的樣式，還有特殊按鈕內(nèi)容的展示效果。

思考組件相互間的組合方式

組件內(nèi)部完整了，接下來(lái)就是自由組合了。但并不是真的那么自由，我們要確定一些常用的組合方式。

1. 統(tǒng)一組件與組件、組件與散件之間的組合方式；

如下圖，像這樣一個(gè)后臺(tái)管理界面，頁(yè)面的整體背景色，主菜單與右側(cè)導(dǎo)航的距離，輸入框之間的距離……這些也都要有章法，而不是各個(gè)頁(yè)面這些間距都是隨心所欲的。

形成規(guī)范文檔

以上這些工作，沉淀下來(lái)，就成了設(shè)計(jì)規(guī)范。這套文檔對(duì)項(xiàng)目中的其他設(shè)計(jì)師是莫大的幫助，也是開發(fā)人員重要的資料，組件化的規(guī)范文檔是可以協(xié)助開發(fā)組件化開發(fā)的。

組件化設(shè)計(jì)是一切的源頭，如果我們?cè)O(shè)計(jì)部分的組件化工作做得不到位，自己定的規(guī)范自己不遵守，開發(fā)同學(xué)的組件化工作是無(wú)法進(jìn)行的。

開發(fā)組件化

講完設(shè)計(jì)組件化，現(xiàn)在我們來(lái)講一下開發(fā)的組件化，主要講的是前端如何運(yùn)用組件化思維。

1. 按組件，而不是頁(yè)面來(lái)開發(fā)；最重要的一點(diǎn)，是需要轉(zhuǎn)變一個(gè)觀念。我們應(yīng)該以組件為單位，而不是以頁(yè)面為單位進(jìn)行開發(fā)。

2. 輕度組件化；

組件化開發(fā)有兩種不同程度的做法。先講講輕度組件化。它的主要思想是同一個(gè)組件使用相同的html結(jié)構(gòu)和特定的class名，并且用同一段css代碼定義樣式，用同一個(gè)js函數(shù)來(lái)定義交互。

如下圖，我們來(lái)看看下面這個(gè)登錄框，下面3個(gè)代碼塊是它大致的代碼結(jié)構(gòu)。輸入框在其他頁(yè)面肯定也會(huì)用到，那么只需要與左邊框里的html結(jié)構(gòu)保持一致。各處頁(yè)面代碼中引用同一個(gè)css和js文件，至少做到了在一處集中管理樣式與交互。但如果組件的html結(jié)構(gòu)發(fā)生變化，修改的工作量還是會(huì)比較大。

3. 重度組件化；重度組件化的方式可以解決上述說(shuō)的，如果組件的html結(jié)構(gòu)發(fā)生變化，修改的工作量會(huì)比較大這個(gè)問(wèn)題。不過(guò)這就不僅僅停留在思想層面，對(duì)項(xiàng)目的代碼結(jié)構(gòu)都有一定的要求。每個(gè)組件的html結(jié)構(gòu)、css樣式、js交互都獨(dú)立封裝管理，定義好框架和加載方式，內(nèi)容在加載時(shí)從外部填充。

在重度組件化的項(xiàng)目中，每個(gè)組件都做到了徹底的獨(dú)立封裝。比如下圖，這個(gè)頁(yè)頭組件，它的代碼存在于獨(dú)立的目錄下，這個(gè)目錄包含了它的html結(jié)構(gòu)、css樣式、js交互、資源圖、甚至自測(cè)試模塊。那么各處頁(yè)面中要加載頁(yè)頭組件，往往只是一條語(yǔ)句，將數(shù)據(jù)傳入這個(gè)已存在的結(jié)構(gòu)中就行了。組件如果要與外部進(jìn)行數(shù)據(jù)傳遞，也應(yīng)該以接口形式對(duì)外開放。組件內(nèi)部是個(gè)黑盒，外部只需要了解數(shù)據(jù)的輸入與返回，不必關(guān)心組件內(nèi)的工作原理。

組件化思維管理開發(fā)項(xiàng)目

用這種思路管理項(xiàng)目，也會(huì)改變開發(fā)的協(xié)作方式。大家不再是按頁(yè)面分工，而是按組件來(lái)分工。如下圖，頁(yè)頭和tab由一人負(fù)責(zé)，列表和頁(yè)腳由另一個(gè)人負(fù)責(zé)，弱化了相互間的依賴關(guān)系。直到將組件拼裝成頁(yè)面，才需要處理組件之間相互作用的部分，但這時(shí)候工作量已經(jīng)被大大消化了。

我們可以來(lái)感受一下組件化管理的項(xiàng)目，應(yīng)該是個(gè)什么樣的結(jié)構(gòu)。

一個(gè)應(yīng)用由大量頁(yè)面組成，一個(gè)頁(yè)面的絕大部分都是組件。組件內(nèi)部已經(jīng)定義好了完整的結(jié)構(gòu)，可以獨(dú)立運(yùn)行。縱觀整個(gè)項(xiàng)目，可能就會(huì)是這樣一個(gè)結(jié)構(gòu)。組件的代碼占了大多數(shù)，能共用的都盡量共用，各個(gè)頁(yè)面的特殊代碼則會(huì)變得非常輕。各功能模塊的劃分清晰明確，一目了然。

重在維護(hù)

雖然前面說(shuō)了這么多好處，但組件化不是一件輕松的工作。在項(xiàng)目初期的準(zhǔn)備工作會(huì)增加一定工作量，但隨著時(shí)間推移會(huì)發(fā)揮出巨大的優(yōu)勢(shì)。

想象一下，像windows操作系統(tǒng)這種航母級(jí)的開發(fā)項(xiàng)目，如果不用組件化的方式來(lái)管理，它有可能成為現(xiàn)實(shí)嗎？

我們?cè)O(shè)計(jì)師要做的，就是要有專人負(fù)責(zé)維護(hù)設(shè)計(jì)組件庫(kù)。組件發(fā)生了任何設(shè)計(jì)修改，或者加入了新組件，都要及時(shí)反映在設(shè)計(jì)規(guī)范上。

開發(fā)同學(xué)也需要指定人員來(lái)負(fù)責(zé)維護(hù)具體的組件。他們要做的，我就不好多說(shuō)了，畢竟我不是專業(yè)的。

但可以舉個(gè)例子，像Google Ara項(xiàng)目的這款模塊化手機(jī)一樣：攝像頭模塊只負(fù)責(zé)拍照，處理照片得交給運(yùn)算模塊；而GPS模塊只負(fù)責(zé)定位相關(guān)功能，導(dǎo)航語(yǔ)音播報(bào)則需要發(fā)聲模塊來(lái)處理。任何模塊的拆換，對(duì)其余模塊的運(yùn)轉(zhuǎn)毫無(wú)影響。

及時(shí)溝通反饋

雙方的維護(hù)工作固然重要，更重要的是溝通交換信息。有任何變化都要及時(shí)告知對(duì)方，組件的高度同步，是這種工作方式得以長(zhǎng)期延續(xù)的關(guān)鍵。

組件化思維

其實(shí)組件化思維不僅僅適用于UI設(shè)計(jì)中，它可以貫穿到所有的設(shè)計(jì)中，甚至于生活中。

如下圖，元旦刷紅包html5頁(yè)面，用的也是組件化思維，把單個(gè)元素獨(dú)立出來(lái)，當(dāng)做一個(gè)整體設(shè)計(jì)，所有的獨(dú)立組件設(shè)計(jì)完成后，再像搭積木一樣，將其拼接為一個(gè)完整的頁(yè)面。

組件化思維不僅可用于設(shè)計(jì)中，還有生活中。它的精髓其實(shí)就這么3點(diǎn)：獨(dú)立、完整、自由組合。而我們生活中見到的絕大多數(shù)工業(yè)產(chǎn)品，就是這么造出來(lái)的，比如汽車工業(yè)，比如富士康的iPhone生產(chǎn)線。甚至部隊(duì)的編制也是遵循這個(gè)原理。

最后，我想給大家看一段1分鐘的視頻。這是宜家廚房的宣傳片，宜家是一家高度推崇組件化的公司。不僅僅是用在生產(chǎn)流程中，也把組件化思維從幕后推向了臺(tái)前，成為了自己品牌的一種語(yǔ)言。我們來(lái)直觀感受一下，讓組件化的思想在你腦海中留下一個(gè)具象的畫面：宜家廚房—在線播放—優(yōu)酷網(wǎng)

最后，謝謝看完文章的各位，希望能對(duì)各位有所幫助。

最新評(píng)論