你和QQ一起度过多少天｜QQ 20周年H5刷屏幕后-资源之家

这次QQ 20周年引起的大规模的刷屏，也正是因为QQ对于很多人来说，是一个成长、青春、沟通、时代流动的感知与回忆。

一、项目概述 | Overview

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

QQ20年来的一路变迁：

二、项目流程 | Project Process

项目历时两个月，从项目初期，视觉和产品密集沟通，了解需求，进行头脑风暴，输出多个视觉方案纵向对比，最后确定视觉风格，分配视觉工作（插画，动画，3D）。

项目后期，包括开发还原，数据调配等众多环节，环环相扣，缺一不可以，一路过关斩将，整个H5需要不同岗位的高度配合和各专业的高度默契。

H5的项目流程图：

三、项目难点 | Problem

1. 异地合作

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

五款3D spaceQQ最终效果：

2. 3D spaceQQ视觉还原

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

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

3. 视觉工作的同步进行

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

四、设计理念 | The Theme

因为QQ是陪伴了大多数用户的一个产品，见证了整个互联网社交的演变过程，容易引起用户的情感共鸣。设计的初期，围绕“个人轨迹”的主题发散了不同方向的视觉概念，在引起客户共鸣感的复古元素和传递不断“探索”未来的概念间寻找平衡点。最后沿用了20周年的太空概念贴合“探索”的主题，结合有年代特征的代表性视觉符号来引起“个人轨迹”的这一概念的用户情感共鸣。

另外，H5运用了3D打造了15只太空鹅，打造“个人轨迹”的专属感，既联动用户温暖的回忆之余，也增添了一些小惊喜。

五、概念设计 | Concept & Design

H5整体视觉风格

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

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

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

QQ原始对话框：

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

重绘对话框：

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

经典头像的重绘：

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

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

六、动画设计 | Animation Design

1. 视觉动态化方案

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

2. 动画制作

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

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

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

3. 导出与同步

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

第6页动画导出序列：

七、太空QQ形象设定 | 5 Types Of SpaceQQ Design

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

spaceQQ总览图：