用微妙、美观的动画愉悦您的用户

Jayson Lane, 2013年3月8日

苹果公司通过不懈地致力于取悦用户,从一家地位边缘的电脑制造商转变成了世界上最大的个人电脑制造商、最赚钱的手机公司和最有价值的科技公司。例如,苹果产品的特点在于它们自然的流体转换和动画。虽然这只是“愉悦拼图”的一小部分,但它仍然是成功应用用户体验的关键,并且必须从项目的起点就进行研究与规划。有效使用流畅、无缝转换的用户界面真的可以影响对质量的感知,并大大提高用户对您的应用的满意度,即使这种满意度只是潜意识中的。

以iOS版的Facebook为例,以及它从混合应用到完整原生iOS应用的转变。正如别的地方所记录的[链接],新的原生体验将该应用的平均评分从可怜的1.5提升到了4。新的体验有了显著的改进,精通用户将它形容为不再有“滞后或屏幕锁定”的问题。但未提及的是,应用中的许多改进都来自于微妙、流畅的手势动画,如通过向下拉照片来取消照片显示(注:对我来说这感觉如此自然,以至于我总是试图在Flickr上拉动照片,却一次次地失望于该功能的缺失)。这些动画,虽然大多微妙且从未包含在功能列表中,却是iOS应用设计的无声英雄。

Static,我最新的iOS应用,是我第一个决定要实现自定义UI动画的应用。之前,我只使用过标准的UIKit转换,所以我花费了大量时间研究不同的应用,并快速迭代代码示例,以找出哪些感觉自然,并理解动画开始显得过于夸张的地方。

我的第一次尝试始于我在Adobe Photoshop中使用其时间轴和内置动画功能制作动画原型。在经过数小时的努力后毫无进展,我决定最好的办法是从编码开始。我对Core Animation不太熟悉,而且我对其的了解大多来自于Stack Overflow上的代码片段,这些片段包括不透明度转换、基本运动等。

为了尽可能快地掌握技能,我分解了AwesomeMenu,这是Path 2.0动作菜单控件的出色克隆版,由Levey Zhu编写。AwesomeMenu的动画相当复杂,由旋转、平移、弹跳和Z空间转换组成。我将部分内容分离出来,混合匹配,调整数值,直到我创建了Frankenstein的Core Animation怪物。然而,这次经历是非常值得的,我对此有了更深的了解。

除了我对AwesomeMenu的分析之外,我还花了很多时间研究移动应用中高级动画的使用。由于我是这个自定义动画领域的初学者,理解最优秀的应用程序是如何做到这一点的对我来说是一个挑战。大多数UI动画由几个同时效果组成:元素是在移动过程中改变不透明度并弹动进食,还是从无到有或从自身的小规模版本缩放?为了更好地理解发生了什么,我使用了Reflector将我正在分析的应用程序通过AirPlay传输到我的Mac上,然后截屏了它们。之后,我会逐帧滚动动画。令我惊奇的是,一些动画中发生的过渡数量。通过学习和实践,我变得越来越好,能够不分步骤地分析它们,但这对于研究新应用程序来说仍然是一项很好的练习。

Sketches

静态动画草图 (查看大图)

随着静态应用程序的开发开始,我开始像画自定义UI元素一样草图动画(我爱我的速写簿)。我的工作流程相当简单:我为控制每个状态画草图并画箭头指示移动。一旦我对它的“看起来和感觉”满意,我就会移到Xcode中,使用单视图应用程序模板创建一个新的应用程序,构建和精炼动画,然后在我对它的行为满意后将其移入我的应用程序项目中。

普通用户可能永远不会意识到你投入在引人入胜的动画上的时间,但这实际上可能是一件好事!这意味着效果很自然。不自然的、糟糕的动画就像一个明显的痛处。投入必要的时间来构建看起来自然、流畅的动画。使用像Reflector这样的工具研究现有应用程序。首先在纸上规划你的动画,然后在单独的Xcode项目中。这绝对比使用iOS的库存动画耗时更多,但这是花费时间得当。

一些进一步学习的链接

一些值得学习的优秀应用程序