2017-3-20 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
最近打算在公司內(nèi)部做一個(gè)分享，講的是組件化的設(shè)計(jì)與開(kāi)發(fā)的思維方式。準(zhǔn)備完演講資料，發(fā)現(xiàn)這完全可以改成一篇文章。藏著掖著不合適，發(fā)出來(lái)分享給有需求的朋友吧，就當(dāng)是個(gè)試講了，希望大家?guī)兔χ赋鲥e(cuò)誤。由于本文首先是以keynote的形式誕生的，其中還有動(dòng)畫(huà)和視頻，所以我比較推薦大家直接下載keynote文件（也存了PPT版本）。內(nèi)容和本文是一樣的，但有些邏輯關(guān)系還真得讓畫(huà)面動(dòng)起來(lái)才說(shuō)得清。提醒一下，keynote文件大小將近150mb，嫌麻煩的朋友，當(dāng)然也歡迎繼續(xù)閱讀。
組件化的工作方式信奉獨(dú)立、完整、自由組合。目標(biāo)就是盡可能把設(shè)計(jì)與開(kāi)發(fā)中的元素獨(dú)立化，使它具備完整的局部功能，通過(guò)自由組合來(lái)構(gòu)成整個(gè)產(chǎn)品。
對(duì)于計(jì)算機(jī)這么復(fù)雜的工業(yè)產(chǎn)品，組件化是唯一能使它成為現(xiàn)實(shí)的方法。我中學(xué)暑假去電腦城打工，跟著別人學(xué)習(xí)電腦維修。CPU在哪里，負(fù)責(zé)什么，如何拆裝；內(nèi)存在哪里，負(fù)責(zé)什么，如何拆裝。這些都是基礎(chǔ)知識(shí)，各部分各司其職，什么壞了就換什么。我還見(jiàn)過(guò)資深維修工修主板，他真的能找出主板上哪個(gè)電容爆了，換一個(gè)相同規(guī)格的上去，電腦又能正常開(kāi)機(jī)了。
當(dāng)然今天我們不講電腦維修，組件化思維要運(yùn)用到我們的工作中。首先要了解，它對(duì)設(shè)計(jì)和開(kāi)發(fā)到底有什么意義？
這部分雖然講的是設(shè)計(jì)，但對(duì)開(kāi)發(fā)同學(xué)也有價(jià)值。你們能了解設(shè)計(jì)師在做設(shè)計(jì)時(shí)的思路，說(shuō)直白點(diǎn)就是摸清楚我們的套路。其實(shí)我們做設(shè)計(jì)的時(shí)候會(huì)有系統(tǒng)的考慮，并不是天馬行空，想一出是一出。
組件化的設(shè)計(jì)恰恰是符合產(chǎn)品功能邏輯的。特定類型的信息，就有特定的最優(yōu)展現(xiàn)方式和交互方式，這叫做設(shè)計(jì)模式。設(shè)計(jì)模式就應(yīng)該提取出來(lái)作為組件。
比如要從多個(gè)維度快速檢索和對(duì)比大量數(shù)據(jù)，沒(méi)有什么能比表格形式效率更高。想象一下，上面這個(gè)界面的表格數(shù)據(jù)，做成卡片式堆疊在一起，劃一張換一條，或者像淘寶商品列表那樣，一行4列平鋪開(kāi)。那還對(duì)比個(gè)P啊，用戶都要摔鼠標(biāo)了。
交互的一致性，或者說(shuō)可預(yù)測(cè)性，是用戶體驗(yàn)的根本。比如日期選擇組件，在整個(gè)產(chǎn)品中就應(yīng)該只有一種存在形式。如果一會(huì)兒是滾輪撥盤(pán)，一會(huì)兒是日歷，一會(huì)兒又是下拉列表，這樣的設(shè)計(jì)絕對(duì)是不能上線的。
這部分主要是視覺(jué)方面的考慮，更多樣式上的差異。不同的樣式會(huì)給產(chǎn)品帶來(lái)不同的調(diào)性。
就拿按鈕來(lái)說(shuō)。圓頭造型表現(xiàn)出一種柔和親切的特質(zhì)，同時(shí)有利于將注意力聚焦到其中內(nèi)容上。而直角則展現(xiàn)出一種棱角分明的硬朗，邊界更加清晰。想一想三星手機(jī)和錘子手機(jī)的外觀造型，兩種截然不同的感覺(jué)。
為了保持產(chǎn)品視覺(jué)風(fēng)格統(tǒng)一，設(shè)計(jì)師應(yīng)該找到最合適的方案，并處處保持統(tǒng)一，不可以太隨心所欲。
組件化設(shè)計(jì)是大型設(shè)計(jì)項(xiàng)目的必要條件。比如兩位設(shè)計(jì)師協(xié)作，一個(gè)在設(shè)計(jì)注冊(cè)界面，一個(gè)在設(shè)計(jì)修改密碼界面，或者在設(shè)計(jì)某個(gè)問(wèn)卷調(diào)查的彈窗。這其中都有表單，兩個(gè)人設(shè)計(jì)出來(lái)不一樣怎么辦？一個(gè)邊框顏色深一點(diǎn)，一個(gè)邊框顏色淺一點(diǎn)？其實(shí)沒(méi)理由不同，應(yīng)該保持一致。口頭約定太麻煩，而且難以保證執(zhí)行到位，組件化是最好的解決方式。
設(shè)計(jì)總是要修改優(yōu)化的，有些改動(dòng)牽扯全局，動(dòng)靜非常大。
比如管理后臺(tái)的界面，左側(cè)的主導(dǎo)航是全站通用的。某天決定要給它換一套淺色的設(shè)計(jì)，難道每個(gè)PSD都改一遍嗎？如果產(chǎn)品邏輯復(fù)雜，PSD有上百個(gè)呢？
下面講講組件化對(duì)開(kāi)發(fā)的意義。其實(shí)開(kāi)發(fā)同學(xué)從中受益比設(shè)計(jì)師更多。
降低耦合度，相信這是大型項(xiàng)目都在追求的。
舉個(gè)例子，如果要把頁(yè)面的body區(qū)域加寬。內(nèi)部許多元素因?yàn)楦?dòng)、固定寬度、百分比寬度、文字行數(shù)減少等等，布局會(huì)亂套。就像這圖里這樣，這是因?yàn)閮?nèi)部模塊的樣式對(duì)頁(yè)面父級(jí)元素存在依賴和繼承。
可能有人會(huì)覺(jué)得并不存在依賴關(guān)系，但其實(shí)固定寬度本身就是一種依賴關(guān)系。假如說(shuō)頁(yè)面主體部分寬度1000px，左側(cè)邊欄200px，右側(cè)800px。沒(méi)錯(cuò)，這是按設(shè)計(jì)圖來(lái)做的。那這個(gè)800px寬是怎么得出的？正是因?yàn)轫?yè)面主體寬度1000px，才找了個(gè)合適的左右比例，設(shè)計(jì)成這樣的。所以無(wú)可避免，從設(shè)計(jì)這個(gè)環(huán)節(jié)開(kāi)始就產(chǎn)生了依賴關(guān)系。
像這種情況，我寧可在模塊外面多套一層容器，模塊本身的寬度寫(xiě)成100%，外面那層容器屬于框架布局，具體寬度寫(xiě)在它上面。雖然DOM樹(shù)變復(fù)雜了，但內(nèi)外的布局邏輯被分離了。
比方說(shuō)要新增一個(gè)帶表格的界面，開(kāi)發(fā)同學(xué)按照設(shè)計(jì)的效果圖一行行寫(xiě)頁(yè)面。但是如果在某個(gè)已有界面中就存在表格？或許當(dāng)時(shí)是另一位開(kāi)發(fā)同學(xué)做的。相比重新寫(xiě)一遍，把代碼要過(guò)來(lái)直接用更方便一點(diǎn)吧？
如果表格樣式之后又要改呢，是不是兩個(gè)地方都得改。如此一來(lái)，用到表格的頁(yè)面越多，就越容易漏改。而且靜態(tài)資源服務(wù)器上存了太多份關(guān)于表格的樣式，其中內(nèi)容明明是一樣的。
優(yōu)化性能剛好可以接著上一條說(shuō)。
那么多份表格的樣式，客戶端每打開(kāi)一個(gè)新的表格頁(yè)面，就得加載一次。占用帶寬，浪費(fèi)了緩存資源。雖然一兩個(gè)的影響幾乎感受不到，但這種情況一多，就會(huì)對(duì)用戶體驗(yàn)產(chǎn)生明顯的影響。
慢，是用戶體驗(yàn)的頭等大忌，沒(méi)有之一。
這和設(shè)計(jì)師協(xié)作的道理相同。
如果兩個(gè)開(kāi)發(fā)同學(xué)都在制作帶有下拉菜單的頁(yè)面，這部分工作只要交給其中一人就行了。TA做好之后封裝成組件，另一位開(kāi)發(fā)在自己的頁(yè)面中加載就行了。
便于查錯(cuò)，是耦合性降低的一個(gè)副產(chǎn)品。它可以大大加快錯(cuò)誤排查的速度。
如果頁(yè)面上出現(xiàn)問(wèn)題，可以找出每個(gè)可能有關(guān)的組件，逐個(gè)拔除，直到恢復(fù)正常。這樣就能迅速鎖定錯(cuò)誤發(fā)生的位置。同時(shí)組件內(nèi)也可以形成完整的自測(cè)單元，也方便了測(cè)試工作。
假如設(shè)計(jì)師每個(gè)頁(yè)面改同一個(gè)地方要花一個(gè)小時(shí)，那開(kāi)發(fā)做同樣的事情至少要花一個(gè)上午，至少。
封裝成組件，可以把這個(gè)時(shí)間縮短到10分鐘。畢竟不用去改幾十個(gè)頁(yè)面的HTML、CSS和JS，改一個(gè)組件就可以了。
講了組件化的意義，本來(lái)順理成章應(yīng)該講組件化的具體做法。但在這之前其實(shí)有必要插入這一塊內(nèi)容，幫助沒(méi)有前端基礎(chǔ)的設(shè)計(jì)師了解，開(kāi)發(fā)是如何把頁(yè)面搭建起來(lái)的。
大家可以先有一個(gè)粗略的想象，就像是重力朝上的俄羅斯方塊。頁(yè)面元素都是從下往上這樣一行一行搭出來(lái)的，不過(guò)這個(gè)玩家有強(qiáng)迫癥，他一定會(huì)從左上角、右上角或者中間位置搭起。當(dāng)然……搭滿一行并不會(huì)消除。 ˉ\_( ツ )_/ˉ
網(wǎng)頁(yè)布局中有兩個(gè)概念：行內(nèi)元素和塊元素。它們是非此即彼的關(guān)系，網(wǎng)頁(yè)里只要是你能看見(jiàn)的東西，一定不是行內(nèi)元素就是塊元素。
這兩種元素的表現(xiàn)略有不同。虛線框代表一行，但實(shí)際上這是不可見(jiàn)的，只是我為了說(shuō)明布局方式畫(huà)出來(lái)的，其中的綠色矩形才是頁(yè)面上真實(shí)可見(jiàn)的元素。
我們看第一行，這里有3個(gè)行內(nèi)元素。內(nèi)容長(zhǎng)度不同，它們表現(xiàn)出來(lái)的寬度就不同，這是一種會(huì)隨內(nèi)容變化而改變尺寸的布局單元，而且它們總是從左到右橫向排列，只要一行里排得下。
再看第二行，這里只有1個(gè)塊元素。你看它內(nèi)容很短，就三個(gè)字，卻占了一整行。沒(méi)錯(cuò)，塊元素就是這么任性。自習(xí)室一卷廁紙占一排座位。
最后看第三行。淺綠色是一個(gè)塊元素，深綠色是它內(nèi)部的元素。所以元素之間是可以嵌套的，無(wú)論多么復(fù)雜的頁(yè)面，都是這樣一層層嵌套形成的。但是要注意，塊元素內(nèi)可以嵌入行內(nèi)元素和塊元素，行內(nèi)元素只能嵌入行內(nèi)元素。請(qǐng)看其中的深綠色部分，第二行是一個(gè)塊元素，設(shè)定了寬度，并且居中排列。其實(shí)前兩個(gè)行內(nèi)元素的右邊明明有空間，而且右邊還放得下一個(gè)行內(nèi)元素。但即使如此，它還是要占一整行。
當(dāng)然，塊元素這個(gè)獨(dú)占一行的特性有例外，我們接下來(lái)就會(huì)說(shuō)。
剛才講的是常規(guī)的布局方式，我們現(xiàn)在講兩種打破常規(guī)的方式。
浮動(dòng)有兩個(gè)方向，向左和向右。被加上了浮動(dòng)屬性的元素，表現(xiàn)都會(huì)變得類似于行內(nèi)元素，根據(jù)內(nèi)容變化尺寸。第一行的左右浮動(dòng)元素都可以是塊元素，但它們卻排在了一行里。
第二行和第三行是一組對(duì)比，表現(xiàn)了非浮動(dòng)元素與浮動(dòng)元素混合排列時(shí)的規(guī)則。第二行的文字是一個(gè)常規(guī)布局的元素，可以看到左右浮動(dòng)的元素各就各位，常規(guī)布局的文字很靈活地填充空隙，就像報(bào)紙排版一樣。而第三行里的情況，文字段落也加上左浮動(dòng)屬性，并且限定寬度，它就會(huì)跟在左浮動(dòng)元素的右側(cè)。
當(dāng)然，如果文字不限定寬度，它還是會(huì)獨(dú)占一行，因?yàn)槲淖肿銐蚨唷＿@和塊元素獨(dú)占一行的道理不同，它仍然帶有浮動(dòng)屬性，本應(yīng)該跟在左浮動(dòng)元素的右邊。只是因?yàn)樽陨韺挾忍?，一行擠不下了。
另一種打破常規(guī)的布局方式是絕對(duì)定位。這就毫無(wú)章法可言了，像狗皮膏藥一樣想貼哪里貼哪里，還可以像圖里這樣層疊著貼?？傊?，絕對(duì)定位的元素不會(huì)占據(jù)常規(guī)布局和浮動(dòng)布局中的任何空間，而是直接擋住它背后的內(nèi)容。
不過(guò)既然可以層疊，就有誰(shuí)在前誰(shuí)在后的問(wèn)題。這和設(shè)計(jì)工具里的圖層是一樣的，當(dāng)然有辦法可以控制。
http://v.youku.com/v_show/id_XMjY0ODI3OTAyMA==.html
我做了一個(gè)動(dòng)畫(huà)演示，大家感受一下頁(yè)面搭建的大致原理。
現(xiàn)在要講的是兩個(gè)更宏觀的概念：流式布局與彈性布局。
我們前面有提到常規(guī)布局，那個(gè)概念與這兩者不能相提并論。其實(shí)這兩種布局都是基于前面提到的原理實(shí)現(xiàn)的，只是區(qū)別在于對(duì)待自適應(yīng)問(wèn)題上采取了不同的策略。
看圖中的App store界面，在iPhone 7和7 plus上略有不同。雖然布局形式類似，但7上面只能看到一張banner，而7 plus則能看到左右兩邊banner露出來(lái)。而且App展示區(qū)域里，7上能看到3列多一點(diǎn)，7 plus則能看到4列多。屏幕大則視野更大，能顯示更多內(nèi)容，這是流式布局的思想。
彈性布局則是另一種思路。根據(jù)屏幕尺寸變化，讓界面上所有元素等比例放大縮小。所以無(wú)論在什么尺寸的設(shè)備上，看到的畫(huà)面都是一樣的，信息容量相同。只是到了大屏幕上，會(huì)變得像老年手機(jī)那樣碩大無(wú)比。
這兩種自適應(yīng)方式都有各自的用途，不能說(shuō)哪種一定更好。但我們?cè)谠O(shè)計(jì)時(shí)可以考慮一下這個(gè)問(wèn)題，什么類型的設(shè)計(jì)適合哪種布局。
補(bǔ)完了基礎(chǔ)知識(shí)，現(xiàn)在就可以講組件化設(shè)計(jì)的具體方法了。
首先要提取產(chǎn)品中的共用部分。我列舉了一些，這些都是極為常見(jiàn)的組件。
這個(gè)翻頁(yè)其實(shí)有點(diǎn)問(wèn)題，少了個(gè)當(dāng)前選中狀態(tài)，不知道現(xiàn)在是第幾頁(yè)啊。所以說(shuō)組件的提取要考慮周全，所有可能的狀態(tài)都要設(shè)計(jì)。
找到了這些共用元素，下面到具體制作環(huán)節(jié)，關(guān)于工具的使用我不會(huì)講太多，主要是思路與觀念。我用Sketch錄了3段操作演示，我們邊看邊講。
這段視頻是講Sketch中組件的使用。
我們把這個(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á)到這樣的效果。
這段視頻是講如何把組件的樣式與內(nèi)容分離開(kā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ù)?，F(xiàn)在我們?cè)龠M(jìn)到組件里，做點(diǎn)樣式修改，比如把電話號(hào)碼顏色改成灰色。回到列表，所有電話號(hào)碼都變灰了，內(nèi)容保持不變。
這樣就實(shí)現(xiàn)了樣式與內(nèi)容的分離，降低耦合度對(duì)設(shè)計(jì)同樣適用。
這段視頻是講組件的嵌套。
組件小的可以只有一個(gè)按鈕，大的可以是一個(gè)交互極其復(fù)雜的多步篩選項(xiàng)。所以復(fù)雜組件內(nèi)再嵌入簡(jiǎn)單組件，這是很常見(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)組件化。
設(shè)計(jì)組件不是把它搬到另一個(gè)地方，然后各處集中引用這么簡(jiǎn)單。開(kāi)頭我們就說(shuō)過(guò)，組件化思維的精髓是獨(dú)立、完整、自由組合。剛才我們做到了獨(dú)立，同時(shí)也需要做到完整。
就拿按鈕來(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)就是自由組合了。但并不是真的那么自由，我們要確定一些常用的組合方式。 
像這樣一個(gè)后臺(tái)管理界面：頁(yè)面的整體背景色，主菜單與右側(cè)內(nèi)容的距離，輸入框之間的距離……這些也都要有章法。
以上這些工作，沉淀下來(lái)，就成了設(shè)計(jì)規(guī)范。這套文檔對(duì)項(xiàng)目中的其他設(shè)計(jì)師是莫大的幫助，也是開(kāi)發(fā)人員重要的資料。 
組件化設(shè)計(jì)是一切的源頭，如果我們?cè)O(shè)計(jì)部分的組件化工作做得不到位，自己定的規(guī)范自己不遵守，開(kāi)發(fā)的同學(xué)的組件化工作是無(wú)法進(jìn)行的。
講完設(shè)計(jì)組件化，現(xiàn)在我們來(lái)講一下開(kāi)發(fā)的組件化。
最重要的一點(diǎn)，是需要轉(zhuǎn)變一個(gè)觀念。我們應(yīng)該以組件為單位，而不是以頁(yè)面為單位進(jìn)行開(kāi)發(fā)。
組件化開(kāi)發(fā)有兩種不同程度的做法。
先講講輕度組件化。它的主要思想是使用相同的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ì)比較大。
重度組件化的方式可以解決這個(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ì)外開(kāi)放。組件內(nèi)部是個(gè)黑盒，外部只需要了解數(shù)據(jù)的輸入與返回，不必關(guān)心組件內(nèi)的工作原理。
用這種思路管理項(xiàng)目，也會(huì)改變開(kāi)發(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ì)變得非常輕。各功能模塊的劃分清晰明確，一目了然。
雖然前面說(shuō)了這么多好處，但組件化不是一件輕松的工作。在項(xiàng)目初期的準(zhǔn)備工作會(huì)增加一定工作量，但隨時(shí)間推移會(huì)發(fā)揮出巨大的優(yōu)勢(shì)。
想象一下，像windows操作系統(tǒng)這種航母級(jí)的開(kāi)發(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ī)范上。 
開(kāi)發(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ú)影響。
雙方的維護(hù)工作固然重要，更重要的是溝通交換信息。有任何變化都要及時(shí)告知對(duì)方，組件的高度同步，是這種工作方式得以長(zhǎng)期延續(xù)的關(guān)鍵。
我們跳出工作的范疇，跳出剛才這些條條框框，單純想一想組件化這種思想。其實(shí)它可以用來(lái)理解生活的方方面面。
它的精髓就是這么3點(diǎn)：獨(dú)立、完整、自由組合。我們生活中見(jiàn)到的絕大多數(shù)工業(yè)產(chǎn)品，就是這么造出來(lái)的，比如汽車(chē)工業(yè)，比如富士康的iPhone生產(chǎn)線。甚至部隊(duì)的編制也是遵循這個(gè)原理。
而且組件化甚至都不算是人類的發(fā)明。即使放在自然界，這也是早已存在的模式。想想我們?nèi)梭w多么復(fù)雜，絕對(duì)不亞于windows操作系統(tǒng)。但除去極少數(shù)器官之外，任何部分損壞或缺失，我們都能活下來(lái)。這不得不說(shuō)是組件化的奇跡。
最后，我想給大家看一段1分鐘的視頻。這是宜家廚房的宣傳片，宜家是一家高度推崇組件化的公司。不僅僅是用在生產(chǎn)流程中，也把組件化思維從幕后推向了臺(tái)前，成為了自己品牌的一種語(yǔ)言。
我們來(lái)直觀感受一下，讓組件化的思想在你腦海中留下一個(gè)具象的畫(huà)面。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn