搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 非科班设计 > 三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

非科班设计 2017-10-30


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


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


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



阅读信息:


  • 阅读时间:6m 20s

  • 流量预估:2.6MB

  • 操作时间:20m

  • 软件版本:v46.1



相关下载:


  • 软件下载:[Sketch 官方试用下载] www.sketchapp.com/download/sketch.zip

  • 教学材料:[百度网盘 - 教学材料] https://pan.baidu.com/s/1jHFdDAI



效果预览:


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol


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



三步学会用 Sketch 把24种样式的「开关」装进一个 symbol


第一步,设置状态:


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

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


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

打开 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」。


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

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


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

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



第二步,设置颜色:


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

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


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


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

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


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

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


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

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



第三步,设置样式:


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

重复第二步和第三步,绘制出三种设计风格的各个状态的「开关」。注意 Material Design 中的开关按钮和背景都要蒙上颜色图层。可以参考下面各个设计规范中对「开关」的具体定义。建议尺寸如图所示。


  • [Switch - Components - Material design guidelines] https://material.io/guidelines/components/selection-controls.html#selection-controls-radio-button

  • [Switch - Clarity Design] https://design.teambition.com/guidelines/components-switch

  • [Switches - Controls - iOS Human Interface Guidelines] https://developer.apple.com/ios/human-interface-guidelines/ui-controls/switches/


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

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


三步学会用 Sketch 把24种样式的「开关」装进一个 symbol

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


我是 Teambition 的交互设计师徐小马(微信:heiheilaugh),欢迎交流,希望大家能带着问题或意见来找我。


如果觉得教程具有可操作性,不妨抽出一盘王者荣耀的时间跟着做一遍,一定能学会的。



素材分享:


[Mockups4K: MacBook] https://pan.baidu.com/s/1eSpdAV4

[Material Design Icon Patterns] https://pan.baidu.com/s/1eSOp3iy

[Simple Line Icons] https://pan.baidu.com/s/1hsaMytY



Sketch 插件:




Graffle 教程:




最后,多谢大家的时间,祝大家青出于蓝




版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《三步学会用 Sketch 把24种样式的「开关」装进一个 symbol》的版权归原作者「非科班设计」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注非科班设计微信公众号

非科班设计微信公众号:gh_5bc8801a9953

非科班设计

手机扫描上方二维码即可关注非科班设计微信公众号

非科班设计最新文章

精品公众号随机推荐