V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
LeanCloud
V2EX  ›  分享创造

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

  •  2
     
  •   LeanCloud · 2021-07-20 10:24:29 +08:00 · 4643 次点击
    这是一个创建于 1199 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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% 的能量。

    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.
    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
    20 条回复    2021-07-23 17:14:10 +08:00
    zhengfan2016
        1
    zhengfan2016  
       2021-07-20 15:10:13 +08:00   ❤️ 1
    你们 leancloud 没有自己的代码编辑器主题吗(狗头保命)
    ferrum
        2
    ferrum  
       2021-07-20 16:29:03 +08:00 via iPhone
    这个主题不错,想收到自己的 App 的编辑器里面,但仓库里面没看到 License,直接用可以吗?
    Outshine
        3
    Outshine  
       2021-07-21 10:48:07 +08:00
    看了一楼回复才发现这不是 TapTap 发的帖(狗头)
    LeanCloud
        4
    LeanCloud  
    OP
       2021-07-21 11:19:37 +08:00
    这都被你发现我们是一家的啦(狗头)
    aoizz
        5
    aoizz  
       2021-07-21 13:07:29 +08:00
    @LeanCloud #4 JetBrains 的主题请问是怎么使用的啊。
    RicardoY
        6
    RicardoY  
       2021-07-21 20:04:44 +08:00
    cool
    scnace
        7
    scnace  
       2021-07-22 00:10:41 +08:00 via Android
    主题很棒,支持 Semantic Highlight 吗🙈
    hjiang
        8
    hjiang  
       2021-07-22 01:08:22 +08:00 via iPhone
    @zhengfan2016 我们 LeanCloud 就是我们 TapTap 呀。
    tousfun
        9
    tousfun  
       2021-07-22 08:27:47 +08:00 via iPhone
    还挺好看的
    kollinchu
        10
    kollinchu  
       2021-07-22 09:06:26 +08:00
    这个主题所用的字体是什么呢?
    OldDriverKing
        11
    OldDriverKing  
       2021-07-22 11:28:02 +08:00
    挺好看的,用上了。谢谢分享
    EAFA0
        12
    EAFA0  
       2021-07-22 13:21:35 +08:00
    再带上 Bracket Pair Colorizer 2 的彩虹花括号
    muunala10221
        13
    muunala10221  
       2021-07-22 14:16:53 +08:00
    用上了,但 TS 和 JS 很多变量没有着色
    leeyeh
        14
    leeyeh  
       2021-07-23 06:18:12 +08:00 via iPhone
    @muunala 方便提供下 test case 吗?
    leeyeh
        15
    leeyeh  
       2021-07-23 06:19:32 +08:00 via iPhone
    @muunala10221 (抱歉上面 @ 错了)
    chenmoshijin
        16
    chenmoshijin  
       2021-07-23 09:40:41 +08:00
    优秀
    sam014
        17
    sam014  
       2021-07-23 10:44:04 +08:00
    用了一天,感觉不错,之前用 One Monokai
    muunala10221
        18
    muunala10221  
       2021-07-23 16:33:42 +08:00
    @leeyeh 就是有很多变量啦,都是白色,可以参考下 vscode 的深色+主题 ,同一文件部分变量 tap 这个主题色显示的为白色,深色+主题为深蓝色(小建议 可能不对
    muunala10221
        19
    muunala10221  
       2021-07-23 16:34:29 +08:00
    @leeyeh 就是我的项目是 vue+ts,我定义的一个对象属性,key 全部都是白色~看起来就像没有着色一样
    leeyeh
        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 没有考虑到。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1134 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:56 · PVG 06:56 · LAX 15:56 · JFK 18:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.