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