IDEA 柔绿护眼色配置

IDEA 柔绿护眼色配置


护眼主题到底是什么?白色?黑色?

护眼:绿柔环保主题

其实参考电子书领域就知道,长时间盯着电脑屏幕或手机屏,背景绝不能是黑色,而应该是泛黄的颜色。如果一家做电子书的公司使用黑色背景的话,这公司肯定会被读者抛弃掉。

但是电子书行业为什么普遍采用泛黄色呢?是为了给读者制造看纸书的错觉?还是真有科学道理。我们需要仔细研究。

有一个误传的说法是:黑色背景,在液晶下发光量少,从而更护眼。 由于纯黑色背景很难看,实际上各个开发工具的背景色不是纯黑色,液晶面板上的粒子仍然在发光。 虽然液晶面板的暗色区光线量低,但就人眼肌肉的紧张度而言,高对比度的伤害大于光线量的伤害。 在阳光明媚的草原上,虽然光线量非常大,但人眼很舒适。 但在黑色屋子里,手机屏幕亮度调到最低,光线量远低于前者,但仍然刺眼。 这是对比度的影响造成的。

HBuilderX的默认主题是绿柔(#fffae8),其特点是柔和低对比度、强光下仍清晰、绿色感加强。对着这样的界面写一天代码,感受要比对着太亮或太暗的界面舒服很多。

绿柔(#fffae8)是一个严谨的设计过程,包含色彩心理学和色彩生理学的很多知识,并且在北京国奥心理医院做过严谨的医学测试。 我们安排工程师在不同的配色主题下写代码,在医院检测他们的脑疲劳程度,最终调校出了绿柔配色方案,实验过程如下:

参与实验的2位程序员在充分休息后,分别使用绿柔和黑色主题的编程工具进行编码半小时,并监测脑电波的数据变化。 通过对实验者的脑电波产生的17万条数据的分析,利用医院仪器打印出的疲劳值、紧张度和注意力集中程度数值,发现实验结论如下: 半小时编码后2位测试者的疲劳度均上升,但,绿柔主题下工作的程序员疲劳值上升相对缓慢,紧张程度更低,注意力更集中。 使用黑色主题编码后疲劳值的上升幅度最高达到使用绿柔上升幅度的700%!此实验进行多次,并有交叉测试,结论始终相同。

img

上图为在医院参与实验的程序员。

色彩方面有色彩生理学和色彩心理学。我们先从色彩生理学角度看看黑色主题的问题:

  1. 转场晕眩 当一个人眼睛长期看暗色系事物时,大脑会分泌激素强迫眼睛增强视力。 比如我们在一个黑屋子待一会就能看清东西,但回到阳光下时又会晕眩,这叫做暗适应。 同样,长期看黑色的代码区,此时切换到其他软件界面或看窗外就会晕眩。
  2. 夜盲症 长期的黑暗环境下眼球会分泌视紫红质,视紫红质消耗维生素A,并且会引发夜盲症,虽不是近视,但夜晚视力低于常人。 具体见百度百科视紫红质
  3. 对比度高 黑色背景往往对应高对比度的前景内容,而高对比度不适合长期观看。 其实就像糖和辣都不能多吃,但水可以多喝。 而过于柔和的画面,在强光照射或视力不佳时,可能无法保持足够的清晰度,绿柔反复调校参数才得到目前的结果。

我们查阅资料得知,人眼最喜欢的光是黄色和绿色 黄色和绿色的波长,是人眼最放松的波长绿柔的背景是暖黄色,界面中点缀不少绿色,前景的代码颜色,虽然多彩,但每种颜色的RGB中的G,即绿色值,都调大了。

另外从色彩心理学看,温暖的颜色比暗色更舒服。 人眼看到的景色,大脑会产生联想,并进而影响心情。 看到绿色就会联想到草原森林,心情不自觉的就好一点。 而看久了暗色或刺激性颜色,心情会压抑。 每天看8个小时屏幕不是小事,心情舒畅很重要。

"群体无小事,长期无小事",面对数百万开发者,我们必须下足功夫研究如何保护他们的健康。 结合了众多理论和实验,我们终于打磨出了绿柔主题。

有些产品的设计原则是漂亮优先,HX不是这个原则,是健康优先。HX可能不是最漂亮的编辑器,但肯定是最健康的编辑器。

备注:以上均来自 HBuilderX官网,个人认为比较可靠。



IDEA 配置绿柔背景

使用 Snipaste 2.10.5免费版(桌面版)中的复制颜色值功能,获取到 HBuilderX 绿柔的 RGB 为 #fffae8

1920 × 1080 分辨率下,IDEA 2024.3.3 版本的侧边栏边距为 30px。以下是简单计算过程:

宽:1920

30 + 30

1860

高:1080

30

1050

看不懂没关系,这里有我同事静姐给我做的背景图,直接可以拿来使用:(❤️感谢静姐!❤️)

1、下载绿柔护眼背景图

🔎 绿柔护眼背景图.zip.全网统一密码:rnny

🔎 静姐做的源文件 Desktop.zip.全网统一密码:rnny

其实第一个链接就够用了,接下来也是按照第一个链接操作的。

2、设置 IDEA背景图

File ➡️ Settings ➡️ Appearance & Behavior ➡️ Appearance ➡️ Background Image...

image-20250310200832920.

image-20250310200825896.

image-20250310201229711.



参考博客

  1. 【官网】Hbuilder X.
posted @ 2025-03-10 20:17  软柠柠吖  阅读(773)  评论(0)    收藏  举报