用细腻、美丽的动画取悦用户

杰森·莱恩,2013年3月8日

苹果公司通过无间歇地专注于取悦用户,将自己从一家设备制造商转变为世界上最大的PC制造商、最有利可图的手机公司和最有价值的科技公司。例如,苹果产品以其自然流畅的切换和动画而著称。虽然这只是“取悦”中的一小部分,但它是应用程序用户体验成功的关键方面,必须从项目一开始就研究和计划。平滑无缝的用户界面可以真正影响质量的感知,并极大地增加用户对你的应用的快乐,即使这种快乐是潜意识中的。

以iOS的Facebook为例,从混合应用过渡到全原生iOS应用。正如其他地方所记录的那样,新的原生体验将应用程序的平均评分从1.5提高到4。新的体验显著改善,知名用户描述它不再受“卡顿或屏幕锁定”的困扰。然而,未被提及的是,应用程序中许多改进都来自细微、流畅的手势动画,如通过拉下底图来关闭照片(评论:对我来说,这个操作感觉如此自然,以至于我总是在Flickr上尝试下拉照片,却总是失望地发现这个功能的缺失)。这些动画,大多很微妙且从未列入功能清单,是iOS应用设计的无声英雄。

Static,我最新的iOS应用,是我第一次决定在早期实现自定义UI动画的应用。在此之前,我只使用过标准的UIKit过渡,所以我花费了很多时间学习不同的应用程序,并快速迭代代码样本,以确定哪些感觉自然,以及动画何时开始显得过于夸张。

我的第一次尝试是从使用Adobe Photoshop的Timeline和内置动画功能模拟我的动画开始的。经过几个小时的努力毫无结果后,我决定最好从头开始编程。我对Core Animation并不熟悉,而且我大部分的了解都来自于我在Stack Overflow上找到的代码片段,它们包括透明度转换、基本运动等。

为了尽可能快地提高速度,我剖析了AwesomeMenu,这是由Levey Zhu制作的Path 2.0操作菜单控件的精美克隆。AwesomeMenu的动画相当复杂,包括旋转、平移、弹跳和Z空间转换。我分离出部分内容,混合匹配,调整值,直到创造了Core Animation的Frankenstein怪物。然而,这次经历让我极大地受益,我对Core Animation有更多自信。

除了我对AwesomeMenu的解析之外,我还花了很多时间研究航运应用中高级动画的使用。作为一个对自定义动画新手,理解最优秀的应用是如何完成它们所做的事情对我来说是一个挑战。大多数UI动画都是由多个同时发生的效应组成的:一个元素在移动过程中是否会改变透明度并在路径中弹跳?它是从无中开始放大,还是从一个小的缩放版本开始放大?为了更好地理解正在发生的事情,我使用了Reflector将我要分析的应用AirPlay到我的Mac上,并对其进行了屏幕截图。之后,我会逐帧浏览动画。有些动画中发生的转换数量令人震惊。通过学习和实践,我变得越来越擅长分析动画,无需缓慢地浏览,但用新的应用重复这个练习仍然是一个很好的锻炼。

Sketches

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

随着Static的开发开始,我开始以与自定义UI元素相同的方式绘制动画草图(我喜欢我的草图本)。我的工作流程非常直接:我为控件每个状态绘制草图,并画箭头来指示移动。一旦我对“看起来和感觉起来”的效果满意,我就进入Xcode,使用Single View Application模板创建一个新应用,构建和改进动画,并在我对它的行为满意后将其移动到我的应用项目中。

普通用户可能永远不会有意意识到你投入在引人注目的动画上的时间,但事实上,这其实是一件好事!这意味着效果很自然。不自然的动画会像痛点一样明显。投入必要的时间来构建看起来自然、流畅的动画。使用Reflector等工具研究现有的应用。先在纸上规划你的动画,然后在单独的Xcode项目中实施。这的确比使用iOS的内置动画需要更多的时间投入,但这确实是值得花时间的。用户会对此感到非常高兴。

一些进一步研究的链接

一些值得研究的好应用