设计故事 | QQ 20周年H5刷屏幕后

——————————

DESIGN

01 项目概述 | Overview

——————————

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

QQ20年来的一路变迁

02 项目流程 | Project Process

——————————

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

H5的项目流程图

03 项目难点 | Problem

——————————

1.异地合作

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

五款3D spaceQQ最终效果

2. 3D spaceQQ视觉还原

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

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

3.视觉工作的同步进行

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

04 设计理念 | The Theme

——————————

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

05 概念设计 | Concept & Design

——————————

H5整体视觉风格

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

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

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

QQ原始对话框

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

重绘对话框

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

经典头像的重绘

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

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

06 动画设计 | Animation Design

——————————

1.视觉动态化方案

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

2.动画制作

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

a.全部元素可循环；b.尽可能少的帧数；c.可重复使用的素材

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

3.导出与同步

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

▾第6页动画导出序列

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

——————————

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

Four new types of spaceQQ were created to enable different spaceQQ design can be set according to user's QQ subscription period. Four concepts such as luxury, smart, shining and mysterious were made for the new designs based on the characteristics of the users. Including basic spaceman QQ, five spaceQQs were created in total . Each design is based on the form of the basic spaceQQ, but the colors and details of the spacesuits are different according to each concept.