返回文章列表
技术

暗色不是审美,是注意力管理

2 分钟

很多人把暗色模式当风格选项。其实它是一种光预算的重新分配

#亮色的逻辑:纸

亮色界面模拟纸。纸是被照亮的,所以整个页面在发光,文字是"挖掉"的暗部。你的视觉系统面对的是一整面光墙。

优点是符合几百年的阅读习惯,适合长文、适合白天、适合打印。

#暗色的逻辑:舞台

暗色界面模拟舞台。背景不发光,只有需要被看见的东西发光。这意味着每一处亮,都是一次明确的引导

这就是为什么暗色界面一旦滥用高亮色,就会瞬间变得廉价——舞台上同时打十盏追光,等于没有追光。

#三条我坚持的规则

1. 不用纯黑,不用纯白

#000 上的 #fff 对比度过高,长时间看会有光晕(halation),尤其对散光人群。我用 #08080b#f4f1ea——一点点暖,像旧纸和墨。

2. 层级用透明度,不用色值

--card: rgba(244, 241, 234, 0.035);
--line: rgba(244, 241, 234, 0.14);

用主文字色的低透明度做卡片和分割线,切换主题时只改两个变量,整套层级自动成立。

3. 强调色只给一种

整站只有一个 --acc(这里是余烬橙 #ff4a17)。它出现在:当前状态、链接、悬停反馈。别的地方一律灰阶。

一个颜色如果到处都是,它就不再是强调色,只是背景色。

#什么时候该用亮色

  • 内容以长文本阅读为主,且用户多在白天使用
  • 需要打印或导出
  • 数据密集型表格(暗色下网格线很难做得干净)

所以我给这个站留了切换按钮——右上角那个。切过去你会发现,流体的颜色也跟着变了,因为它读的是同一套变量。

余烬电台

40 首 · 网易云源