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

推荐订阅源

aimingoo的专栏
aimingoo的专栏
M
MIT News - Artificial intelligence
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
F
Fortinet All Blogs
L
LangChain Blog
D
Docker
G
Google Developers Blog
B
Blog RSS Feed
Google DeepMind News
Google DeepMind News
Vercel News
Vercel News
Recent Announcements
Recent Announcements
MyScale Blog
MyScale Blog
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans
T
The Blog of Author Tim Ferriss
Recorded Future
Recorded Future
I
InfoQ
博客园 - 【当耐特】
The Cloudflare Blog
P
Proofpoint News Feed
GbyAI
GbyAI
博客园 - 司徒正美
U
Unit 42
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
IT之家
IT之家
H
Hackread – Cybersecurity News, Data Breaches, AI and More
B
Blog
Hugging Face - Blog
Hugging Face - Blog
博客园_首页
Stack Overflow Blog
Stack Overflow Blog
Microsoft Security Blog
Microsoft Security Blog
爱范儿
爱范儿
Jina AI
Jina AI
量子位
阮一峰的网络日志
阮一峰的网络日志
月光博客
月光博客
有赞技术团队
有赞技术团队
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
Y
Y Combinator Blog
Apple Machine Learning Research
Apple Machine Learning Research
V
V2EX
大猫的无限游戏
大猫的无限游戏
F
Full Disclosure
雷峰网
雷峰网
美团技术团队
酷 壳 – CoolShell
酷 壳 – CoolShell
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
S
SegmentFault 最新的问题

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 文件 为什么家国梦不好玩? 高雄85大楼 Mac优秀软件推荐-Itsycal 找到并和正确使用无版权资源 Excel 常用函数 一 无线吸尘器挑选指南 钢铁、蒸汽与 19 世纪 聊聊《铁道之旅》 如何挑选一个电脑电源? 有用的正则表达式 给psd瘦身 2019第二季度读书总结 组装 ITX 黑苹果主机 Intel CPU 挑选指南 常用的 Markdown 工具 2019第一季度读书总结 怎么用尺规作图画75°角? 在 Hugo 中使用 Sass 真正的换位思考-《爱的沟通》读书笔记 Hugo 中使用思维导图 反叛公司中的治理者和顾问玩法 如何搭配成为一个盐系男生? 反叛公司 Rebel Inc. 入门指南 如何评估需求,预估开发成本? 小米8、小米8SE、小米8青春版参数对比 微信外部链接内容管理规范分析 在售 iPhone 参数对比 给Hugo blog中增加一些插件 微信 MacOS 多开的一些实践 矩阵与线性变换的概念理解 尺规作图小习题 用 hugo 和 netlify 搭建blog 介绍我自己 瓜摊老板 Really? EDM邮件营销,你需要知道 果子沟大桥 喀赞其的马车 清晨的木梨硡 hexo 主题开发 青龙寺的狮子 用一个特殊方法解决同位词问题 语义化 html 标签 数模的基本思路和写作攻略 hexo blog 搭建 0.1,0.1^0.1,为什么数值是波动的? 智能手机之旅 老师和学生的博弈 这些使用抗生素的方式,你做的对吗? 炼金术与钢之炼金术师 kok的笔记本 kok的笔记本 中国长征运载火箭家族-PegBoard
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 支持组件嵌套组件,也就是说,我们可以通过组件嵌套的办法,在高一层级的组件中对按钮使用色调。

组件嵌套

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