本文目录导读：
这是一个非常专业且必要的问题,目前设计稿适配暗黑模式，已经不是一个简单的“换底色”，而是一个系统性的视觉工程。
下面我从设计原则、具体适配策略、以及实操方法三个维度，为你提供一份可落地执行的指南。
核心设计原则（先理解后执行）
- 不要纯黑（#000000）：使用深灰色（如
#121212、#1E1E1E）作为背景，纯黑对比度过高，长时间阅读会导致视觉疲劳和眩光。 - 降低色相饱和度：暗黑模式下，原本亮色的饱和度应降低 10%-20%，避免色彩刺眼。
- 强调层级与阴影：暗黑模式下，阴影很难产生效果，改用模糊、透明度或白色边缘描边来区分层级（Elevation）。
- 保留品牌色，但降级使用：品牌主色在暗色背景上可以继续使用，但用于大色块、按钮时需降低饱和度，或者配合对比度足够的文字。
具体适配策略（设计稿怎么做）
假设你正在使用 Figma、Sketch 或 Adobe XD，可以参考以下流程：
颜色系统：建立 “Light” 和 “Dark” 双变量
- 背景层：
- Light：
#FFFFFF（Surface） - Dark：
#121212（Surface）
- Light：
- 文字层：
- Light：
#333333（一级）、#666666（二级）、#999999（禁用） - Dark：
#E0E0E0（一级，比白灰一点）、#A0A0A0（二级）、#555555（禁用）
- Light：
- 边界层：
- Light：
#E5E5E5 - Dark：
#3A3A3C（比背景亮一点，形成柔和边界）
- Light：
图片与图标处理：避免“亮瞎眼”
- 图标：全量使用 SVG 或 Outline 矢量图标，不要用 PNG，因为 PNG 在暗色下背景会发白。
- 图片：
- 方法一：在图片上方盖一层半透明深色遮罩（如
#000并设置 20%-30% 透明度）。 - 方法二：使用 CSS
filter: brightness(0.8)降低图片亮度。 - 方法三：如果图片包含文字或白底产品图，最好设计独立的暗色版本。
- 方法一：在图片上方盖一层半透明深色遮罩（如
层级关系：用“模糊”替代“阴影”
- Light 模式阴影：
box-shadow: 0px 4px 12px rgba(0,0,0,0.15) - Dark 模式等价表达：
- 浅层：背景色比主背景高一个色阶（如
#1C1C1E） - 中层：背景色
#2C2C2E带 8px 模糊边缘 - 深层：背景色
#38383A带 12px 模糊边缘（Modal、Dialog）
- 浅层：背景色比主背景高一个色阶（如
特殊元素适配
- 输入框/表单：背景用
#1C1C1E，边框用#3A3A3C，聚焦时边框变为品牌色。 - 按钮：
- 实心按钮：保持品牌色，但背景可降低饱和度。
- 线框按钮：边框颜色调亮（如 Light 下
#999，Dark 下#666）。
- 警告/错误：红色在暗色下会显得特别刺眼，建议降低明度，使用
#CF4343代替#FF0000。
实操方法（Figma 如何实现）
最推荐的方案：使用 Figma Token 或样式变量 (Variables)
- 建立颜色变量表：
color/bg/surface→ Light:#FFFFFF| Dark:#121212color/text/primary→ Light:#1A1A1A| Dark:#F5F5F5color/border/subtle→ Light:#E0E0E0| Dark:#383838
- 启用 Figma Variables 的 Local Variables（可切换模式）：
- 进入 Local Variables → 创建 Mode（
Light和Dark）。 - 把上述变量填入相应 Mode。
- 在设计中,所有颜色都引用这些 Variable。
- 进入 Local Variables → 创建 Mode（
- 一键切换：
- 在 Figma 右下角点击 Variables 切换，选
Dark Mode，全画布颜色瞬间切换。 - 然后手动微调图片、阴影等元素。
- 在 Figma 右下角点击 Variables 切换，选
如果是 Sketch / XD：
- 使用 Adobe Repet 或 Sketch Libraries 做颜色替换。
- 或者导出两套独立的设计稿（成本高，不推荐）。
工程交付：给开发看的标准
当你完成设计稿后,需要提供明确的标注，避免开发“脑补”暗黑模式。
| 属性 | Light 模式 Token | Dark 模式 Token | 备注 |
|---|---|---|---|
| 页面背景 | --color-bg = #F5F5F5 |
--color-bg = #121212 |
主背景 |
| 卡片背景 | --color-card = #FFFFFF |
--color-card = #1E1E1E |
内容区域 |
| 主文字 | --color-text-primary = #1A1A1A |
--color-text-primary = #F5F5F5 |
|
| 次要文字 | --color-text-secondary = #666666 |
--color-text-secondary = #AAAAAA |
描述 |
| 边框 | --color-border = #E0E0E0 |
--color-border = #3A3A3C |
分割线 |
| 主品牌色 | --color-primary = #0066FF |
--color-primary = #4B8BFF |
亮度略升 |
| 错误色 | --color-error = #D32F2F |
--color-error = #EF5350 |
适当亮一点 |
核心交付物：
- 一个包含 Light 和 Dark 双列颜色 Token 的表格。
- 几组关键状态对比截图（如首页、表单、弹窗、错误提示）。
- 明确说明：哪些元素不需要变化（如 Logo、品牌插画）和哪些需要替换（如白色图标）。
避坑指南
- 不要只做深色版本：必须同时维护 Light 和 Dark 两套，或通过变量联动。
- 避免颜色反转：不要简单地把“白色变黑，黑色变白”，会导致背景、文字、阴影全乱。
- 不反色：人物照片、产品图、LOGO 不要反色，否则会变“X光片”。
- 测试真实光照环境：在暗光、强光下分别打开你的暗黑设计稿，检查对比度和可读性。
推荐工具与资源
- Figma 插件：“Dark Mode Magic”（可一键把组件转暗，但需要手动微调）。
- 设计系统参考：Material Design 3 (Material You) 的暗黑模式规范（Google 出品，最权威）。
- 色板生成器：Atmos Colors（帮你生成暗色下的品牌色变体）。
一句话总结：把你的设计稿里所有“白色背景”重新定义为一组深灰色层级，把“黑色文字”重新定义为一组浅灰色文字，并用变量（Variables）完成全局关联，一次适配，终生受用。
标签： 设计稿适配
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
