用户体验设计：好的转场效果设计(2)

界面

如果你有一部iPad或者iPhone，拿起来点击进入设定。轻击菜单选项看一看屏幕如何从右至左以及从左至右地切换。滑动任一界面至底部看一看那个提示已到内容底部的轻微跳动。这些简单的转场效果小心谨慎地传达给用户他们在操作系统里处于何种位置。只有缓慢播放这些转场效果才能注意到位于状态和状态之间的这些微小细节。

iOS transition effect in slow motion from Lim Chee Aun on Vimeo.

尽管我们的视线不像是在电影中某一物理位置，操作系统仍通过转场效果给用户提供空间感。当用户轻击菜单按钮时，屏幕向右切换展示下一步操作，或者向左切换展示之前的操作。

Google在windows系统上的chrome浏览器展示了另外一种简单转场，具体可见如下视频。当打开一个新的tab页时，可以发现从左侧会出现一个简单动画效果。而当关闭tab页消失前又会有一个小动画。

Android和iPhone上都可以使用的应用Path，充满了各式各样状态之间的有趣转场效果。

当应用打开时，用户从启动画面通过一个快速翻页效果跳到实际内容页。点击主菜单将弹出几个菜单选项，关闭菜单后这些选项将弹回。这个细节告知用户选项是从哪里出来的，也许用户并不一定会意识到，但这仍是整个用户界面中的一个重要细节。

Path – Introducing Path 2 from Path on Vimeo.

应用scorekeeper有一个看起来非常简单的界面。大色块和直角边带来一种易用感——视觉设计也充分体现了这一点。但仔细看。该应用的转场效果颇具美感。当一名选手在游戏中得分，该应用会在列表中更新排名，用一种绝妙的过渡效果将选手从原始排位移动到现有排位。

（需翻墙）

产品设计

恐怕在这里又不得不用Apple举个例子了。如果你曾买过一台iPhone，肯定会注意到它的包装设计。不光滑薄片材质做成的紧凑包装盒的每一个细节都设计到位。提起盖子造成的真空效果表明你并不只是在打开密封，破坏盒子，盖子缓慢被抬起的过程是揭示了设备的闪亮登场。这个开盒的动作可谓是一个物理转场。

Mission Transition from Mark Cossey on Vimeo.

尽管不是一个很明显的转场，MacBook的电源灯在睡眠状态下徐徐呼吸。这个转场有意思在若隐若现的显示方式模仿了沉睡者的呼吸节奏。之所以被认作一种转场过渡是因为它从视觉上象征了一种状态，这种状态既不是开启也不是关闭，而是介于两者之间。

（需翻墙）

汽车

现代汽车充满了各种引导驾驶员在各种状态之间过渡的绝妙转场效果。比如说，车前灯在关闭车门时亮起，扣上保险带启动引擎后渐渐熄灭。这个微妙的光线让用户实现了身份上在一个转场之间从普通行人到驾驶员平滑转换。

自然

当我坐在椅子上打这篇文章时，我可以从左至右的转动头。通过这个动作，我的视野转换了。如果我想要看左边的东西，我转动头——通过这个转动过程可以抓住触及视线的一切事物——直到视线停留在注意力中心。请观看视频中人体是如何从一个状态转换成另一个状态的。

Stunt Poetry from Rishi Kaneria on Vimeo.

为什么转场如此重要？

我们作为设计师竭尽所能让内容更容易找到、容易阅读并且充满艺术美感。而随着科技进步、数据处理器越来越强大，人们用以阅读内容的设备和系统将向前更进一步，我们将开发更新方式来展现这些内容。就像被迅速接纳的触摸操作，手势正也变得越来越重要。正因如此，我们需要让用户在应用中拥有位置感，转场在此之中会变得尤为重要。

现在大多数的页面内容都被归类为“页”：点击或者轻击链接显示了藏在链接之后的页面。页与页之间的跳转非常少见，我们已经习惯于这种内容展现方式。但设计师其实可以引入有用且漂亮的转场效果到网页中——比如通过应用jQuery ScrollTo——但这些转场效果可能会由于如下理由有些简陋难看，比如过慢的网速，大量的处理请求以及由JavaScript决定的效果速度。

转场过渡的好案例

将转场动画充分融入到设计中有许多方法。接下来是一些建议：

* 避免在点击、触摸或者滑过操作中任何停顿。

硬件速度一直会是一个硬伤，但很高兴芯片、处理器以及内存每秒都变得更快，所以测试你的代码和加载时间以确保没有延迟。

* 在真实环境里测试。

没有比在真实环境里测试转场更好的了——特别是设计移动产品，因为移动中的人花更少的时间和注意力在导航上。在超市里或者火车上用原型进行测试，并观察在压力下转场效果表现如何。

* 留心未来。不要重新改造轮子。

近来，我们用点击、触摸、滑过以及对话等各种方式与应用交互。然而，手势将很有可能成为另一种操作内容的新方式，所以从现在起试着思考这个问题。如果人们将可以使用身体（而不是手指或鼠标）通过各种形式来控制屏幕，我们将不得不考虑时间、速度以及物理条件——也就是，手势移动内容的速度需匹配内容本身移动的速度。设想一下尽全力投掷一个网球但结果球只移动了几英尺的挫败感。如果转场的时间点设计的不够理想用户也将感受到同样的挫败感。总的来说，照搬操作系统的惯例总没错，因为与用户熟悉的转场样式大相径庭很容易导致困惑感和挫败感的产生。所以，不要在设计新转场效果上犹豫不决；维持标准样式即可。

总结

好的转场效果对于用户来说应该是几乎不可见的。转场帮助用户理解他们试图要看到的以及他们从哪里而来，这一切应该快速且流畅。延迟或停顿损害了整体用户体验并且暗示用户可能出错了。当UI播放仿佛患上运动病，早就习惯了的流畅页面切换突然静止了一到两秒，用户会以为遇到了错误。这是我们理应避免的转场效果。

本文编译自：@财布当月光西皮地上霜，原文地址。