BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

InfoQ播客:Courtney Hemphill谈VR、增强现实与UX动画的重要性

| 作者 Barry Burd 关注 0 他的粉丝 ,译者 NER 关注 0 他的粉丝 发布于 2016年7月20日. 估计阅读时间: 8 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

在软件中,变换和转译是动画的力量所在,而从根本上说,所有这些动作都是关于速度、加速和插值的。本周播客是Barry Bird对话Courtney Hemphill,而Courtney Hemphill则是Carbon Five的合伙人和技术带头人。Hemphill拥有十多年软件开发经验,曾为创业公司和大型企业做过全栈开发。她在Qcon纽约做过题为“动画中的算法”的演讲。

关键要点

  • 我们正朝着自然的用户界面发展,这是全线软件工程师们在开发程序时需要注意的。
  • 你们都明白了,在一个界面里,越来越多顶尖的公司正使用动画来帮人们找到各种东西在什么位置,而且这些公司也能够勾画出人们可能需要的东西在哪。
  • 在软件中,变换和转译是动画的力量所在,而从根本上说,所有这些动作都是关于速度、加速和插值的。
  • 如果你正努力吸引某些人到你的项目或平台上来,你会希望用足够多的动画来吸引他们,但不要太多,因为那会让他们感到迷惑。
  • 测试是有必要的:如果你不知道什么东西有问题,你就不知道怎么去修正它。

点击播客链接收听

摘要

为什么开发者们要在意动画

  • 1分05秒:我们在软件里与之互动的界面,已经比以往更具有活力了。
  • 1分30秒:我们正朝着自然的用户界面发展,这是全线软件工程师们在开发程序时需要注意到的。你并非只有个指针、一个鼠标和一个键盘,你能用你的手指和手掌去“碾碎”和“拉伸”各种东西。
  • 1分55秒:动画必须看起来很真实,而真实是以数学和物理学为基础的。
  • 2分15秒:你们在网站上看到的动画效果,一直都是重要的学习机会,学习这个程序做了些什么,使得用户不需要那么多指引说明。
  • 2分38秒:动画的作用,几乎就在于让人们去发现和探索一个界面,从而使人们能更容易地跟这个界面互动,并且被它吸引。

动画模拟现实的重要性

  • 3分00秒:如果你戴上Oculus Rift体验一下“抖动画面”,然后马上就觉得有点恶心,那就是极端版本的真实动画体验了。
  • 3分31秒:如果一台计算机缓慢地运行着,你都看到它的帧数在下降了,你就会发觉有什么底层的东西不对劲,然后你马上就会不信任它了。
  • 3分42秒:你离一个顺畅平稳的东西越远,就会越不信任一个平台,也不信任平台背后的数据。

自然的质感 vs 连环画般的质感

  • 4分28秒:人们还在用数字设备工作,所以很难描述什么拥有“触感元素”的东西,然而,我们都可以接受用2D屏幕动画描绘现实世界。
  • 5分10秒:你们都注意到了,在一个界面里,越来越多顶尖的公司正使用动画来帮人们找到各种东西在什么位置,而且这些公司也能够勾画出人们可能需要的东西在哪。
  • 6分25秒:从根本上来说,人们觉得他们使用的都是数字设备,而这些数字设备则是2D数字世界的代表。
  • 6分50秒:你现在看到的一切都已经是被提升了很多后的结果,而且你们看到的就是动画的概念和它在一个界面中的运动。

用动画实现有效的导览

  • 7分35秒:Snapchat是现在最受欢迎的应用之一,如果你想在它里面找什么导航规则,那肯定会失败。它就是很好用,而且它还很好玩。
  • 8分10秒:你在Snapchat上的每一个动作,都有一个典型的动画反馈,这个反馈就来自那个预设了更多一点儿信息的程序。
  • 8分24秒:有些规则被人们奉为圭臬,但有些人则完全抛弃了这些规则,而且抛弃得特别成功。

“做动画”中的数学

  • 8分53秒:在软件中,变换和转译是动画的力量所在,而从根本上说,所有这些动作都是关于速度、加速和插值的。你把什么放在插值函数的顶层,才是事情最有趣的地方。
  • 9分26秒:动画又复杂又快速,但是对于只需要了解它基本点的人来说,它只是围绕着加速、速度和百分比的变化而已。
  • 10分04秒:我们并非生活在线性世界里,我们生活在一个充满了扭转、偏离和摩擦力,还有各种奇怪的对运动产生作用的物理定律构成的世界中。你不能只遵从线性运动,你得把重力的影响和牛顿物理学全都考虑进动画中。

在动画方面变得熟稔

  • 13分13秒:当你开始学动画,就会开始感到万物都有自己的框架,万物都有魔力。如果你想想Ruby on Rails,就会发现Rails为它表面下的东西增添了很多魔力。物理引擎也就是很有效率地做了同样的事吧。
  • 13分47秒:如果你从最核心的组成部分开始了解,然后再把上层的细微差别一层层理清楚,这时候你再开始上手Unity Engine和Unreal Engine,就会拥有更多操纵它的力量,会开始理解如何在那些物理引擎和框架的范围内达到更好的效果,因为此时,你理解了那个核心的东西。
  • 14分28秒:你在把玩的过程中就能在动画方面变得熟练起来。它的架构很注意数学方面的合理性,但如果你搞懂了基础知识,比如整个架构是建立在什么基础之上的,你就会受益很多。

用动画实现复杂想法时,常见的一些错误

  • 17分15秒:同时做了太多事。在一个界面内,人们很难坚持追踪超过4件移动的物品。
  • 17分35秒:如果你尝试让某人对你的程序或者平台感兴趣,你会希望有足够多的动画效果来吸引他们,但不要太多,因为那会让他们感到迷惑。
  • 18分22秒:你可以往界面里加一些东西,设计它们,建立它们,但你必须把它们放在终端用户的面前。你可能专门测量过这些东西,看它们是不是在不同的设备上都表现良好,还做过了用户测试。但你必须让这个程序的目标用户参与其中。他们才是唯一有权告诉你“东西太多,我都迷糊了”的人。
  • 20分15秒:在动画的框架中把数据描绘出来,这是件很难的事。你可以用某种方式展示物品的运动,但它可能会让人感到迷惑,超出了他们坐下来观看静态图表,并有机会自己慢慢消化的能力。

最好的做法

  • 25分28秒:经常测试。确保帧数保持在60帧/秒或者更快,以防止卡顿。
  • 25分41秒:如果我们说的是基于浏览器的动画,那就要考虑让GPU而不是CPU承受数据量了。
  • 26分21秒:确保你要分析你的数据结构、无用单元收集和帧/秒等等。
  • 28分12秒:你必须衡量需要多少动画效果,衡量你期待它们在你的终端用户那里表现有多么出众。

提到的公司

提到的产品

更多关于播客的信息

你可以通过RSS订阅我们的播客,或者通过SoundCloudiTunes收听。

查看英文原文:The InfoQ Podcast: Courtney Hemphill on VR, Augmented Reality, and the Importance of Animation in UX


感谢张龙对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT