今天为各位UI设计师总结了symbol的四大特点，提升的你工作效率。

在讲解这个四大特点之前，可以先看一下这两张图，第一张是一个购票App的首页，第二张是这个首页里面所用的symbol。

看完图

来看一下这四个特点：

一：一键修改 ——只要修改某个按钮的symbol，那么这个页面的所有按钮都会随之修改

就视觉层面而言，我觉得UI设计师和平面设计师最大的不同就是，平面设计是一个静态的画面，而UI是一个动态的画面。因为一个按钮或者一个文字，会因为用户的操作而呈现不同的状态。

例如一个按钮会有normal，pressed和disable三种状态，如果是windows端，还会有一个hover状态。

有时候设计师接到一个项目可能会有几十个页面，每个页面里可能都会有“购买”这个按钮，而且这个按钮会有三种状态，我们在设计页面的时候很容易会疏漏，或者出错，如果出错的话，在项目评审页面的时候会让自己很尴尬；而且万一项目评审会之后说，这个按钮的颜色颜色太灰了，让用户没有点击的欲望，可以换一个纯度更高一点的颜色。那这个几十个页面改起来，可就坑爹了。

但是，用symbol就可以一键修改了！

直接在symbol中修改这个按钮的颜色，项目中所有这个按钮颜色都会被修改。

比如下面动图中“购票”这个按钮颜色太深了，要调亮一些。我们就可以选中这个按钮，双击它，进入symbol。在symbol中修改这个按钮的颜色，点击返回，然后页面中所有“购票”按钮的颜色都会被修改。

（我为了举例子所以只做了这一个首页，其实无论这个sketch中有多少个“购票”按钮，都会随之被修改）

二：一键替换 ——根据需求可以直接替换页面中同样尺寸的元素

但是需要注意的是，symbol有一个特点就是，页面中的元素要和这个元素替换的symbol尺寸必须一致，不然就会出现变形或者显示不全的情况。

比如为了让这个购票的页面更加真实，我们需要在首页中做出影片的不同上映状态，比如还没有上映的影片就需要把“购票”替换成“预售”

这个时候我们只需要在symbol里面把“预售”和“购票”这两个按钮做好，然后再页面基本设计完成之后，直接替换就可以了！

是不是很方便？

三：层层嵌套 ——symbol里面嵌套symbol

比如，这个页面中，每一部影片的模块都是一个symbol，影片上面的收藏按钮，影片类型（3D或者3DIMAX）、评分和多少人想看，也分别是一个symbol。这个时候我们只选择修需要改的影片模块，然后在sketch页面的右侧修改或替换对应的元素就可以，并且symbol里面的文字也是可以在右侧这个操作区中单独修改的。

这就是sybmbol的层层嵌套。

太方便了！

四：自适应——结合sketch的尺寸，对齐设置，可以使同一个symbol适应不同尺寸的状态

自适应这个功能是在sketch39版本的时候更新的，不过这个功能并不只是结合symbol才可以使用，它也可以在组里面使用。

但当它和symbol结合起来之后，

太高效了！

例如这个两个页面中都有搜索这个控件，但是它们的长度不同，这个时候我们就可以在symbol中将“放大镜”这个图标设置为左对齐，固定宽，文字左对齐，这样无论我们怎么拖拽它，都不会变形了。

怎么样，今天关于symbol的四个特点，看明白了吗？

·一键修改：修改某个按钮的symbol，那么这个页面的所有按钮都会随之修改

·一键替换：根据需求可以直接替换页面中同样尺寸的元素

·层层嵌套:  symbol里面嵌套symbol

·自适应： 结合sketch的尺寸，对齐设置，可以使同一个symbol适应不同尺寸的状态

如果哪里有不明白或者需要交流的，可以在UI中国上给我留言或者私信，

共同学习。