sketch里的symbol的用法解析,教你如何理解symbol的原子化设计思路

一、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里的symbol功能作比较,比较担忧会误导读者,但是我刚认知到symbol功能时第一反应就是ps里的智能对象,和axure里的母版,有熟悉的实物作参考,对于新认知会有更好的帮助,所以我写下了两者的比较。)

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

二、Symbol的使用场景?


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

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

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

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

解决方法:传统是每个页面修改一遍,改到吐血。(真实项目经历:由于一个菜单变化,使用PS的视觉设计师把所有手上100多个页面全部调整一遍)

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

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

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

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

三、Symbol的具体用法


1、如何创建symbol


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

Image title

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

2、原子化设计思路及symbol的套嵌

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

Image title

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

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

Image title

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

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

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

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

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

3、symbol的核心功能-复用-修改


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

Image title

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

Image title

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

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

Image title

四、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文件。

Image title

sketch里的preferences选项

Image title

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

下图完整展示具体操作:

Image title

Image title

Image title

同时推荐几个symbol插件,有需要可以在网上下载:

Batch Create Symbols–批量创建Symbol

Symbol Manager–对Symbol进行重新命名或者拖拽就可以改变套嵌顺序和套嵌位置

Rename it–快速批量重命名

Symbol namer–将Symbol实例重命名为覆盖文本值

Symbol organizer–整理Symbol位置及查看

附件是原子化设计中的用户列表卡片的symbol控件sketch源文件,如果有需要可以下载具体看看

                                            如果对你有用请点个赞吧

声明:* 本站所提供的资源均来源于互联网,站内所有文字、图片内容由网站会员上传而来,UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷,本站不负任何责任。如果有侵犯到您的权益,请联系本站删除,谢谢合作!联系邮箱:Uishe#qq.com (请将[#]换成@)