Sketch Symbol的高效运用心法

母版 master与实例 instance

笔者推测Symbol的这两种状态应当来源于Javascript中的对象构造器与对象实例，我们可以在自然界找到最合适的类比：

通常由花萼、花冠、花蕊组成的植物器官被我们称之为花；但我们日常生活中所见到的花的实例，花萼、花冠、花蕊的颜色与形态各不相同，并且我们还会给这些实例命名，菊花、桃花、栀子花、樱花等等。

一朵花怎么长，都不会改变它基因中已决定好的结构。但如果造物者此时决定，花这种生物应当花冠托着花萼，那我们见到的所有的花也就变了模样。

再回到Sketch中，当我们创建Symbol时，会同时创建一个母版（即该Symbol的框架）于Symbol页，并将当前画板中的组新建为实例。

实例的放大缩小重命名、调节overrides中的参数，都对母版没有影响。而母版的结构调整会作用于所有实例。

组件化思维

Sketch Symbol的master与instance状态，overrides功能，使得组件不再仅仅是一个具象的元素组，同时也是抽象化的元素结构，从而极大地增强了组件的复用性，也让我们与程序员的认知更为接近。

Symbol不再仅仅是一个具象的元素组，同时也是抽象化的元素结构

出于一致性的要求、开发成本的限制，我们在画图的过程中，不能无限制的添加新组件，这就要求交互设计师在绘制线框图的过程中，留意组件结构的复用性。谨（sheng）慎（shi）起见，所有组件都可以建立为Symbol。

命名的技巧

当页面逐渐增加时，组件数量也不可避免地增加，直到组件的下拉菜单占满屏幕的时候……

被菜单支配的恐惧……需要用斜杠来驱散。

用“/”来对Symbol进行归类的方法，大家应该已经听到耳朵起茧。重要的是我们需要一个符合自己心智模型的分类方法，来将设计中可能出现的所有组件归类。

如果有设计规范，即遵从设计规范，但也可以在设计规范的基础上进行再分类，毕竟这份文档的资深用户正是我们自己。这里提供笔者的分类方法以供参考（原子-组织的概念来自原子设计）：

同一类组件还可能有不同的形式、不同的状态，可以”分类名称 category / 类型或模块type or module / 组件名称 name / 组件状态 status“的方式命名。

笔者认为组件的使用率也遵循80/20法则，即界面中80%的内容来自20%的组件。由于组件菜单默认采用首字母排序，我们可以运用一些小技巧- 在母版名称前添加”*”或“_”等将常用的组件类型提前。

嵌套的秘密

Sketch的Symbol也可以类比为一个有机体，就像血液中的红细胞由血红蛋白分子与其他功能分子共同构成一样，可以由其他Symbol的实例构成。

如果Symbol的母版采用的画板大小相同，Sketch会自动视为一组，将其中一个Symbol的实例嵌套在组件中，这一组Symbol将可以通过overrides的下拉菜单进行切换。

为了方便后续画图时理解overrides面板内容与组件元素的对应关系，建议对所有嵌套的Symbol实例进行一次重命名。

嵌套的Symbol即成为实例Overrides中一个可替代的元件 对嵌套的Symbol重命名，以便在overrides中方便的找到它（们）

还有一点需要注意：要在最终的组件实例上修改overrides参数，对嵌套实例overrides进行的修改不会被反应在最终的组件实例中。

必备插件

Batch create symbols

选择多个群组后，可以利用该插件批量生成symbol。

Rename it

一键给所有选中图层/画板重命名，与Symbol organizer搭配，随时帮你恢复所有symbol的整洁有序。

Symbol organizer

按照Symbol命名自动将同类Symbol排列在一起，需要整理重复的Symbol时，非常有用。

备注：文章插图所用sketch文件为Material Design theme editor生成。其中的文件组织与命名非常规范，值得参考，但缺点是层级过于复杂。Symbol的使用需要在复用性和简洁之间寻求一种动态平衡。

文章中的图1、图2、图6来源于网络，基于CCO协议。