組件化其實是一個很早就有的概念了，并不多稀奇，也不難理解。尤其是對于編程開發人員而言，對此應該更是熟悉。而今天這篇文章，我作為一個UI設計師來談談我對于組件化開發與設計的一些想法，從而幫助設計師們了解程序員是如何進行組件化開發的，怎樣的設計才能更好的方便程序員快速落地實現，你又應該提供哪些設計文件，協助程序員組件化開發。難道只是效果圖和切圖嗎？肯定不是。

什么是組件化？

組件化在我的理解來看，有點類似于搭積木，如上圖所示，每一塊積木就是一個組件，是既獨立又統一的。因為獨立，所以它可以自由組合，也可以隨意替換和刪除其中一個組件，并不會影響整體。但是它又統一于整體，比如上面的積木都是六邊形的，你不可能拿一個三角形放進去啊。而組件化就是說，一個整體項目就是由無數個獨立的組件搭建起來的。組件化的工作方式信奉獨立、完整、自由組合。目標就是盡可能把設計與開發中的元素獨立化，使它具備完整的局部功能，通過自由組合來構成整個產品。

設計師為什么也要有組件化思維呢？

我先來說說，組件化對設計師有什么好處？

1. 符合產品功能邏輯；作為一個UI設計師，設計最重要的一點就是要符合產品功能邏輯，絕不是所謂的“好看”。而組件化的設計理念恰恰是最能幫助設計符合產品功能邏輯的。

從實踐驗證來講，特定類型的信息，就有特定的最優展現方式和交互方式，這叫做設計模式。設計模式就應該提取出來作為組件。比如要從多個維度快速檢索和對比大量數據，沒有什么能比表格形式效率更高。想象一下，下面這個界面的表格數據，做成卡片式堆疊在一起，劃一張換一條。或者像淘寶商品列表那樣，一行4列平鋪開。那還對比個P啊，用戶都要摔鼠標了。

2. 有助于保持交互一致性；比如說，在一個項目里，選擇日期應該是統一的交互方式，在整個產品中就應該只有一種存在形式。所以時間選擇器就是一個組件，一個可以復用的組件。如果你沒有組件化思維，很可能出現好幾個不同的時間選擇器，一會兒是滾輪撥盤，一會兒是日歷，一會兒又是下拉列表，這樣的設計絕對是不能上線的。當然，該統一的地方還有很多，比如：錯誤提示的形式，進度條的交互方式，導航欄和按鈕的樣式，表單，下拉菜單等等。

3. 保持視覺風格的統一；這部分主要是視覺方面的考慮，更多樣式上的差異，不同的樣式會給產品帶來不同的調性。

就拿下圖按鈕來說。圓頭造型表現出一種柔和親切的特質，同時有利于將注意力聚焦到其中內容上。而直角則展現出一種棱角分明的硬朗，邊界更加清晰。想一想三星手機和錘子手機的外觀造型，兩種截然不同的感覺。為了保持產品視覺風格統一，設計師應該找到最合適的方案，并處處保持統一，不可以太隨心所欲。比如說，在類似的界面中，有的按鈕是方的，有的按鈕卻是圓的，這怎么能行呢？甚至于同一產品中，不同界面的下拉菜單樣式都不一樣，這也絕對是不行的。

4. 便于多設計師協作；組件化設計是大型設計項目的必要條件。

比如兩位設計師協作，一個在設計注冊界面，一個在設計修改密碼界面，或者在設計某個問卷調查的彈窗。這其中都有表單，兩個人設計出來不一樣怎么辦？一個邊框顏色深一點，一個邊框顏色淺一點？表單的點擊反饋效果一個是黑色表示觸發輸入，一個是主色表示觸發輸入？其實沒理由不同，應該保持一致。口頭約定太麻煩，而且難以保證執行到位，組件化就是最好的解決方式。

5. 便于修改設計；設計總是需要修改優化的，有些改動牽扯全局，動靜非常大。

比如管理后臺的界面，左側的主導航是全站通用的。某天決定要給它換一套淺色的設計，難道每個源文件都改一遍嗎？如果產品邏輯復雜，源文件有上百個呢？你準備一個個的改到什么時候呢？3天？5天？甚至幾個禮拜，時間就會都花在這種無意義的重復勞動上了。但是如果你一開始就依照組件化設計，那么對于設計的修改就會是非常方便的，你只需要將主導航這一個組件改為淺色即可。改這么一個組件的顏色，你甚至一分鐘都不用就搞定了。剩下的時間，可以用來干嘛呢？用來構思思考設計樣式，交互方式，優化你的設計，這才是設計師應該做的。

開發人員為什么也要有組件化思維呢？

下面講講組件化對開發的意義。其實開發同學從中受益會比設計師更多。因為組件化開發絕對可以大大提高工作效率，減少加班時間的。不加班了，開發同學們，你們終于可以打游戲泡妞出去浪啦。

1. 降低耦合度；降低耦合度，相信這是大型項目都在追求的。

舉個例子，如果要把頁面的body區域加寬。內部許多元素因為浮動、固定寬度、百分比寬度、文字行數減少等等，布局會亂套。就像下圖里這樣，這是因為內部模塊的樣式對頁面父級元素存在依賴和繼承。

可能有人會覺得并不存在依賴關系，但其實固定寬度本身就是一種依賴關系。假如說頁面主體部分寬度1000px，左側邊欄200px，右側800px。沒錯，這是按設計圖來做的。那這個800px寬是怎么得出的？正是因為頁面主體寬度1000px，才找了個合適的左右比例，設計成這樣的。所以無可避免，從設計這個環節開始就產生了依賴關系。像這種情況，我寧可在模塊外面多套一層容器，模塊本身的寬度寫成100%，外面那層容器屬于框架布局，具體寬度寫在它上面。雖然DOM樹變復雜了，但內外的布局邏輯被分離了。

2. 減少冗余；頁面中所有<table>標簽，都可以使用同一套css，不必每個頁面單獨定義。

比方說要新增一個帶表格的界面，開發同學按照設計的效果圖一行行寫頁面。但是如果在某個已有界面中就存在表格？或許當時是另一位開發同學做的。相比重新寫一遍，把代碼要過來直接用更方便一點吧？如果表格樣式之后又要改呢，是不是兩個地方都得改。如此一來，用到表格的頁面越多，就越容易漏改。而且靜態資源服務器上存了太多份關于表格的樣式，其中內容明明是一樣，這就會導致代碼越來越冗余。

3. 優化性能；優化性能剛好可以接著上一條說。那么多份表格的樣式，客戶端每打開一個新的表格頁面，就得加載一次。占用帶寬，浪費了緩存資源。雖然一兩個的影響幾乎感受不到，但這種情況一多，就會對用戶體驗產生明顯的影響。慢，是用戶體驗的頭等大忌，沒有之一。應該是按需加載資源，一個簡單的登錄頁面，沒有必要加載整站的css與js代碼，拖慢速度。

4. 便于多開發協作；這和設計師協作的道理相同。如果兩個開發同學都在制作帶有下拉菜單的頁面，這部分工作只要交給其中一人就行了。TA做好之后封裝成組件，另一位開發在自己的頁面中加載就行了。

5. 便于查錯；這便于查錯，是耦合性降低的一個副產品。它可以大大加快錯誤排查的速度。如果頁面上出現問題，可以找出每個可能有關的組件，逐個拔除，直到恢復正常。這樣就能迅速鎖定錯誤發生的位置。同時組件內也可以形成完整的自測單元，也方便了測試工作。

如下圖，突然出現某個彈窗樣式錯亂。如果采用組件化開發，只要檢查彈窗這個組件的代碼，如果是這部分代碼出現問題了，只需要解決這部分代碼就行了，如果彈窗組件沒有問題，則說明不是彈窗代碼導致的bug，不需要解決彈窗，而是去排查別處的代碼，這樣就能大大縮小排查范圍。

6. 便于修改；假如設計師每個頁面改同一個地方要花一個小時，那開發做同樣的事情至少要花一個上午，至少！封裝成組件，可以把這個時間縮短到10分鐘。畢竟不用去改幾十個頁面的HTML、CSS和JS，改一個組件就可以了。比方說，來了一個新需求，要求所有頁面的標題字號都要加大，開發同學如果不按照組件化開發，那就要一個個頁面的改了。我想這就是別的開發可以出去浪，而你卻要不停地加班的原因之一吧。

設計師要懂的頁面布局原理

講了組件化的意義，本來順理成章應該講組件化的具體做法。但在這之前其實有必要插入這一塊內容，幫助沒有前端基礎的設計師了解，開發是如何把頁面搭建起來的。大家可以先有一個粗略的想象，就像是重力朝上的俄羅斯方塊。頁面元素都是從下往上這樣一行一行搭出來的，不過這個玩家有強迫癥，他一定會從左上角、右上角或者中間位置搭起。當然……搭滿一行并不會消除。 ¯/_( ツ )_/¯

布局原理：

1. 行內元素與塊元素；這網頁布局中有兩個概念：行內元素和塊元素。它們是非此即彼的關系，網頁里只要是你能看見的東西，一定不是行內元素就是塊元素。

這兩種元素的表現略有不同。圖中虛線框代表一行，但實際上這是不可見的，只是我為了說明布局方式畫出來的，其中的綠色矩形才是頁面上真實可見的元素。

如上圖，我們看第一行，這里有3個行內元素。內容長度不同，它們表現出來的寬度就不同，這是一種會隨內容變化而改變尺寸的布局單元，而且它們總是從左到右橫向排列，只要一行里排得下。再看第二行，這里只有1個塊元素。你看它內容很短，就三個字，卻占了一整行。沒錯，塊元素就是這么任性。就像自習室一卷廁紙占一排座位那樣。最后看第三行。淺綠色是一個塊元素，深綠色是它內部的元素。所以元素之間是可以嵌套的，無論多么復雜的頁面，都是這樣一層層嵌套形成的。但是要注意，塊元素內可以嵌入行內元素和塊元素，行內元素只能嵌入行內元素。請看其中的深綠色部分，第二行是一個塊元素，設定了寬度，并且居中排列。其實前兩個行內元素的右邊明明有空間，而且右邊還放得下一個行內元素。但即使如此，它還是要占一整行。當然，塊元素這個獨占一行的特性有例外，我們接下來就會說。

2. 浮動；剛才講的是常規的布局方式，我們現在講兩種打破常規的方式。

如下圖所示，浮動有兩個方向，向左和向右。被加上了浮動屬性的元素，表現都會變得類似于行內元素，根據內容變化尺寸。第一行的左右浮動元素都可以是塊元素，但它們卻排在了一行里。第二行和第三行是一組對比，表現了非浮動元素與浮動元素混合排列時的規則。第二行的文字是一個常規布局的元素，可以看到左右浮動的元素各就各位，常規布局的文字很靈活地填充空隙，就像報紙排版一樣。而第三行里的情況，文字段落也加上左浮動屬性，并且限定寬度，它就會跟在左浮動元素的右側。當然，如果文字不限定寬度，它還是會獨占一行，因為文字足夠多。這和塊元素獨占一行的道理不同，它仍然帶有浮動屬性，本應該跟在左浮動元素的右邊。只是因為自身寬度太大，一行擠不下了。

3. 絕對定位；另一種打破常規的布局方式是絕對定位。

這就毫無章法可言了，像狗皮膏藥一樣想貼哪里貼哪里，還可以像下圖里這樣層疊著貼?？傊^對定位的元素不會占據常規布局和浮動布局中的任何空間，而是直接擋住它背后的內容。不過既然可以層疊，就有誰在前誰在后的問題。這和設計工具里的圖層是一樣的，當然有辦法可以控制。

一個頁面是如何搭建出來的？

為了讓大家看得更清楚，我做了一個動畫演示，大家感受一下頁面搭建的大致原理：動畫演示—在線播放—優酷網

布局原理的宏觀概念

現在要講的是兩個更宏觀的概念：流式布局與彈性布局。我們前面有提到常規布局，那個概念與這兩者不能相提并論。其實這兩種布局都是基于前面提到的原理實現的，只是區別在于對待自適應問題上采取了不同的策略。

1. 流式布局；

看上圖中的App store界面，在iPhone 7和7 plus上略有不同。雖然布局形式類似，但7上面只能看到一張banner，而7 plus則能看到左右兩邊banner露出來。而且App展示區域里，7上能看到3列多一點，7 plus則能看到4列多。屏幕大則視野更大，能顯示更多內容，這是流式布局的思想。

2. 彈性布局；

彈性布局則是另一種思路。根據屏幕尺寸變化，讓界面上所有元素等比例放大縮小。所以無論在什么尺寸的設備上，看到的畫面都是一樣的，信息容量相同。只是到了大屏幕上，會變得像老年手機那樣碩大無比。

這兩種自適應方式都有各自的用途，不能說哪種一定更好。但我們在設計時可以考慮一下這個問題，什么類型的設計適合哪種布局。

設計組件化

補完了基礎知識，現在就可以講組件化設計的具體方法了，設計師如何運用組件化思維？