惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Martin Fowler
Martin Fowler
D
DataBreaches.Net
F
Fortinet All Blogs
阮一峰的网络日志
阮一峰的网络日志
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
H
Help Net Security
M
MIT News - Artificial intelligence
美团技术团队
人人都是产品经理
人人都是产品经理
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
The Cloudflare Blog
有赞技术团队
有赞技术团队
L
LangChain Blog
博客园 - Franky
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 【当耐特】
S
SegmentFault 最新的问题
V
Visual Studio Blog
Blog — PlanetScale
Blog — PlanetScale
Hugging Face - Blog
Hugging Face - Blog
B
Blog
I
InfoQ

kok的笔记本

macOS 里 神秘的 kernel_task ,为什么一直在写入硬盘? 产品 node_modules 为什么总是这么大:一次从原理到实践的瘦身记录 谁来救救我的Mac存储空间-清理工具横评:付费vs免费,从界面到命令行 2023 读书推荐 写给播客嘉宾的录制说明书 在 Electron 中使用 Vue Devtools 几何原本中勾股定理的证明 Mac 安装软件时提示 已损坏,无法打开 应该怎么办 PegBoard 你的数字白板 少数派读者与作者的 NewsLetter 闲棋冷子-2-2021年我读过哪些很棒的书 闲棋冷子-1-相信你的身体,它不会骗你 修复 macOS 中 Cisco Anyconnect 报的奇怪Bug 我的 NAS 使用记录 Omniplan 入门教程 Hugo升级0.74记录 一年级产品经理需要掌握什么知识? 无籍之谈-3-和盖盖聊聊尼尔·盖曼与中外科幻 露营笔记-装备篇 无籍之谈-2-和鹏仔聊华尔街兴盛史,给小白投资者的一些建议 介绍一下《无籍之谈》 无籍之谈-1-和不土聊佛学,谈谈《一心走路》《僧侣与哲学家》 高达模型入门 - 工具整理 Hugo 主题移动端开发的一些心得 修复 macbook 键盘连击问题 在 Hugo 中使用 Open Graph 提升分享效果 选小米10 还是小米10 Pro? 利用 Python 批量合并 Excel 文件 为什么家国梦不好玩?
5 分钟了解 Sketch 的新特性 Tint - 色调
kokdemo · 2020-03-26 · via kok的笔记本

Sketch 近期更新了新版本 64,其中带来了一个新特性:Tint,中文翻译为色调。

需求缘起

我们在设计 tab 组件的时候经常会遇到这样的场景:

tab激活/tab未激活

如果要实现tab激活或者未激活的状态,需要画两套icon。如果考虑到现在越来越流行的Dark Mode,你可能需要四套icon。

如果你的应用还支持换皮肤……设计师就只能一口老血了。

最早的时候 sketch 中是没有 tint “色调” 的概念的,在最新的 64 版本中,新增了这个设置。

官方说明见这里

色调和填充的概念不同,填充是针对单一元素,填充颜色/渐变/图案等。色调则是针对一组元素中每一个元素的填充进行修改。

比如组由一个方块和一个文字构成,那么方块对应填充 A,文字对应填充 B。

当你选择了这个组之后,可以选择色调,这个色调将会直接同时覆盖填充 A 和 B。

同时覆盖

上图中左侧即为被覆盖的情况。

不适用色调的情况

由于色调特性本身的限制,如果组内原来包含了多种元素,那么选择之后,两个颜色都被覆盖了。

颜色覆盖

在第一次使用这个特性的时候,我差点以为出了 bug,因为……

bug

按钮中间的文字也被覆盖掉了。

适用色调的情况

由于透明度不会受到填充的影响,如果组中仅包含一种颜色,就可以通过透明度展示不同的效果了。

色调统一

更完整的示例如下:

选择色调

左侧为原始的组,右侧为使用了色调的组。

透明度示意

其实除了颜色之外,边框,内外阴影,文字颜色也都能受到色调影响。

完整示意

配合组件使用

前面提到这个功能会因为颜色覆盖的问题直接把按钮中的文字隐藏掉,但是有没有办法在组件里用色调呢?

当然有办法啦!

sketch 支持组件嵌套组件,也就是说,我们可以通过组件嵌套的办法,在高一层级的组件中对按钮使用色调。

组件嵌套

通过这个特性,我们就可以将原本每个颜色一套的按钮组件优化到少一个数量级。