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

项目概述

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」的公众号：