别再手动制作了 教你如何利用AI快速生成完整的UI色板

二、灵活借鉴大厂经验，快速适配深色模式

1. 大厂调研

iOS

在 iOS 深色模式中，界面的层级关系遵循一个原则：离用户更近的元素颜色会更加明亮。背景色会随着界面层级的变化而转变为更加明亮的色调。从 HSB 的角度来看，这意味着通过调整颜色的明度和饱和度来区分视觉层级。iOS 采用这种背景色统一升级的方式来实现多任务窗口叠加的视觉隔离效果，尽管这也提高了开发成本。

iOS 系统的色彩方案是在浅色色板的基础上进行的感官微调，并且是单独定制的。

Android 将页面划分为从“0dp”到“24dp”的10个不同高度的显示层级，通过在相同背景色上叠加不同透明度的白色来区分这些层级。与 iOS 的整体背景色升级相比，Android 的背景色分级逻辑显得更加简单和易于使用。

Android 官方建议在深色主题中采用较浅的色调（200-50），而避免使用默认的主题颜色（饱和度在 900-500 范围内）。

在实际应用中，Ant Design 可以根据自身业务需求，直接从中性色板中选择合适的颜色，或根据透明度的概念自定义出适宜的中性色彩。

对于暗黑模式的色板，Ant Design 运用对比度的正负极性概念来进行透明度的调整；通过分析一套颜色的正负极性变化趋势，以发现其转换规律。

2. 实践探索

背景色的定义

确保文本清晰易读
构建深色调色板
在不同环境和场景中测试界面效果
① 确定背景色

深色模式并不仅仅是将整个界面进行反色处理，而是需要充分考虑所有用户的需求。由于临界作为创作社区类应用，用户在夜间使用的场景占有一定比例，因此深色模式不仅要在白天满足使用需求，还需确保在夜间的视觉刺激保持相对柔和。因此，应避免使用对比度极高的纯黑背景。

由于临界的内容图文较多，选择无色相的背景可以最大程度地减少对视觉的干扰，使观众或读者更容易集中注意力于内容本身。否则，过多的色彩可能会分散注意力，影响信息的有效传达。因此，决定不添加带色相的背景。

最终确定的方案如图中所示。

接下来需要对这份配色方案进行细致的调整和打磨。

临界的浅色模式主要遵循 Android 的规范，通过控制 Z 轴的高度和阴影来区分不同的层级。同时，为了确保深色和浅色的信息层级保持一致，并便于用户操作，基础背景色采用在纯黑色（#000000）上叠加不同透明度的白色。通过在这一纯黑色上叠加不同透明度的白色来实现显示层级的区分。

最终方案中，叠加白色的透明度进行了统一，透明度的递增梯度设定为 4，以与 white_01 到 white_04 的透明度保持一致。视觉上与初选方案相比，变化非常微小。

② 确保文字清晰可读

对新背景色与一、二级文字颜色进行测试，以确认是否符合 WCAG 无障碍阅读的 AA 标准，即常规尺寸文本的对比度需高于 4.5:1。

在测试中，新背景色与一、二级文字色均达到了 WCAG 的 AA 标准，这表明当前的文字颜色与新背景色相匹配；目前的文字颜色通过降低不透明度的方式进行分级，选用了 white 色板中的颜色。因此，当前的文字颜色无需调整。

③ 构建深色调色板

采用大型公司的沉淀方法论

基于对深色模式适配思路的研究，首先排除了 iOS 单独调配所需的高时间成本的方法；其次，在参考 Android 的思路时，发现这种方法会明显使颜色柔和化，完全执行可能导致产品在深色模式下风格偏移，从而不符合品牌设计语言。因此，选择了 Ant Design 的方法论，结合透明度规则进行处理，尽力保持品牌风格的一致性。

以成功色彩色板的应用为例

确定暗黑模式下的标准色彩

根据 Apple 官方的对比度建议，应达到 7:1。在使用 Ant Design 方法论生成的色板时，对标准色与背景色进行了对比测试，发现部分色彩的对比度未能达到约 7:1，且在实际页面上显示时显得较暗。经过微调色彩，并在对比度约 7:1 的基础上进行色彩校正，最终确定了暗黑模式下的标准色彩。

扩展同色色阶

制作梯度色板的方法通常包括透明叠色法和贝塞尔曲线法等。目前，市面上涌现了众多制作色阶的插件和软件，利用这些工具生成梯度色板不仅更加精准，也能大幅提高工作效率。在尝试了多款受欢迎的插件后，最终决定使用 Supa Palette 来制作色阶。

结语

在构建色彩体系的初期，我们往往依赖直觉，迅速做出决策，受到主观情感的影响进行色彩选择。虽然初期的过程相对顺利，但随着产品的规模扩大和发展，色彩管理变得愈加复杂。如今，人工智能在色彩设计领域展现出无限潜力，它不仅超越了简单的技术优化，还深刻改变了色彩管理的精细程度和设计流程的智能化。灵活运用现有的技术和工具，使色彩真正为设计服务，并简化团队协作流程，必将为设计师和用户共同开启一段更加愉悦的体验之旅。