赞助商
立即赞助

实战复盘!QQ 20周年H5刷屏幕后的设计故事

UI设计3年前 (2021)更新 流光
2.7K 0 0

项目概述

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

实战复盘!QQ 20周年H5刷屏幕后的设计故事

△ QQ 20年来的一路变迁

项目流程

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

实战复盘!QQ 20周年H5刷屏幕后的设计故事

△ H5的项目流程图

项目难点

1. 异

 H5 效,3D,插画共,由支持 3D 韩,英沟,括项目,模节及反馈,速反应,磨款 spaceQQ。异。

实战复盘!QQ 20周年H5刷屏幕后的设计故事

△ 款3D spaceQQ终效

2. 3D spaceQQ视

3D 鹅从软件转 H5 展示程,存模件、质缺失问题,响户验。程模减、择质,模拆决法,视观立衡杠杆,终 15  SPACE QQ 视。

实战复盘!QQ 20周年H5刷屏幕后的设计故事

△ 款3D spaceQQ终视效

3. 视

由项目紧迫, H5  3D 模,需效,需,,视稿输,画 3D 模磨。考验沟执。此,需随画 demo 确画。密沟,及根据案画。

设计理念

 QQ 陪伴数户,见证互演变程,易引户共鸣。初,围绕「轨迹」题散视概念,引户共鸣复素传递断「探索」未概念寻衡。 20 空概念贴「探索」题,结征表视符引「轨迹」概念户共鸣。另,H5  3D  15 空鹅,「轨迹」属,既户温暖忆余,增添惊。

实战复盘!QQ 20周年H5刷屏幕后的设计故事

概念设计

1. H5整体视觉风格

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

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

实战复盘!QQ 20周年H5刷屏幕后的设计故事

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

实战复盘!QQ 20周年H5刷屏幕后的设计故事

△ QQ原始对话框

H5 趣素,脸,素,背辅流规则图案,增框玩。 QQ 20户断趣,留取印。

实战复盘!QQ 20周年H5刷屏幕后的设计故事

△ 绘框

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

实战复盘!QQ 20周年H5刷屏幕后的设计故事

△ 经典头像的重绘

实战复盘!QQ 20周年H5刷屏幕后的设计故事

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

实战复盘!QQ 20周年H5刷屏幕后的设计故事

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

动画设计

1. 视案

画详细页策划,及尽表画 demo,准确估。预研测,基画 demo 共致案──框积使码,素使序列帧。观众滑页即触页画,证画流畅。

2. 画

尽减 H5 积,证画流畅程,导序列必须条件:

  • 全部元素可循环
  • 尽帧数
  • 可重复使用的素材

实战复盘!QQ 20周年H5刷屏幕后的设计故事

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

3. 导出与同步

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

实战复盘!QQ 20周年H5刷屏幕后的设计故事

△ 第6页动画导出序列

实战复盘!QQ 20周年H5刷屏幕后的设计故事

实战复盘!QQ 20周年H5刷屏幕后的设计故事

太空QQ形象设定

实战复盘!QQ 20周年H5刷屏幕后的设计故事

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

实战复盘!QQ 20周年H5刷屏幕后的设计故事

实战复盘!QQ 20周年H5刷屏幕后的设计故事

△ spaceQQ览图

配色方案

户根据改 5 款 spaceQQ 扮颜。

实战复盘!QQ 20周年H5刷屏幕后的设计故事

关于运营

1. 专属感

整个 H5 始终紧扣 QQ 20周年的太空「探索」主题,整个 H5,除了用数据唤醒用户和 QQ 多年的点点滴滴之外,5 个 spaceQQ 概念设定,既能增加用户的新鲜感,又能刺激用户的分享欲,C4D 建立的 3D 形象丰富了整个 H5 的视觉层次,深化了 QQ 品牌的影响力,寓意鹅厂一直与时俱进,紧贴潮流。

2. 情绪调动

对于当下的运营活动来说,趣味性是引爆转发量的重要元素,H5 结合 QQ 用户创作的背景音乐和能够调动用户情感的设计语言来释放用户的情绪,比如惊喜感(用户结合 QQ 的标志性音效创作的背景音乐),荣誉感(不同 Q 龄获取相应的 spaceQQ)等,让用户产生持续的惊喜感,在怀旧和新鲜感中得到满足,提升用户活跃性。

总结

QQ 20周年 H5 设计,尝试结合了 3D,动画,插画等设计形态,为每一位用户打造专属的「个人轨迹」,通过数字,拼凑出和 QQ 的过往朝夕,引起用户共鸣。鹅厂不断创新探索的同时,也为用户温存属于用户自己的专属回忆,深化 QQ 的品牌价值。

福利

考虑到部分同学想更仔细地查看、保存或收藏高清大图的需求,我们设置了关键词,微信公众号后台以「spaceQQ+序号」的方式回复,例如「spaceQQ1」,即可逐一获取对应的高清头像和壁纸。

实战复盘!QQ 20周年H5刷屏幕后的设计故事

扫码领取专属「个人轨迹」:

实战复盘!QQ 20周年H5刷屏幕后的设计故事

欢迎关注「腾讯ISUX」的公众号:

实战复盘!QQ 20周年H5刷屏幕后的设计故事

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

最近回校园中进行分享时,常会被问到「到底用研在企业内要做些什么?」感觉用户研究员在企业内是个神秘的角色,因此我总结了...
用户研究
重新构想复古怀旧,赋予我们所喜爱的人物角色更多个性、温度、色彩和熟识度,以提升用户体验。 为了在QQ20周年掀起用户的怀...
QQ设计
动态图形设计在我们日常生活中无处不在,藉由项目来告诉大家我是如何有理有据的做动态图形设计,希望我的设计方法对你有所帮...
MG动效
前言 随着直播的发展,秀场直播出现了各种形式,在直播间里衍生出了越来越丰富多样的玩法,多人连麦直播则是近年来衍生出的另...
企鹅电竞
大家都知道,设计一定没有单纯的「感性的设计」与「理性的设计」。 多年以前,我在一本书中读到过这么一段对于绘画和设计异...
夜间模式
概述 QQ 20周年,是互联网产品长青的一个传说,也是家喻户晓企鹅IP形象的成长,同时也代表了鹅厂精神的坚韧与奋进。即便已经...
QQ设计
在《运营专题高效设计方法-上篇》中,我们一起探讨了项目分析的四个步骤,从项目目标到用户人群,进行分析洞察得出设计执行方...
QQ
编者按:一个完整的品牌设计流程是怎样的?本文用腾讯DOV 视频的实战案例,告诉你高手是如何做品牌设计的! 项目概述 2017年...
品牌设计