用一個落地項目，幫你掌握Sketch組件的制作思路

相信大家對于sketch組件并不陌生，作為sketch官方推出的功能，相對比較久了，不知大家是否還停留在只會建立單個組件，不會組合使用的情況。我最近在項目中也在做這個組件的事情，接下來會以落地項目、實際案例和大家分享組件的邏輯以及制作思路。

了解組件的邏輯

我們先來簡單了解一下原子設計理論（鏈接在文末）： 分為原子、分子、組織、模板、頁面。

我們重點講一下原子、分子、組織、樣式（拆分出來的）這四個。

△ 配圖出于原子設計理論文章

不熟悉原子理論設計的同學，看這篇：

1. 原子

原子可以作為構成用戶界面的基礎組成部分（無法進一步分解）稱為元素。例如表文本、圖形、圖標、分割線等。

2. 分子

由原子按照一定的順序和空間排列組合構成，稱為小組件。例如導航欄、標簽、列表等

3. 組織

由原子（元素）、分子（小組件）按照一定的順序和空間排列組合構成，稱為大組件。例如：列表流、入口模塊、瀑布流等。

4. 樣式

樣式分為文本樣式和圖形樣式，作用在原子上和原子配合使用。常用于文本更改屬性（字重、顏色、大小、間距等）和圖形更改屬性（顏色、描邊、投影等），在其他文章中，樣式作為原子出現，我這里單獨拆分出來，因為樣式在稍后的組件講解中挺重要的。

小結：組織（大組件）可以同時包含分子(小組件)、原子（元素）、樣式。也可以只包含分子，看大家怎么去設置組件模塊。案例實操會說明。

組件命名

sketch組件的命名邏輯為: 分類 / 模塊 / 組織 / 分子 / 原子，命名依次是從大到小

舉個栗子：（太爺/爺爺/爸爸/兒子）雖然有點滑稽，不過相對比較形象。

界面完整的組件命名：XX分類 / xx模塊 / xx組件 / 組件狀態

例：掘金（分類）/專家列表（模塊）/按鈕（組件）/已關注（狀態）這里邊斜杠 "/" 根據思維導圖邏輯關系用來區分父子級關系也包含嵌套關系。

實操講解

在講解之前我們先來了解一下sketch響應布局的一些設置

這里的設置分別為靠邊固定(靠左固定、靠右固定、靠上固定、靠下固定)、固定尺寸(固定高度、固定寬度)，最后一個預覽是我們在設置了前面兩個屬性之后會有個小動畫演示所設置的效果。

我們在創建組件的時候可以選擇性賦予不同方向的屬性，賦予屬性之后組件內容增加或減少會根據設置的方向改變組件的寬高。只能存在一種屬性或者無屬性。

案例1

知識點：靠邊固定、固定尺寸、賦予方向屬性

難點：靠邊固定設置錯誤，拉伸會跟著改變；沒設置固定高度寬度，拉伸變形

案例2

知識點：標簽替換、間距固定、文案換行、設置控件、無控件設置

難點：組件命名不一致、不能替換；組件方向屬性未設置，內容不會推移內容

案例3

知識點：小組件邏輯、編組賦予方向屬性

難點：組件邏輯、方向屬性設置

組件化的好處

1. 統一

在對于業務線龐大的軟件，經常是多個設計師一起完成整個產品設計，不同業務線設計師需嚴格按照統一規范、組件去使用。提升整個產品的視覺統一與交互規則統一。

2. 高效

在前期創建組件考慮好組件邏輯，做好每一種狀態?？焖倮媒M件搭建完整頁面，替換原子、分子元素。提升設計團隊效率

3. 靈活

在sketch組件中設置智能布局。可靈活手動更改組件控件的高度寬度，或根據內容多少自動調整。

4. 復用

組件必定是高頻復用的，通過建立完整的組件庫，在以后更新迭代可以直接修改復用組件。

設計團隊難免出現進出，即使有成員離開或者加入，通過設計規范和組件庫可以快速對接工作。復用組件避免出現新的設計師對于設計不同的認知，增加溝通成本。在做馬甲包或者相同業務的產品時。可以通過頁面結構、視覺規范統一和交互邏輯的復用讓用戶能夠感知到是同一系列產品（如阿里系、騰訊系等）提升強化產品品牌感。

5. 組件化對于開發來說也是有很大的好處

組件化開發是根據功能、業務線進行代碼劃分，開發可以把任何的一個html 代碼封裝成一個組件,前提是高度復用的場景以及梳理清楚邏輯關系。（這和設計在做組件的時候是一樣的）

降低軟件體積包大小

制作常用公共功能組件和各業務復用多的組件方便調用更改，避免出現 一個同樣框架的導航欄、不同業務的開發用代碼重新寫了一遍浪費app資源（這里對應前面講到的分子部分,常用公共功能組件如輸入框、日歷、表單等)）

提升工作效率、減少開發成本

可以在保持接口不變的情況下，替換不同的組件快速完成任務需求。

便于后期維護

由于整個頁面都是通過組件組合起來的，在測試出現問題的時候，可以定位問題，快速找到對應組件修改或者移除。

在團隊開發中，組件化帶來的優勢是便于協同開發（如設計多人協作完成一個項目時保證項目的統一性）。團隊中每個人發揮所長維護各自業務模塊的組件，對于APP來說也是一個不斷打磨的過程。

組件的擴展使用

1. 組件工具及團隊協作

藍湖規范云

目前使用較多是藍湖規范云來進行團隊協作

優點是：上傳便捷、拖拽使用、規范組件整理方便、自動同步更新

缺點是：當不同的人上傳組件后同步更新比較慢、一些樣式拖到新的文件中會丟失、超過10人收費

sketch cloud

個人覺得在團隊協作中比藍湖強大一些

優點是：可多人協作一份文檔、可查看文件歷史版本，可追溯、及時更新組件（sketch右上角有提示）

缺點是：個人收費比較貴，對于設計師多團隊有點不友好（當然啦，土豪公司例外）

2. 插畫組件

和頁面組件一樣，可以替換組件元素更改人物造型、背景等?？梢钥焖偻ㄟ^組件組合成不同的插畫場景。

Humaaans插畫組件庫

下載地址：

阿里海兔插畫組件庫

下載地址：

總結

組件化思維、組件能力是漸漸成為設計師必不可少的一項能力，對于團隊來說提升效率，減少設計師的溝通成本以及項目統一性的提升。設計團隊能夠花更多的時間去打磨產品細節，對于開發來說，減少工作量，保證實現還原的一致性。對于公司來說節省時間人力成本。組件庫要學會舉一反三運用在更多的地方，期待你們發掘不說了我得去做組件了。記得點贊喲~