来自星星的花朵 - 腾讯ISUX

“Qzone粉丝吧”的动效设计共分为两个版本(粉丝吧现已改版为话题圈),最初版是给明星“送星星”,升级版是给明星“送花”。麻雀虽小但五脏俱全,这两个版本的动效设计,虽然看似简单,其实在背后有着相对复杂、交相呼应的动画叠加效果。

起源:都教授的星星

想让都教授收到你的问候吗?快来Qzone粉丝吧送星星吧! 我不是动画特效师怎么办?没关系!Particleillusion来助你一臂之力! 为了将“互动+视觉”效果做到极致,我们将动效分为以下几部分来制作:能量环、星光轨迹、粒子爆炸、头像光晕、分值动画等。

1、粒子大爆炸

在Particleillusion中,为你提供了近百种特效预设,只需要轻轻点击预设好的原件,就可以让你瞬间变身特效大师!以上面所用到的粒子爆炸效果为例,在粒子库中选取FlashGordon原件,由于其细分效果非常之复杂,导致文件量很大、网络加载扛不住等问题,为了优化互动操作体验,我们仅保留了爆破的大效果,抛弃了不必要的细节,包括:降低了Flash的细分数值、粒子大小、运动范围、生命值、速度等参数,以保证流畅的动画体验效果。

2、星星的轨迹

是不是点一次还不过瘾,想连续点!没错,你每次点击都可以看到不同的星星轨迹!对于多次点击的情况,为了让星星轨迹动画不会那么死板,我们设置了几条运动轨迹,当用户点击的时候,运动轨迹也是随机出现的。同时,根据轨迹曲率的不同,也设置了不同的运动时长,在视觉效果也更加丰富。

3、明星头像反馈+能量波动画

为了增强粉丝在送星星时的沉浸感,在进入页面时,通过能量波循环动画来吸引用户注意力;当粉丝点击送星星之后,在明星头像上方覆盖一层闪耀的光环,让粉丝感到自己在跟明星“对话”, 同时,也增强了再次点击的欲望。

重磅升级版!从都教授星球飞来的花儿

在最初版本的基础上,我们对动效进行了重磅升级,去除了酷炫的爆破画面,取而代之的是更加优美的落英缤纷效果。 同时,在技术实现上也更为复杂,Particleillusion已经完全不能满足我们的需求了,这次我们需要专业特效师的必备神器After Effects,借助其中的Particular系统可以帮我们打造童话般柔美绚烂的效果。

1、让花瓣粒子飞起来

首先,在Particular中,通过设定Particle-Textured Polygon,可以让我们自定义发射器的图形样式,其次,在Texture中选择花瓣层,此时在预览视图中就可以看到花瓣粒子的匀速运动效果;然后,通过调节Particle特效中的Rate、Life、 RotateX、Y、Z来模拟花瓣散开的细节效果;最后,通过曲线动画来控制粒子的加速度,使花瓣散开效果更加自然。

2、更富沉浸感的动画氛围

在新版中,相比之前的星光粒子动画而言,我们打破了小框的拘束,将花瓣的运动范围扩展到整个屏幕,粉丝用户在送花的体验过程中,整体氛围更富有代入感,视觉效果也会更加饱满和震撼!

3、更加丰富的动效细节

正如我们在日常生活中所看到的那样,当往平静的水面上丢一个物体进去时,可以看到水面波纹快速散开的效果。同样的,在新版的动效设计中,我们也对波纹动效进行了细节的优化,为了增强互动的真实感,当花朵飘落到明星头像上时,其周围的波纹也有一个加速扩散的反馈,随后,波纹恢复到匀速循环的状态,动效的体验过程也更加自然。

小结

通过交互动画的形式,可以提升体验的层级感与趣味感,为用户提供更富有沉浸感的体验氛围。它还可以丰富产品的情感特征,让用户可以更加清晰、明确地感知自己的操作,用户与产品之间的交互过程也变得更加流畅。

还等什么?快来Qzone话题圈为自己喜欢的明星送花儿吧!

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。 注明出处格式:腾讯ISUX (http://isux.tencent.com/the-flowers-from-the-stars.html)

原文发布于微信公众号 - 腾讯ISUX(tencent_isux)

原文发表时间:2015-07-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

如何快速掌握正确的UI配色方案?6种技巧不容错过!

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 原文地址 用户体验设计涉及很多流程,需要足够的深思熟虑才能...

3388
来自专栏知晓程序

一直以为我很懂 PPT,直到看了~

除了小程序,大家一定会对生活里其他事物感兴趣。为此,知晓程序会邀请好朋友们,给大家带来小程序之外的文章推荐。

1224
来自专栏挖数

如何画好看的可视化图片

作为一个全栈的数据分析师,必须能够操办从数据爬取,到数据存储,到数据清洗,到数据分析,到数据可视化一条龙的服务。 很多人包括我自己会羡慕网上的一些可视化图片,怎...

3338
来自专栏我分享我快乐

PS绘制水晶球

前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

3897
来自专栏量子位

谷歌新推三款AI拍照App:短视频变漫画、自动抓拍、暴走风格剪辑

原作 Alex Kauffmann,谷歌研究中心的小哥哥 Root 编译自 Google Research Blog 量子位 出品 | 公众号 QbitAI 现...

2585
来自专栏九彩拼盘的叨叨叨

活动#1 秀出你的前端技能吧

我们会选出2位获奖者。1位是前端技能文章获得喜欢数最多的。另1位是前端管理小组选出写的最用心的。

781
来自专栏進无尽的文章

你关注过吗?动效设计的空间感

作者:Pasquale D’Silva 译者:MartinRGB在我们的大脑中,存在着多维的思考模型,能够帮助我们理解周围复杂的世界。我们还可以利用这种具有空间...

992
来自专栏腾讯大讲堂的专栏

动效设计原理:从卡通动画到UI动效

作者:袁骁,腾讯SNG ISUX 用户体验设计师。热衷于研究 Emotional Design和认知心理学 UI是基于静态页面来设计的,页面之间通过跳转切换。在...

2468
来自专栏理论坞

60个设计师必备APP(上)

尽管安卓手机上免费的app极具诱惑力,iPhone仍然是设计圈首选的智能手机。对设计师而言,好用的不仅是最好的iPad app,苹果的Marvel也是相当便利的...

532
来自专栏IT派

一个很皮的实践 Python自动生成表情包

作为一个数据分析师,应该信奉一句话----"一图胜千言"。不过这里要说的并不是数据可视化,而是一款全民向的产品形态----表情包!!!!

1090

扫码关注云+社区