TDS 每个季度的 OKR 里都有一个 Objective 是提高开发效率。在公司已经提供顶配 Mac 、Aeron 座椅、4K 专业显示器之后,还有什么能进一步提高开发效率呢?
近年来,有人机交互学的研究 [1] 表明,颜色组合对于代码输入效率、正确率、可读性和主观美感造成的差异具有统计学意义。其中,多组试验表明当使用波长相近的颜色组合时,输入的效率可以提高 10% 以上。也就是说,如果你已经是令人羡慕的 10x programmer,使用优化的配色主题后,就可以成为 11x programmer。然而实验数据同时也说明审美的感受和效率并没有强关联性,所以如何在两者间取得平衡是一件很有挑战的事。
所谓磨刀不误砍柴工,TDS 的工程师和设计师决定中断其它工作,优先解决效率问题。经过一个季度的调研和尝试,推出了 TapTap 代码编辑器主题。
如果你是 VSCode 用户,点击下方链接,安装 TapTap Theme for VSCode,即可开启 11x programmer 专属开发体验。
https://marketplace.visualstudio.com/items?itemName=TDS.taptap-vscode-theme
Emacs 、JetBrains 、TextMate 、Vim 、Xcode 用户,我们也没有忘记你们: https://github.com/TapTap/base16-taptap-scheme/releases
使用其他工具的同学可以结合自己的使用需求,从目前提供的 9 个色阶中来 DIY 我们的品牌皮肤哦~
基本色盘:
结构化的配色数据可以在这个文件中找到: https://github.com/TapTap/base16-taptap-scheme/blob/main/taptap.yaml
为了保障配色的可读性与可访问性,我们在调研过程中做了充分的验证,接下来就让我们一起来看下 TapTap Theme 是如何创作的:
暗黑模式是近年的热门话题,越来越多的企业逐渐开始关注,Apple 和 Google 都为用户提供了这一功能。
为什么要做暗黑模式?
专注内容
我们发现,大多数开发人员使用黑屏下的彩色编码语法来减少视觉疲劳。正如 Toptal 的开发人员 Kevin Bloch [2] 所说:“黑色背景减少了眼部疲劳,使彩色编码更容易阅读,也加快了代码的理解速度。” 研究人员在实验 [3] 中发现,与浅色模式相比,暗黑模式可以促进用户长时间地保持清醒,更加专注自己的操作与任务。因为色彩具有层级关系,深色会在视觉感官上自动后退,浅色部分则会向前延展,这样对比强烈的层次关系可以让用户更注重被凸显出来的内容信息。
眼部舒适
有文章 [4] 提到,暗黑模式下的用户界面可以减少用户的视觉疲劳,特别是在光线不足的情况下。另外, 暗黑模式产生的蓝光比浅色模式要少得多;如果在晚上使用显示器,更少的蓝光可能意味着对身体睡眠周期的干扰更小 [5]。
节能减排
在一些显示器上(如 OLED 、AMOLED ),暗黑模式可以延长电池寿命 [6]。谷歌证实,在 OLED 屏幕上使用暗黑模式对电池寿命有很大帮助。例如,在 50% 的亮度下,YouTube 应用程序中的深色背景比白色节省约 15% 的屏幕能量。在屏幕亮度 100% 的情况下,深色背景节省了屏幕高达 60% 的能量。
TapTap Theme 色板以 TapTap 品牌蓝为起始主色,橙色为辅色,根据不同的代码类型与使用场景,从 TapTap 设计系统中 7 种配色的基础上增加了紫色和粉色,最终扩展出 9 种配色。
众所周知,暗黑模式与浅色模式最大的不同就在色彩的处理上,在暗黑模式中,我们并不想打破浅色模式下基础色板的配置规律及色值。当一个设计系统的深浅模式并存时,配色应该有一定的延续和关联,而不是毫不相关的两套色板,这样一是避免开发及后续的维护成本,二是实际切换和使用时,可以保证一致性,这意味着需要借助一定规则。
举个例子,浅色模式下颜色越深,与界面背景色的对比度就越大,也就越容易引起用户的注意,视觉层级就越高;在暗黑模式下我们同样需要遵循这一规律,所以对应所使用的颜色也就越浅。
颜色有三个视觉通道,分别是色调( H )、饱和度( S )、明度( B ),我们大体的设计思路是基于浅色的基础色板,保持色调( H )不变,通过调整饱和度( S )和明度( B ),去得到一套暗黑模式下的色彩。这样的好处是,深浅模式下的色彩来源是同一个,调整后得到的结果也会相对和谐。
另外,通过观察市场上成熟的配色主题如 GitHub 等我们发现,色板的高对比度使用户读取信息更加容易。因此,我们通过补充透明度的梯度,将原有的 8 个色阶拓展到了 10 个,为后面代码与色板的调用提供了更多的选择空间。
为了保证配色主题的通用性,我们对颜色可访问性( Accessibility )做了一些调研。研究表明男性色盲的病发率非常高(男性约 8%、女性约 1%),其中最典型的是红绿色盲 [7]。
TapTap Theme 经过 Colorblindly 插件的反复验证,将 9 种视觉障碍下的颜色差异做到了最大。
欢迎大家安装使用这个主题来提高开发的舒适度和效率。虽然 TapTap 专属主题谁都可以用,但是在 TapTap 工作的其他好处就不是每家公司都有的了。公司除了提供顶级的硬件设备外,还提供免费三餐、无限带薪休假、补充商业保险。更重要的是 TapTap 致力于提供开放、透明的工作环境,不签竞业禁止协议,公平地对待每位员工。对于已经通过试用期,因为对自己的工作状态不满意或者其他原因而选择主动离职的同事,我们还会授予相当于 6 个月工资的致意金,用以鼓励每个人寻找最适合自己的位置,也让选择在 TapTap 工作的人没有后顾之忧。如果你对在 TapTap 工作感兴趣,请访问 https://career.taptap.dev/ 了解目前开放的职位并提交你的简历。希望不久之后在 TapTap 见到你。
参考资料
1
zhengfan2016 2021-07-20 15:10:13 +08:00 1
你们 leancloud 没有自己的代码编辑器主题吗(狗头保命)
|
2
ferrum 2021-07-20 16:29:03 +08:00 via iPhone
这个主题不错,想收到自己的 App 的编辑器里面,但仓库里面没看到 License,直接用可以吗?
|
3
Outshine 2021-07-21 10:48:07 +08:00
看了一楼回复才发现这不是 TapTap 发的帖(狗头)
|
4
LeanCloud OP 这都被你发现我们是一家的啦(狗头)
|
6
RicardoY 2021-07-21 20:04:44 +08:00
cool
|
7
scnace 2021-07-22 00:10:41 +08:00 via Android
主题很棒,支持 Semantic Highlight 吗🙈
|
8
hjiang 2021-07-22 01:08:22 +08:00 via iPhone
@zhengfan2016 我们 LeanCloud 就是我们 TapTap 呀。
|
9
tousfun 2021-07-22 08:27:47 +08:00 via iPhone
还挺好看的
|
10
kollinchu 2021-07-22 09:06:26 +08:00
这个主题所用的字体是什么呢?
|
11
OldDriverKing 2021-07-22 11:28:02 +08:00
挺好看的,用上了。谢谢分享
|
12
EAFA0 2021-07-22 13:21:35 +08:00
再带上 Bracket Pair Colorizer 2 的彩虹花括号
|
13
muunala10221 2021-07-22 14:16:53 +08:00
用上了,但 TS 和 JS 很多变量没有着色
|
15
leeyeh 2021-07-23 06:19:32 +08:00 via iPhone
@muunala10221 (抱歉上面 @ 错了)
|
16
chenmoshijin 2021-07-23 09:40:41 +08:00
优秀
|
17
sam014 2021-07-23 10:44:04 +08:00
用了一天,感觉不错,之前用 One Monokai
|
18
muunala10221 2021-07-23 16:33:42 +08:00
@leeyeh 就是有很多变量啦,都是白色,可以参考下 vscode 的深色+主题 ,同一文件部分变量 tap 这个主题色显示的为白色,深色+主题为深蓝色(小建议 可能不对
|
19
muunala10221 2021-07-23 16:34:29 +08:00
@leeyeh 就是我的项目是 vue+ts,我定义的一个对象属性,key 全部都是白色~看起来就像没有着色一样
|
20
leeyeh 2021-07-23 17:14:10 +08:00
@ferrum 商店后面有说明:Credit to [GitHub's VS Code themes]( https://github.com/primer/github-vscode-theme),代码是 MIT 的。
@scnace 支持 Semantic Highlight 。 @kollinchu 这个主题主要关注配色,没有定义字体。 @muunala10221 .vue 确实没测到。Semantic Highlight 其实是要针对每种不同的语言调整的,可能 github-vscode-theme 没有考虑到。 |