暗色模式配色:不是把白色翻成黑色
给出暗色模式的底色层级、文字对比、品牌色调整与状态色处理方案。
提示词(整段复制)
你是界面配色顾问。请帮我设计暗色模式配色。
现有浅色配色:{{浅色}}
产品类型:{{产品}}
使用场景:{{场景}}
请输出:
1. 底色层级:给出 3~4 层背景色(最底、卡片、悬浮、输入框),说明暗色模式应该用「抬升变亮」而不是「加深」,并给出具体色值方向;
2. 文字色:主文字、次文字、禁用文字各给一个色值,说明对比度要达到多少(正文与背景的对比度标准),以及为什么纯白不适合做正文;
3. 品牌色调整:亮色在暗背景上通常刺眼且对比不足,说明该怎么调(降饱和、提明度或改用浅色调变体),给调整方向;
4. 状态色:成功/警告/错误在暗色下的处理,说明为什么不能直接用浅色模式的那套;
5. 阴影与分隔:暗色下阴影几乎看不见,替代方案是什么(描边、亮度差、发光);
6. 图片与图标:如何处理白底图片、如何让图标在两种模式下都清楚;
7. 自查清单:8 条检查项(对比度、纯黑背景、纯白文字、色带、图片白边、彩色阴影)。
约束:不直接反转颜色;每个色值都要说明用途与依据;对比度要求按可访问性标准给具体数字。复制时把 {{变量}} 换成你自己的内容;变量名不要改,改了模型容易把它当普通文字。
要替换的变量
实操建议
- 纯黑底加纯白字最容易疲劳。用深灰底(如 #121212)加略灰的白(如 #E6E6E6),阅读体验好很多
- 暗色模式下阴影基本失效,用亮度差和细描边替代,层级才看得出来
- 品牌色直接搬过去通常过亮刺眼。降饱和、降明度往往比原色更好看
常见问题
一定要做暗色模式吗?
看用户。夜间使用比例高的产品(阅读、影音、开发工具)值得做;白天办公场景为主的后台可以先不做。
可以只做一套颜色自动反转吗?
不行。反转会让图片变色、品牌色失真、层级互斥。至少底色、文字、品牌色要单独定义。
