观点:如何给移动应用设计动画效果

下一篇文章

关于虚拟现实的应用,迪士尼乐园是这么做的

编者按蒂姆·唐纳利(Tim Donnelly)是 Storehouse 联合创始人。

8 年前,第一代 iPhone 向全世界引入了一个让你真的可以触摸软件的概念——我们很容易就会忘记这一点。用户界面(UI)充斥着梯度、纹理和斜面,这些设计元素让人不禁想起现实世界中的物体,使得 UI 看上去可以触摸且似曾相识——我们将这种界面设计风格称为拟物化(skeuomorphism)。

时至今日,拟物化已经逐渐落伍, 扁平式设计 在 iOS、Android 和 Windows Phone 等平台上面很流行。新一代应用设计更注重界面如何以直观的方式工作、移动和发挥作用,而不再像以前那样高度侧重于外观——界面是扁平的、圆形的,还是有纹理,这些都无关紧要。

随着动画效果的作用越来越大,仔细考虑 UI 如何移动——从提升可用性的过渡到让用户喜欢上应用的每一个微小细节——就变得比以前任何时候都重要。

接近现实

动画必须求实,这是什么意思呢?现实世界中的东西都有重量,它们会弹起来,不会立即开始移动或停止移动。同样的原则应该也适用于动画设计。

例如,如果你正在使用 iPhone,用手指以某一方向拖动照片,然后松开,照片不应马上停止移动,而是应该以同样的速度沿着那个方向继续移动。如果它马上停了下来,给人感觉就不自然了。在进行动画设计时,重要的是尊重实物的行为。只有这样,动画效果才能给人感觉更自然,更符合用户的期望。

保持一致

如果某个 UI 元素以异乎寻常或令人吃惊的方式移动,可能让人感觉摸不着头脑。例如,如果你将图片从屏幕最下方滑动拖至屏幕上面,你应该还可以将它重新滑动拖回原位,将其隐藏起来。重要的是,动画要保持一致性,因为只有注重每一个小细节,用户才会放心使用。这样,用户便可以将智力完全放在独特的产品元素上。

人们当然知道物体在现实世界的移动方式,因此也希望应用的界面设计也遵循这一规律。

提供即时反馈

我们每个人都用过体验不佳的软件。例如,有的软件会突然崩溃;有的软件在我们与之互动时,会表现出奇怪和令人费解的行为;更为糟糕的是,有些软件完全忽视我们的存在。

这可能是一个显而易见的问题,却往往被忽视:当用户点击、滑动或是从事其他提供输入的操作时,用户很清楚这种操作会产生某种作用。简而言之:当用户按某个按钮时,很显然你的产品已经识别了这种触碰。

使用有意义的过渡功能

大多数移动产品都基于分层导航模式(navigation model)开发,所以用户经常要在内容中和内容之外进行导航。通过 iOS 设置进行操作就是一个典型例证:进入显示和亮度设置,你会来到屏幕右侧;回到上一步,你会来到屏幕左侧。这是显而易见且始终如一的事情,给人带来一种强烈的感觉,让人觉得用户就置身于产品之中。

对于人们来说,形成一种智力模式,记住在应用中的操作步骤,有时是很困难的一件事。当用户在不同的产品内容中进行操作时,肯定会用到过渡功能。你希望它给人感觉就像是用户真正处于 3D 空间中——知道自己当前身处何方,自己来自于哪里,以及如何回到以前状态。

保持连贯

无论你的产品是针对于 iOS 平台还是 Android 平台,这两大操作系统植入的一些动画效果都给人似曾相识的感觉。这些都是大多数应用所存在的动画和过渡,而用户每天会无数次看到这些应用。

当你给产品添加动画效果时,一定要注意别做无谓的重复工作。例如,iOS 中我们最熟悉的一个元素是,它采用物理手段来推动滚动内容的方法。用户每次在滚动浏览收件箱、对照片进行放大,或是在 iPhone 上面从事其他事情时,都会看到这种处理手段。

对于这些最常用的动画来说,切忌对事情改动太大。例如,有些应用创造了自己特有的滚动行为,用户几乎每次都能感受到这种不同之处。你希望用户能专注于产品具有的独特元素,而不是探究滚动列表何以让 UI 带来的感觉与之前预期不符的原因上。

克制

动画可以帮助人们了解应用的工作机制,吸引他们的注意力,同样,多余的动画也会让用户感到困惑,令其无法理解产品的工作机制。

运用常识。动画在 UI 设计中有何存在理由?还是因为你充满想象力?

这也适用于动画和过渡的速度——要让它们的长度保持在很短的时间内。不要让用户有时间去思考动画效果,去想“我想知道那个按钮去了哪里?”这样的问题。如果实在没办法,动画必须要保持很长时间,你一定要确保在动画放完之前,用户还有时间与产品互动。

轻松的心态

虽然大多数动画有助于人们了解应用的工作机制,不过以独特的方式介绍动画效果,有助于让你的应用真正给人一种很特别的感觉。每一个微小的细节都有助于赢得用户对你产品的信任。如果足够在意用户的感受,注意哪怕是最小的细节,这也会向用户传递一种信息,即你会抱着同样的谨慎态度开发剩余产品。

App Store 目前的应用数量已经超过 100 万款,但只有少数一些应用真正向前推动了动画在 UI 设计中的作用。只要小心处理动画效果在应用开发过程中的使用,你的确可以做到脱颖而出。

通过 iOS 中自带的工具和 API,上面提到的多数小窍门都可以实现,特别是在苹果增加了基于物理动画引擎的 UIKit Dynamics 功能以后。这是一个内置于 iOS 平台的强大功能,足以满足大多数想要在动画中使用弹簧和其他物理效果的应用的需要。当然,凡事都有例外。Facebook 就为其 Paper 应用开发了定制式动画框架, 而且现已开源

实际上,99%的应用都没有必要这样做。重要的是,我们应该记住,苹果和谷歌开发平台的方式适用于 99%的应用。如果你的应用有什么独特的需要,选择一个定制式解决方案,也是合情合理的事情。

题图来源:COMOMOLAS/SHUTTERSTOCK

翻译:皓岳

Designing Animation For Mobile

blog comments powered by Disqus