Sketch 进阶教程！利用Symbol 建立一套设计规范组件库？

是一篇 Sketch 进阶教程，让你学用 Symbol 建立一套设计规范组件库。

文章目录

• 写在前面
• 基础规范
• 图标规范
• 组件规范
• 写后面

为证更地理文章内容，你需要对以下识点有一定的（部分内容已附注释）。

1. Text style ¹

△ 图片来自Sketch手册

在设计包含大量文的界面时，许图拥有相同的文属。将它们存为 Text Style，即复用文属，无需逐一设置。

Text Style 用于设置文字规范，涵盖字体、字、字重、颜色、字间距、行高² 、段间距内。

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

² 行高：参考知乎专栏《聊一聊 Sketch  iOS 文字的行高》

2. Layer style ³

△ 图片自Sketch手册

将一组风格素保存为 Layer Style，这些素便可复用在文档中的任何图层。

Layer Style 于制作颜色规范，涵盖填充颜色、描边颜色、外阴影、模糊效果等容。

³ 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」