本文將深入細節從多角度去解析組件化的概念，幫助我們理解、構建組件庫。

設計組件化的概念本身是從程序的開發模式中演變而來，開發中的工程化思維是不是也可以幫助我們高效的管理設計稿呢？

產品的快速迭代中，原本固化的工作模式越來越不適應環境的變化，而研究各種工具、優化設計流程、開放設計思維可以讓設計師有更多時間去優化體驗、尋求設計價值。

我們日常使用的 Sketch 之所以能成為目前最主流的產品設計工具之一，我個人認為在于它的每一次更新，都可以多多少少解決目前設計過程中的某些痛點，而科學的使用這些功能會將設計師的能力最大限度發揮出來。

那么如何將項目組件化？本文將從起點讀書的組件化案例中吸取核心內容與大家分享。

理解產品結構

業務屬性的不同，對于產品整體布局的影響也存在差異，讀書、社交、電商、新聞、視頻等品類App都有自己獨有的組件結構，而相同品類下的產品結構基本大同小異。以讀書類產品為例：橫向對比，大部分的閱讀頁、精選頁、書詳情頁結構基本相似，唯一不同的是業務各有不同，模塊位置等有所差異，但是從組件復用性上看都存在極大相似度。

并不是各類產品廠商不想做差異化，而是本身的業務屬性對于大部分用戶來說已經形成一條比較成熟的數據排版結構，較大的改變會招致用戶的反感，雖然可博得部分用戶的追捧，但這樣的「創新」對于一個成熟產品而言卻是不利的，因此我們往往會把更多的差異放在組件細節上。

所以理解產品的結構可以幫助我們快速構建組件庫的基本框架，在此框架基礎上可以對組件大致做下分類和優先級排序。

組件歸類

對自己負責的產品結構有所認知后，我們就需要對產品結構進行程度上的解構、分類，組件 (UI層面上的) 的歸類通常分為四種：原生組件、擴展組件、自定義組件、封裝組件。

1. 原生組件：顧名思義就是系統本身自帶的組件類型，例如按鈕、導航、彈窗等等。
2. 擴展組件：是基于原有組件基礎，進行功能擴展，例如在導航欄上加下拉操作，在彈窗中加操作項等等。
3. 自定義組件：所謂自定義組件就是原本系統中沒有，我們根據產品特點創造出來的特有組件。
4. 封裝組件：是指對產品中經常出現的一系列場景頁面進行組合封裝的復雜組件。

這四個概念中，原生組件和擴展組件都屬于系統（Android & iOS官方規范）導向的類型，所以我們暫且統稱為基礎組件；這類組件存在于大部分App中，例如導航欄、工具欄、彈窗、toast、按鈕等就是基礎組件。

自定義組件和封裝組件，具有較強的產品功能導向，因此稱為屬性組件。這類組件跟產品功能有較強的關聯性，比如效率管理App中常用的日歷組件，視頻App常用的播放器組件，讀書App內的推書列表組件、金融App內的行情趨勢組件等。

做這樣的區分，可以讓我們對組件有更加充分的理解，兩個類別的組件在構建時也存在較大的差異，區別對待可以幫助我們更好的理解、構建和調用；有了明確的定義，我們在構建組件庫時就能明確類型，合理規劃，有效的進行搭建的前期工作。

顆?；芾?/h2>

與傳統窮舉法區別：窮舉法顧名思義就是將產品中使用的所有組件全部列舉出來，好處在于比較直觀，沒有復雜的組合邏輯、方便交接，壞處是比較難以管理、拓展性小，文件冗余、牽一發動全身等。

顆?；芾硎菍⒔M件進行模塊拆分再拆分，充分提高細小組件的的復用率。具體是就是將組件先拆分為具有復用性的模塊，進一步再對復用性的模塊進行模塊拆分，以此類推，通常拆分到圖標、文字等單一元素時已經是最小顆粒了。

如果需要調整其中某一模塊時，只需進行獨立調整，就可讓全局隨之響應，而其他模塊不會受其影響。這種管理方式的優點諸多不一一贅述，缺點在于這樣的組件擁有一定的復雜度，理解需要花費一點精力。

從組件結構角度來看基礎組件結構表現單一，但是表現形式與內容多樣，所以通常會多以顆?；鳛闃嫿ㄊ走x。屬性組件表現形式復雜還存在許多嵌套關系，但是表現形式與內容單一，所以通常會以顆?；透F舉法混合作為構建方式。從類別與布局的關系上可以看出，顆?；墙M件庫構建不可或缺的一個重要環節。

1. 結構細分

結構細分其實就是將本身獨立的組件進行打散、細化、整合、重組，過程中我們對特定位置的常用組件進行模塊整個，使每個模塊都可以獨立變化替換，這種多嵌套組合式的細分可以讓組件最終展現出來的樣式以幾何倍數量增長，這是窮舉法完全無法達到的構建方式。

通常拆分后的布局可分為兩個場景來表現，第一個場景是組件庫可實現的細分結構，如位置、尺寸、顏色、字體樣式、圖標等。第二個場景是在設計稿中進行的細分，通常指圖片、文案。

位置、尺寸的結構細分：起點讀書擁有近百種導航欄的樣式，但是從布局結構上來看，大致可拆分為狀態欄、背景、左操作項（左組合），中間展示項（中組合），右操作項（右組合）這五個模塊，每個模塊可以獨立產生新的樣式或向下細分新模塊以適應新的產品需求。

不過這里有兩個注意點，一般模塊拆解到按鈕、圖標等最細顆粒后通常不會再進行拆分，并且拆分模塊不建議層級超過4個層級。

• 顏色與字體樣式：可通過 Sketch 自帶的 Layer Styles 和 Text Styles 進行管理，也可通過 Craft Manager 來管理。
• 圖標：作為最常用的基本單位，出現頻率較高，因此在建立時需要有一定的秩序規律，繪制好整齊排布在組件庫的特點位置就可以。
• 圖片與文案：通常在設計稿鋪設階段才會使用，可以通過 Sketch 自帶的素材管理功能 「Data」來管理，當然我們依然可以用 Craft Manager 來管理這些素材。

2. 響應式布局

這個功能以前只能借助第三方插件來得以實現，不過后來 Sketch 官方也提供了 Resizing 的功能，從基礎結構來看僅有6個選項，但是我們可以通過不同的組合來實現更多基礎適配方式，而在此基礎上還可以搭配一些嵌套規則來實現更多的適配效果。

具體我們稍作一下解釋，前四個從圖標就可以看出分別是固左、固右、固頂、固底，后兩個分為為固高、固寬。對一個元素設置了固左、固寬后，執行左右拉伸操作時設置的元素就有了左對齊的適配效果。對一個元素設置了固頂、固底后，執行上下拉伸操作時設置的元素就有了固定間距的適配效果。

除此以外也有一些組合是相沖的，比如：設置了固左、固右后，是不能再這種固寬的，這兩個也是一種相反的效果。

嵌套的運用也稍作一下解釋，因為基本操作已經比較清楚了，我們看（實例1）就能明白。

如果一個組件需要同時支持上下左右同時拉伸時，設置項就相對復雜了一些，這里我們還是來通過實例來認知一下概念，如下圖（實例2）：

因為運用了顆?；墓芾矸绞?，所以基本上每一個前臺展示的最終組件都會含有嵌套組件模塊，我們在搭建組件時如果把這些適配也一并考慮進去，不管對于開發還是對于其他同事的理解都有比較大的幫助。當然如果你所在的公司是通過 Sketch 交付設計稿，那么這項操作會讓你的開發小伙伴對你肅然起敬，因為這會減少很多為適配而花費的精力。

如何命名

上面提到的組件歸類、顆?；夹枰鳛榛A，細分后的模塊如何查找、區分，設計稿如何調用組件，這些都離不開合理的命名引導。因此命名可以說是構建組件庫非常重要的一個環節，合理的命名會讓整個組件庫布局條理清晰、結構縝密，實際使用時能夠幫助我們快速定位。

如果按層級的方式做區分的話，命名通常分為二大類：

（1）組件分類名

通常指組件的準確名稱，如導航、工具欄、彈窗、按鈕等。（為方便大家參考，此處附上一張對照表）

（2）組件的的細分模塊命名

這類模塊目前沒有標準所參考，但是我們可通過一些最容易理解的特征來區分，比如：位置、數目、形狀、顏色、情感（積極操作、消極操作）等作為命名依據，如果一個模塊同時保有這些特征，可以在構建初期就定好層級的優先級。

此處以導航欄為例，畫圈部分的命名為「導航/白色/_資源/左組合/1圖標」，「/」是 Sketch 區層級用的符號，「_」純粹是為了讓資源能夠在列表內置頂使用的一個小技巧，如果是此模塊下的元素只需對「左組合」后面的信息做調整就行。

雖然從工程化角度來看，這種方式會顯得不夠嚴謹，但從使用、理解角度出發，這個方法相對高效，還易上手快速形成認知。

實際使用流程

組件庫經過一系列的操作搭建完成后，那么后續，我們如何通過它來運作，我們通過上圖可以有個直觀的了解：

1. 區分組件類別，并在此類別區進行操作
2. 進行組件布局，模塊搭建
3. 布局同時不要忘記設置Resizing
4. 對命名再進行一次梳理
5. 保存
6. 設計稿更新調用
7. 模塊拼合，選取需要用的樣式
8. 調整文案、圖片、圖標等
9. 完成

而參與項目合作的其他同學只需要執行第6~8條就可以了。

結語

通過組件化的建立，我們讓設計內部的產出有了統一標準，也與開發者之間搭起了一段新的橋梁。從設計稿到組件庫，之后組件庫到設計規范，再從設計規范到展示程序，最終展示程序影響到設計還原，我們通過優化深入將這四個之前關系并不明朗的概念重新改造結合，形成新的閉環。

通過新形成的閉環，與技術部合作建立出了符合開發者維度的組件化管理模式（起點讀書組件展示程序）。對于設計團隊來說，迭代效率得到顯著提升，設計團隊能夠主導產出的優化結果增多，對于開發團隊來說，減少工作量的同時還原一致性也得到了保障。當然組件庫的意義遠不止于此，我們還會繼續優化、迭代，只求做到更好。

作者：楊雪松，微信公眾號 ( id: YUX_design)

來源：https://mp.weixin.qq.com/s/K61KNycMp_ilCdw-JSgN0Q

本文由 @楊雪松 授權發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議