△ 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/

推薦閱讀：