【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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

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

    阅读完需:约 10 分钟

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

伴随着行业的成熟与竞争加剧,中国互联网产品中心化、平台化的趋势越加明显。越来越多的公司对产品的设计体系与效率提出了更高的要求。为了更高效地服务多样的业务场景,快速应对未来市场竞争的变化,需要我们跳出设计师的视角,更系统化体系化的看待整个产研过程中的问题。

一、项目背景

消费者端的用户界面一致性是设计平台需要关注的问题,保证一致性和体验品质,并实现设计开发的工作提效,是“设计语言标准化管理体系”的建设的核心诉求。


2006 年开始,优酷手机客户端产品经历了多次迭代,每个业务都依各自的场景有独特的设计诉求,但作为平台型产品,实则需要对整体的体验品质做严格把控,才能实现有品质和一致性下的个性化。而平台型应用,体量大,承载业务繁多复杂,开发方式多样,每次视觉改版,都是牵一发而动全身,对设计和开发资源的调动也是极其巨大。


平台级产品的设计团队和研发团队在协同工作中的最常见问题有:


  1. 多团队协作一致性拉齐成本大;

  2. 技术实现不一致复用率不高;

  3. 从视觉设计到开发实现成本较高;


在这种状况下如何通过有效的设计手段提升优酷的体验一致性,实现设计开发双提效,是当前要解决的主要问题。



(优酷 App 2018 年版本用户界面)

二、设计目标与策略

核心目标:建立设计语言的标准化管理体系,改变设计与开发生产模式,实现设计与开发的品质和效率提升。


策略:在既定的设计语言和风格的指引下,实现设计语言的规范化、产品化和工具化。


1.规范化

通过规范化的手段,提升产品的一致性。规范化带来的一致性体验可以更好的统一视觉语言强化品牌调性,让用户对品牌有一个统一的心理认知,增强产品的易用性。

2.产品化

通过设计元素和组件代码化的手段可以打造低成本可复制的能力,使各个不同颗粒度的设计元素成为一个基础的产品化能力,来高效灵活的应对未来复杂多变的产品设计形态。

3.工具化

以工具的形式辅助产品的设计与研发,提升协作效率快速响应业务需求。

三、执行过程

“标准化是通过统一、简化、通用、组合模块化的手段保证业务的秩序、整体构成精简合理及使产品功能效率最高化,来满足业务不断发展的需要。”


优酷在设计语言标准化管理体系建设中包括三个过程:


  1. 规范建立:认知标准统一

  2. 产品化,代码化:协作语言统一

  3. 工具化


下面就详细介绍下,优酷的实践:

1. 认知标准统一:统一设计和技术对界面元素的认知体系,定义标准

1)统一认知

在自然界中,原子是最小存在的单元,原子结合在一起形成分子,这些分子可以进一步结合形成相对复杂的有机物。而在产品的视觉体系里最小颗粒度的原子,我们理解是圆角、颜色、文字、栅格尺寸等这些最基础的视觉的组成要素;利用这些基础要素,我们形成以组件为单位的设计内容,如标题、按钮等控件。原子单位(基础设计要素)、组件、模块、模板、页面组成一个设计稿。


Brad Forst 最早把原子设计理论应用在界面设计中,原子设计不是线性过程,而是一种心理模型,可以帮助我们将用户界面既视为一个整体,又是一部分的集合。设计师与工程师通过原子设计理论形成对页面的结构的的认知统一。


2)定义标准

俗话说没有规矩不成方圆,需要一定的规则更好的服务于用户体验。


原子(颜色、间距、圆角、栅格等)是影响产品设计风格的核心要素,我们对核心要素的使用规则进行了重新定义,由核心要素构成的所有的基础规范以及扩展的运营设计、商业化广告规范都是基于这个设计准则下去设计,保证核心基因的统一。


设计规范的目标重在提升设计质量及一致性,设计侧有了统一的设计规范标准,将不规范约束在一定的范围之内,保证设计输出的一致性。在一定程度上提高设计效率。

3)建立标准化组件库

优酷在业务需求迭代过程中积累了大量的组件,相同的组件设计细节不一致,这就需要设计师站在全局角度系统化的对所有的组件进行一次拆解抽象再重组,使每个组件具有唯一性,沉淀一个通用的标准化的设计组件库,反哺给业务。


2、统一协作语言,组件库代码化

以视觉规范为基础,把设计侧的规范文档及组件库。通过一种协作语言形成设计与技术的映射关系,实现客户端设计组件与技术组件的统一拉通,沉淀成统一的 SDK 共同维护。


1)统一协作语言

什么是 Design Token?它不是一个新的概念,在 lighting design system 被应用。


“Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.’’


设计令牌是设计系统的视觉设计原子-具体地说,它们是存储视觉设计属性的命名实体。我们使用它们代替硬编码的值(例如,颜色的十六进制值或间距的像素值),以便为 UI 开发维护可扩展且一致的视觉系统。’’


把影响视觉风格的视觉原子(颜色、字号、间距、圆角、栅格)进行语义化命名-Design Token。设计师与工程师通过同一种协作语言,描述视觉样式。


整个过程需要设计师与工程师共同参与深度合作,确保 token 名称可理解性,要根据业务的复杂度及开发实现的最优方式给视觉原子进行命名,我们采用不带任何业务属性的命名方式,各业务调用更灵活。


部分命名如图:


2)组件代码化

以往开发实现过程中,研发代码中会写视觉原子的原始属性值,研发实现的结果直接影响设计效果,设计师在针对某个原子属性进行全站一致性拉齐时,涉及到要修改的场景众多,点对点修改成本高。视觉样式对于研发来说是一系列参数的表达,参数是否可以统一管理,只需要修改一个就可以做到全站生效呢?答案是肯定的。


研发以引入 Design Token 的方式对组件库进行重新标准化开发,把视觉样式的代码进行统一管理,形成统一的研发组件库,各业务线可以直接调用,收拢了散落各处的代码,基于优酷的业务及开发实现,找到了一个适合优酷的开发实现方式。


视觉标准化之后实现的是一整套设计风格体系化的调整。例如,只需要改一个圆角间距的参数,全站呼应修改。

3、工具化赋能

先进工具代表性先进生产力,在多团队协作的过程中,如果有工具辅助势必事半功倍。


设计团队将设计规范组件封装在 sketch 插件工具中,建立了设计与设计之间的规范协同,方便设计师以所见即所得的方式快速搭建页面,技术上 sketch 设计插件导出标注会对属性的值进行符号化处理,显示属性对应的值的同时会显示对应的 design token。从而解决了设计输出与开发实现的效率问题。


通过将设计工具与开发平台进行拉通,使得设计产出与研发实现保持一致,完成了全流程的研发提效。通过工具云同步的方式进行迭代,改变了以往点对点的沟通模式,减小了大团队迭代的沟通和协作成本。


四、产生结果和未来展望

伴随着产品的不停迭代,不一致性正在逐渐的收敛,通过规范化,代码化,工具化的手段解决了产品的一致性体验。终结了在老的模式下,设计样式不断发散的趋势。


在 2019 年优酷 App 改版的项目中,这种设计与研发的协作模式极大提升了执行效率,在业务需求并行的情况下可以灵活的调整视觉样式,使设计师的精力得以释放,更多投入到创造性的工作中。


同时,这种模式为后续优酷 Dark mode 的适配,换肤机制提供了很好的基础能力支持,节省实现成本,更进一步验证了设计标准化的带来的便利和工程化的思维模式的可复制性。


设计标准化体系建设是一个长线的工作和课题,我们会持续地进行探索,希望这套视觉标准化体系更完善更加强健,向更多业务赋能。

参考:

http://atomicdesign.bradfrost.com/chapter-2/


https://www.lightningdesignsystem.com/design-tokens/


作者简介


宓宁,阿里文娱体验设计专家。


相关阅读


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


2020-02-24 17:001761

评论 1 条评论

发布
用户头像
是不是理解错了,atomic design 的书中指出的原子是html 元素, 不是“颜色,字体,栅格”等
2020-12-23 14:52
回复
没有更多了
发现更多内容

Abaqus有限元分析技术应用于卫星强度校核

思茂信息

abaqus abaqus软件 abaqus有限元仿真 有限元仿真技术

【有奖体验】叮!你有一张 3D 卡通头像请查收

Serverless Devs

Serverless 函数计算FC

2023开放原子全球开源峰会高峰论坛成功举办

开放原子开源基金会

开源 开放原子全球开源峰会 开放原子 高峰论坛

原点安全携“金融机构消费者个人信息保护解决方案”亮相 2023 中国金融数字化转型发展大会

原点安全

数据安全 金融机构 个人信息保护

BeautifulPrompt:PAI推出自研Prompt美化器,赋能AIGC一键出美图

阿里云大数据AI技术

人工智能 AIGC Prompt 企业号 6 月 PK 榜

DR6018 Routerboard: Unleashing Long-Distance Transfer Capabilities up 23Km!

Cindy-wallys

IPQ6010 ipq6018

里氏替换原则究竟如何理解?

磐远

Java 设计模式 设计原则 里氏替换

蚂蚁集团云原生智能容量技术 KapacityStack 正式开源

TRaaS

GitHub 开源 蚂蚁集团

测试左移

BY林子

软件测试 敏捷测试

深度学习应用篇-推荐系统[11]:推荐系统的组成、场景转化指标(pv点击率,uv点击率,曝光点击率)、用户数据指标等评价指标详解

汀丶人工智能

人工智能 深度学习 推荐系统 搜索推荐 6 月 优质更文活动

系统重构实施,百亿级核心交易如何保证准确性?

鲸品堂

计费模式 对账系统 企业号 6 月 PK 榜

this 之谜揭底:从浅入深理解 JavaScript 中的 this 关键字(二)

控心つcrazy

安全问题我们需要重视,立刻升级fastjson2

源字节1号

开源 软件开发 后端开发 小程序开发

领域建模之数据模型设计方法论 | 京东云技术团队

京东科技开发者

数据模型 建模 业务模型 企业号 6 月 PK 榜

openEuler 开源汇智赢未来|2023开放原子全球开源峰会 openEuler 论坛成功召开

openEuler

开源 操作系统 openEuler 资讯

瓴羊Quick BI:企业数据分析的利器

夜雨微澜

Wallys launches high-performance Tri-Band solutions/ipq4019+qca9882.

Cindy-wallys

IPQ4019 QCA9882 ipq4029

使用华为云开发者插件一键部署应用到ECS

华为云PaaS服务小智

ide 云计算 插件 华为云

成败关键!一对一直播源码平台搭建需要的条件

山东布谷科技

软件开发 源码搭建 一对一直播源码 直播源码

低代码开发平台为数智赋能,让开发变得更简单

引迈信息

前端 低代码 JNPF

深度学习应用篇-推荐系统[12]:经典模型-DeepFM模型、DSSM模型召回排序策略以及和其他模型对比

汀丶人工智能

人工智能 深度学习 推荐系统 搜索算法 6 月 优质更文活动

插件化工程R文件瘦身技术方案 | 京东云技术团队

京东科技开发者

企业号 6 月 PK 榜 R文件 文件瘦身 插件化工程

Spring Boot+Vite+Vue3二手商城

路北路陈

6 月 优质更文活动

Junit执行器Runner探索之旅 | 京东云技术团队

京东科技开发者

单元测试 JUnit runner 源码解读 企业号 6 月 PK 榜

架构成长之路 | 图解分布式共识算法Paxos教会协议

阿里技术

paxos协议 分布式算法

libpq SDK 发送 SQL 和解析结果

KaiwuDB

sql KaiwuDB

理解 与 计算 物联网产品的电池使用寿命

矜辰所致

物联网 低功耗计算 电量计算 6 月 优质更文活动

2023 PlatformCon 平台工程大会回顾

杨振涛

平台工程 内部开发者平台 内部开发者门户 平台工程大会 平台团队

优酷暗黑模式(二):如何建立设计语言标准化管理体系_移动_阿里巴巴文娱技术_InfoQ精选文章