最近发生了一件小事让我决定写下这篇文章。
有一天深夜,我已经躺在床上准备睡觉,只是想打开 美的美居 App 把空调关掉。
但当 App 打开的那一瞬间,几乎像打开了一盏白炽灯——在全黑的房间里简直刺眼到不行。
那刻我意识到:我们已经习惯了系统级的暗色模式(Dark Mode),但很多应用还停留在“白天”。
更讽刺的是,我自己的个人网站最初也不支持深色模式,直到后来费了不少力气去适配,才真正感受到那是一种基本的使用礼仪。
于是我开始思考:
暗色模式到底在解决什么问题?为什么人们会越来越依赖它?
本文就从视觉舒适、心理机制、产品体验以及开发实践的角度,尝试分析这个看似“简单”的 UI 设计背后的逻辑。
它其实不是“潮流”,而是人机交互的回归很多人把暗色模式当成一种“最近流行的 UI 风格”。
图 1: 早期 GUI 显示器界面但事实上,暗色界面才是人机交互最早期的默认状态——我们后来反而“改用”了亮色风格。
阶段特征说明CRT 时代黑底绿字(Terminal、DOS),是最早的人机界面GUI 时代转为白底黑字 ——“像纸一样”,增强可读性移动操作系统早期iOS 和 Android 默认都使用亮色界面2018–2019macOS/iOS/Android 引入系统级 Dark Mode如今IDE、AI 工具、技术网站开始默认深色换句话说,暗色模式不是“潮流”,而是我们在数字时代重新找回的一种合理交互方式。
为什么越来越多用户主动切换成暗色模式?今天,很多人拿到新设备之后的第一件事就是:把系统切成 Dark Mode。
如果我们把这种现象拆解,会发现背后其实是几个维度的共性需求。
维度描述视觉舒适深色背景降低光线刺激,减轻眼睛疲劳,尤其在夜间专注力深色能够弱化装饰元素,把注意力集中在内容本身节能效应(OLED)OLED 黑色像素不发光,暗色主题天生更省电审美趋势深色更极简、更科技感,在技术圈已成为主流风格心理节奏匹配夜间环境下的亮色界面会打破体感节律,暗色更友好某种意义上,暗色模式是一种数字界面对人精神状态的尊重。
两个真实场景:为什么我意识到“它是必需的”先说我触发写这篇文章的两个真实场景,它们分别来自用户体验和开发者体验,但诠释的是同一件事。
夜晚使用美的美居 App打开 App 的那一瞬间,整个房间被白色界面照亮。
你只想关一下空调,却感觉被“强行唤醒”,体验非常违和。
这一刻我突然意识到,暗色模式其实是夜间场景下最低限度的交互礼仪。
图 2: 美的美居亮色界面(夜间场景)给我的 Hugo 网站适配暗色模式早期我自己的网站只有浅色主题,很多人反馈晚上阅读“太亮”。
适配暗色模式时我原以为是“小改动”,结果是一次完整的设计系统重构。
但当真正上线之后,我自己每天使用的感受是“再也回不去亮色了”。
为什么一些 App 至今仍然不支持暗色模式?很多人会问:既然用户这么需要,那为什么仍然有 App 没有支持(比如美的美居)?
原因其实非常现实——暗色模式在工程上很难作为“外挂想做就做”的功能存在。
原因解释没有设计系统早期 UI 写死颜色,后期无法直接切换主题开发成本高需要列一整套新的颜色、图标和状态样式测试矩阵加倍深色 + 亮色意味着两套完整测试流程优先级偏低在功能压力较大的团队中,视觉优化经常被放在很靠后的位置从产品体验角度:它不只是“更好看”,而是“更礼貌”尤其在夜间场景下,用户处于低光、放松的状态。
如果 App 仍然在大面积白底高亮显示,其实会打断用户的生活节奏。
暗色模式 ≠ 高级功能
暗色模式 = 对用户环境和感受的基本尊重
尤其是家居、睡眠、健康类 App —— 它们大多数的使用场景都发生在“非工作时间”,这时候亮色界面几乎是在“对抗用户”。
开发者角度:适配暗色模式=小设计,大工程我在改造自己的网站过程中切身感受到了这一点:
适配暗色模式不是“换一套颜色”那么简单,而是一次完整的主题架构重构。
项目实际遇到的问题颜色变量重建颜色体系用于 Light/Dark 主题切换图标/图片亮色下可读的图在暗色中可能完全看不到代码块两套高亮主题分别设置系统偏好通过 prefers-color-scheme 响应系统主题主题模板原主题写死颜色,必须重写样式结构典型案例:为什么科技类产品越来越偏爱暗色?你可能会发现,几乎所有新一代科技工具都在使用暗色作为默认主题,而不是选项。
网站/产品特点Vercel 官网默认深色,体现极简与专业感Linear深色是品牌识别的一部分,加强专注感Raycast深色高对比,展现效率与工具感ChatGPT(Web)近版已改为默认深色,亮色成为二级选项图 3: Linear 官网深色界面总结暗色模式并不仅仅是“更好看”,它具有明确的视觉、心理和体验优势;对于夜间或高专注场景,它实际上是一种基本的交互礼仪;一些应用迟迟未支持暗色,并非意识不到,而是架构不支持、代价太高;对开发者来说,适配暗色模式是一种“长期收益”的投入,一旦做完,整体产品气质会立刻提升;如果说亮色体现的是“信息密度”,那么暗色体现的就是“节奏感和克制感”。