Sketch 進階教程！利用Symbol 建立一套設計規范組件庫？

這是一篇 Sketch 進階教程，讓你學會利用 Symbol 建立一套設計規范組件庫。

文章目錄

• 寫在前面
• 基礎規范
• 圖標規范
• 組件規范
• 寫在后面

為保證更好地理解文章內容，你需要對以下知識點有一定的了解（部分內容已附注釋）。

1. Text style 1

△ 圖片來自Sketch手冊

在設計包含大量文本的界面時，許多圖層擁有相同的文本屬性。將它們保存為 Text Style，即可復用這些文本屬性，無需逐一設置。

Text Style 用于設置文字規范，涵蓋字體、字號、字重、顏色、字間距、行高2 、段間距等內容。

1 Text Style：https://sketchapp.com/docs/text/text-styles

2 行高：參考知乎專欄《聊一聊 Sketch 與 iOS 文字的行高》

2. Layer style 3

△ 圖片來自Sketch手冊

將一組風格元素保存為 Layer Style，這些元素便可復用在文檔中的任何圖層。

Layer Style 用于制作顏色規范，涵蓋填充顏色、描邊顏色、內外陰影、模糊效果等內容。

3 Layer Style：https://sketchapp.com/docs/styling/shared-styles

3. Symbol ?

△ 圖片來自Sketch手冊

作為 Sketch 的一項主打功能，Symbol 可以在畫板、頁面甚至其他 Sketch 文件中復用。Sketch 52 后，新功能令 Symbol 更加靈活化、輕量化。

• 可復用：支持畫板、頁面、多個文檔間的復用
• 可嵌套：Symbol 內可以嵌套多個 Symbol
• 可替換：Symbol 可替換為同組的其他 Symbol

△ Symbol替換

? Symbol：https://sketchapp.com/docs/symbols

4. 英文命名

之所以使用英文命名組件，有以下幾點原因：

• 方便設計師后期修改、整理文件
• 團隊內部易達成共識，方便協作
• 節約開發成本，減少不必要的溝通與重新切圖情況

5. 組件庫的構建思路

建立組件庫之前，先來談談構建思路：解構、拆分、重構。

「 解構 」

通用類設計規范包含：基礎規范、圖標規范、組件規范，第一步，將這三類規范一一解構。例：基礎規范解構為文字規范、顏色規范、布局規范…

「 拆分 」

將解構后的規范拆分為最基本的元素 Symbol，基礎規范與圖標規范到這一步就完成了。例：文字規范中，拆分為標題、副標題、正文、輔助文字、標簽文字…

「 重構 」

重構或稱為 Symbol 嵌套? 。用于制作組件規范，將拆分后的元素 Symbol 組合為模塊 Symbol，再將模塊 Symbol 組合為組件 Symbol。

? Symbol嵌套：https://sketchapp.com/docs/symbols/nested-symbols

6. 利用Symbol組件庫建立設計規范

其實，一套優秀的Symbol組件庫 = 一套簡潔易用的設計規范。組件庫中不僅涵蓋了常用組件，同時也包含 Text Style 與 Layer Style，三者共同組成了一套設計規范。

先來看看優秀的 Symbol 組件庫（常用組件規范）是什么樣子的：

圖示內容為 Ant Design 團隊出品的 Web 端組件庫? ，使用 Symbol Manager 插件預覽。

? Ant.Design.Components.Beta.3.10.5.sketch：https://ant.design/docs/spec/download-cn

根據上文的思路，我們將基礎規范、圖標規范、組件規范解構并將部分拆分為基礎元素，得出以下內容：

基礎規范

1. 文字規范（創建為Text Style）

• ??標題（Titile）
• ??副標題（Subtitile）
• ??正文（Body）
• ??次要文字（Secondary）
• ???標簽文字（Tags）

2. 顏色規范（創建為Layer Style）

• ?? 主色調（Primary）包含主色調的類似色，用做不同狀態
• ? 功能色（Fuction）成功、失敗、警示、不可用等狀態的顏色
• ? 漸變色（Gradients）
• ? 背景色（Background）
• ? 字體顏色（Text）

3. 布局規范

• ?? 分割線（Dividers）
• ? ……

4. 標簽規范

? ……

5. 其他樣式

• ? 圓角規范（Radius）
• ? 陰影規范（Shadows）
• ? ……

基礎規范中的主要內容為文字規范與顏色規范，將文字規范中的元素創建為 Text Style，顏色規范中的元素分類后創建為 Layer Style，其他元素根據不同情況進行調整即可。

圖標規范

圖標規范中，可根據圖標尺寸、業務場景、圖標功能等進行層級區分，筆者根據圖標尺寸來區分層級（暫不考慮最小可交互區域）：

• ? 48px（Tab欄圖標、金剛區圖標、吸底按鈕圖標等）
• ? 40px（使用場景：標題圖標、個人中心列表圖標等）
• ? 30px（使用場景：輔助圖標）

在制作圖標規范時，需要根據設計師自身情況作出相應調整。但在設計圖標時，以下幾點是共通的：

「 構成簡單 」

根據簡潔法則我們知道，簡潔圖形的識別需要用戶最少的認知和努力。對于通用規范中的圖標來說，盡可能的簡潔以保證用戶的辨識度。當然，像 TabBar、金剛區等特殊區域的圖標，需要我們在工作中單獨設計。

「 視覺尺寸統一 」

使用圖標盒子作為設計時的參照，保證整套圖標在視覺大小上的統一。當然圖標盒子并不是一個定死的數值，日常工作中需要根據圖標形狀進行微調。

「 像素對齊 」

對齊像素網格，路徑錨點的位置使用整數，避免虛邊情況的發生。

在 Sketch 中，可以通過打開像素模式或使用自動對齊像素功能來進行像素對齊。

「 使用偶數 」

適配原因，尤其在@2x的情況下作圖時需格外注意。

「 矢量形狀 」

使用 Convert to Outlines 與布爾運算功能，將圖標轉化為矢量形狀。

TIPS：在矢量形狀上套用 Layer Style 中的任意顏色，在之后的 Symbol 嵌套中就可以更改圖標的顏色了。

組件規范

由于篇幅有限，本文只介紹通用類組件，解構并歸類后，得出以下內容（設計師可以根據項目情況自行補充）

但僅僅解構分類是不夠的，想要完成一整套 Symbol 組件庫，還需要將解構后的組件拆分為單獨的元素 Symbol，以方便嵌套并組成 Symbol 組件。

篇幅有限，我們通過 List 組件舉例分析：

同上文制作 Symbol 組件庫的思路一樣，對于單一組件，同樣運用解構 → 拆分 → 重構的思路。不同的是，單一組件需要考慮到組件的不同形式 / 狀態。

「 解構為模塊 」

將 List 模塊化解構，得到 背景 Background、分割線 Divider、左側內容 Left、右側內容 Right

「 拆分為元素 」

左、右兩側內容還可以繼續拆分，得到 圖標 Icon、標題 Title、文字 Text、箭頭 Arrow

「 添加其他形式 / 狀態 」

僅涵蓋一種形式 / 狀態并不能稱之為完整的規范，我們需要考慮到List常見的所有形式

如圖，分割線的各種狀態，左右側內容的各種形式都需要考慮在內。對比前文拆分的結果，去除重復項，你會發現多出了一個開關 Switch 元素（Arrow、Check屬于Icon類），把它加入列表，就得到了構成 List 組件的所有元素 Symbol。

是不是有點眼熟？沒錯，這些元素 Symbol 正是基礎規范與圖標規范中的內容。

「 Symbol嵌套（重構）」

反向進行上面三步的思路，進行 Symbol 嵌套：首先將最基礎的元素 Symbol 組合成模塊化 Symbol，然后將模塊化 Symbol 組合成為 List 組件。

由于使用了 Symbol 嵌套，所以最后組合而成的 List 組件可以在右側的 Overrides 中進行各個模塊與元素的設置。

重復利用解構為模塊、拆分為元素、添加狀態/形式、重構（元素 Symbol → 模塊 Symbol → 組件 Symbol）這 4 個步驟，完成組件規范列表中的所有組件，這套利用了 Symbol 功能制作的通用規范組件庫就完成了。

寫在后面

1. 如何將Symbol組件庫運用在設計稿中？

將制作好的 Symbol 組件庫保存為 .sketch 文件，在 Sketch 上方菜單中找到：Sketch—Preferences—Libraries 中，點擊下方 Add Library… 按鈕，將 .sketch 文件導入即可。

2. 如何規范化管理Symbol組件庫？

當 Symbol 名稱中存在 「 / 」 符號時，Sketch 會將他們作為組獨立對待。舉個栗子：兩個 Symbol，一個名為 「 Button / normal 」，另一個名為 「 Button / pressed 」，這兩個 Symbol 將被歸類在 Buttom 分組中。

當然，也可以使用 Sketch Manager? 插件來幫助你規范化管理你的 Symbol。

? Symbols Manager插件：http://sketch.cm/plugins/114

相對于 Sketch 那死板的修改名稱管理 Symbol 組件庫的方法，Symbols Manager插件能夠以類似Finder的形式來幫助你查看、修改、刪除你的組件庫。當然，9.99 刀買斷的價格、加上只有搭梯子才能正常使用的限制也許會讓你望而卻步。

然而我們相信，正版意識、英文化組件管理、以及為優秀內容付費的概念會慢慢滲透到每個設計師的潛意識當中。

3. 如何令Symbol組件更加靈活？

Resizing 智能縮放是 Sketch 39 中加入的新功能，有多智能呢？

看看 Sketch 官方的答案 https://sketchapp.com/docs/layer-basics/constraints

 

如何在 Symbol 組件庫中運用呢？舉個栗子：

• 將 Tabbar 解構，我們得到 N 個相同的 Tab 模塊；然后將 Tab 模塊拆分，得到 圖標 Icon、文字 Text、分割線 Divider、背景 Background 4 個元素。
• 分別設置這 4 個元素的 Resizing 屬性，Tab 模塊即可做到橫向自由拉伸且不打亂布局。通過橫向拉伸尺寸，就可以得到 3-5 個 Tab 的 Tabbar 了。

可運用 Resizing 的類似組件還有很多，在制作 Symbol 組件庫中稍加留意，就能讓你的 Symbol 更加的靈活易用。

4. Symbol的拓展使用

Humaaans 是由 Pablo Stanley 提供的可免費用于商業或個人的插畫圖庫。你可以替換人物的發型、膚色、上衣、褲子、鞋子…也可以旋轉各元素的方向，再添加一點氛圍，它便是能適用于各種場合的插圖。

△ 內容來自網絡，官網鏈接 https://www.humaaans.com/

Avataaars 同樣是來自 Pablo Stanley 的可免費用于商業或個人的頭像素材庫，頭像中的任何元素都可以 DIY 組合，包含頭像、胡子、眼睛、眼鏡、臉部以及膚色均可自由搭配。（內容來自網絡，官網鏈接 https://avataaars.com/）

最后，希望設計師在建立 Symbol 組件庫的過程中，得到的不僅是設計效率的提升，還有其他各個方面的知識儲備與能力提升。

歡迎關注順豐科技用戶體驗設計部公眾號：「SFUED」

「制作有效設計規范的實用方法」

• 《騰訊出品！從零開始制作設計規范的實用指南》
• 《中小團隊來收！如何快速制作有效的UI設計規范？》
• 《實戰案例！設計師怎樣和前端開發一起制定設計規范？》