实战复盘！QQ 20周年H5刷屏幕后的设计故事

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

项目概述

QQ 20周年，是互联网产品长青的一个传说，就在 20 周年的时间节点，QQ 向用户提供一份关于他自己的、真诚热切的 QQ 数据总结。通过数字，汇集出每个人自己的 QQ 时光历程，从而牵引出每个人对于成长、青春、沟通、时代流动的感知与回忆，引发 2019 年一场集体的情感共鸣。

△ QQ 20年来的一路变迁

项目流程

项目历时两个月，从项目初期，视觉和产品密集沟通，了解需求，进行头脑风暴，输出多个视觉方案纵向对比，最后确定视觉风格，分配视觉工作（插画，动画，3D）。项目后期，包括开发还原，数据调配等众多环节，环环相扣，缺一不可，一路过关斩将，整个 H5 需要不同岗位的高度配合和各专业的高度默契。

△ H5的项目流程图

项目难点

1. 异地合作

本次 H5 联动了动效，3D，插画设计师的共同合作，由于支持 3D 的设计师在韩办公，所以大部分都是在线上全英沟通，包括前期的项目进度同步，还有后期的模型调整等环节都能及时反馈，快速反应，最后如期打磨出五款 spaceQQ。算是一次顺利的异地合作。

△ 五款3D spaceQQ最终效果

2. 3D spaceQQ视觉还原

3D 鹅从设计软件转化为 H5 展示过程中，存在模型文件过大、材质缺失等问题，直接影响用户体验。在开发的过程中同学通过模型减面、重新选择材质，还有模型拆分等解决方法，在视觉观感和性能中建立了平衡的杠杆，最终实现了 15 个 SPACE QQ 的视觉还原。

△ 五款3D spaceQQ最终视觉还原效果

3. 视觉工作的同步进行

由于项目时间比较紧迫，而且 H5 加入了 3D 模型，还有需要大量的动效，所以需要在同一时间线上，同步进行，视觉稿输出，动画制作和 3D 模型打磨。考验设计师的沟通和执行能力。与此同时，需要随时和开发同步动画 demo 以确保动画可实现。和产品密集沟通，及时根据文案调整画面。

设计理念

因为 QQ 是陪伴了大多数用户的一个产品，见证了整个互联网社交的演变过程，容易引起用户的情感共鸣。设计的初期，围绕「个人轨迹」的主题发散了不同方向的视觉概念，在引起客户共鸣感的复古元素和传递不断「探索」未来的概念间寻找平衡点。最后沿用了 20 周年的太空概念贴合「探索」的主题，结合有年代特征的代表性视觉符号来引起「个人轨迹」的这一概念的用户情感共鸣。另外，H5 运用了 3D 打造了 15 只太空鹅，打造「个人轨迹」的专属感，既联动用户温暖的回忆之余，也增添了一些小惊喜。

概念设计

1. H5整体视觉风格

QQ，是陪伴了大多数人成长的一个互联网产品，其本身带有很多高辨识度的视觉元素，例如对话框，提醒上线的音效等。因为 H5 本身是一个大数据总结，专属感非常强的一个产物，所以希望是唤醒用户一些封尘已久的记忆，就像打开时间胶囊般的期待和感动。同时也象征着 QQ 一直陪伴在身边，从而引起用户的共鸣。

设计方面，除了通过一些标志性的视觉元素唤醒用户的回忆之外，也加入 QQ 20周年的太空「探索」主题的元素，响应 20 周年的主题之余，也寓意 QQ 不断地对外探索，从多个维度来看世界，寻找有趣的内容。

对话框，是承载数据的视觉符号，也是贯穿整个 H5 的重要视觉符号之一。寓意着 QQ 一直致力于「沟通」，而且不同时代的 QQ 对话框都各有特点，也是见证 QQ 时代变迁的重要元素，所以提取了三个阶段代表性的对话框样式来承载数据，并且加入有时代特征的视觉元素（如bb机，像素化的小箭头等）作为辅助，增加 H5 的氛围感，也算是视觉上的「小彩蛋」。

△ QQ原始对话框

H5 加入一些趣味感的元素，如笑脸，爱心等元素，背景辅以流动的彩色不规则图案，来增加对话框的玩味。也寓意 QQ 20年来给用户带来源源不断的乐趣，留下了不可取代的时代印记。

△ 重绘对话框

H5 中也加入了很多好玩的元素，不同时代所用的移动设备，融合贴近太空「探索」主题的背景；利用带手套的手和不同的元素进行互动；增加重绘经典头像的互动动画，加入 QQ 空间的植物等怀旧元素，增加 H5 的可玩性和惊喜感。

△ 经典头像的重绘

△ 经典头像穿插在H5中的小彩蛋

△ 带手套的手和有时代标签的元素互动

动画设计

1. 视觉动态化方案

在动画制作前期会出一份详细的动态化分页策划，以及一份尽可能表达完整的动画 demo，能便于设计与开发能准确的估算出制作周期。在开发完成预研测试后，基于动画 demo 共同制定一个大致的动态化方案──对话框等大面积使用代码实现，其他装饰性小元素全部使用序列帧。在观众每滑一页即可触发当前页的动画，且能保证大体动画的流畅度。

2. 动画制作

为了尽可能减少 H5 的运算体积，又保证画面动态的流畅程度，导出的序列必须满足以下所有条件：

• 全部元素可循环
• 尽可能少的帧数
• 可重复使用的素材

△ 设计了4个不同的色块流动loop，方便开发安插在每页合适的位置

3. 导出与同步

在配合开发导出的阶段，为了能明确序列的标记，所有序列文件命名为 xx-in/xx-loop/xx-out。使用同步工具以实现 AE 动画序列导出和开发提取素材能同步进行，并保持实时更新和迭代。

△ 第6页动画导出序列

太空QQ形象设定

创建了四款全新的 spaceQQ，根据用户的 QQ 年龄而设计。根据用户的 QQ 年龄，分了四个款式的鹅：奢华，智能，闪亮和神秘四个概念，一个递进的尊贵程度，刺激用户分享欲。包括基础款的 QQ 在内，共创造了 5 个类型的 spaceQQ。每个设计都基于基本 spaceQQ 的形式，但是套装的颜色和细节根据各自的概念各有特色。

△ spaceQQ总览图

配色方案

用户可以根据自己的喜好更改这 5 款 spaceQQ 的装扮颜色。

关于运营

1. 专属感

整个 H5 始终紧扣 QQ 20周年的太空「探索」主题，整个 H5，除了用数据唤醒用户和 QQ 多年的点点滴滴之外，5 个 spaceQQ 概念设定，既能增加用户的新鲜感，又能刺激用户的分享欲，C4D 建立的 3D 形象丰富了整个 H5 的视觉层次，深化了 QQ 品牌的影响力，寓意鹅厂一直与时俱进，紧贴潮流。

2. 情绪调动

对于当下的运营活动来说，趣味性是引爆转发量的重要元素，H5 结合 QQ 用户创作的背景音乐和能够调动用户情感的设计语言来释放用户的情绪，比如惊喜感（用户结合 QQ 的标志性音效创作的背景音乐），荣誉感（不同 Q 龄获取相应的 spaceQQ）等，让用户产生持续的惊喜感，在怀旧和新鲜感中得到满足，提升用户活跃性。

总结

QQ 20周年 H5 设计，尝试结合了 3D，动画，插画等设计形态，为每一位用户打造专属的「个人轨迹」，通过数字，拼凑出和 QQ 的过往朝夕，引起用户共鸣。鹅厂不断创新探索的同时，也为用户温存属于用户自己的专属回忆，深化 QQ 的品牌价值。

福利

考虑到部分同学想更仔细地查看、保存或收藏高清大图的需求，我们设置了关键词，微信公众号后台以「spaceQQ+序号」的方式回复，例如「spaceQQ1」，即可逐一获取对应的高清头像和壁纸。

扫码领取专属「个人轨迹」：

欢迎关注「腾讯ISUX」的公众号：