QQ20周年 | 玩转像素复古

Original 美图腾讯ISUX

ISUX-头像-白底-引导关注.jpg

腾讯ISUX

isux.tencent.com

社交用户体验设计

01概述

提炼经典

QQ陪伴我们已经走过了20年，随着时代的变化，有哪些是能令我们至今都记忆深刻的呢？

不同时间的QQ推出不同的头像给用户使用。然而这么多年过去，QQ最开始推出的经典系统头像一直让大家记忆犹新。伴随着QQ头像出现的，不仅仅是一个用户，更是他带给用户的热烈心情，他印刻了初识互联网的我们心动瞬间。“轻舞飞扬”，“缘分天空”，“追风少年” ，头像闪动轻轻问候“在吗？”瞬间感觉回到了当初的时光；当年这些或许不够“精致”的QQ头像，以极高的辨识度，承包了互联网人的青春记忆，给我们留下了荷尔蒙气息。经典之所以成为经典，是因为经过时间的沉淀，依然能引发大众的喜爱。我们怀念的不只是一个简单的头像，更是附着其上的自己。

QQ20周年之际，我们整合了105个早期经典系统头像，在保持经典造型的同时，进行了设计上的像素复古风重塑。

02风格选定

复古与时尚的最佳平衡

还原经典，不仅是一个简单的复制，需要在经典的基础上加以提炼，重塑，进而产生新的视觉，将“复古”赋予新的意义；在复古和时尚中做一个完美的平衡，像素似乎是完美的选择，但对于选择像素风格来重塑105个经典头像，确实是需要很大的勇气，除了像素风格更耗费精力之外，不能像矢量图形一样可以随意扩展也是最大的痛处，面对后续各个规范涉及到的拉伸和缩放，必须要找到一个完美的解决方案。

像素表情等比缩放的方法：

对于不同尺寸的头像、主题以及H5，需要设定一个像素点大小的规范，设计尝试了不同大小的头像效果，5px既有细节也能保证在移动端小屏幕上的像素感；

以下是8px和5px的尝试：

5px在1080px的尺寸上呈现出最理想的效果，既保留了像素质感的同时塑造出光影较为细致的图形。

03视觉呈现

优化及重塑

我们在进行设计的前期，找到了“最早期版本”和“复刻版”的头像，经分析我们决定在二者之间进行视觉平衡，在保持经典造型的同时，进行了设计上的像素复古风重塑。

在设计优化细节上，我们统一头像光源，将光源设置为顶光和左右两侧光，同时调整了光影和色彩明度，使头像造型视觉更加饱满；每一款头像主色调控制在同色系对三个颜色以内；统一采用像素描边，描边颜色规定为黑色或同系列色系的深色；同时根据头像性格，给每一款头像搭配专属的背景颜色，使其更加独特靓丽。

以上的视觉调整和大胆的尝试，结合“复古更好玩”的主题，让头像全新展现在用户面前。

是不是觉得按照5px像素，然后拿着19年的血肉模糊经典头像，头像就可以愉快地点起了吗？不！光鲜的屏幕前，背后都是血与泪的黑历史，每个头像都经历过很多个版本后才能达到满意的效果。

背景色提取和搭配

头像动态化

相信每一位用户应该都想知道他曾经使用过或一直在用的头像动起来会是什么样。本次头像复古重塑，我们还将所有105个头像动了起来。

将复古进行到底，我们将那曾经出现在1999年电脑屏幕上的QQ第一代版本的界面，搬到现在的手机当中。

通过提炼色彩，概括图形界面，加上三只精灵鹅，让复古不古板，可爱又好玩。

（喜欢这套主题皮肤的同学可前往QQ个性装扮下载哦）

04深入延展

赋予故事和内容

每个系统头像都有名字，头像的后面是一群有着特定性格喜好的人群。不同类型的人喜欢不一样的头像，同一个人在不同阶段也会换不一样的头像。据说，喜欢搞怪头像的人比较开朗活泼，天真快乐；喜欢动物头像的人比较有爱心，懂得关心人;喜欢人物头像的人自我意识比较强，头像某种程度上也是一种对自我形象的认同感。

20年来QQ陪伴大家成长，那个当年使用QQ经典头像的用户，也经历了人生的酸甜苦辣，在时光中历练成长，其中不乏一些有趣好玩的灵魂，他们或是勇敢，或是善良，或是充满力量。设计师针对部分的头像进行了头像的延伸设计，并为他们首次把经典头像结合现代潮流服装让复古更好玩更潮，WE ALL HAVE UNIQUE SOUL。