海德体育编者按：本文作者杨迅(@JasonSaxon)是SnackStudio的联合创始人和CEO，他在7月8日的36氪开放日北京站上做了关于应用动态体验设计的主题演讲，现把演讲内容整理分享出来，希望大家能从中获得对应用动态设计更深一层的理解。

　　作为设计师，我们正在竭尽所能，用更易阅读、外形更美观的应用，让用户更加方便地找到所需的内容。但是，一个问题在于海德体育，大量新的设备基本都取消了实体键盘的设计，取而代之的则是一个个的触摸屏，于是海德体育，用户的举手投足变得越发重要了。没了复杂的硬件按钮，我们究竟要如何在应用里给用户以位置感？我们必须使用新的方法来实现这个目标。动态设计成了重要的组成部分。

　　现在，我们几乎所有的交互内容(APP & WEB)都是以“页”的方式呈现，我们先来看看这些“页”都是如何进化的。

　　静态到静态是最早也是最常用的页面切换方式。注意，这里所说的静态不是指网页代码上的静态，而是指视觉上的静态。绝大部分的网页为了照顾加载时间和内容，都做成了视觉上的静态效果，尤其是各种门户网站，点击链接后，会直接跳转到下一个界面。

　　在这个APP为王的时代里，这种静→动→静的页面的形式也颇为常见，当然最有代表性的要数iOS系统了。让我们来看看第一个视频，这个是一个iOS上iTunes的界面，在我们不操作时，这个页是静止的，一旦进行操作，页面就会流动起来，而不是硬生生的切换；当我们停下操作，页面就会重新回归静止。我们再看第二个视频，同样的，从静止，到流动，再到静止。第三个视频是我们的APP点滴时光，同样的，静止→流动→静止。

　　以下视频展示的是电视行业中常见的纯流动页面的案例，这些页面最常出现在节目导视或者新闻播报中。

　　在软件领域，有两个比较有代表性的案例，一个是当红炸子鸡Path，另一个则是Windows 8。在Path中，因为页面上的影片是直接动着的，于是我们就看到了一个由流动的界面通过流动的切换进入到另一个流动的页面这样的呈现方式。在Windows 8里也是一样，Metro的流动，点击后的流动，再回到Metro的流动。一切都在动。

　　看完了这些进化过程，我相信很多朋友都会想知道，为什么我们在设计开发应用的时候要让它动起来，“动态”究竟在背后扮演了怎样的角色？

　　首先，动态已经成了一种设计元素，它已融入到了应用中，成为了表达应用的情绪和气质的更加细腻的方式。

　　上一个视频我们看到的是Windows Phone 7 的LiveTile，微软把WP7系统定位成给潮人、精英和商务人士使用的手机系统，这些人群都较为严谨，所以在动态处理上它呈现出灵动、柔滑，充满理性的感觉。相对的，iPhone的定位是纯消费级产品，更注重让消费者快乐愉悦地使用iOS，所以，它在动态处理上充满着幽默、俏皮，和微妙的喜剧色彩。

　　其次，APP设计已经从单纯的功能实现转变到了故事与场景的描述，恰当的动态转换更能突出这种描述的合理性。 我们最近设计的名叫[+]LomoCam的故事线是：拍摄→冲洗(美化)→邮寄，完整地还原了一个经典的分享过程。而我们为它所设计的动态，则为故事的描述提供了非常重要的指引，让用户觉得自然和谐，从而更加相信我们所描述的场景。

　　每一个陌生的APP都容易让用户感到未知和无助，而动态转换则可以让用户充满自信。因为人们可以通过这些动态转换所产生的物理惯性去预测接下来要发生的事情。这个道理就好像我们最近看的欧洲杯，一脚踢出去，你是一定会知道足球会顺着踢出去的方向飞行。就算踢飞了，你也不会认为球会往球员的脚后跟飞。我们做动态也一样，给用户一个预期，让用户能提前感知到自己的操作会带来什么结果。

　　我们常说用户体验用户体验，清晰地传达给用户发生了什么，增强与用户的交流，让用户感受到强烈的代入感，这就是用户体验！

　　动态能做的就是这件事情！整个应用的体验就像一段旅程，而动态就像这个旅程中的向导，你每点一下，她都会告诉你，你从哪儿来，要到哪儿去。

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

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

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

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

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

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

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

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

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

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