最新公告
  • 欢迎您光临xd素材中文网xdsucai.cn,服务于广大UI设计师。立即加入我们
  • sketch教程—原子化设计及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对比可以看出,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里的复制图层样式类似。

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

    Batch Create Symbols–批量创建Symbol

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

    Rename it–快速批量重命名

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

    Symbol organizer–整理Symbol位置及查看

     

     

    xd素材中文网,提供优质的设计资源,有xd源文件,sketch源文件,设计规范,实用的商业ui设计教程。
    xd素材中文网 » sketch教程—原子化设计及Symbol解析

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    xd素材中文网
    致力于ui设计领域

    发表评论

    • 100会员总数(位)
    • 24695资源总数(个)
    • 464本周发布(个)
    • 53 今日发布(个)
    • 211稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情