您需要 登录 才可以下载或查看，没有账号？注册
x
本帖最后由 qq_云里雾里_pc9 于 2018-12-19 15:37 编辑
Sketch进阶教程：利用Symbol建立一套设计规范组件库
写在前面
这是一篇关于 Symbol 的进阶教程。为保证更好地理解文章内容，你需要对以下知识点有一定的了解（部分内容已附注释）。
Text style 1 ▲ 图片来自Sketch手册
在设计包含大量文本的界面时，许多图层拥有相同的文本属性。将它们保存为 Text Style，即可复用这些文本属性，无需逐一设置。
Text Style 用于设置文字规范，涵盖字体、字号、字重、颜色、字间距、行高2 、段间距等内容。 1 Text Style：https://sketchapp.com/docs/text/text-styles 2 行高：参考知乎专栏「 聊一聊 Sketch 与 iOS 文字的行高https://zhuanlan.zhihu.com/p/38322447 」 Layer style 3 ▲ 图片来自Sketch手册
将一组风格元素保存为 Layer Style，这些元素便可复用在文档中的任何图层。
Layer Style 用于制作颜色规范，涵盖填充颜色、描边颜色、内外阴影、模糊效果等内容。 3 Layer Style：https://sketchapp.com/docs/styling/shared-styles
Symbol ⁴ ▲ 图片来自Sketch手册
作为 Sketch 的一项主打功能，Symbol 可以在画板、页面甚至其他 Sketch 文件中复用。Sketch 52 后，新功能令 Symbol 更加灵活化、轻量化。
● 可复用：支持画板、页面、多个文档间的复用 ● 可嵌套：Symbol 内可以嵌套多个 Symbol ● 可替换：Symbol 可替换为同组的其他 Symbol
▲ Symbol替换
⁴ Symbol：https://sketchapp.com/docs/symbols
英文命名
之所以使用英文命名组件，有以下几点原因：
● 方便设计师后期修改、整理文件 ● 团队内部易达成共识，方便协作 ● 节约开发成本，减少不必要的沟通与重新切图情况
组件库的构建思路
建立组件库之前，先来谈谈构建思路：解构、拆分、重构。
「 解构 」 通用类设计规范包含：基础规范、图标规范、组件规范，第一步，将这三类规范一一解构。例：基础规范解构为文字规范、颜色规范、布局规范…
「 拆分 」 将解构后的规范拆分为最基本的元素 Symbol，基础规范与图标规范到这一步就完成了。例：文字规范中，拆分为标题、副标题、正文、辅助文字、标签文字…
「 重构 」 重构或称为 Symbol 嵌套⁵ 。用于制作组件规范，将拆分后的元素 Symbol 组合为模块 Symbol，再将模块 Symbol 组合为组件 Symbol。
⁵ Symbol嵌套： https://sketchapp.com/docs/symbols/nested-symbols
利用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） 1. ↳ 标题（Titile） 2. ↳ 副标题（Subtitile） 3. ↳ 正文（Body） 4. ↳ 次要文字（Secondary） 5. ↳ 标签文字（Tags） 2. 颜色规范（创建为Layer Style） 1. ↳ 主色调（Primary）包含主色调的类似色，用做不同状态 2. ↳ 功能色（Fuction）成功、失败、警示、不可用等状态的颜色 3. ↳ 渐变色（Gradients） 4. ↳ 背景色（Background） 5. ↳ 字体颜色（Text） 3. 布局规范 1. ↳ 分割线（Dividers） 2. ↳ …… 4. 标签规范 1. ↳ …… 5. 其他样式 1. ↳ 圆角规范（Radius） 2. ↳ 阴影规范（Shadows） 3. ↳ ……
基础规范中的主要内容为文字规范与颜色规范，将文字规范中的元素创建为 Text Style，颜色规范中的元素分类后创建为 Layer Style，其他元素根据不同情况进行调整即可。
图标规范 图标规范中，可根据图标尺寸、业务场景、图标功能等进行层级区分，笔者根据图标尺寸来区分层级（暂不考虑最小可交互区域）：
1. ↳ 48px（Tab栏图标、金刚区图标、吸底按钮图标等） 2. ↳ 40px（使用场景：标题图标、个人中心列表图标等） 3. ↳ 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 功能制作的通用规范组件库就完成了。
写在后面 如何将Symbol组件库运用在设计稿中？ 将制作好的 Symbol 组件库保存为 .sketch 文件，在 Sketch 上方菜单中找到：Sketch—Preferences—Libraries 中，点击下方 Add Library… 按钮，将 .sketch 文件导入即可。 如何规范化管理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 刀买断的价格、加上只有搭梯子才能正常使用的限制也许会让你望而却步。
然而我们相信，正版意识、英文化组件管理、以及为优秀内容付费的概念会慢慢渗透到每个设计师的潜意识当中。 如何令Symbol组件更加灵活？ Resizing 智能缩放是 Sketch 39 中加入的新功能，有多智能呢？
看看 Sketch 官方的答案 https://sketchapp.com/docs/layer-basics/constraints
官方给出的答案太难看不懂？来复习下上古版本中你就该学会的内容 「 一张图教你用Sketch39新功能 - Resizing智能缩放 https://www.ui.cn/detail/154342.html」
如何在 Symbol 组件库中运用呢？举个栗子： 1. 将 Tabbar 解构，我们得到 N 个相同的 Tab 模块；然后将 Tab 模块拆分，得到 图标 Icon、文字 Text、分割线 Divider、背景 Background 4 个元素。
2. 分别设置这 4 个元素的 Resizing 属性，Tab 模块即可做到横向自由拉伸且不打乱布局。通过横向拉伸尺寸，就可以得到 3-5 个 Tab 的 Tabbar 了。
可运用 Resizing 的类似组件还有很多，在制作 Symbol 组件库中稍加留意，就能让你的 Symbol 更加的灵活易用。
Symbol的拓展使用
Humaaans 是由 Pablo Stanley 提供的可免费用于商业或个人的插画图库。你可以替换人物的发型、肤色、上衣、裤子、鞋子…也可以旋转各元素的方向，再添加一点氛围，它便是能适用于各种场合的插图。
最后，希望设计师在建立 Symbol 组件库的过程中，得到的不仅是设计效率的提升，还有其他各个方面的知识储备与能力提升。
共勉。
|
评分
显示全部 11
