母版 master与实例 instance
笔者推测Symbol的这两种状态应当来源于Javascript中的对象构造器与对象实例,我们可以在自然界找到最合适的类比:
通常由花萼、花冠、花蕊组成的植物器官被我们称之为花;但我们日常生活中所见到的花的实例,花萼、花冠、花蕊的颜色与形态各不相同,并且我们还会给这些实例命名,菊花、桃花、栀子花、樱花等等。
一朵花怎么长,都不会改变它基因中已决定好的结构。但如果造物者此时决定,花这种生物应当花冠托着花萼,那我们见到的所有的花也就变了模样。
再回到Sketch中,当我们创建Symbol时,会同时创建一个母版(即该Symbol的框架)于Symbol页,并将当前画板中的组新建为实例。
实例的放大缩小重命名、调节overrides中的参数,都对母版没有影响。而母版的结构调整会作用于所有实例。
组件化思维
Sketch Symbol的master与instance状态,overrides功能,使得组件不再仅仅是一个具象的元素组,同时也是抽象化的元素结构,从而极大地增强了组件的复用性,也让我们与程序员的认知更为接近。
出于一致性的要求、开发成本的限制,我们在画图的过程中,不能无限制的添加新组件,这就要求交互设计师在绘制线框图的过程中,留意组件结构的复用性。谨(sheng)慎(shi)起见,所有组件都可以建立为Symbol。
命名的技巧
当页面逐渐增加时,组件数量也不可避免地增加,直到组件的下拉菜单占满屏幕的时候……
被菜单支配的恐惧……需要用斜杠来驱散。
用“/”来对Symbol进行归类的方法,大家应该已经听到耳朵起茧。重要的是我们需要一个符合自己心智模型的分类方法,来将设计中可能出现的所有组件归类。
如果有设计规范,即遵从设计规范,但也可以在设计规范的基础上进行再分类,毕竟这份文档的资深用户正是我们自己。这里提供笔者的分类方法以供参考(原子-组织的概念来自原子设计):
同一类组件还可能有不同的形式、不同的状态,可以”分类名称 category / 类型或模块type or module / 组件名称 name / 组件状态 status“的方式命名。
笔者认为组件的使用率也遵循80/20法则,即界面中80%的内容来自20%的组件。由于组件菜单默认采用首字母排序,我们可以运用一些小技巧- 在母版名称前添加”*”或“_”等将常用的组件类型提前。
嵌套的秘密
Sketch的Symbol也可以类比为一个有机体,就像血液中的红细胞由血红蛋白分子与其他功能分子共同构成一样,可以由其他Symbol的实例构成。
如果Symbol的母版采用的画板大小相同,Sketch会自动视为一组,将其中一个Symbol的实例嵌套在组件中,这一组Symbol将可以通过overrides的下拉菜单进行切换。
为了方便后续画图时理解overrides面板内容与组件元素的对应关系,建议对所有嵌套的Symbol实例进行一次重命名。
还有一点需要注意:要在最终的组件实例上修改overrides参数,对嵌套实例overrides进行的修改不会被反应在最终的组件实例中。
必备插件
选择多个群组后,可以利用该插件批量生成symbol。
一键给所有选中图层/画板重命名,与Symbol organizer搭配,随时帮你恢复所有symbol的整洁有序。
按照Symbol命名自动将同类Symbol排列在一起,需要整理重复的Symbol时,非常有用。
备注:文章插图所用sketch文件为Material Design theme editor生成。其中的文件组织与命名非常规范,值得参考,但缺点是层级过于复杂。Symbol的使用需要在复用性和简洁之间寻求一种动态平衡。
文章中的图1、图2、图6来源于网络,基于CCO协议。