产品战略专家梁宁确认出席AICon北京站,分享AI时代下的商业逻辑与产品需求 了解详情
写点什么

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

  • 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:002228

评论

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

最好学的编程语言一览,建议收藏

高端章鱼哥

聊聊jvm的内存结构, 以及各种结构的作用

EquatorCoco

Java JVM 开发语言

资源成本降低60%,揭秘Serverless的省钱秘籍

华为云开发者联盟

容器 运维 #Serverless CCE

1688跨境寻原通数据接口对接:跨境电商卖家必看!

tbapi

1688API 1688代采系统 1688跨境寻源通 1688跨境代采

构建区块链生态系统:公链、浏览器、钱包与节点搭建全攻略

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 钱包开发 代币开发

NFTScan | 10.21~10.27 NFT 市场热点汇总

NFT Research

NFT\

解锁热带雨林:Mint Expedition 第四季正式开启!

NFT Research

blockchain NFT\ #Web3

基于纯血鸿蒙开发,微信适配情况如何?

博文视点Broadview

Dropzone 4 for mac(文件拖拽增强工具)

Mac相关知识分享

文件管理工具

代码审查不足?教你改善流程的策略

爱吃小舅的鱼

代码审查

HDFS 统一存储实战经验|京东零售技术实践

京东零售技术

大数据 数据

ppt文字描边怎么设置?用这2个软件轻松制作!

职场工具箱

职场 PPT 办公软件 AI生成PPT

【活动预告】Apache TsFile 干货总结在 COSCON'24 等你~!

Apache IoTDB

CQ社区版 v2024.10 | 支持k8s、helm部署!

BinTools图尔兹

k8s Helm 数据安全 数据库管理 CloudQuery

云电脑的性价比高么

青椒云云电脑

云电脑

汇聚全球智慧·共绘软件蓝图,2025北京软博会

AIOTE智博会

软博会 世亚软博会 北京软博会

软件工程师如何有效推动大型项目:全面指南

爱吃小舅的鱼

软件工程 项目 软件工程师

利用 EMQX ECP 实现边缘服务配置的版本管理与参数化下发

EMQ映云科技

边缘计算 智能IoT边缘服务 emqx EMQX ECP

雷鸟发布 AR 眼镜雷鸟 Air 3:售价 1699 元;苹果 M4 版 iMac 发布 10999 元起丨 RTE 开发者日报

声网

团队沟通技巧:管理层与技术人员的协作之道

爱吃小舅的鱼

团队沟通技巧

【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit(4)

HarmonyOS SDK

HarmonyOS

倒计时1天 | 袋鼠云秋季发布会明日10:00开幕,我们云上见!

袋鼠云数栈

功能强大的文件查找工具Find Any File (FAF) for Mac

Mac相关知识分享

软件

Java面试最常见的1309 道 BAT 大厂 java 面试题(附答案分享)

采菊东篱下

java面试

哪些项目管理软件值得一试?9款推荐清单

爱吃小舅的鱼

项目协同进度软件

掌握数据,赢得市场 —— 淘宝商品详情API让电商运营更精准

技术冰糖葫芦

API 接口 API 测试 API 协议 API 优先

8大主流全生命周期项目管理工具对比

爱吃小舅的鱼

全生命周期项目管理工具

如何技术上配置对接Teams Direct Routing

cts喜友科技

通讯 云通讯 通讯通信

公链实体矿机矿池搭建系统开发指南

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 钱包开发 代币开发

专业的RAW转换器Capture One Pro 21 for Mac

Mac相关知识分享

图像编辑器

实现员工职业目标与项目目标对齐的策略

爱吃小舅的鱼

目标对齐

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