07-sketch-符号组件

今天药忘吃喽~ 2022-11-25 05:28 106阅读 0赞

UI 设计的过程中，我们常常会想重复使用某些元素，已达到整体风格和细节的统一，有时是一个按钮，有时是一种文字式样，有时则是图形填充和边框的式样。复用之后我们还希望这些元素可以保持同步，如果更改其中一个，其他的也会随之改变。Sketch 当中有这几个不同的方式来帮你实现：

如何将想法和工具结合起来，让自己的工作效率翻倍，这篇文章为你答疑解惑。

工欲善其事必先利其器，在日常工作中，怎么样提高自己及团队的工作效率应该是很多设计师和团队在思考的问题。Sketch 作为 UI 设计师的必备工具，我们已经相当熟悉，如何结合 Sketch 来提高自己以及团队的工作效率呢？我从下图所示的几个方面结合自己的经验做个简单分享。

![format_png][]

### 一、Symbol ###

![format_png 1][]

**1. Symbol 介绍**

Symbol 是 Sketch 中一个强大且实用的功能，可以让你轻松的在画板和页面以及多个文件中复用重复元素。Symbol 的存在类似智能对象在 PS 中的存在，但 Symbol 比智能对象更加灵活实用。那么如何高效合理的利用 Symbol 进行工作呢，下面我介绍下 Symbol 的使用方法。

**2. Symbol 使用方法**

Symbol 的使用场景主要集中在模块化设计，如何合理的利用模块化思维进行设计工作，是现在的设计师需要思考的一个问题。那么什么是模块化设计呢？对于产品体验设计而言，模块化设计就是将产品流程、产品结构、交互方式、表现形式等产品的主要组成要素模块化。通过模块化设计可以让我们在差异化跟高效之间找到一个合适的平衡点。

模块化设计主要分为以下步骤：模块划分——模块设计——模块组合，这里主要针对模块的划分以及模块的设计进行重点说明。首先模块是由控件组成，主要包括字体、按钮、图标、列表等。而模块又由控件组成，模块跟控件存在父子关系。

在模块划分标准上要遵循：单一性（模块颗粒度要小，一个模块解决一个需求）、完整性（内部流程可打通，形成闭环）、独立性（每个模块和其他模块的依存关系要低，以便跟其他模块组合适配）。

![format_png 2][]

在模块设计的部分遵循：复用性（尽可能的提高复用模块占比），延展性（考虑一定的模块控件可拓展性，以便处理在一定范围内的差异性），互换性（需要注意对外信息结构一致，保证全局信息结构快速互换）三大原则。

![format_png 3][]

在产品的设计过程中，根据产品的实际情况，我们使用 Symbol 对模块进行控件化，以下图为例：

![format_png 4][]

我们可以看到上图导航栏模块，分别由背景、图标、文字、分割线、状态栏组成。依照模块化设计的标准，我们依次对他们创建 Symbol（文字除外），这时候控件元素已经创建好，对他们进行对应的排列组合这个模块就已经完成了，在日常基本工作中，这部分工作已经完成了。但是做到这些是不够的，我们需要更深层思考，例如适配其他端应该怎么处理，有没有其他情况下会跟现在的控件重复或者冲突等等，这都是要思考的问题。那么如何合理的创建 Symbol，避免控件样式的重复呢？我们继续以导航栏模块为例：

![format_png 5][]

根据上一部分我们知道导航模块第一种类型已经完成了，但是在实际项目中我们知道导航栏样式不会只有这么一种类型，根据产品实际情况我们想到会出现以上几种情况，所以我们也对他们进行模块化。可以复用的元素就可以调用之前模块里面的控件，例如状态栏、返回按钮、背景色，这样做可以最大化的避免模块控件的重复，也可以在产品设计早期完善模块，做到未雨绸缪，为以后的设计工作做准备。

看到这里，大家可以看到，我并没有讲 Symbol 的任何具体使用方法，工具只是实现想法的一种媒介，我们应该多思考，举一反三，将工具跟想法结合起来才能达到效率和质量的最大化。

1.1 默认组件symbol（符号）

![format_png 6][]

1.2 自定义组件

![format_png 7][]

![format_png 8][]

1.3 组件的命名

我会为设计体系当中的每一种颜色生成一个Shared Style，并按照不同的作用进行分类，具体的分类方式就是在Shared Style命名当中通过／符号表示层级结构，Sketch会识别到该符号，并自动生成相应的架构。

![format_png 9][]

1.4 组件的嵌套与重载

![format_png 10][]

![format_png 11][]

二、共享图层式样 Layer Style

图层式样则仅仅针对图形：使用什么样的填充和边框，什么样的阴影和模糊，这些都是可以复用并同步的。

### 三、共享文字式样 Text Style ###

文本式样让你保持文本的一致性，设定好字体、字号、颜色，然后复用于多个文本。

最后你可以在共享列表中来管理所有的符号和式样，方便你删除、复制或者重命名。

![format_png 12][]

### 四、模板 ###

New From Template

这个功能让你从之前设定好的模板中直接新建文件（就像 Keynote 和 Pages 里面那样） Sketch 已经为大家设置好了几个最常用的模板，方便直接调用。

・iOS App Icon：按照 iOS User Interface Guidelines 的要求，每个画板都是图标所需的不同尺寸。

・iOS UI Design： Sketch 3 嵌入了 由 teehan+lax 制作的iOS 7 UI套件，第一页是欢迎页面，所有的 symbols 在第二页哟。（我们会再下篇分享具体讨论symbols）

![format_png 13][]

・Mac App Icon：每个画板都是Mac图标所需的不同尺寸。

・Web Design：第一页包含四个网页设计的画板：Desktop HD、Desktop、Tablet Portrait 和 Mobile Portrait，非常直观。第二页同样包含简单的web UI 元素。

・Welcome to Sketch：这是 Bohemian Coding 团队制作的一个展示页面，Sketch 官网的最终实现效果也正是由此产生。如果你是初次使用 Sketch，我十分建议你打开这个模板看看，因为它本身已经是一份完整的 Sketch 文件了，你可以迅速了解到 Sketch 当中规范的文件组织结构是什么样的，图层层级是什么样的，一些最基本的操作是什么样的，这些都能帮你更快熟悉 Sketch。

模板的另一个好处是你可以自己新建模板，创作好文件然后进入菜单栏的 File > Save as Template。因为symbols符号功能是用于复用某一具体元素，比如一个按钮，它并不能在不同文件中共享，而模板则可以用来创建无数个独立的文件。

![format_png 14][]

Sketch47版本，更新了重要的团队协作新功能——Libraries，可以说是共享版本的“Symbol”，它具备了所有symbol的特性，并在symbol的基础上支持团队编辑、调用，一起来看看怎么使用吧。

### 五、Library ###

1. Library 介绍

Library 其实只是一个普通的 Sketch 文件，其中包含 Symbol，你可以在其他 Sketch 文件中使用此 Symbol。如果您更新 Library 文件中的任何一个 Symbol，你都会收到更新通知，利用 Library，团队成员们可以在 Sketch 文件之间共享 Symbol，并使其更新以始终保持同步。

2. Library 使用方法

在设计团队中，多人协作是必然情况，那么如何使通用模块和控件始终保持一致呢？我们只需将 Librar 文件存放在一个固定的地方，例如云盘、公司内部网盘等位置，将通用的控件以及模块存放在其中，然后其他设计师就可以轻松调用了。当这个 Librariy 有任何修改，你都可以接收到更新通知。

通常情况下，我们会将公司产品的设计规范、通用模块和控件做成 Library 文件，让团队内的其他设计师进行调用。一般里面包括颜色、图标、文字、还有其他模块控件等。团队的设计师可以充分利用 Library 来让自己文件里面的 Symbol 始终保持最新，以及和团队成员保持一致。但是由于任何设计师都可以对 Library 文件进行编辑，所以我们要将 Library 进行安全的分离，对 Library 的编辑只能在特定的位置、特定的文件，甚至特定的人进行，因此一般不会有不相关的编辑。如果一旦不小心无意进行了修改一定要及时修改回来，不然团队内的其他设计师的文件就会出问题。

下面就分享下如何简单的创建一个 Library 文件。这里我们以 Apple 官方的 Library 文件为例进行讲解，这里我们选择将文件存放在坚果云里面。详细看下图：

![format_png 15][]

我们将文件存放好之后，打开 Library 添加弹层如下图：

![format_png 16][]

Add Library 按钮选择存放在坚果云的 sketch 文件，如下图：

![format_png 17][]

这样 Library 文件已经添加成功，我们就可以轻松的访问我们 Library 里面的控件了。如果有人对我们的 Library 文件进行了编辑，那我们会在自己使用 Library 文件中收到如下图一样的更新提示，我们可以根据自己的需求选择是否更新 Symbol，如下图所示：

![format_png 18][]

通过上面的流程讲解，我们可以看到 Library 的使用很简单，通过 Library 可以让我们团队协作得更加顺畅，工作效率和工作质量会有很大的提升。设计师们如果有机会一定要尝试构建 Library 文件，不论是为个人还是为团队都对自己的整体把控能力有很大的提升。

三、好用的小技巧

使用了这么久的 sketch。有几个好用的小技巧分享给大家。

1. Sketch支持简单的数学计算，再也不用计算器了，直接在输入框内就可以计算，用途广泛，如下图所示：

![format_png 19][]

2. 在一倍图 0.5px 的分割线让很多设计师头疼，这里利用内阴影教大家制作，如下图所示 ：

![format_png 20][]

3. 默认的图形样式是可以设置的，这样可以更加个性化，如下图所示：

![format_png 21][]

4. 如何利用圆周率进行 Loading 制作，如下图所示：

![format_png 22][]

5. 如何利用内阴影快速制作可复用表格，如下图所示：

![format_png 23][]

6. 如何测量组内跟组外间距，组内量组外间距快捷键为：option+上档键+鼠标悬浮。

![format_png 24][]

7. 如何快速查到历史用色记录，如下图所示：

![format_png 25][]

四、效率拓展

下图是给大家推荐的11款常用 sketch 插件和一个 Sketch 文件版本管理工具，下面我就依次介绍下这11款插件和1个软件。

![format_png 26][]

[Runner][] —— 使用命令行来提高你的工作效率

[Cfaft ][Cfaft]—— 帮你提高效率的自动填充神器

[Rename it][] —— 快速批量重命名你的图层

[Remove Unused Symbols][] —— 一键删除未使用的 Symbol

[Artboards to PDF][] —— 批量导出选定画板为多页 PDF

[ImageOptim][] —— 一键导出所有切片资源并自动优化体积

[Sketch Measure][] —— 快速创建规范为开发者和团队协作提供方便

[Midnight][] —— 增加替换主题功能及小工具

[Flavor ][Flavor]—— 给你的设计加点料

[Sketch2AE][] —— 轻松导出 Sketch 资源至 AE 并自动定位

[Anima][] —— 可以实现自动布局

[Abstract][] —— Sketch 文件版本管理软件

[format_png]: /images/20221124/389dde1363bc48c99df44421f5700434.png
[format_png 1]: /images/20221124/0bb7cdc537a44ee88fac4b0f39e71fac.png
[format_png 2]: /images/20221124/d01ad585eea346f9b48b84c8c15fcaee.png
[format_png 3]: /images/20221124/80d304441b9042c794a078d63c0c9ede.png
[format_png 4]: /images/20221124/576be69e276243a096fbb06909f7e042.png
[format_png 5]: /images/20221124/06be27f45b7646b0a82729cabb7a5889.png
[format_png 6]: /images/20221124/57c7eba0ebdd472198f28f5e5deb6320.png
[format_png 7]: /images/20221124/3b8bbfb5a61e4e658ea32367e1e4c715.png
[format_png 8]: /images/20221124/de5a4667983e4611856b878b1a05b32b.png
[format_png 9]: /images/20221124/ed15fce5053f4abf9225b052dc7215d7.png
[format_png 10]: /images/20221124/2e1782aedc4149ce89ae6c6810864724.png
[format_png 11]: /images/20221124/cc71ee85f20242d1afad59c259b33f48.png
[format_png 12]: /images/20221124/ba4a472ece3d408d867fc7eebdb4848f.png
[format_png 13]: /images/20221124/318f3f004ecb46348d80a724ffa67f42.png
[format_png 14]: /images/20221124/2eb319813dd44538b6217839c09639b0.png
[format_png 15]: /images/20221124/10bdbfff1486488889b125822c7a3b6f.png
[format_png 16]: /images/20221124/54ba361fc6604deeba3fcf9c7a8a48b5.png
[format_png 17]: /images/20221124/3f02db41867c496b8d9115930299bd4f.png
[format_png 18]: /images/20221124/0b14487ad9774713a7fe281d5d929113.png
[format_png 19]: /images/20221124/b6100d7b803a40f984f6ac974e70b6a8.png
[format_png 20]: /images/20221124/7b3b76ac9a464c74811d74962e3fc478.png
[format_png 21]: /images/20221124/058ec95104b24c05bff51fd98089a3a1.png
[format_png 22]: /images/20221124/9bec4cc8f08b4eab927441281872e146.png
[format_png 23]: /images/20221124/8ea300bb784a4f3e91122c4716eace13.png
[format_png 24]: /images/20221124/c81f69397b6340cb8e6b342ca3c7fe87.png
[format_png 25]: /images/20221124/f5a0fd44a3064c77a9c7f41c3522f2d8.png
[format_png 26]: /images/20221124/a31a81853fe3449c92cc6e9a3f0f38b9.png
[Runner]: http://sketch.im/plugins/12
[Cfaft]: http://sketch.im/plugins/16
[Rename it]: http://sketch.im/plugins/17
[Remove Unused Symbols]: http://sketch.im/plugins/48
[Artboards to PDF]: http://sketch.im/plugins/52
[ImageOptim]: http://sketch.im/plugins/94
[Sketch Measure]: http://sketch.im/plugins/1
[Midnight]: http://sketch.im/plugins/129
[Flavor]: http://sketch.im/plugins/89
[Sketch2AE]: http://sketch.im/plugins/61
[Anima]: https://www.animaapp.com/#sketchtocode
[Abstract]: https://www.goabstract.com/