优酷APP暗黑模式开发实践：从设计到技术实现的完整总结

优酷APP暗黑模式开发实践：从设计到技术实现的完整总结

引用

CSDN

1.

https://m.blog.csdn.net/b0q8cpra539hafs7/article/details/103856071

随着iOS 13和Android 10的正式发布，"暗黑模式（Dark Mode）"逐渐成为各大应用开发的重要趋势。优酷作为主流视频平台，积极响应这一技术变革，通过两个版本的时间，完成了Android端和iOS端主要使用路径上数十个页面的改造，并同步实现了Weex页面和H5页面的适配。

什么是暗黑模式？

暗黑模式的概念最早来源于MacOS，该系统为用户提供"浅色"和"深色"两种外观选择。随后，这一概念被广泛应用于各类网站、APP和Android定制ROM中。在iOS 13和Android 10发布后，暗黑模式正式成为官方支持的特性。

为什么要支持暗黑模式？

根据Apple官方的说法，暗黑模式具有以下优势：

1. 改善电池寿命：在使用OLED屏幕时，全黑屏幕的功耗保持恒定，而显示白色内容时功耗会随亮度增加而上升。

2. 改善视力不佳用户的可视性：暗黑模式对色盲或色弱用户群体更加友好。

3. 弱光环境中的使用：在光线较暗的环境中，暗黑模式可以提供更舒适的观看体验。

4. UI风格的统一：业务开发中难免会用到系统默认控件，而系统默认控件都支持暗黑模式。如果自定义控件不支持的话，当用户打开暗黑模式后，就会发现风格不统一的情况。

设计方法

1. 产品印象：尽量保留产品的核心视觉特征，如对优酷五大栏目头部氛围和底栏图标进行了深色的第二套设计。

2. 主背景色选择：选择足够深但比黑色浅一些的颜色，既能与黑色媒资图片拉开空间层次，又能保证与前景色有足够大的对比度。

3. 色彩框架：建立包容且一致的色彩框架，确保同一用途的色彩包含深色模式和浅色模式两个色彩组合。

执行策略

优酷采用设计主导与开发共同搭建视觉产品化能力的方式，通过以下步骤实现暗黑模式的适配：

1. 色彩适配：将颜色体系分为静态色和动态色，使用语义命名交付设计，通过SDK统一管理。

2. 图片处理：建议设计侧尽可能一套图片适配两个模式，开发侧可以选择代码滤镜，对于无法复用的重要图片则需要单独准备深色版本。

3. 工具化：使用盖亚工具进行设计输出，实现设计与开发的高效协同。

暗黑模式的官方文档

开发者可以参考iOS和Android的官方文档：

• iOS: iOS Dark Mode Design Guidelines
• Android: Android Dark Theme Documentation

暗黑模式的实现不仅仅是简单的颜色调整，而是需要重新设计视图层级和色彩对比，这要求设计师和开发者以全新的思维去应对每一个视觉细节。