浅谈应用动态体验设计(下) #36氪开放日#

编者按：本文作者杨迅(
@JasonSaxon)是SnackStudio的联合创始人和CEO，他在7月8日的
36氪开放日北京站上做了关于应用动态体验设计的主题演讲，现把演讲内容整理分享出来，希望大家能从中获得对应用动态设计更深一层的理解。此为下篇，分享了应用动态设计的六大手法，上篇可在
这里查看。在文章的最后，读者还可以找到杨迅精心准备的keynote（视频+下载）。

###动手设计一段漂亮的动态吧！

第一，用速度强调动态物体的前景与背景。
我们都听过绝对运动和相对运动，你拉着孩子的双手，原地旋转，你眼前的孩子相对你来说是没有运动的，而所看到的背景却在动。但是再换做别人来看这个孩子时，就变成背景不动，而孩子在动。这是因为在人眼在判断动态时，由于高速物体的清晰度较差，所以通常会以较慢的那个物体作为参照物。基于这个原理，我们就可以通过为前景和背景设置不同的速度来帮助用户更容易地把前景与背景区分出来。

我们来看看Windows Phone 的Panorama 是怎么做的。在下面这段视频中我们能看到，Panorama 背景图片的移动速度和前景文字的移动速度是不一样的，这与我们现实场景相一致：在相同的速度下，远处的物体看上去较慢，而近处的看上去较快。有了这个对比，我们就很容易分清哪个在远处（背景），哪个在近处（前景）。

视频1 | iOS设备在
此处观看

第二，使用视觉残像强调屏幕中的“主角”。
运动的先后顺序会产生视觉残像，而普通人用肉眼是无法清晰分辨这些稍纵即逝的残像的，但我们能感受到。举个例子，Windows Phone 在进入应用时，你所点击的图标和其它的图标所做的其实是同一个翻转动作，但你点击的那个总会比别的要慢上0.5秒，而残像就产生在这短短的0.5秒。换句话说，其他图标都先走了，它最后走，所以你的眼睛会多看它0.5秒，这关键的0.5秒就足以强调你是在与这个物体进行交互，从而证明这个物体的主角地位。

视频2 | iOS设备在
此处观看

第三，用夸张手法分割体验场景。
我们能看到win8在打开应用时，会大幅度的让图标翻转并且放大到全屏，这个动态可以说是整个win8系统中动作最夸张的了。为什么要这样做？因为打开一个应用相当于是从一个视觉场景更换到另一个场景，微软的设计师运用夸张的手法，人为的打断原本流畅的体验，就是想告诉用户：请收拾心情，准备迎接新的环境。这种手法与电影中的“切场”类似。以下视频展示的是用慢动作拆解的打开场景。

视频3 | iOS设备在
此处观看

第四，使用分阶段展示的办法强调动态目的。
重要事件发生时，特别是用户需要确认某项操作成功与否时，需要分段的、极其肯定的告诉用户。以Win8 发送邮件为例，下面这段动画被分成了两段：下沉，然后向左移动。下沉代表预备，左移动代表发出去。

视频4 | iOS设备在
此处观看

第五，使用加速与减速制造视觉缓冲。
在这个星球上，所有的物体运动都是有惯性的，就像刹车跟起步，刹车时车会慢慢停下来，起步时车会慢慢变快。在软件体验设计里面加入加速与减速这个人们体验了一辈子的物理自然规律，能让用户感觉自然。

视频5 | iOS设备在
此处观看

第六，使用动态隐喻用户行为，使之充满趣味。
为了能让句子更有意思，各种各样的修辞手法经常会被派上用场。用户体验也是一样，为了能让用户玩出产品的乐趣，用动态去隐喻一件事情就是一个有效的办法。下面还是以Win 8 邮件为例，上面的“发送邮件”往左去，下面的“删除邮件”则是往下走。

视频6 | iOS设备在
此处观看

在动态设计中，运动的方向是有讲究的：

以屏幕边框为参考，往左和往右通常代表物体会移动到某处，但它还是存在的，也一定会在另一个地方出现，出边框只是暂时的消失（和电影镜头语言同理）。邮件发送之所以向左运动，隐喻的就是你的邮件被发出去了，它一定会在另一个地方出现。

而从屏幕中心向上运动通常是代表积极意义，用一个词来比喻就是“升华”，从屏幕中心向下运动则代表消极意义，刚讲的删除邮件的案例就是如此，所以用向下运动是合理的。

最后还有一些需要在设计过程中注意的地方：

*避免任何点击触摸滑动的卡顿

*在你的移动设备中，移动着测试你的动画(在生活中测试)

*不要完全推翻操作系统惯例

*注意一些前瞻性的交互方式

*用flash和after effects 快速制作原型并测验

应读者要求，为大家呈上杨讯在主题演讲中所用的keynote。可用quicktime 交互播放的mov文件可在
这里下载(88M)。