适配深色模式,用之前你需要了解这几点吗（ --- 页面变黑了怎么办

适应黑暗模式：解读深色界面的魅力与适配策略

随着科技的进步和用户体验需求的提升，黑暗模式已成为当下热门的设计趋势。从Android Q到iOS 13，各大系统都在积极支持这一模式，许多产品也纷纷加入黑暗模式的适配。那么，我们该如何适应黑暗模式呢？将带您深入了解黑暗模式的魅力，以及适配策略。

一、黑暗模式的魅力何在？

当我们置身于影院之中，随着灯光的熄灭，屏幕上的影像便吸引了我们的全部注意力。同理，当产品界面背景采用深色设计时，页面元素的优先级更加清晰，用户能更专注于内容。深色模式不仅能让用户更轻松地找到关注的内容，而且相较于浅色模式，对眼睛的视觉压力更小。

虽然关于深色模式是否真正具有“护眼”功能还存在争议，但其为用户带来的视觉体验和新鲜感不容忽视。长时间的“白底黑字”使用之后，深色模式为用户提供了一个全新的选择，带来清新的感受。从设计师的角度看，深色设计能够弱化背景，让用户更专注于内容，同时有机发光二极管屏幕在显示暗元素时功耗更低。

二、夜间模式与黑暗模式的差异

许多产品已经拥有了夜间模式，那么夜间模式和黑暗模式有何不同呢？从用户的角度来看，二者并无太大区别，都是将界面变为黑色。但从设计师的角度来看，二者在应用场景和表现方式上有着细微的差别。夜间模式主要是为了在夜晚使用手机时，让屏幕显示更加柔和，调节色温，降低饱和度。而黑暗模式则需要保持与灯光模式相同的产品特性，可以在任何时间、任何环境下使用。

三、适配黑暗模式的策略

随着越来越多的用户将系统主题设置为黑暗模式，产品也需要逐渐适配这一模式。目前主要有三种适配方式：

1. 如果用户手机系统不支持黑暗模式，产品不会切换到黑暗模式。如微信读书、豆瓣、懒米、Instagram、爱奇艺等产品。

2. 原有的夜间模式与黑暗模式捆绑，用户可以选择是否配合系统主题切换。在不支持黑暗主题的系统中，用户依然可以打开夜间模式，使产品主题变为深色。

为了更好地适应黑暗模式，设计师需要深入了解其特性，衡量其价值，并规划合适的策略。产品也需要不断试错和改进，为用户提供更好的体验。黑暗模式已经成为一种趋势，我们有必要深入了解并适应它。并非真正的深色模式，实为产品团队基于决策模型做出的最优选择

在当今的产品设计中，深色模式越来越受到用户的青睐。严格来说，我们所见到的并非真正的深色模式，而是产品团队基于不同的决策模型，根据产品特性和用户需求所做出的最优选择。

以Twitter为例，其深色模式的设计便是基于产品特性与用户需求的完美结合。而在某些产品中，例如微信，深色模式的内测跟随系统切换主题，为用户提供了更加个性化的体验。

在适配深色模式的过程中，不同的操作系统如iOS和Android，有着不同的设计语言和设计策略。除了基础色彩体系的数值差异，更显著的是它们在Accent color处理方式上的不同。例如，Android Q在保障清晰观看体验的前提下，追求更多的灵活性，采用在原色彩上加40%的白色透明遮罩的方式，以增强深色背景上的清晰对比度。这种处理方式也可能使原色彩在感官上产生较大的偏差。

为了更好地适配深色模式，有以下三种策略值得借鉴：

一、语义化颜色

在iOS设计语言规范下，支持深色模式的产品需要管理两套完整的颜色方案，并确保它们之间始终保持同步。为此，苹果引入了“语义化颜色”的概念。语义化颜色是通过“用途”来对元素进行定义描述，而不是具体的色值。这种定义方式使得颜色可以灵活地适应浅色与深色模式的切换。

二、统一规律变化色彩梯度

Android的适配方案则更为简单粗暴，主要参考色彩梯度模型进行配色，页面背景根据层级叠加不同透明度的白色。这种策略执行不当可能导致产品在深色模式下产生风格偏移，出现不符合品牌设计语言的情况。

三、智能语义化

在iOS适配策略的基础上，某些团队提出了“智能语义化”方案，以降低适配成本。该方案的核心思路是设计师先期根据不同UI元素的特性制定颜色语义化规则，技术在框架层面通过“颜色自动反转”技术实现颜色反转。完美适配深色模式需要多方配合持续维护，后期的功能开发也需要兼顾两种模式，对于自定义元素较多、业务组成复杂的APP来说，适配难度可想而知。

了解深色模式受到追捧的原因，区分深色模式与夜间模式的不同，认识到适配深色模式的多种策略和面临的挑战，这些对于产品团队来说至关重要。在此基础上，我们才能深入思考当前产品是否真的需要适配深色模式，并找到真正适合自己产品的适配策略。

参考资料：WCGA2.0标准、iOS HIG中的Dark Mode设计指导章节、Material Design中的Dark Mode设计指导章节等。

由bubblegun原创发布于人人都是产品经理，未经许可，禁止转载。题图来自Unsplash，基于CC0协议。希望能够帮助你深入理解深色模式的适配策略，为产品团队找到真正适合自己的适配方案。