随着产品的功能迭代，体验的逐步更新，用户对 QQ 游戏中心有着更多更强的诉求。那么该如何对用户、产品、设计的诉求进行整合，在提升产品用户体验的基础上，以品牌符号强化产品的记忆点？本文从三个方面进行了分析，希望对你有所帮助。

一、改版背景

QQ 游戏中心是手 Q 用户触达游戏的重要场景，每天有海量用户来此进行游戏相关的互动操作，随着产品的功能迭代，体验的逐步更新，用户对 QQ 游戏中心也有着更多更强的诉求。

在 2022 年的研究报告《游戏中心核心价值及机会点定性研究》中发现用户在游戏中心内最为关心的是领取福利，通过在游戏中心获得游戏相关的礼品道具帮助提升游戏体验。同时用户对游戏有着较强的社交感、成就感、沉浸感诉求。

随着产品目标的调整，游戏中心的功能也逐渐丰富化，除开领福利和找游戏，用户可以在此消费游戏内容、购买游戏道具、以及使用游戏相关功能等，用户触达游戏的方式变得更加多元，用户的粘黏性也进一步提升，产品依势也需要打造更好的产品游戏氛围感和品牌印象来建立用户口碑、提升转化。

同时，以 " 生机 " 为设计理念的 QQ，也进行了体验上的版本迭代，游戏中心作为 QQ 内的重要业务，也将跟随紧随其后完成体验的更迭，提升用户体验、延续 QQ 品牌基因。

二、制定设计策略

对用户、产品、设计的诉求进行整合后，梳理出本次改版的基本设计思路——在提升产品用户体验的基础上，以品牌符号强化产品的记忆点，一方面从产品体验上给用户带来更顺畅体验，同时以品牌图形强化游戏感和沉浸感，提升用户心中的品牌印象。

优化基础体验：跟随手 Q" 生机 " 设计理念和界面风格，统一 UI 界面样式 ；重构内容消费的信息容器，提升内容消费效率；提升设计效率，以及打造更高效团队合作方式。

打造品牌记忆点：通过品牌基因的植入、游戏氛围感的增强，让产品更具辨识度，同时加强产品的游戏属性，强化用户的沉浸感。

游戏中心改版总览图

三、解决问题

1. 基础体验优化

游戏中心本次改版在体验上的优化聚焦在 3 方面：

（1）焕新界面

随着产品功能的扩充和迭代，游戏中心的界面风格开始趋于参差，同时伴随 QQ 设计规范—— Q 语言的更新，游戏中心的首要任务即完成界面风格的统一。

① 统一风格

以往的游戏中心，采用更为丰富多彩的设计语言，导致从手 Q 进到游戏中心较为强烈的割裂感。而本次改版中延续手 Q 的简约透气的风格表现，通过色彩样式、组件、圆角等设计要素将界面进行规范统一，保证体验的一致性。

② 求同存异

在首页、游戏、攻略这 3 个场景，界面的风格向手 Q 设计语言靠拢，色调以手 Q 蓝为主，以相对简洁的界面风格保证内容传递的高效性。

同时根据业务诉求，也保持了游戏中心自有特色——在福利和商城 tab 两个主场景下强化游戏氛围感：采用 3D 图形和多彩图标、界面主色调使用情绪更高的橙黄色，让整体感知更符合产品的特质。

除开界面风格，图标的设计也融入了游戏中心的特色——保持基础型与手 Q 图标一致外，同时将一些图标通过游戏化语义表达出来，使其更具趣味性和游戏感。

（2）重构容器

① 优化内容消费体验：内容卡片结构化

游戏中心的消费内容来源丰富，包含问答站、小世界、频道等多处内容源，给用户带来海量内容的同时，也导致了信息容器的冗杂，增加用户的认知负担、降低浏览效率。

在前期和产品的梳理中，发现游戏中心的 feed 类型可以分为 4 大类，总计有 21 种样式。为解决用户的浏览体验问题，对 feeds 结构进行了结构化整理，以流式布局将所有样式整合为 6 个部分，基于不同消费内容去排列组合 feed 类型，简化产品逻辑，同时用户更聚焦内容阅读。

② 提升游戏分发效率

游戏 tab 作为游戏分发的主要场景，改版前主要以横向列表容器去承载游戏信息，用户探索新游的效率较低，同时雷同化的结构，容易浏览疲劳。

针对以上情况，在页面设计上丰富了承载容器的样式，采用高效率的游戏图标排列或者游戏合集卡片，提高了浏览效率，也让用户更容易命中自己钟爱的游戏类型，不同的容器类型组合也让整个浏览更有节奏，减少疲劳感。

（3）提升设计效率

游戏中心在以往产品功能的快速迭代中，由于规范和组件的不完善以及和开发同学协作模式的不确定性，让产品界面的实现往往不尽满意，无论是开发效率还是还原程度都受到一定的影响，最终导致用户体验的不完满，所以本次的改版，提升设计的效率也是体验提升的重要一环

① 统一设计规范

界面的基础样式和控件，和手 Q 基本规范保持一致，包括颜色、图标风格、基础控件、圆角、栅格等。同时基于业务的诉求，我们在手 Q 基础上拉出一条规范支线用于游戏中心的设计——主要在基础色、图标等拓展了更多样式。

② 提升协作效率

以往黑夜模式的适配，开发和设计需要同时输出和还原两次设计稿，导致适配成本较高。在本次改版中，将新风格页面的组件 token 化，搭建起设计和开发之间界面样式的映射关系，开发和设计只需还原一次设计稿，即可完成黑夜模式的适配，达到高效设计、快速上线迭代目的。

黑夜模式的上线，也提升了游戏中心的浏览感受，让用户的体验更友好、更亲近用户，回归 Q 语言亲和自然的设计原则。

2. 打造品牌记忆点

（1）打造品牌记忆符号

QQ 围绕社交有效性、社交广度与深度、社交动力等维度，打造一个积极向上充满生命力的社交生态体系。生机的理念承载乐观活力与积极延续，具备有序和精致的特点，也象征万物发展所蕴含的生命力。—— Q 语言 - 设计理念

在游戏的世界观中，" 能量 " 经常作为源动力元素以推动游戏进展，QQ 游戏中心承接 Q 语言" 生机 "的设计理念，提炼衍生" 能量 "概念，以能量元素将生机理念具像化，赋予产品积极快乐充满活力的品牌感知。

在确定能量作为核心关键词后，对此发进行情绪版关键词的发散，结合前文提到各方诉求，最终把关键词锁定到能量、游戏感、氛围上。

（2）品牌基因拓展

在对关键词的发散阶段，讨论和尝试了多种能将 " 能量 " 概念视觉化的元素，考虑到 UI 界面的延展性和可用性，最终把可视化元素锁定在宝石和光上——宝石造型上相对简单，光在动画塑造上能拥有多样丰富的表现形式。

为契合概念的设定和后续的延展，我们把宝石定义为能量石。在能量石的设计上，特意营造出能量充盈、光感琉璃的视觉感受，造型上采用多面切割结构，色彩上兼容蓝色和黄色两种色调，以匹配游戏中心的整体界面风格。

除开主体图形，也从其他设计维度去落地能量的设计理念：