Sketch多种switch 装进一个symbol操作实例

希腊先贤赫拉克利特曾说过，人不能两次踏入同一条河流。但人却可以把三种样式、四种状态、五种颜色的交互控件「开关」装进同一个 symbol。具体操作如下：

效果预览：

上图所有样式的「开关」都是出自同一个 symbol，所谓「天下武功出少林」，大家往下看，只要理解一些概念就很好上手，不用zigong。

第一步，设置状态：

首先，如图所示，笔者列举下控件「开关」常见的四种状态。

打开 Sketch 并绘制四个状态的 symbol，然后在 symbol 页统一设置四个 symbol 图层的尺寸为「51 x 31」。

Tip：这里涉及到一个知识点「nesting symbols」。即在 A symbol 中放置 B symbol，那么 A symbol 在使用时会有一个可复写的属性 B，点开后可看见所有和 B symbol 同一尺寸的 symbol，点击后可以替换原来的 B symbol。更具体的说明，可以参考 Sketch 官方文档「Nested Symbols」。

再绘制一个 symbol，把之前的四个状态中选取一个放置进去。这个尺寸不能和状态 symbol 一样，所以我们设置为「53 x 31」。Symbol 图层命名为「↳Status」，方便复写时辨别内容。

阶段检测，插入上一小步中绘制的 symbol，会有上图所示的效果。

第二步，设置颜色：

选取笔者生活中常见的五种颜色来给「开关」symbol 上色，它们涉及了我的衣食住行、喜怒哀乐。注意，这里的微绿是「微信」绿，不是「微博原谅」绿。

Tip：命名方式，采用「／」进行分割，这样在复写时，同一「／」下的 symbol 会归为一组。具体效果在随后的动图中可以查看。

根据前面的知识，我们在 symbol 页统一设置五种颜色的尺寸为「10 x 10」。

如上图所示，给「开关」的背景蒙上颜色。颜色 symbol 命名为「↳Background Color」，方便复写时辨别内容。

这时候，插入背景蒙上颜色的「开关」symbol，会有上图所示的效果。

第三步，设置样式：

重复第二步和第三步，绘制出三种设计风格的各个状态的「开关」。注意 Material Design 中的开关按钮和背景都要蒙上颜色图层。

最后，我们定义一个叫「Switch」的 symbol，万剑归宗。

这时候，插入「Switch」symbol，会有上图所示的效果。可以变设计风格、状态以及颜色。

以上就是Sketch多种switch 装进一个symbol操作实例的全部内容介绍了，关于更多Sketch教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。