设计稿暗黑模式怎么适配

本文目录导读：

1. 核心设计原则（先理解后执行）
2. 具体适配策略（设计稿怎么做）
3. 实操方法（Figma 如何实现）
4. 工程交付：给开发看的标准
5. 避坑指南
6. 推荐工具与资源

这是一个非常专业且必要的问题,目前设计稿适配暗黑模式，已经不是一个简单的“换底色”，而是一个系统性的视觉工程。

下面我从设计原则、具体适配策略、以及实操方法三个维度，为你提供一份可落地执行的指南。

核心设计原则（先理解后执行）

1. 不要纯黑（#000000）：使用深灰色（如 #121212、#1E1E1E）作为背景，纯黑对比度过高，长时间阅读会导致视觉疲劳和眩光。
2. 降低色相饱和度：暗黑模式下，原本亮色的饱和度应降低 10%-20%，避免色彩刺眼。
3. 强调层级与阴影：暗黑模式下，阴影很难产生效果，改用模糊、透明度或白色边缘描边来区分层级（Elevation）。
4. 保留品牌色，但降级使用：品牌主色在暗色背景上可以继续使用，但用于大色块、按钮时需降低饱和度，或者配合对比度足够的文字。

---

具体适配策略（设计稿怎么做）

假设你正在使用 Figma、Sketch 或 Adobe XD，可以参考以下流程：

颜色系统：建立 “Light” 和 “Dark” 双变量

• 背景层：
  • Light：#FFFFFF （Surface）
  • Dark：#121212 （Surface）
• 文字层：
  • Light：#333333（一级）、#666666（二级）、#999999（禁用）
  • Dark：#E0E0E0（一级，比白灰一点）、#A0A0A0（二级）、#555555（禁用）
• 边界层：
  • Light：#E5E5E5
  • Dark：#3A3A3C（比背景亮一点，形成柔和边界）

图片与图标处理：避免“亮瞎眼”

• 图标：全量使用 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)

1. 建立颜色变量表：
   • color/bg/surface → Light: #FFFFFF | Dark: #121212
   • color/text/primary → Light: #1A1A1A | Dark: #F5F5F5
   • color/border/subtle → Light: #E0E0E0 | Dark: #383838
2. 启用 Figma Variables 的 Local Variables（可切换模式）：
   • 进入 Local Variables → 创建 Mode（Light 和 Dark）。
   • 把上述变量填入相应 Mode。
   • 在设计中,所有颜色都引用这些 Variable。
3. 一键切换：
   • 在 Figma 右下角点击 Variables 切换，选 Dark Mode，全画布颜色瞬间切换。
   • 然后手动微调图片、阴影等元素。

如果是 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、品牌插画）和哪些需要替换（如白色图标）。

避坑指南

1. 不要只做深色版本：必须同时维护 Light 和 Dark 两套，或通过变量联动。
2. 避免颜色反转：不要简单地把“白色变黑，黑色变白”，会导致背景、文字、阴影全乱。
3. 不反色：人物照片、产品图、LOGO 不要反色，否则会变“X光片”。
4. 测试真实光照环境：在暗光、强光下分别打开你的暗黑设计稿，检查对比度和可读性。

---

推荐工具与资源

• Figma 插件：“Dark Mode Magic”（可一键把组件转暗，但需要手动微调）。
• 设计系统参考：Material Design 3 (Material You) 的暗黑模式规范（Google 出品，最权威）。
• 色板生成器：Atmos Colors（帮你生成暗色下的品牌色变体）。

一句话总结：把你的设计稿里所有“白色背景”重新定义为一组深灰色层级，把“黑色文字”重新定义为一组浅灰色文字，并用变量（Variables）完成全局关联，一次适配，终生受用。

标签： 设计稿适配