HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

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

  • 2020-02-25
  • 本文字数:4021 字

    阅读完需:约 13 分钟

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

本文讨论的是如何将 UED 的设计标准化体系在研发侧进行落地,以及我们对“超级 App 实现暗黑模式的最佳实践”这一问题的深度思考。


我们的目的是对 Android 和 iOS 的系统新增特性–暗黑模式进行适配。暗黑模式本质上是一个视觉模式,而视觉模式的适配对于业务复杂,页面众多的超级 App 来说一直是个工作量繁重的需求。


下面我们来看看,在设计标准化体系建立之前,优酷客户端是怎么实现视觉还原的工作的。

一、各自为战:前"设计标准化"时代的视觉还原工作

每一年,优酷 App 都会优化体验设计,对整个 App 的视觉呈现进行改版。视觉改版工作分配到各个团队的技术同学手中,有三种主要的实现方式。


第一种:


通过服务端下发视觉模式标记,客户端通过解析该标记的配置,转化成对每一个视图的代码设置。一个视图在某个视觉模式对应的代码设置在开发时就确定了。


第二种:


服务端下发一套视觉样式的 Key-Value 值,客户端预先写好视觉样式的 Key 和视图元素的对应关系,在客户端渲染时,通过这个 Key 在服务端数据中找到对应的 Value 并设置给视图元素。


第三种:


依赖于原生的资源加载器,不同的视觉模式对应不同的资源文件。


横向对比来看,方案一的设计最简单,完全取决于需求,典型的推一下走一步。方案二落地成本最高,需要对每一个视图增加响应配置的能力实现,开发的自由度最低,每个业务的开发都需要遵守相同数据协议完成相同的动作。而且它只能控制接入了这一视觉样式实现的业务,是渲染时方案,无法影响到 XML 形式的布局文件,只能在运行时才能看到效果。但是它的好处是变更成本较低,可以动态的修改服务端模版并下发到客户端页面。


对于方案三,则最符合原生开发习惯,也有最全面的开发工具支持,在编写布局文件时就能看到效果。但缺点是写完了就固定了,变更成本非常高。



为此,UED 和研发同学共同研发了优酷统一的设计标准化开发体系,携手迈进了“设计标准化”时代。

二、最简即最优 - "设计标准化"的设计原则

在确定设计标准化技术方案之前,我们还需要确定设计原则。


我们的原则是:


简单,准确,全面,具备一定的动态性的设计体系


1、简单 是因为视觉模式适配在超级 App 落地涉及的团队非常多,而大家的技术栈各有不同,极具差异性,所以希望技术方案贴近系统原生实现,清晰且简单,才能让大家容易接受,才不会和不同团队的的既有技术方案产生冲突。技术方案可以叠加但不能冲突,不然落地的时间遥遥无期。


2、准确 是因为视觉模式适配涉及的页面非常多,参与的设计和开发同学也非常多。如何统一地把控总体的效果,不在落地的过程中发生变异,就需要一个唯一且准确的标尺。这样,在开发中若出现设计或需求的修改,也能够快速响应。


3、全面 是因为视觉模式适配的页面中,不仅有 Android/IOS 这样的 native 页面,还有 Weex/H5 等动态页面,未来还可能有 Flutter,小程序这种新兴势力。所以一定要设计一个全面的技术方案。另外,我们希望我们的方案可以输出到文娱其他团队,供集团其他 BU 甚至外部公司参考。所以最终的技术方案一定是具有通用性的。


4、动态性 是考虑到可能需要服务端下发设计配置信息,或者针对不同页面做定制。


5、设计体系。在前“设计标准化”时代,设计和开发同学的工作是割裂的,通过视觉稿上的标注进行沟通。开发不对设计效果负责,设计往往都要在开发工作完成之后才能看到设计效果,然后设计再找开发修改,再 Review,形成循环。这是纵向的割裂。另外,还存在着横向的割裂,同样的设计在不同的应用场景要重复循环,而不同的设计和开发可能在最终的效果上有不同的表达形式和标注,造成 App 风格的不统一,降低用户体验。所以希望我们的技术方案能够减少这些 Gap,形成完整的设计体系。

三、"设计标准化"时代的视觉还原工作

下面,为大家介绍我们现在的方案——设计标准化体系。


我们和设计同学一起对线上的产品进行了摸底,归纳抽象出了其中具有共性的设计,站在全站的高度,共同搭建了设计产品化能力。把影响视觉风格调性的基础属性(颜色、字号、间距、圆角、尺寸)进行了统一的命名(DesignToken),设计与开发团队共同维护一套可扩展的视觉属性。视觉属性与框架布局分离,并与开发逻辑相互对应,通过集中式的 SDK 统一管理,一处替换全端生效,便于统一控制并快速修改产品风格。


在 App 视觉还原的具体工作上, 设计同学负责确定界面的色彩框架,形成设计规范,建立模式色板。而研发同学则不再像以往一样,根据视觉稿上具体的数值进行开发,改为根据 DesignToken 的语义名进行开发,而且通过多级的视觉开发代码复用,最大程度的减少具体业务组件的适配工作,将适配开发改为了页面走查,且只需要走查没有纳入或使用 DesignToken 的场景。


另外,我们考虑到语义化名字在设计和开发之间的自然流转,还修改和增强了设计开发工具。将之前直接标注数值在视觉稿上的方式,改为了输出 DesignToken 和示例代码在标注上。在不给设计同学增加标注成本的前提下,大大减少了设计和开发的沟通成本。



设计侧同学对标准化设计体系的思考,可以参看《优酷的设计标准化体系建设》,这里不再赘述。


下面,我们从开发的角度介绍一下设计标准化体系的具体实现,以及设计标准化体系上线之后,优酷是怎么实现暗黑模式的。


1、以 Android 为例,以下是我们的设计标准化整体架构图:


在代码的工程结构上,也体现了设计标准化体系的分层思想,分为了属性,控件,组件和容器四层,每一层都是基于其下一层的 DesignToken 搭建而成,层层叠加,最终构成完整的页面。



以 Android 为例,我们将 DesignToken 的设计翻译为 Android 的具体技术实现:


1)我们定义了很多基础属性:


下面是几个基础属性的例子:


    <!--静态属性-->    <color name="cd_1">#000000</color>    <color name="cg_6">#F5F5F5</color>
<!--基础间距--> <dimen name="dim_5">6dp</dimen>
<!--动态属性--> <!--背景层--> <color name="ykn_primary_background">@color/cd_1</color> <!--信息层--> <color name="ykn_primary_info">@color/cd_1</color>
<!--组块背景--> <color name="ykn_primary_grouped_background">@color/cg_6</color>
复制代码


2)在布局文件和代码中直接使用这些基础属性


<?xml version="1.0" encoding="utf-8"?><com.youku.resource.widget.YKTextView  -----  自定义文本组件        android:id="@+id/yk_item_title"        style="@style/text_view_4b"      -----  自定义组件的Style也是基于token设置        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="@dimen/dim_5" -----  自定义组件的属性也是基于token设置        android:layout_marginRight="@dimen/dim_5" -----  自定义组件的属性也是基于token设置        tools:text="我的标题" />
复制代码


上面就是 Android 业务代码使用公共资源库的代码示例。


2、对于 iOS 来说,我们将 DesignToken 的设计翻译为 iOS 的具体技术实现


1)我们定义了很多基础属性:


以色彩属性为例:


@property UIColor * ykn_primaryBackground;  /// 一级背景@property UIColor * ykn_secondaryBackground;/// 二级背景@property UIColor * ykn_tertiaryBackground; /// 三级背景@property UIColor * ykn_quaternaryBackground; /// 4级背景@property UIColor * ykn_elevatedPrimaryBackground; /// 升起的一级背景@property UIColor * ykn_elevatedSecondaryBackground; /// 升起的二级背景@property UIColor * ykn_elevatedTertiaryBackground; /// 升起的三级背景
复制代码


2)在代码中直接使用这些基础属性


self.view.backgroundColor = UIColor.ykn_primaryBackground;
复制代码


得益于我们对现有设计的抽象和归纳,这些公共样式的布局文件是由专人提前开发完成,业务开发同学只要直接使用就可以了。对于实际的业务开发同学来说,他们不需要再关注设计的细节,设计和开发都是基于共同的 DesignToken 展开工作。


3)设计同学可以通过对 DesignToken 底层定义的控制,把控整个 App 设计的实现效果。

四、设计标准化体系在优酷落地的意义

设计标准化体系在优酷的最终落地,极大地提高了优酷设计和研发团队的工作效率。

1、统一管控

所有的页面都是基于统一的 DesignToken 来实现的,可以做到“一处修改,到处生效”。如果未来出现所谓的“红色模式”,“蓝色模式”,我们有信心在非常短的时间之内完成整个优酷 App 的视觉换新工作。

2、节省人力

所有的设计和开发同学都基于统一的设计语言沟通,极大地减小了交流成本。在版本迭代的末期,设计同学需要对视觉效果做微调和修改时,其作用尤为显著。

3、方便开发

现在优酷 App 中可以使用的 UI 基础属性全部属于一个受控的 DesignToken 集合,业务开发同学不需要关心和理解设计的具体细节,只需要将视觉稿翻译为 Android/iOS 原生实现即可; 不再需要反复确认设计稿细节和反复微调来还原视觉效果。


经过优酷数个版本的迭代,对比原有的开发模式,大部分设计和研发同学都感受到了设计标准化的强大威力,也认可了新的基于设计标准化的工作流。因此,优酷的设计标准化体系的持续开发一定会坚持下来,继续演进和迭代,支持更多的场景,支撑更多的大文娱业务。


究竟设计标准化体系的威力有多么强大呢?暗黑模式的落地是一个最好的 Case。有了设计标准化体系打下的良好的基础,优酷 App 的暗黑模式的开发工作总体上是很顺利的。业务开发同学反映工作量比预期的少很多,设计同学视觉走查的结果是仅仅发现了很少量的视觉问题,这也反映出设计标准化体系和暗黑模式的技术方案设计比较完善,组件标准化的覆盖率达到相当高的程度。


下面,我们分 Android、iOS、Weex&H5 三篇文章,各自介绍我们是怎样基于设计标准化体系,完成“暗黑模式”的技术支撑方案。


作者简介


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


相关阅读


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


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


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


2020-02-25 15:002035

评论

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

Builder构建者模式,将复杂对象的创建过程与其表示分离,活学活用才是王道

爱好编程进阶

Java 程序员 后端开发

GitHub上最牛逼的Java教程,标星yyds:算法

爱好编程进阶

Java 程序员 后端开发

Flink与Spark Streaming在与kafka结合的区别!

爱好编程进阶

Java 程序员 后端开发

Github标星28K+,这款可视化的对象存储服务真香

爱好编程进阶

Java 程序员 后端开发

大数据培训HBase读写性能优化的详解

@零度

大数据 HBase

我是如何做到百万数据跑批半小时结束

skow

后端 java

Dubbo的超时和重试

爱好编程进阶

Java 程序员 后端开发

JAVA为什么需要注解?

源字节1号

GitHub成功收获87

爱好编程进阶

Java 程序员 后端开发

案例分享|一键式自动监测,跨境电商平台的业务转型模板

博睿数据

博睿数据 数据链DNA

C++std命名空间和头文件详解

爱好编程进阶

Java 程序员 后端开发

ICT架构体系详细说明【3】

爱好编程进阶

程序员 后端开发

如何开发 LAXCUS 分布式应用软件(二):基本构成

LAXCUS分布式操作系统

集群架构 并行计算 分布式操作系统 分布式应用

Swoole 定时器能实现毫秒级任务调度,你敢相信吗?

CRMEB

CGBTN2110-DAY07总结复习

爱好编程进阶

Java 程序员 后端开发

七大章节解读「中台」的前世今生

菜根老谭

中台 中台架构

秒云助力上海金融信息技术应用创新联合攻关基地正式上线信创容器云平台

MIAOYUN

云原生 信创 智能运维 一云多芯解决方案

时序数据库为万物互联打下坚实的基石

华为云开发者联盟

数据仓库 物联网 时序数据库 GaussDB 时序数据

Docker:第二章:部署项目

爱好编程进阶

Java 程序员 后端开发

十年磨一剑|沃趣数据库云产品战略首发

沃趣科技

云原生 公有云 私有云 数据库云 沃趣科技

火山引擎入选“2022 中国边缘计算20强”榜单

火山引擎边缘云

边缘计算

跨端跨框架 UI 自动化测试方案 Flybirds

liang chen

Day308

爱好编程进阶

Java 程序员 后端开发

Dropzone

爱好编程进阶

Java 程序员 后端开发

Github上都在疯找的阿里内部“全栈技能修炼”终于来了

爱好编程进阶

Java 程序员 后端开发

Hadoop05【命令操作】

爱好编程进阶

Java 程序员 后端开发

直播预告丨Hello HarmonyOS进阶课程第二课——计算机视觉

HarmonyOS开发者

HarmonyOS 图形图像 视觉开发

Byte和bit

爱好编程进阶

Java 程序员 后端开发

GC:你要用什么方式把我丢掉?

爱好编程进阶

Java 程序员 后端开发

Hadoop 3

爱好编程进阶

Java 程序员 后端开发

TASKCTL分布式任务调度平台-流程控制原理

敏捷调度TASKCTL

程序员 DevOps 分布式 大数据运维 TASKCTL

优酷暗黑模式(四):设计标准化的技术实现_移动_阿里巴巴文娱技术_InfoQ精选文章