写点什么

优酷暗黑模式(五):暗黑模式的技术实现策略

  • 2020-02-26
  • 本文字数:4964 字

    阅读完需:约 16 分钟

优酷暗黑模式(五):暗黑模式的技术实现策略

正如本系列第一篇文章所介绍的,Google 是从 Android 10 正式发布了对暗黑模式的支持,之前随公众理解的深色氛围一跃而上成为系统平台级能力。暗黑模式带给了我们什么呢?


  • 深色界面在专注环境下与内容有更高的契合度,更凸显内容、缓解视觉疲劳;

  • 深色界面更易营造品质感与沉浸感;

  • 深色界面更易建立填充感。

一、暗黑模式项目背景

暗黑模式作为一种系统平台能力,它打造的是整个用户使用周期的全链路视觉体验,也就是要覆盖到用户能到达的每一个角落。


这包括了分发场景,搜索场景,消费场景等复杂的页面结构,也包括二级落地页,活动页等独立页面; 还包括了弹窗,Toast,播放器等常用组件。要全面覆盖如此复杂细碎的场景,需要实现整体性的视觉呈现效果和低成本的全局平台开关。



分析完暗黑模式的影响范围,我们再来看一下我们实践的对象-优酷 APP。优酷 App 发展到今天,已经从一个单体 App,进化成了一个承载集团众多业务出口的超级 App。所以优酷 App 的页面是由十几个完整建制的内部和外部团队共同开发和维护的。


暗黑模式这种全站范围的适配将涉及到上百位设计/开发/测试同学,管理成本,沟通和协调成本,最终落地成本都非常高。


对于这种全站规格的需求,以往优酷的经验是会大量占用业务需求的开发人力,甚至会因此 delay 部分业务需求。这种开发模式是很难延续,不可接受的,本次暗黑模式的适配,我们既希望在第一时间将暗黑模式呈现给客户的,也希望能以更低的成本来完成项目需求。


这给项目方案提出了很大的挑战,但是得益于优酷之前已经实施了设计标准化体系,因此我们有信心和底气完成这些挑战。

二、暗黑模式在优酷的实践

首先,得益于优酷设计标准化体系的落地,我们已经提炼出公共资源库,构建了多层的 DesignToken 体系; 并对大部分一级页面的业务组件进行了接入。所以我们的工作就变成了两部分,一部分是已经接入设计标准化的视觉元素,这部分可以通过修改公共资源库中的 Token 定义,直接添加对暗黑模式的支持,零成本完成适配。另一部分则是扩大设计标准化体系的覆盖范围,在适配暗黑模式的同时,完成更多业务的技术架构的基础建设。


其次,我们还对于暗黑模式进行了色彩分层,静态色层是全站使用的基础色值,它直接对应着一个具体的值。它不会随着视觉模式的变化而变化。在它之上的是动态色层,动态色在不同的视觉模式下,对应不同的静态色。这是通过 Android 原生的资源加载机制完成: 即暗黑模式对应关系在暗黑资源文件中,普通模式在普通资源文件夹中。


在动态色层之上,是代码编写的色彩管理器,它在合适的时间会去获取当前的所有静态/动态色值。设计这一层有两个原因: 一个是提高性能,提前缓存一份给更上层调用,另一个是形成中间层。


众所周知,XML 资源文件的动态性是不足的。XML 资源启动即加载,加载后就是只读的。有了这一层,我们可以支持服务端动态下发色值 Token 的定义,以达成一定程度的动态性。


在色彩管理器之上,是公共的控件和组件层。有了这样的层次关系,使最终的业务设计可以通过搭建完成,完全不需要从零写起,也不需要关注设计标注的细节,开发再也不用逐个元素的调整,设计也不需要逐个像素的校对。只要在第一次纳入的时候进行一次就可以完成,大幅提高了工作效率。



静态 Token:



动态 Token:


动态色对照表



在实际的适配中,布局文件中需要注意的是要使用 Token 来设置组件属性,而在代码中则可以通过公共资源库中提供的工具方法 UIMode.isDarkMode()来读取当前是否是暗黑模式,通过 ColorConfigureManager.getInstance().getColorMap().get(token 名)来获得色值。


具体的适配工作可以看后面的相关文章。08 暗黑模式在优酷分发场景的落地、09 暗黑模式在优酷消费场景的落地 Android。


下面是暗黑模式适配的示例代码:


<?xml version="1.0" encoding="utf-8"?><com.youku.resource.widget.YKRatioLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="@dimen/resource_size_102"    android:layout_height="@dimen/resource_size_153"    android:gravity="center"    android:orientation="vertical"    app:picRatio="p2s1"    android:id="@+id/yk_item_more_layout"    android:background="@color/ykn_secondary_background">
<com.youku.resource.widget.YKTextView android:id="@+id/yk_item_more" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/text_view_7b" android:gravity="center" android:drawableRight="@drawable/yk_title_nav_icon" android:text="更多"/></com.youku.resource.widget.YKRatioLinearLayout>

//获取下拉刷新DesignToken色值int refresBgColor = ColorConfigureManager.getInstance().getColorMap().get(YKN_DEEP_BLUE_GRADIENT_MIDDLE_POINT);//设置下拉刷新mYkClassicsHeader.setBgColor(refresBgColor);
//获取顶部导航背景资源,对应android来说都是一个命名,暗黑模式的资源单独放在night目录下int defaultImage = R.drawable.yk_top_bg;//设置顶部导航背景setPlaceHoldForeground(getResources().getDrawable(defaultImage));
//获取页面背景色int backGroundColor=ColorConfigureManager.getInstance().getColorMap().get(YKN_PRIMARY_BACKGROUND);//设置页面背景色setFragmentBackGroundColor();
复制代码


此外,我们在适配暗黑的过程中,还遇到了很多具体的问题,比如

1、低版本 Android 系统如何支持暗黑模式

虽然 Google 是在 Android 10 的版本中才默认添加了暗黑模式的切换开关,但是,在之前的系统版本中已经预埋了对暗黑资源文件夹的加载能力; 而且有一部分厂商如小米就在 Android 9 的 MIUI 定制版本中提供了切换"暗黑模式"的开关。


所以对于低版本的用户,我们也提供了适配方案。具体来说,我们是通过调用系统 API


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


来触发模式切换的。


需要特别注意的是,使用这个函数是有一些坑的。比如,在使用它之后,如果没有在 Activity 的 manifest 文件中增加


android:configChanges=“UIMODE”


的话,在 Activity 转屏也会引起 Activity 重建。


一般的 Activity 开发逻辑可能不会考虑到这种场景,很多逻辑在这里是会引发 Bug 的。

2、如何监视暗黑模式的切换

可以通过 onConfigurationChanged 进行监听。


这里一般有两种情况:


一种是活动需要监听它,来进行手动刷新,这时需要在 manifest 文件增加上面的配置。才能够监听到系统回调。


另一种是某个控件或组件,或者我们的全局状态,可能需要独立监听,这种情况按下面的代码进行监听。


getApplication().registerComponentCallbacks(new ComponentCallbacks() {        @Override        public void onConfigurationChanged(Configuration newConfig) {        //do something        }}
复制代码

3、系统刷新和手动刷新

暗黑模式的切换必然需要重新渲染页面,这里我们分两种刷新方式:


一种是直接交给系统,系统会在切换是重建 Activity 从而引发页面重新渲染。这种适合"用户使用行为不需要记录状态"的 Native 页面,和 Weex/H5 等动态页面。缺点就是会丢失用户之前的视觉锚点。


另一种, 则是自己监听 onConfigurationChanged 事件然后手动进行有目的范围的"局部刷新"。比如优酷 App 中的播放页。请参考《极致酷黑: 优酷暗黑模式实现系列 – (9)暗黑模式在优酷消费场景的落地 Android》

4、设计体系未覆盖的老旧页面如何适配

在众多的页面中,有一些老旧的页面改造成本过高,甚至已无人维护。


如果不作任何处理的话,这些页面会因为同时使用已改造组件和未改造组件而造成不同视觉模式同时出现。为了了避免这种情况的发生,我们会在页面进入时,强制指定页面的视觉模式方法是:


getDelegate().setLocalNightMode(MODE_NIGHT_YES/MODE_NIGHT_NO);
复制代码


这个 API 的作用范围是所属的 Activity。

三、未来的展望

我们认为,设计标准化体系大大的提高了类似"暗黑模式"这种全站视觉变更项目的效率,DesignToken 的设计将开发从繁琐的视觉效果开发中解脱了出来。


优酷的暗黑模式适配在两周之内顺利完成,并且没有影响同期的产品需求。未来我们会继续深化和丰富标准化设计体系的能力,也希望这种开发方式可以在不同的 App 间变成通用的开发范式。


设计标准化体系的开发,对于公共组件池的跨应用使用,Weex/Flutter/小程序等的跨应用通投都有重要的参考意义。


作者简介


涵父,阿里文娱无线开发专家。


相关阅读


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


优酷暗黑模式(二):如何建立设计语言标准化管理体系


优酷暗黑模式(三):暗黑模式设计指南


优酷暗黑模式(四):设计标准化的技术实现


2020-02-26 10:002267

评论

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

什么是撞库及撞库攻击的基本原理

郑州埃文科技

撞库 撞库攻击 拖库

细数下,FinClip 6月都干了啥

FinClip

ACM MM 2022 | 腾讯优图11篇论文入选,含盲超分辨率算法等研究方向

科技热闻

一文搞懂Python上下文管理器

曲鸟

Python 7月月更 上下文管理器

从Starfish OS持续对SFO的通缩消耗,长远看SFO的价值

小哈区块

SpEL快速上手及实践

转转技术团队

Java spring 后端

这么强?!Erda MySQL Migrator:持续集成的数据库版本控制

尔达Erda

数据库 程序员 开发者 云原生 MySQL 运维

观测云产品更新|新增查看器显示列多种快捷操作;新增 Pipeline 一键获取样本测试数据;新增场景自定义查看器文本分析模式等

观测云

【7.1-7.8】写作社区精彩技术博文回顾

InfoQ写作社区官方

优质创作周报

等保测评报告编号组成部分有哪些?代表什么意思?

行云管家

等保 等级保护 等保测评 等保2.0

【计算讲谈社】第五讲|不止能上路,更能做好服务:自动驾驶产品规模化的问题定义

大咖说

人工智能 自动驾驶 阿里云 科技

帮助文档——助客户快速了解您的产品如何使用

Baklib

新书上市 | 20年行业实践,一线工程师的必读之作

图灵教育

软件设计

音视频通话前的网络及设备检测该如何操作?

ZEGO即构

音视频开发 通话检测

Python 入门指南之模块

海拥(haiyong.site)

7月月更

【LeetCode】单词替换Java题解

Albert

LeetCode 7月月更

Flink 引擎在快手的深度优化与生产实践

Apache Flink

大数据 flink 编程 流计算 实时计算

云脉芯联加入龙蜥社区,共建网络“芯”生态

OpenAnolis小助手

开源 芯片 龙蜥社区 CLA 云脉芯联

工程师世界的《原则》,Quora创始人豆瓣9.2分神作!

博文视点Broadview

中文拼写纠错:怎样改善模型对 multi-typo 的纠正效果?

澜舟孟子开源社区

人工智能 自然语言处理 nlp 文本生成 文本纠错

第四期SFO销毁,Starfish OS如何对SFO价值赋能?

西柚子

基于http-flv的抖音直播端到端延迟优化实践

字节跳动视频云技术团队

直播 端到端 直播低延迟 直播解决方案 http-flv

找论文参考:机器视觉会议和期刊

AIWeker

人工智能 7月月更

2022年新型显示OLED行业发展洞察

易观分析

OLED

2022年云管理软件用哪个好?贵吗?功能有哪些?

行云管家

云计算 企业上云 云管理平台 云管理

中移链Java-SDK实战使用

BSN研习社

区块链、

走进天太|加速智能生产力落地 让机器人随处可见

科技之家

关于TCP与UDP你应该知道的

是乃德也是Ned

7月月更

公有云计费套路多?这里有一份破招详解

焱融科技

Spring Cloud源码分析之Eureka篇第五章:更新服务列表

程序员欣宸

Java SpringCloud Eureka 7月月更

搭建帮助中心,推动SaaS企业发展

Baklib

SaaS 客户服务 帮助中心 文档管理

优酷暗黑模式(五):暗黑模式的技术实现策略_移动_阿里巴巴文娱技术_InfoQ精选文章