将浅色UI界面的颜色转为深色界面模式的设计要点（上）

随着硬件设备的发展，传统的视觉层面的深色UI界面模式已经超越视觉范畴， 其已发展成一种用户偏好，和功能层面的加持。 比如缓解视觉疲劳，省电等等，这里我们介绍将浅色UI界面的颜色转为深色界面模式的设计注意点。

1、系统性建立设计调色板
包含浅色模式和深色模式，让设计师在设计的过程中更有的放矢。

2、确保深色模式下的包容性和可访问性

测试可访问性时请考虑以下方面： 颜色对比度标准：确保文本和 UI 元素与背景有足够的对比度。 用户反馈：寻求残障用户的反馈，以确定需要改进的领域。 WCAG 合规性：熟悉并遵守 Web 内容可访问性指南 (WCAG)。

3、动态变化的深色模式
应适应用户偏好和允许用户根据自己的喜好在浅色和深色模式之间切换，从而增强了用户体验并提供了灵活性。
方式实现汇总：a.用户设置：让用户在设置中选择自己喜欢的模式。b.自动检测：根据设备设置或一天中的时间自动在模式之间切换。c.切换开关：在用户界面中包含一个切换开关，以便快速更改模式。

4、考虑OLED屏幕的优化
用纯黑色节省电池寿命对于配备 OLED 屏幕的移动设备，优化暗模式可以显着节省电池电量。 OLED 屏幕每个像素单独发光，因此当显示黑色 (#000000) 时，像素基本上处于关闭状态，不消耗任何电量。 针对 OLED 屏幕进行优化： 使用纯黑色 (#000000) 作为背景。 确保屏幕上的元素有效地使用较暗的颜色。 这一优化不仅延长了电池续航时间，还增强了整体深色模式体验。

5、灵活变化的版式设计
清晰的字体和对比度版式在暗模式设计中起着至关重要的作用。选择清晰的字体并在文本和背景之间保持足够的对比度以确保弱光条件下的可读性至关重要。考虑这些排版技巧：选择易于在较小尺寸下阅读的字体。调整字体大小和行距以增强可读性。注意对比度以满足可访问性测试指标。

6、增加更多的可定制主题
产品应赋予用户更多的选择权，允许用户自定义他们个性化的暗模式设计体验，可定制的主题可以包括以下选项： 背景色、强调色、字体大小、 按钮样式...等，这种级别的定制提高了用户参与度和满意度。

7、使图像和图标无缝连接
无缝集成视觉元素为了保持一致的深色模式体验，请使图像和图标适应深色主题。这涉及调整它们的颜色和对比度以无缝地适应较暗的用户界面。一些处理图像和图标无缝连接的方法：使用图像滤镜使图像变暗，同时保持其质量。调整图标颜色以匹配整体配色方案。确保图像和图标在深色模式下保持清晰且可识别。

8、保持设计一致性是关键
协调黑暗模式体验 一致性在暗模式设计中至关重要。确保所有页面和 UI 元素无缝过渡到深色模式。 不一致会破坏用户体验并造成混乱。 通过以下方式保持一致性： 在整个应用程序中使用相同的调色板和主题。 确保所有 UI 组件统一适应深色模式。 定期检查和更新您的深色模式设计以保持一致性。

9、使用CSS变量
简化深色模式样式，同时我们利用 CSS变量（也称为自定义属性）可简化浅色和深色模式样式之间的切换过程。 CSS 变量允许您在一处定义和管理颜色值，从而更轻松地变换 UI 设计外观。

以上是在浅色和深色模式设计中值得注意的部分设计要点，希望对你有帮助，想看更多，可以持续关注我们后续的文章。