设计教程

sketch教程—原子化设计及Symbol解析

3674

一、Symbol是什么？

百度了一下翻译，symbol翻译是符号，标志，记号的意思；然后个人理解就是它是一个特殊的组，可以被多个页面复用，在一个中修改，其他页面全部自动跟随改变（适用于批量修改页面）如果熟悉Axure的同学应该比较容易理解了，它的功能和Axure中“母版”的功能类似，但是它的应用和内在逻辑在某种程度上比Axure的母版更方便，同时这个symbol功能和曾经很火的flash里的symbol功能也很相似，flash里symbol也被称为元件，所以也有很多设计师称呼sketch里symbol为元件，一个特殊的元件。

同时，刚开始认知symbol这个功能时，我发现也有点类似ps里的智能对象，ps智能对象复制一个，在该页面中双击进入智能对象里，任意改动智能对象里的元素，该页面中其他复制的智能对象都会跟随改变，但是注意，ps里的智能对象只适用于该页面，意思是如果新建另一个画板，把这个智能对象拖进去，再点击进入智能对象修改，则另一个画板的智能对象不会改变，而sketch里的symbol则不一样，首先你要明白，sketch是对标adobe旗下的矢量软件AI的，所以sketch也是一款矢量软件，这里它的symbol功能则就拥有ps智能对象部分功能，但是，symbol的变化是所有画板中相同symbol都跟随变化，是跨越画板的，而ps只是在同一个画板中适用，同时symbol还有很多ps里的智能对象不具备的优点，这点一定搞清楚。

从上图ps和sketch对比可以看出，ps智能对象在同一个画板中改变一个，其他才会跟随变化，而sketch改变一个symbol，其他画板则是全部跟随变化，同时，右则红线标注中则是symbol完全不同意ps智能对象的地方，多个面板中的symbol文本内容，可以通过右侧直接修改，同时如果这个symbol有多个样式，则有也可以通过右侧有一个symbol下拉菜单选择，这里就牵扯到后面要讲的symbol套嵌symbol功能了。

二、Symbol的使用场景？

首先要了解上面所说的Symbol特性：能被重复引用，能批量修改并生效到所有页面。产品中部分元素经常会重复出现在多个页面中，例如菜单、搜索框、登录头像等，我们可以提取出来将其创建为Symbol，并应用到以下常见场景当中去。

1、产品设计中需要制作多个页面，每个页面都要用到相同的控件，例如相同的搜索按钮。

解决方法：传统方式是复制粘贴，而sketch里则是先创建好symbol，然后在每个页面中复用symbol

2、页面某个控件样式有变化，涉及多个页面的改动，例如搜索按钮底色变化。

解决方法：传统是每个页面修改一遍，改到吐血。

而Symbol的用法是直接在Symbol中进行修改，所有页面同步生效。

3、可以提供一份最新的完整的视觉设计规范

解决方法：传统处理方式是先制作页面后，再从页面中提取规范内容，形成规范文档，如果页面有了新的规范，则需要更新到设计规范中去，最后的结果往往是更新不及时。

而sketch里的Symbol库本身就是一份设计规范文档，维护Symbol=维护规范文档，还能同步更新所有页面。

三、Symbol的具体用法

重点来了，其实很多类似教程都有说到或者解释到symbol是什么，以及用途，怎么用，但是很多又讲述的很零散，所以这里我要把symbol和symbol的套嵌这些概念实物化，我们应该都学习过物理生物学科，可以把symbol理解为一个最小基础单位——原子，而symbol套嵌而成的symbol则是原子组成的分子，套嵌的symbol组合在一起组成了构成生物的组织器官，这些组织器官组合就成为了一个完成的人（产品app）。

上图直观操作可以看出创建symbol之后，可以在页面二、三里任意复用，而且进入symbol里修改symbol的文本或者样式，其他页面全部跟随改变。

上图以常见的app中的用户列表分析，可以直观的看出单个的控件（常见的小图标，小标签、头像等等）转化而成的symbol则可以归类为整个产品的原子，而头像和加v标签这一组和职称小火苗这一组则构成了一个个分子，底部颜色卡片也可以算是原子，也可以算是分子，（功能简单的列表卡片等等会出现原子就是分子的现象）；最后一个一个分子组成组织（一个用户列表卡片）

上图演示：双击任意一个symbol控件进入symbol面板可以看到，（这里我为了清晰展示，对我认为的原子、分子、组织进行了标明和归纳整理，如果不归纳整理，点击symbol面板会是所有元素都散乱的铺在页面中），原子都是一个个小的控件symbol，然后小控件组合成一列，如“交互设计师”这个控件和后面三个小火苗可以组合成一列，这样打成一个组，创建symbol，就是一个分子了，这也就是symbol套嵌symbol而组成分子，分子再次创建symbol，把“加v的头像”和“昵称”、“交互设计”、“小火苗”这样的分子（比较简单的也可以是原子组成组织），摆列在背景颜色卡片上组成组织，这样在以后的产品制作中就可以直接复用组织，在对symbol创建命名时，需要注意的是：Symbol的名称输入有讲究，尽量使用英文名称，如果你在符号名中加入了斜杠 “ / ”，Sketch 会将它视为组的分隔标志，分组能方便地复用Symbol（后面详述），且符号始终会按照字母顺序排列，而不是创建时间，方便维护Symbol。

为了方便讲解，小的控件Symbol的命名为“用户列表/原子组/昵称栏/昵称”，分为四个层级，在“用户列表”这个组织里，下一层级是原子组、分子组、组织，最后细分到原子组/昵称栏/昵称、分子组/等级栏、组织组/列表一等等。

创建完成后，得到下图所示的基础Symbol库，其中各Symbol的命名规范如下：

①用户列表/原子组/昵称栏/昵称、用户列表用户列表/原子组//等级栏/职称、用户列表/原子组/等级栏/火苗/红色、用户列表/原子组/等级栏/火苗/灰色、用户列表/原子组/等级栏/火苗/无、用户列表/原子组/头像/加v/黄色、用户列表/原子组/头像/加v/红色、用户列表/原子组/头像/加v/蓝色、

用户列表/原子组/按钮/关注、用户列表/原子组/头像/男士、用户列表/头像/男士、用户列表/原子组/背景板/黄色、用户列表/原子组/背景板/蓝色

②用户列表/分子组/等级栏、用户列表/分子组/头像

③用户列表/组织组/列表一、用户列表/组织组/列表二

symbol的核心功能-复用-修改：

上图简单演示了，symbol的复用，以及symbol套嵌symbol 的方式，这一点也是sketch里symbol的核心功能。

嵌套Symbol有两种复用方式，第一种同单个Symbol的方式，直接调用整个用户列表卡片symbol即可，或者替换整个用户列表卡片也行

第二种方式即是嵌套Symbol复用的核心，如下图所示，选中一个嵌套Symbol后，软件右侧出现了Overrides，里面包括多个下拉选项，这些选项实际上是由单个Symbol（原子）组成，可以通过下拉选项切换为其他单个Symbol。

如果Symbol属于文本类，那么可以在右侧相应文本的地方替换为自己输入的文字即可，可以满足同一个菜单样式，不同菜单名称的情况。

四、Symbol的注意事项

同一组的Symbol尺寸应保持一致，如果尺寸不一致，替换后样式会出现问题；

在画步上画任意形状图形（矩形或者其他），都可以直接替换为Symbol，并且沿用Symbol的样式

关于symbol命名一定要注意区分好，尽量用英文命名，而且注意“/”的使用是划分为一个小组。

五、关于Sketch里的Libraries

Libraries翻译过来就是图书馆的意思，如果想要把做好的symbol控件在sketch里其他文档里用，就是当你做另一产品是要用到symbol时，你必须把这个symbol控件先储存为sketch文件到桌面上，然后把这个文件拖到sketch——preferences，进入Libraries里，点击下面小齿轮按钮，找到sketch里的Libraries储存文件夹，把刚保存的symbol文件拖到这个Libraries储存文件夹（你放在桌面上那天误删或者出错，那么这个symbol文件就找不到了，在其他文档也就没法用了，这个Libraries储存文件夹类似一个保险柜），然后从Libraries储存文件夹里找到刚刚加入进入的symbol文件，把这个symbol文件再拖到sketch的Libraries面板列表中，这样就可以在以后做其他产品时调用这个创建的symbol文件。

sketch里的preferences选项

点击preferences选项会进入到该面板中

下图完整展示具体操作：

六、Sketch里的样式共享—APPEARANCE

APPEARANCE翻译是“外观、外貌、样式”，在sketch里主要功能是文本，图像的样式共享，首先创建你需要的标题、正文文本样式，选中之后，在右侧APPEARANCE下拉菜单中选择创建新的样式，之后在其他页面就可以随时在右侧APPEARANCE下拉菜单中找到之前创建的文本或者图形样式了，直接点击拷贝复用，这个功能和sketch里的拷贝样式差不多，拷贝样式快捷键是Command+Option+C & Command+Option+V （拷贝样式）；和ps里的复制图层样式类似。