# 暗色界面（Dark Mode UI）

镜语 · 版式与界面 / 色调与氛围

- 别名：暗色模式、深色模式、Dark Mode、夜间模式、黑色界面
- 口语：「黑色背景的高级科技感」「像 AI 产品那种深色界面」「暗暗的但层次分明」
- 一句话：深灰底上用逐层变亮的表面区分层级，文字和强调色都降低刺激
- 是什么：暗色界面用深灰而非纯黑做底，再用越靠上越亮的表面颜色区分层级；文字用略降低的白，强调色降低饱和以免刺眼。Apple 与 Material 都有官方暗色模式规范，它也是 AI、开发工具和影视软件的常见默认外观
- 缺了就不像：深灰而非纯黑的底；逐层变亮的表面；降低亮度的文字
- 加了更像：低饱和强调色；1px 半透明细线；等宽数字
- 适合用在：AI 产品、开发者工具、音乐与视频软件、数据看板；视频里需要「专业工具」感的界面，或深色背景的口播画面；照片、视频作品集，深色底让作品更突出
- 看哪里：看背景、卡片和悬停状态是三层不同深度的灰，不是一块纯黑；分隔靠 1px 很淡的亮线。数据柱状图和强调色是柔和的青绿，而不是高饱和霓虹。悬停一行时它只亮一点点
- 注意：纯黑 #000 背景加纯白文字对比太刺眼，长时间阅读疲劳；不要把浅色主题直接反相：阴影在暗色里看不见，层级要改用表面亮度表达
- 描述示例：做一个暗色界面风格（Dark Mode UI）的创作者数据面板：底色深灰 #0f1115，卡片表面 #171a21，悬停和弹层 #1f232c，逐层变亮表达层级；分隔线是 6–8% 透明度的白色细线；正文文字白色 90%，次要文字 55%；强调色为低饱和青绿 #5eead4，小面积使用；数字用等宽字体；不用纯黑和大阴影，整体安静、专业、有层次
- 易混：
  - [科幻界面](https://idea.ameng.dev/terms/fui.md)：科幻界面是戏剧化的虚构屏幕；暗色界面是真正要长时间使用的产品
  - [赛博朋克](https://idea.ameng.dev/terms/cyberpunk.md)：赛博朋克的深色配高饱和霓虹，暗色界面刻意降低刺激
- 相关：[材料设计](https://idea.ameng.dev/terms/material-design.md)、[极简界面](https://idea.ameng.dev/terms/minimal-ui.md)、[玻璃拟态](https://idea.ameng.dev/terms/glassmorphism.md)

## 来源与延伸阅读

- [Apple HIG · Dark Mode](https://developer.apple.com/design/human-interface-guidelines/dark-mode)
- [Material Design · Dark theme](https://m2.material.io/design/color/dark-theme.html)
- [NN/g · Dark Mode](https://www.nngroup.com/articles/dark-mode/)

网页版（含演示）：https://idea.ameng.dev/terms/dark-ui