游戏中心首页改版2.0：沉浸式游戏化设计思路与实战复盘

随着互联网与游戏业务的飞速发展，游戏推荐赛道竞争日趋激烈，产品同质化问题也逐渐凸显。vivo游戏中心始终致力于以“年轻、有趣”的宗旨帮助用户发现好游戏。为了突破重围，我们选择了走特色化道路，致力于打造更专业、更具游戏特色的分发产品，而首页正是实践这一理念的核心阵地。

背景与目标

此前，我们已经完成了首页1.0版本的改版：通过“每日一荐”大卡形态提升品质感与游戏吸引力；调整页面层级，利用金刚位和页签为不同需求的用户分流；并将列表流更新为瀑布流卡片。改版初期效果显著。

然而，经过一年的运营和数据观察，我们发现了新的挑战，并决心结合项目战略方向、数据反馈和用户声音，对首页进行再次升级。

核心问题与优化目标：

1. 曝光与吸引力：“每日一荐”大卡片虽突出，但压缩了其他内容的曝光，影响了整体分发效率。同时，平台同质化导致用户新鲜感减弱。需解决曝光问题，并更生动地呈现游戏特色。
2. 流量分发路径：位于页面腰部的页签，无法在第一时间高效辅助用户查找游戏，点击率不理想。需要调整页面结构，找到更优的流量分流路径。
3. 决策信息与转化：相比列表，瀑布流在分发效率上处于弱势。需要为卡片增加有效的决策信息，提升单游戏的转化率。

最终，提升游戏有效激活率与平台有效活跃率是本次改版的两大核心业务指标。而“特色化”被提升至战略高度，成为贯穿整个改版设计过程的重心。

从设计视角拆解，“特色化”可聚焦为两个关键点：游戏化与吸引力。

• 游戏化：通过设计表现形式，带给用户更极致的游戏氛围感知。
• 吸引力：通过设计手法，为用户营造强烈的氛围感、品质感和精心运营的编辑感。

二者相辅相成，是打造产品差异化的组合拳。

整体设计策略

基于最新的数据与用户反馈，我们重新梳理并整合了页面信息与功能结构：

1. 结构调整：将腰部页签上移至头部搜索框下方，更好地满足“半目的性”用户找游戏的诉求。
2. 沉浸式头部：将“每日一荐”模块与整个头部背景融合，打造沉浸式体验，极致展现游戏氛围。此举也解决了页签上移后头部过高的问题，并为下方瀑布流争取了更多曝光空间。
3. 瀑布流重构：重构瀑布流卡片容器，使其能灵活适配更丰富的决策信息，并通过差异化的视觉层次凸显游戏特色，提升吸引力。

遵循以上思路，我们经过多次打磨，得到了最终的设计效果。

Part 1：容器设计——强化模块吸引力

“每日一荐”作为首页展示精品游戏的核心资源位，其承载容器需要最大化地展现游戏本身的吸引力。

相较于旧版，新版头部容器实现了更高效、更沉浸、更兼容。一方面，容器高度被压缩，露出了首个瀑布流卡片的安装按钮，且未折损模块的视觉冲击力；另一方面，内容展示主体区域的比例对常规物料（尤其是视频）有更好的兼容性，经过设计处理，无需合作方（CP）特殊定制即可在头部使用通用视频物料。

那么，具体如何设计呢？ 首先分析“每日一荐”模块的信息构成：除头部功能区外，还包含日期心智、游戏信息和安装按钮等，信息类型复杂且密集。因此，设计的首要任务是让信息有序。

我们通过 信息归类、色彩降噪、层级简化 三种手法，突出游戏素材特色，强化该模块的品质感。

1. 信息归类
通过多种排布方案的尝试，我们将游戏信息统一整合在模块下方。这既更符合用户自然的视觉动线，又能将素材主体集中在视觉中心予以突出。

2. 色彩降噪
在沉浸式页面中，顶部信息会因背景物料的不确定性而产生识别性问题。我们对头部功能区和页签进行了色彩降噪处理，将彩色的品牌图标、特殊标签页和选中态统一为白色，减少色彩干扰，并通过透明度调整来统一视觉层级。

3. 层级简化
我们发现，多余的卡片层级虽然能强化文字信息或交互手势，但在有限的模块内反而会分散用户对核心内容的注意力。类似于毛玻璃或卡片分割的方案，容易产生“形式大于内容”的观感。

因此，我们做减法，去除模块内卡片化的边界，让用户的视线更集中地聚焦于物料本身，设计更纯粹、更直接。

在整体页面关系上，我们探索了多种方案，包括常见的卡片叠层、平切，以及改变圆角包容方向的“反套卡”等。

最终，我们在“反套卡”的基础上进行了情感化升级，以一缕浅浅的弧度切割“每日一荐”与下方页面的空间。这仿佛像是用户进入首页时，界面向其展示的一抹微笑，更具情感与温度。相应地，金刚位图标也贴合此弧度进行了形状调整，并采用了3D化设计，在提升游戏感的同时，增强了点击的感知反馈。

此外，为了引导用户查看往期推荐内容并跳转至合集页，我们在“每日一荐”的合集入口设计了映射现实翻页效果的微动效，持续吸引用户点击。

Part 2：内容呈现——静态与动态的沉浸适配

在新版容器下，画面能够展示更多细节、呈现更宏大的场景，给予用户更沉浸的视觉体验。

1. 静态内容适配
无论是游戏推荐、活动宣传，还是专题合集，都能在新容器中得到良好呈现。

2. 大屏设备适配
若简单放大普通手机素材来适配折叠屏或Pad，会导致画面裁剪、模糊，品质下降。我们的解决方案是：请CP提供画幅更大的原素材，用以适配大屏；再对大屏素材进行合理裁剪，保留核心元素后用于小屏手机。这样既简化了适配流程，又保证了各端的显示品质。

3. 动态内容（视频）的沉浸式挑战与解决
优质的游戏宣传片拥有最强的吸引力和信息传递效果。“每日一荐”作为最重要的资源位，理应呈现最佳的游戏品质与视觉体验。然而，业界在首页展示视频时普遍保守，主要面临三大难点：

• 沉浸与功能冲突：头部搜索区与视频内容相互影响。
• 制作成本高：特殊容器需要定制尺寸视频，成本高昂；而16:9通用尺寸视频直接使用效果不佳。
• 多屏适配难：对于折叠屏和Pad（尤其是横屏），16:9视频强行放大会裁切内容，缩小则浪费屏幕空间且两侧留白效果差。

我们的解决方案先看效果：

视频得以真正沉浸到各种尺寸的屏幕上，效果出色，同时保证了下文内容的曝光（甚至比旧版更多），实现了效率与体验的兼得。

设计思路拆解

一、关于“沉浸感”的定义与实现
宏观的沉浸体验涉及场景、声音、触感等多方面。在界面设计范畴内，我们追求的狭义沉浸感是：让用户聚焦于核心内容模块，减少页面其他信息的干扰。
对于“每日一荐”模块，我们的目标是模拟出巨幕般的视频观看效果，同时利用 “视觉虚位”效应，将搜索栏、工具栏等其他功能模块自然地融合进来，确保它们可见、易用，但不突兀。
核心原则是：用户观看视频时，能专注内容，不被工具栏干扰；当视线移开视频后，又能快速识别并操作这些功能。

基于此，我们与研发同学预研了两套方案来实现沉浸式画面在Y轴的空间拓展：

• 方案A：实时吸色技术：在静态吸色基础上实现动态化，根据视频内容实时延展顶部颜色。
• 方案B：头部动态虚化：基于动态毛玻璃（高斯模糊）效果实现。

实时吸色存在一定的延迟问题，而毛玻璃方案无延迟，且顶部有少量画面内容露出，整体视觉效果更通透。经过大量Demo尝试，我们最终敲定了 头部动态虚化方案。至此，视频在X轴和Y轴都能自由拓展。

二、通用素材与多屏适配
视频的通用尺寸是16:9。我们的方案允许CP仅提供通用素材，由服务端对通用视频进行统一处理（顶部虚化拓展），即可适配各种异形容器，大幅降低了合作方的视频制作成本。

多屏适配细节：我们保证后台只需处理一个视频，就能同时适配普通机型和折叠屏。
具体流程如下：

1. 原始16:9的视频A，通过顶部虚化拓展Y轴高度，得到处理后的视频B。
2. 将视频B直接适配到折叠屏上。
3. 将视频B等比缩小后，即可直接适配普通手机。
   Pad的适配逻辑类似，主要是在X轴上进行拓展。

Part 3：瀑布流卡片——信息结构化与视觉降噪

在产品层面，希望通过在瀑布流卡片中增加信息量来提升游戏的有效激活率。对应到设计表现层面，我们主要从两点着手：

1. 优化单张卡片内信息的组织关系，使其呈现逻辑性。
2. 对卡片内的信息内容进行归类，在保证组合简洁性的同时，展现信息类型的差异性。
   最终目的是使页面兼顾逻辑与美观，提升用户的浏览和决策体验。

1. 卡片基础结构
我们利用 “图片优势效应”（图片比文字更易被注意和记忆），延续了1.0卡片“上图下文”的基础布局。并结合 “古腾堡原理”（用户视线通常从左上方开始，到右下方结束），将“安装”按钮作为信息的视觉终点。这保证了在不干扰主体内容的前提下，存在一个固化的操作区域，让用户能轻松完成下载操作。
由此，我们确定了基础的卡片框架。

注1: 图片优势效应是指图片和图像比词语更容易被注意与记住的现象。
注2: 古腾堡原理是指用户的浏览习惯于从左上角开始，到右下角结束，设计可以利用浏览习惯通过元素间的排列位置引导用户的浏览顺序。

接着，以对比、对齐、亲密、重复四大设计原则为手段，调整其余信息的组织方式。我们希望卡片结构能满足：

• 视觉体验无负担，信息逻辑清晰。
• 能满足不同类型的信息配置要求，最大限度展现信息内容。
• 具有一定的配置灵活度，使卡片具备延展能力。
  基于这些要求，我们确定了此次改版的基础卡片样式。

2. 信息层级与视觉设计
对比1.0卡片，2.0基础卡片看似只增加了一行信息，但这一位置会承载7种类型且样式差异较大的信息。当进一步扩展卡片时，信息的数量和类型就更多了。
如果这些信息都沿用原来分散触点下的复杂、突出样式，当它们凝聚在一张张卡片中并组成新页面时，会导致画面噪音过大，反而降低用户的信息获取效率。

我们重新审视卡片信息：图标、游戏名、玩法标签等属于 基础信息，帮助用户了解游戏概况。其余如推荐语、热度、活动等用于辅助决策、吸引下载的信息，我们称之为 魅力信息。魅力信息在视觉上的重要性和吸引度需要高于基础信息。

基于此结论，我们与产品同学共同讨论，将全部信息明确划分为四个层级：

• 第一层级：贯穿全局的游戏重点节点信息（如“新版本”）。
• 第二层级：具有平台属性的、可稳定用户心智的重要标签（如“每日一荐”）。
• 第三层级：让用户探索更多场景的可互动行为信息（如“专题合集”）。
• 第四层级：其他帮助用户决策的相关信息（如同好、历史行为等）。

从视觉语言出发，我们通过 “由面及线、由彩色到黑白” 的映射方式来体现层级关系，做到“信息不同，但视觉语意统一”。
经过设计处理，不同层级的黑白灰对比度有了明显差异，但同一层级内的视觉感知趋于一致。同时，我们在圆角、图文结构等细节上保持了统一。对于平台特色的各类信息，则增加了专属的识别元素，以保持同级信息间的差异性。

对比优化前后的卡片，可以明显感受到，经过结构化设计和视觉降噪处理的卡片，极大地提升了信息的阅读性与页面的整体浏览体验。

总结

以上就是vivo游戏中心首页改版2.0的核心设计思路。本次改版围绕“特色化”展开，通过容器重塑、内容沉浸式呈现及瀑布流信息结构化三大策略，在提升分发效率的同时，强化了产品的游戏感和吸引力。设计始终服务于用户体验与业务目标，每一次调整都基于数据反馈和用户洞察。我们将继续在游戏化与体验设计的道路上深耕探索，也欢迎各位同行在云栈社区交流分享。