深色模式设计先分清页面背景、容器和浮层，再分别设置正文、辅助文字、边框与状态色。它不是把浅色稿直接反色：同一控件在深浅主题里要保留相同含义，文字和操作边界仍要清楚。下面结合 WeUI 组件案例，说明配色、留白、排版和层级怎样一起调整。
可以在Pixso 中并排设计深浅界面，让同一张表单、同一条警告和同一个提示层成对出现；比较的重点是信息能否被看懂，而不只是两张图是否好看。
深色主题减少了界面中大面积的亮色，适合一部分低光环境和视觉偏好，但不应直接等同于“护眼”。是否舒适还与环境光、屏幕亮度、字体和内容有关。对长文、密集表格等任务，应让用户保留适合自己的主题选择，而不是用一种主题覆盖所有场景。
深色 UI 与浅色 UI
并非所有界面都适合用同一种深色方案。除了品牌风格，还要看用户要完成什么任务：查看余额、输入表单和阅读长文，对数字、边界和连续文本的辨认要求不同。金融网站也可以提供深色主题，关键是让信息结构和操作保持清楚，不宜按用户年龄或行业直接断定适用与否。
数据表、表单和下拉菜单都可以设计深色版本，但原浅色配色不能简单照搬。先明确哪些边界靠填充区分、哪些控件需要轮廓，再安排文字、选中状态和悬浮层的颜色；同一套视觉层级应贯穿整页。
以下是微信小程序 WeUI 深色组件库的设计案例。先看整体明暗关系，再对比其中的文字、警告图标、表单和提示层；这些对象展示了深色主题需要分别处理的视觉层级。
深色 UI 设计中的对比
深色主题不必只使用纯黑色。可以从深灰页面背景开始，为卡片和浮层安排可辨认的明度差；纯黑也不是禁用色，它是否合适取决于屏幕、内容和整体层级。无论选哪一种，先检查文字和控件能否从背景中分离。
文本对比度
WCAG 文字对比度说明要求普通文字与背景至少达到 4.5:1，大字号文字适用 3:1 门槛。下图展示颜色检查过程；使用带透明度的文字时，应检查它与实际背景叠加后的颜色，不能把填充色、透明度和最终显示色混为一谈。
聚焦注意力：颜色
强调色要同时承担品牌与状态含义。图中警告图标在深浅背景上采用不同色值，目的是保持清楚的视觉信号；不是所有颜色都要机械降低饱和度。错误、警告和成功状态还应有文字或图形区别，避免只能凭颜色判断。普通说明文字仍按文字对比度要求检查，不能把所有图标都套用 4.5:1。
少即是多：利用负空间
成功的深色 UI 设计的基本要素之一是熟练使用负空间。如果设计不佳，深色 UI 会使产品显得沉重和霸道。为了平衡，设计师可以利用稀疏、极简设计中的负空间来使深色 UI 更轻巧。留白与可见元素同样影响界面的视觉层级。如果使用得当，负空间将使深色 UI 更易于浏览，并让人们更容易吸收信息。
过多元素和文本会削弱深色 UI 的层次。通过仔细考虑深色 UI 中的视觉层次结构，设计师可以使他们的创作更容易被扫描，从而提升用户体验。
图中的表单通过留白和分组区分信息，深色版的装饰分割线更弱。但如果某条线是识别输入框或点击区域的唯一边界，就不能为了“干净”而让它消失。先判断这条线承担什么任务，再决定减弱多少。
排版
深色 UI 中的每一段文字都需要仔细检查。关注点是双重的：易读性和对比度。首先，对于大小，文本需要足够大以保证易读性，因为深色背景上的小文本更难阅读。其次，文本和背景之间需要有足够的对比度。
标题、正文和辅助说明要形成可辨认的文字层级。对较小文本，应一起检查字号、字重、字距和行高，而不是只加亮颜色；长段落还要在实际阅读尺寸下连续阅读，观察是否吃力。
用表面明度区分前后层级
深色主题同样可以表达深度。页面、卡片和弹出层可用不同表面明度、边框与阴影区分；阴影在深背景上不明显时，不必继续加重黑色阴影。先让前后层级可辨认，再加装饰效果。
界面层级帮助用户区分页面内容、卡片和浮层。可以通过表面明度、边缘与遮罩表达前后关系，但并非所有界面都要机械地“越高越亮”。以 toast 提示为例，应让它与底层内容清楚分离，同时保留可读的提示文字。
给每一层表面配好对应文字色，分别检查背景与文本的组合。上层更亮只是可选的层级表达，不能推出所有底层背景都必须达到某个固定对比度。尤其在叠加遮罩、透明卡片或提示层时，要按最终显示效果检查。
把颜色分配给角色，再覆盖状态
| 角色 | 表单里的对象 | 容易漏掉的状态 |
|---|---|---|
| 页面背景 | 表单外部区域 | 空页面与加载页面仍属于同一背景层 |
| 容器表面 | 输入区域、信息卡片 | 浮层打开后与底层能分清 |
| 主要文字 | 字段名、输入内容 | 选中背景上的文字仍清楚 |
| 辅助文字 | 输入提示、补充说明 | 缩小后不能弱到无法阅读 |
| 必要边界 | 输入框轮廓、焦点提示 | 错误边框与焦点同时出现时如何区分 |
| 语义状态 | 错误、成功、警告 | 文字、图标和色彩共同说明含义 |
以“修改密码”表单为例，默认输入框、输入不符合规则、提交中和修改成功应分别画出深浅两种状态。错误提示不能只在深色版换成更亮的红色，还应确认说明文字与输入框的关联；提交中状态要让用户知道正在处理，同时保持字段内容可读。
接着把下拉选项、悬浮提示和遮罩也放到同一画板上看。很多深色稿的问题不在默认页面，而在浮层出现之后：它可能与底层融在一起，也可能仍然保留白色底板。把这些对象和页面放在一起，比只检查颜色表更容易发现遗漏。
主题规则稳定后，可把颜色角色整理为变量，让同一角色在不同主题里对应不同色值。绑定和切换的具体步骤可继续看变量主题切换教程；本页的重点是先确定应该切换什么，以及切换后是否仍然清楚。
通过对Pixso社区中微信小程序的深色组件库的分析，是否加深了您对深色模式的认知呢？除了微信小程序的组件外，Pixso还内置阿里、字节、今日头条、蚂蚁设计等优秀设计规范，提供海量设计模板和素材，本地化字体资源。您也可以选择每天花时间浏览Pixso社区学习基础知识，了解最新设计趋势，探索各种设计风格，为自己的项目收集大量视觉灵感和创意。赶快来体验吧！
