快手、孩子王、华为等专家分享大模型在电商运营、母婴消费、翻译等行业场景的实际应用 了解详情
写点什么

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

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

评论

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

React Native UI界面还原,组件布局与动画效果

zhoulujun

百度高德地图JS-API学习手记:地图基本设置与省市区数据加载

zhoulujun

百度地图 高德地图

GIS拓扑讲解点线面几何体的拓扑关系判断及运算分析_turf案例

zhoulujun

GIS Turf.js

GIS常用npm包:GeoJSON文件合并与元素过滤\属性过滤\图形合并

zhoulujun

GIS GeoJSON

架构实战营 - 备选架构设计文档模板

华仔

ZBC 荣登OKX涨幅榜前列,月内涨幅逾六成

鳄鱼视界

开源7天Github斩获4.5万Stars!阿里2023版高并发设计实录鲨疯了

Java你猿哥

Java 面试 高并发 面经 春招

Taro架构构析(2):Taro 设计思想及架构

zhoulujun

聚焦弹性问题,杭州铭师堂的 Serverless 之路

阿里巴巴云原生

阿里云 云原生

Go 命令行参数解析工具 pflag 使用

江湖十年

后端 命令行 Go 语言

信息率失真函数与平均互信息

timerring

信息论

JWT 实现登录认证 + Token 自动续期方案,这才是正确的使用姿势!

Java你猿哥

Java ssm 架构师 Token JWT

首次公开!阿里巴巴内部Java 面试突击核心讲(1658 页),转载 40W+

Java你猿哥

Java 面试 ssm 面经 java核心知识

Taro架构构析(1):多端框架分析,Taro WePY uni-app对比

zhoulujun

wepy taro uni-app

从java到JavaScript(2):对比Java/Go/Swift/Rust看Dart

zhoulujun

Java JavaScript dart

从java到JavaScript(1),看Dart:对比Java/Go/Swift/Rust

zhoulujun

Java JavaScript swift rust dart

三天吃透Redis八股文

程序员大彬

redis #java

微前端项目部署方案

京东科技开发者

微前端 京东云 企业号 4 月 PK 榜

Weex原理及架构剖析

zhoulujun

Weex ReactNative weex-vue-framework

Three.js 进阶之旅:全景漫游-高阶版在线看房 🏡

dragonir

JavaScript 前端 three.js

ZBC 荣登OKX涨幅榜前列,生态持续发力是关键

西柚子

数据库原理及MySQL应用 | 数据库安全加固

TiAmo

MySQL 数据库 数据安全

文本处理流程:Text Workflow 1.5.1直装版

真大的脸盆

文本处理 处理文本 文本管理工具

从0到1构建基于自身业务的前端工具库

京东科技开发者

前端 京东云 企业号 4 月 PK 榜

GitHub Pulse 是什么?它是否能衡量 OpenTiny 开源项目的健康程度?

Kagol

开源 Vue 前端 UI组件库

百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域

zhoulujun

百度地图 高德地图

Hex Tech,一个带编程协同能力的 BI 平台的“危”与“机”

CnosDB

数据库 时序数据库 开源社区 CnosDB

gis经纬度坐标转换多格式兼容:支持字符串/数组/GeoJSON

zhoulujun

GIS GeoJSON 经纬度坐标转换

玩转Github:三分钟教你如何用 Github 快速找到优秀的开源项目

Java你猿哥

Java GitHub 开源 源码 ssm

selenium源码通读·2 | common/exceptions.py异常类

Python 源码 测试 自动化测试 selenium

selenium源码通读·3 | 从源码看引入webdriver包的原因

Python 源码 测试 自动化测试 selenium

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