QQ20周年 | 玩转像素复古 | 附设计思考过程

即将开课 目前接受插班学习 速抢

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。

人物像素绘制流程一般就四步骤：

1.前期需要根据各不同的头像进行思考与策划，结合现代服饰等元素突出人物性格。

2.挑选一张头像，使用PS铅笔工具（此工具比较接近像素质感）根据头像绘制全身草图。

3.根据草图开始点像素边。

4.填色块，加光影，通过光影处理的不同表现出不同的材质。

以下是使用像素做出顺滑的弧度的基础规律：一般都是像素数量递增递减就能得到很好的处理。

若遇见非典型的弧度曲线，可能以上的处理方式无法满足你，你需要试试以下的方式去处理，方法也很简单，在递增递减的规律基础上加多一条公式：221212.....212122，基本上只要按这样的方式去处理像素曲线，你会轻松很多。

你们曾经用过的QQ经典头像，竟然动起来了！

被戏精附体的经典头像怕是要玩翻宇宙昂！

先来个视频感受一下

用上这个宝藏表情包，你就是群聊最A最潮最能聊的仔，赶紧geeeeeeeeeet起来！！！

经典的头像配上魔性的动作，发出来的一刻，备感牛（sha）逼（diao）

- 讨厌 -

君子动口不动手，唾沫星子来助攻

- 厉害 -

厉害了老铁，给你双击666！

- 嗨起来 -

睡神马睡，起来嗨啊！

- 哈哈 -

小三毛戴上了墨镜，就素那么开熏

- 安静 -

请大家安静一下，我要开始耍帅了

- 嗨 -

嗨，帅哥加个扣扣吗？

- 好的 -

完全ok，no趴笨

- 么么哒 -

烈焰红唇你抵挡得住吗？

- 可爱 -

啾咪~你的小可爱已上线哦

- 调皮 -

我的热情就像我喷的火~

- 崩溃 -

鸭的世界，连崩溃都那么……

- 惊呆 -

吓得我黑眼圈都掉了

- 生气 -

老虎不发威别当我是病猫

- 无语 -

没啥好说，一串鱼泡泡送给你

- 开心 -

普通的disco兔子普通地摇

- 再见 -

05结语

致敬经典

“一切过往的东西都会是一个新的开始”，复古是一场与时空美丽的邂逅，跨越时间，依旧经典。

用复古致敬经典，在经典中绽放新意，与我们一起期待未来20年华丽的变化。