source
cover

把24种样式的 switch 装进一个 symbol

希腊先贤赫拉克利特曾说过,人不能两次踏入同一条河流。

但人却可以把三种样式、四种状态、五种颜色的交互控件「开关」装进同一个 symbol。

希望大家通过阅读本文,成为这样的人。

阅读信息:

  • 阅读时间:6m 20s

  • 流量预估:2.6MB

  • 操作时间:20m

  • 软件版本:v46.1

相关下载:

效果预览:

上图所有样式的「开关」都是出自同一个 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 - Components - Material design guidelines]

[Switch - Clarity Design]

[Switches - Controls - iOS Human Interface Guidelines]

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

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


感谢阅读