“1 6 2”公式：App动画及动态效果之基本原则.pdf

“1+6+2”公式 ：App动画及动态效果之基本原则 和WW DC相比 ，A lt WW DC也非常有趣——这是一个由苹果开发 自发形成的活动 ，一群产品开 发 、设计师、创业 在WW DC期间聚在一起观看直播视频 ，随后一些去到现场的开发 也会加 入进来。在接下去几天里 ，他们一起讨论新的开发趋势、针对苹果发布的新功能、新产品的应对策 略和给开发工作带来的变化等。 在A lt WW DC上 ，我有幸和Raiz labs的产品工程师Ben Jo hnso n聊了聊 ，他从动画及动态效果的角 度上给出了对iO S 7另一种的解读。 他告诉Pin West ：“苹果提供了很好的开发 工具 ，所以在iO S上开发程序和添加动画效果 ，要 比A ndriod上简单。因此你会发现 ，不少设计感和交互体验很棒的软件 ，最初是从iO S平台上火起 来的。但我认为 ，iO S 7发布后会有一些新的影响 ，你可以看到他们简化了很多东西——比如 ，半透 明的控制中心面板使得原先应用程序间切换的效果变得多余了。” 不过Ben Jo hnso n同时也提出 ，在iO S 7之后的A pp开发中 ，动画及动态效果还是有它的用武之地的 。“1个单元的欢迎动画+6个单元的向导动画+ 1-2个单元让人愉悦的细节性动画”是Ben Jo hnso n 在A lt WW DC上给出的应用程序内动画的基本公式。 1 ）一个单元的欢迎动画 （Welco min A nimat io n ） 欢迎动画是用来告知用户他正在打开的产品是什么样、可以实现什么效果的。有时这部分动画会增 加一些煽情的效果——比如当你的生活和这款产品结合后 ，结果会是怎样的。 而另一个重要作用则是增加趣味 ，保持用户的耐心。很多程序打开时的欢迎动画实际上是让用户不 要轻易退出或关闭程序 ，让他们知道这款程序是可以打开的 ，而不是死机了 ，从而给予程序加载的 时间 ，比如加载进度条 （Loadin Bar ）就是我们习以为常的一种欢迎动画。Jo hnso n强调说 ：“一 个好的欢迎动画在增加互动性体验 效果很大 ，它能提高用户的预期 ，使得人们更乐于探索程序。 ” （我们前几天写过的A ny.Do .Cal就类似这种。 ） 2 ）六个单元的告知性动画 （Inf o rmat ive A nimat io n ） 有些程序选择播放一段视频 ，而有些开发 采用幻灯片 ，不管哪一种方式 ，重要的是教会用户如何 使用你的程序。Ben Jo hnso n说 ：“了解使用方法的用户力量是最强大。” 但超过六个页面的使用指 导则会让用户觉得“嗯……你的程序看起来有些难用啊”。 而另一些告知性动画 ，则是为了让动作效果更加直观 ，暗示动作的结果。比如邮件软件中的删除 动作 ，邮件会向垃圾桶所在方向收卷起来。这一动作模拟现实中揉纸团和扔垃圾的动作 ，其实是在 告知用户——“你清楚地知道这些邮件会被怎么样的吧”。 好的告知性动画在让用户觉得有趣 ，增加使用产品的动力——不知有多少人用Passboo k后看到碎纸 效果会觉得十分痛快 ？像这种动作所产生的心理效果在GT D软件中会非常有效。 而且这种效果产生的用户心理也同样适用于购物类应用程序。用户会因为期待这种动画效果而增加 购买。Ben给出的例子是Z appos.co m的移动客户端软件 ，在这款程序中添加物品进购物车时 ，物品 会以动画效果掉入下方购物车 ，“这很有趣 ，像游戏一样 ，让我想再玩一次。” 3 ）一到两个让人愉悦的小细节 （Deli htf ul A nimat io n ） 不论你是否会遵循“1+6+2”公式 ，开发 需要知道的是 ，不管是页面到页面还是按钮和按钮之间 ， 用户都不会满足简单的从A点到B点的、直愣愣的体验。通常这些细节动画是为了让过渡和转换的过 程更加无缝和平滑 ，增加程序内设计的统一感。 比如Pat h中点击其他用户头像 ，用户信息卡片会从上方以重力加速方式掉落下来——如果放慢这个 过程 ，可以看到卡片有一个弹跳过程 ，当不需要访问对方页面选择后退时 ，卡片也是在弹跳后退出 界面的。这个轻微的弹跳和点击Pat h主页面左下角(+)按钮后菜单弹跳出来的体验是一致的。 另外细节性的动画效果有时也可以把用户的注意力吸引到你希望他关注的区域去。Pat h的主页(+)按 钮是一个例子 ，另一个例子是Jet set t er ，一款订酒店和度假屋的软件。当进入下一个页面时 ，左上 角的方向按钮会有动画的翻转效果。比起静态的变化 ，这个动画吸引了注意 ，重点提示你——“嘿 ， 这里有些什么不同了”——现在 ，这是一个回到主菜单的按钮