QCon 演讲火热征集中,快来分享技术实践与洞见! 了解详情
写点什么

优酷暗黑模式(一):是什么、为什么、如何落地?

  • 2020-02-24
  • 本文字数:2863 字

    阅读完需:约 9 分钟

优酷暗黑模式(一):是什么、为什么、如何落地?

优酷主客从 20191125 版本开始,Android 和 iOS 双端均已全量支持“暗黑模式”,欢迎大家试用并提出宝贵意见。

一、缘起

随着 iOS 13 和 Android 10 的正式发布,一个名词"暗黑模式(Dark Mode)"逐渐走入了大家的视野。各大 App 都将暗黑模式的适配列入了开发日程,舆情上用户们对暗黑模式支持的呼声也非常的高。优酷主客也顺应时势,启动了相应的技术预研。



从 2019 年 11 月开始,优酷主客 Android 端和 iOS 端使用了两个版本的时间,推动各业务方基本完成了主要使用路径上数十个页面的改造,还使用同一套方案同步完成了部分 Weex 页面和 H5 页面的适配,并完整地通过了 UED 的视觉验收。


当前,到 App Store 和各大 Android 市场下载的优酷 App 最新版本,均已全量支持“暗黑模式”,欢迎大家试用并提出宝贵意见。


我们邀请了参与优酷 App 暗黑模式设计/开发/测试的同学们编写了一系列文章,全面介绍了整个项目的实施流程和经验教训,也是对整个项目做一个完整的总结。


随着 iOS13 和 Android10 系统的占比越来越高,相信暗黑模式的支持会逐步列入各位读者的时间表。希望我们的心得分享能帮助到大家,也欢迎大家参考优酷实现暗黑模式的设计/技术方案,完成自己 App 的暗黑模式接入。

二、什么是暗黑模式?

不考虑计算机工业早期的黑色底,绿色字符的终端界面,暗黑模式的概念主要来源于 MacOS,该系统为用户提供两个外观,即"浅色"和"深色"。



自从有了这个概念之后,很多网站都为用户提供了“浅色”和“深色”两套界面,便于用户根据自己的习惯或爱好进行切换。



在 MacOS 之后,很多 App 和 Android 定制 ROM 也加入了所谓"深色模式"的支持; 在 iOS 13 和 Android 10 发布之后,“暗黑模式” 终于被添加到官方支持的特性列表。

三、为什么要支持暗黑模式?

根据 Apple 官方的说法,暗黑模式可以“改善电池寿命,改善视力不佳和强光下的人的可视性,以及在弱光环境中更好地使用设备”。


1. 改善电池寿命

从下图中 notebookcheck 的功耗分析可以看出,在使用 OLED 屏幕时,屏幕上显示的内容决定了功耗。当屏幕基本全黑时,OLED 屏在任何亮度下的功耗都保持恒定。显示了白色内容的屏幕,功耗曲线会随着亮度提高而逐渐变陡。



图片来源:https://www.notebookcheck.net/Display-Comparison-OLED-vs-IPS-on-Notebooks.168753.0.html

2. 改善视力不佳用户的可视性

我们面对的用户群体中有一部分是色盲或者色弱用户,暗黑模式对于色盲/色弱用户群体是非常友好的。

3. 弱光环境中的使用


在温暖的被窝中也可以舒服地看剧了,再也不用害怕被白色背景闪瞎眼了。

4. UI 风格的统一

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


以 iOS 为例,在下图的界面中,Tabbar 已经被转成暗黑模式的样式,但画面上方的组件、文字因为都是自定义颜色/样式,并没有随着模式切换而自动调整,这也让整个画面看起来不太协调。



如果短时间内没有精力支持暗黑模式,也可以在开发阶段强制指定不支持暗黑模式。


对于 iOS,需要在 App 的 Info.plist 里面添加名称为 User Interface Style, 类型为 String 的项目,将 User Interface Style 的值设置为 Light,声明"只支持 Light Mode",就可以避免系统控件转换为暗黑状态。


对于 Android,需要在 App 的 Application 里面调用下面的代码,声明不支持暗黑模式。


AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
复制代码

四、暗黑模式的官方文档

暗黑模式的官方设计指南,可以参考 iOS 和 Android 的官方文档


iOS:


https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/


Android:


https://developer.android.com/guide/topics/ui/look-and-feel/darktheme


https://material.io/design/color/dark-theme.html


要支持暗黑模式,绝不是将界面上的浅色元素改为深色元素就大功告成; 否则我们只需要编排一份浅色和深色色值的颜色转换表,以及一份适用于暗黑模式的素材, 然后简单地对 App 进行改写就可以了。


以 iOS 为例,为了支持系统级别的暗黑模式主题,以及系统内置 App 同步支持暗黑模式下的界面,iOS 系统在屏幕(Screen), 视图(View), 菜单(Menu)和组件(Controls)上使用了 Apple 新定义的 “Darker Color Palette”。


这套 Color Palette 的主要目的,在于透过调整颜色的饱和度, 做出视觉层级,提升颜色的对比性,让所有组件能够以合适的状态在暗黑模式中进行操作。


基于暗黑模式进行的界面设计并不是一个颜色调整一下就可以快速解决的任务。由于暗色系的一些特性,原本用来建立视图层级(例如阴影)或者色彩对比(白底黑字)的概念都需要被重新设计,设计师们需要以全新的思维去应对视觉上的每个细节。


也因为新增暗黑模式支持这一大幅度的改动,Apple 也重新定义了自己的 UI 设计指南,除了强调设计师们应该 “更专注于内容”,也在原有的设计 "Light Mode"基础上,提出 5 个原则进行调整。


  • 维持操作上的熟悉性

  • 维持平台上的一致性

  • 清楚的信息层级

  • 无障碍操作

  • 保持简单

五、暗黑模式的设计

由此可见,暗黑模式带来的是一整套的全新设计理念。对应而来的,就是对现有 App 设计元素的全盘重构,这在设计和开发侧来讲,都是庞杂繁琐的工程,涉及优酷几乎全部业务的的界面适配。


在《优酷暗黑模式设计指南》一文中,优酷的 UED 们讲述了他(她)们对于暗黑模式在优酷 App 实际落地的深度思考。

六、暗黑模式的架构支撑

在 UED 给出了完整设计方案之后,我们的技术架构同学需要给出完整的技术支撑方案,完美地还原 UED 的视觉设计。


然而,具体落地到实现上,我们不得不回答如下几个问题


  • iOS 和 Android 的实现方案如何尽可能地保持一致性

  • 如何在 iOS 12 和 Android 9 及其以下系统也能支持暗黑模式,并与 iOS 13 和 Android 10 以上系统保持技术方案的统一

  • 如何复用 Native 端的实现方案,同步支持 Weex/H5,甚至延伸至未来的小程序和 Flutter


在“优酷设计标准化体系的技术实现”,“暗黑模式的技术支撑(Android)”,“暗黑模式的技术支撑(iOS)”“暗黑模式的技术支撑(Weex & H5)”这几篇文章中,我们通过实现“优酷设计标准化体系”,完整地给出了技术侧的思考。

七、暗黑模式的业务改造

当底层架构设计已经完毕,就要对优酷主客的所有页面进行适配,改造工作涉及数十位 UED 和开发同学。


在如此短的开发周期之内,既要完成正常的业务开发,又要完成如此大规模的改造,还要通过 UED 的视觉验收。


我们的业务侧开发同学是如何完成这个艰巨任务的呢?


请看“优酷暗黑模式在分发场景的落地(Android&iOS)”,“暗黑模式在优酷消费场景的落地(iOS)”,“暗黑模式在优酷消费场景的落地(Android)》”。

八、暗黑模式的测试和上线

暗黑模式的最终上线,涉及优酷 App 几乎全部页面的适配和改造,为 QA 同学的测试工作带来的前所未有的挑战。


那么,他(她)们是如何完成繁重的测试任务,保证了优酷 App 按时发布上线的呢?


请看文章“优酷 App 暗黑模式的质量保证”。


作者简介


凯冯,阿里文娱无线开发专家。


2020-02-24 10:002276

评论

发布
暂无评论
发现更多内容

MeterSphere | 超好用的开源测试平台

Python研究所

签约计划

牛x运维常用的工具系列-1

运维研习社

运维 工具分享 5月日更

Bugless 异常监控系统 (iOS端)

37手游iOS技术运营团队

ios iOS Developer 崩溃分析 bugless

🔎【Java源码探索】深入浅出的分析HashMap(JDK8)

洛神灬殇

Java 源码 源码分析 hashmap 5月日更

面阿里P7,竟问这么简单的题目?

Java架构师迁哥

工业4.0加速实现“数物相合”,可视化工厂节省时效高达85%

一只数据鲸鱼

人工智能 数据可视化 工业互联网 智慧工厂 智能生产

服务可达,达者为先,产品发布会嘉宾精彩观点分享!

博睿数据

博睿数据 数据链DNA 服务可达

百余大企业共赴新文明之约:2021 DEMO WORLD 世界创新峰会拉开帷幕

创业邦

创新

脉脉3小时转发65w次!这份Java面试宝典发生了什么?

Java架构师迁哥

量化网格策略交易软件,马丁倍投策略机器人

Vue-1-初识

Python研究所

签约计划

Fabric | 自动化神器

Python研究所

签约计划

用Python在树莓派上播放音乐

IT蜗壳-Tango

5月日更

从零开始学习ThingJS之创建App对象

ThingJS数字孪生引擎

可视化 3D可视化 数字孪生

ARM和X86云服务器的算力对比

Python研究所

签约计划

获5项大奖,发布《云计算开放应用架构标准》,阿里云持续领航云原生

阿里巴巴中间件

云计算 最佳实践 云原生 案例 白皮书

1小时内被全网疯转 29.8w 次,最终被所有大V协力封杀!

Java架构师迁哥

公安局重点人员研判分析系统解决方案

MPP大规模并行处理架构详解

五分钟学大数据

大数据 MPP 5月日更

编曲新手可以用什么编曲软件?

奈奈的杂社

编曲 编曲宿主 编曲软件

如何评估 Serverless 服务能力?这份报告给出了 40 条标准

Serverless Devs

云计算 云原生 Forrester Wave #Serverless

🍃【SpringCloud基础使用】Nacos与Gateway实现动态路由

洛神灬殇

nacos SpringCloud Gateway 5月日更 自定义配置

答应我,别再学Swing框架了好吗?

北游学Java

Java spring swing

走向机器智能时代:移动机器人的困局与创新

晨山资本

机器人 移动机器人 AMR

中国呼叫中心与卓越客服产业峰会,百度智能客服再提行业创新

百度大脑

解决方案 行业创新

40K成功入职:六年开发终获小米Offer(附面经+面试题+答案详解)

Java架构师迁哥

论证:iOS安全性,为什么需要审核?

37手游iOS技术运营团队

ios SIP Sandbox iOS Developer ios安全

现在已经卷到需要问三色标记了吗?

艾小仙

活动预告 _ 即构×火山引擎:泛娱乐社交音视频技术实践沙龙

ZEGO即构

获得业内一致好评!华山版Java性能优化全栈手册“登场”

Java架构追梦

Java 阿里巴巴 架构 性能优化 华山版

我厂与张家港市达成全面战略合作,共推数据中心和城市智能化转型

百度大脑

数据中心 城市智能化

优酷暗黑模式(一):是什么、为什么、如何落地?_移动_阿里巴巴文娱技术_InfoQ精选文章