WeGame深色模式实践总结

2024-12-12 10:57:57 | 来源: 互联网整理

@TencentPPdesign全称Platform Publish Design，隶属于腾讯互动娱乐发行线下设计中心。团队由视觉、交互、多媒体、UI开发人才组成。负责为腾讯游戏平台体系和发行业务提供体验和服务设计，包括WeGame平台、QQ游戏平台、游戏本地化设计、端游手游助手、移动社区等业务；致力于游戏平台、UI、社区设计领域的研究和沉淀

正文从这里开始~~

导语

夜深人静的时候，我们终于可以打开wegame，更加肆无忌惮地玩快乐游戏了。那是因为WeGame终于推出了深色模式功能，可以让用户拥有更舒适的阅读体验。

为了追求更好的用户体验，WeGame于今年2月推出了深色模式功能。黑暗模式为用户提供了更便捷的方式进入游戏世界。给用户带来了更多不同的可视性，给产品带来了新的体验，让用户有更多个性化的选择。

浏览器暗模式动画

客户端暗模式动画

起源

为什么想推进Wegame暗色模式？

1.满足不同Wegame游戏用户的风格偏好：

Wegame自2018年TGP起升级为WEGAME品牌，风格由深色风格调整为浅色风格。据研究，浅色更有利于用户信息阅读。然而，许多用户更喜欢深色风格，因为深色可以增强游戏的气氛。而且夜间游戏时夜间的暗读体验会更好。

夜间黑暗阅读体验会更好

2、深色模式是体验设计的流行趋势

许多品牌都推出了自己的深色模式版本。众所周知的Windows、Mac、Google等在自己的设计系统中都已经有了深色模式的设计。自此，产品体验设计中对深色模式流行趋势的关注开始兴起。深色模式设计逐渐受到业界的重视，并发展成为一种趋势。

3、改善用户体验

深色模式屏幕可以显着节省手机电量，同时可以保护用户的眼睛，让夜间浏览更加舒适。

前期技术方案探索

早在一年前，我们就开始探索和初步研究平台网站如何高效、低成本地实施多主题解决方案。

问题痛点

俗话说：文明的多样性体现在软件领域绝对是一场灾难。

从事研发的同学都能感受到，迭代频繁的大型平台项目，要改变主题是非常困难的。

1、平台网站开发主题成本高

改变主题需要非常高的视觉和开发标准统一性。也许你会说，这不是简单的换皮吗？是的，就是换皮逻辑。对于只有几个页面的小网站来说并不困难。但平台项目也有困难。例如WeGame项目就非常复杂。共有10+个子项目，包括平台、商城、直播、300+游戏助手等，国内版、国际版、端内版、端外版（适配各游戏平台风格）。另外，个性化要求高，模块复用率低，整体换肤成为不可能的任务，成本巨大。

2.迭代更新和维护成本高

每次迭代都需要考虑其他皮肤的性能。每次更新都需要更换尽可能多套皮肤的样式，开发成本太高。

如何低成本、高效率地设计、开发和维护个性化主题？

解决思路：细化规则，让机器代替体力劳动。我们研究探索了一个设计系统，验证其可行性。

解决方案

创建设计系统 PP UIKIT

PP设计体系是一种让团队能够理解并使用统一的设计语言进行设计和开发的方法。它贯穿从设计到开发执行的整个过程，致力于保持统一的体验，提高设计到开发的效率。

设计系统组件

WeGame深色模式实践总结

从组件化的角度出发，我们建立了标准的底层组件库，增强各业务模块的底层复用性；我们提取了底层的视觉语言并将其传递给每个页面上的每个模块。确保风格的一致性。然后通过设计工具和开发框架的升级，保证组件在业务团队中执行。只有统一规则，才能找出规律，找到让机器代替手工工业生产的方法。逻辑如下：

Token\组件库在设计中的应用

换皮重要的是视觉语言的改变，所以前期token的细化以及后期各元素应用规则的整理是最重要的步骤。

1. Token（视觉语言/设计变量）

Token可以称为视觉语言或设计变量。它是设计标准和规范的核心部分。它是传达品牌统一的重要因素，也是设计和开发实现统一的桥梁。

设计专业的同学都知道，画面中的任何元素都是由点、线、面组成的。在Web实现中也是如此。 UI界面元素可以抽象出其通用属性，不同的属性参数构成不同的元素，例如背景、边缘、文本等。大小、阴影、圆角。

因此，我们将这些属性与具体样式解耦，将这些通用属性定义为Token。它们是背景、边缘、文本、大小、阴影和圆角。

2.将Token与组件关联

充分发挥XD软件的作用，利用XD工具设计者将设计令牌与组件逐层关联。它们将在传达品牌个性和保持视觉一致性方面发挥非常重要的作用。

同样的，前端开发也需要对Token值进行编码，并按照相同的规范将其与各个开发组件关联起来。

作用：Token可以让设计师在设计过程中快速更换皮肤

通过Token替换快速生成暗黑版规范并直接应用到业务中。

3. 设计与开发如何协同

在迭代过程中，很难避免设计者需要优化Token颜色的情况。如果能让上下游的对接和沟通更加高效呢？

我们开发了XD Token插件，可以一键将Token（XD文件）转换为技术性的Sass变量代码

4.主题管理编译工具：使用替换token生成对应的主题样式

当一个网站为用户提供多套主题功能时，在迭代过程中同时维护多套主题的成本会更高。当原有模块风格需要优化修改时，还需要考虑多套主题风格是否合适。目前流行的深色模式和浅色模式都有这样的维护成本。

通过Token和管理工具自动生成（N）个主题皮肤

对于统一平台体验的需求，只需要编译生成一级Token即可。

优点：样式自动管理，后期维护简单，安全性高，只需维护一套样式代码

WEBGAME深色模式落地过程总结

WeGame深色模式的落地过程中遇到了很多挑战。 WeGame承载了很多项目。其独特之处在于体积小。如何处理数万个页面、数万张图片、技术上如何实施等等都是我们在改造项目中遇到的困难。

我们整理介绍了以下问题和要点：

基于PP UIKit，探索推出深色、浅色换肤方案；如何将大批量的SCSS变量转换为CSS变量？页面图标和图片如何支持深色和浅色之间的颜色变化？定制项目换色解决方案

基于PP UIKit 探索深浅换肤方案介绍

我们项目中PP UIKit的使用主要解决多主题（如WeGame国内版、国际版）的设计和开发。然而，在深色和浅色换肤的需求中，如果资源以多主题的方式进行动态引入样式。页面切换过程中会存在资源的网络加载，多个主题样式之间存在冗余的样式重复。我们需要考虑深色和浅色风格切换带来的流畅度，因此我们需要思考如何优雅地实现深色和浅色风格。果皮。

一个。使用Prefers-color-scheme实现页面需要根据系统切换深色和浅色主题：

WeGame客户端外的页面需要随着系统主题的切换而进行深色和浅色的切换。我们可以在客户端之外使用CSS @prefers-color-scheme。当返回值为深色模式时，将文件中的CSS变量值切换为深色主题颜色。值实现切换，在不支持prefers-color-scheme的低版本浏览器中，将维持浅色模式设计。

b.实现客户端场景的明暗切换；

c.保证流畅的切换体验

在开发过程中，我们只维护了一份源代码，并在入口CSS文件中同时引入了dark和light Token。一次请求资源，避免了暗亮模式切换时的加载感，实现了暗亮模式的平滑切换。

2.如何将大批量的SCSS变量转换为CSS变量？

WeGame深色模式实践总结

对于我们的深色和浅色模式切换，项目源码中存在大量的SCSS文件，文件中存在大量的SCSS变量。 SCSS变量被编译成CSS后，会被编译成具体的值。因此，我们需要考虑如何高效地将大量的SCSS转换为CSS变量写入，以实现深色和浅色主题之间的切换。

解决方案：

为了解决这种情况，我们在PDP-theme 中添加了将SCSS 转换为CSS 变量的功能，以进行“非感知”编译。该项目文件基于PDP-theme，可以快速将大量SCSS文件中的SCSS变量编译为CSS变量以供使用。同时，我们在编译过程中还添加了IE兼容性。这个特性使得我们不需要维护额外的CSS变量，开发方式也不受影响。

解决IE浏览器兼容性问题的解决方案：

兼容不支持CSS变量写入的低版本浏览器

E浏览器不支持多种CSS媒体属性：使用@mediaprefers-color-scheme根据系统颜色切换主题颜色不起作用。由于IE用户不多，所以我们没有针对IE场景做深浅换肤。我们首先考虑的是页面在IE浏览器中能否正常显示。

3、页面图标和图片如何支持深浅颜色变换？

(1)小图标变色支持方案

我们采用将位图图标切换为svg图标的方法。将位图图标切换为svg 图标不仅支持换色，还可以使用svg Sprite Loader 插件进行封装，防止同一个svg 在页面上重复绘制路径，影响性能。

符号元素显示

当我们定义了一组图形对象（使用symbol元素）后，我们可以使用use元素来实例化并无限次地显示它。您可以使用xlink:href 属性来指定要显示的图标集。

(2) 大图片背景变色支持方案

WeGame平台上有459款游戏，每款游戏都有自己的助手页面。

每个助手页面都有自己独特的背景图片。过去，设计师通常会针对深色和浅色背景图案设计两种不同版本的背景图片：

商场浅色背景