11x 程序员专属 TapTap 代码编辑器主题

TDS 每个季度的 OKR 里都有一个 Objective 是提高开发效率。在公司已经提供顶配 Mac、Aeron 座椅、4K 专业显示器之后，还有什么能进一步提高开发效率呢？

近年来，有人机交互学的研究 [1] 表明，颜色组合对于代码输入效率、正确率、可读性和主观美感造成的差异具有统计学意义。其中，多组试验表明当使用波长相近的颜色组合时，输入的效率可以提高 10% 以上。也就是说，如果你已经是令人羡慕的 10x programmer，使用优化的配色主题后，就可以成为 11x programmer。然而实验数据同时也说明审美的感受和效率并没有强关联性，所以如何在两者间取得平衡是一件很有挑战的事。

所谓磨刀不误砍柴工，TDS 的工程师和设计师决定中断其它工作，优先解决效率问题。经过一个季度的调研和尝试，推出了 TapTap 代码编辑器主题。

如何使用

如果你是 VSCode 用户，点击下方链接，安装 TapTap Theme for VSCode，即可开启 11x programmer 专属开发体验。

https://marketplace.visualstu...

Emacs、JetBrains、TextMate、Vim、Xcode 用户，我们也没有忘记你们： https://github.com/TapTap/bas...

使用其他工具的同学可以结合自己的使用需求，从目前提供的 9 个色阶中来 DIY 我们的品牌皮肤哦～

基本色盘：

结构化的配色数据可以在这个文件中找到： https://github.com/TapTap/bas...

设计过程

为了保障配色的可读性与可访问性，我们在调研过程中做了充分的验证，接下来就让我们一起来看下 TapTap Theme 是如何创作的：

暗黑模式

暗黑模式是近年的热门话题，越来越多的企业逐渐开始关注，Apple 和 Google 都为用户提供了这一功能。

为什么要做暗黑模式？

专注内容

我们发现，大多数开发人员使用黑屏下的彩色编码语法来减少视觉疲劳。正如 Toptal 的开发人员 Kevin Bloch [2] 所说：“黑色背景减少了眼部疲劳，使彩色编码更容易阅读，也加快了代码的理解速度。” 研究人员在实验 [3] 中发现，与浅色模式相比，暗黑模式可以促进用户长时间地保持清醒，更加专注自己的操作与任务。因为色彩具有层级关系，深色会在视觉感官上自动后退，浅色部分则会向前延展，这样对比强烈的层次关系可以让用户更注重被凸显出来的内容信息。

眼部舒适

有文章 [4] 提到，暗黑模式下的用户界面可以减少用户的视觉疲劳，特别是在光线不足的情况下。另外， 暗黑模式产生的蓝光比浅色模式要少得多；如果在晚上使用显示器，更少的蓝光可能意味着对身体睡眠周期的干扰更小 [5]。

节能减排

在一些显示器上（如OLED、AMOLED），暗黑模式可以延长电池寿命 [6]。谷歌证实，在 OLED屏幕上使用暗黑模式对电池寿命有很大帮助。例如，在 50% 的亮度下，YouTube 应用程序中的深色背景比白色节省约 15% 的屏幕能量。在屏幕亮度 100% 的情况下，深色背景节省了屏幕高达 60% 的能量。

9 大色板

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. Kirlidog, Melih. (2014). Effect of Colours in Manual Data Typing. Computer Science & Information Technology. 4. 65-76.
2. Miklos Philips, [Dark UIs. The Good and the Bad. Dos and Don’ts.
   ](https://www.toptal.com/design...
3. Luka Koning, Marianne Junger, Dark user interface, dark behavior? The effect of ‘dark mode’ on honesty, Computers in Human Behavior Reports, Volume 4, 2021
4. Reeno Koemets, The Benefits of Dark Mode: Why should you turn off the lights?
5. Silas S. Brown, Advantages of dark backgrounds on computer displays.
6. Brooke Crothers, The Facts About Dark Mode And Battery Life: LCD Vs OLED, iOS 13 On iPhone, Android Q, Forbes, 2019
7. Gretchyn Bailey, Color Blindness: Types, Causes, Symptoms, Treatment