版权申明：本文出自“腾讯ISUX”原创，感谢“腾讯ISUX”的原创文章分享！
FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/
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的可玩性和惊喜感。
飞特游客
委托设计