专栏首页腾讯社交用户体验设计来自星星的花朵 - 腾讯ISUX

来自星星的花朵 - 腾讯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),作者:tdstone

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 打造高大上的Canvas粒子动画

    腾讯ISUX
  • 你离高效制作动画只差一篇文章的距离

    腾讯ISUX
  • 相册的逆袭:Qzone5.5动画诞生记 - 腾讯ISUX

    腾讯ISUX
  • 8小时12科32道题目,我们给Siri、Alexa、Google Assistant和Cortana安排了一场AI小高考……

    大数据文摘
  • python的Tqdm模块

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    于小勇
  • Android开发笔记(十八)书籍翻页动画PageAnimation

    前面几节的动画都算简单,本文就介绍一个复杂点的动画——书籍翻页动画。Android有自带的翻页动画ViewPager,不过V...

    用户4464237
  • 【AI每日播报】周志华最新论文、Redis之父9条忠告、百度又搞了个大新闻

    用户1737318
  • 官宣 | 沃趣科技与知数堂达成战略合作伙伴关系

    近日,杭州沃趣科技股份有限公司(简称“沃趣科技”)与福州知数天下信息技术有限公司(简称“知数堂”)达成战略合作伙伴关系。

    沃趣科技
  • 使用DCHQ自动部署和管理Docker Cloud /虚拟Java微服务

    本文演示了一个在云或虚拟平台上,用于自动化部署和管理Docker Java微服务应用程序的解决方案。我们通过扩展现有项目Chris Richardson的示例—...

    轻吻晴雯
  • 应用架构之择

    有什么样架构,就有什么样建筑! ? ? 前者的架构用来盖厂房,后者的架构是建摩天大厦 特不正经就今天和大家讨论软件应用的大厦如何构建? I、单体架构 or ...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券