服务热线:400-889-1636
在线咨询: 
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
首页 求创资讯 H5动画实战复盘!QQ 20周年H5刷屏幕后的设计故事
求创动态行业资讯网站建设网页设计微网站手机网站H5动画系统开发APP开发交互设计微信小程序网站维护

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

  • 来源:来自于优设
    作者:腾讯ISUX
    转载时间:2019/6/11 16:38:31


项目概述

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




 QQ 20年来的一路变迁



项目流程

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




H5的项目流程图



项目难点

1. 异地合作

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





五款3D spaceQQ最终效果



2. 3D spaceQQ视觉还原

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




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



3. 视觉工作的同步进行

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

设计理念

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





概念设计

1. H5整体视觉风格

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

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




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




△ QQ原始对话框

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




△ 重绘对话框

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




△ 经典头像的重绘


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



动画设计

1. 视觉动态化方案

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

2. 动画制作

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

  • 全部元素可循环
  • 尽可能少的帧数
  • 可重复使用的素材



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

3. 导出与同步

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



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




本文内容为转载,如原作者有异议,请联系本站撤除。
  • TOP

  • 关于我们

    上海求创科技有限公司成立于2001年,是一家专注于为客户提供高端网站策划、网站建设、网页设计、品牌网络营销以及相关的基于互联网应用服务的专业公司。

    更多

    全国客户服务热线

    400-889-1636

    网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-微官网 网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-手机网
    友情链接: 域名超市 | 苏州网站优化 | 营销型网站建设 | 企业网站建设 | 网页设计 | 网站建设 | 网站优化 | 网站设计 | IPv6 升级 | 微信开发 | H5开发 | 系统开发 | 网站维护 | 海外社会化媒体推广 | 上海网站设计 |
    热线电话:400- 889-1636 业务部:sales@dn.cn 售后服务:service@dn.cn 投诉邮箱:info@dn.cn
    地址:上海市松江区谷阳北路2399弄 御上海37号602室 邮政编码:201600
    版权所有©上海求创科技有限公司 沪ICP备13005298号-24  网站地图 沪公网安备 31010602003962号