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