如何合理的在移动应用中使用动效

译者语：本文是我在Smashing Magazine看到的一篇关于如何在移动应用设计中运用微动效的译文。初次翻译文章，很多词句用的可能不太妥当，在这里给大家作揖了！knock knock……

下面进入译文。

一个优秀的UX设计师可以轻松地解释每一个动作逻辑背后的设计概念，包括信息框架，页面内容的继承，每一个点击动作对于页面跳转的影响等。

不 久的将来，动效将被广泛的引入到原型的概念设计当中，然而随之带来的是设计方案的确定与分析变得越来越复杂。影响这些决定的原因当中，诸如“这样看起来很 炫”，“这样看酷”等等，将会让动效设计失去了它本来的目的。接下来，我们将试着站在用户体验的角度来定义动效设计，以及解释引入动效设计的目的。

什么是功能性的动效？

功能性的动效就是被我们引入到交互设计当中的微动效（motion），它通常是很细微的动效，来实现一些界面交互当中的一些功能。

不同于迪斯尼级别或者是视频游戏里的动画效果，功能性的动效更加的清爽、具有逻辑目的性。功能性动效需要在遵守设计规范的基础上帮助我们实现我们的交互方案。功能性动效已经是我们交互设计中的另一个有效地工具。

在交互设计中，如果一个功能性动效能够在遵守逻辑性目的的基础上实现了交互效果，它才可以被看做是一个有效的动效设计，否则即使它实现了交互效果，也不是有效的。在过去的项目积累当中，我总结了9条逻辑目的性，通过解释它们的特性，让我们更好地理解功能性动效。

引导性（Orientation）

有目的性的启发用户。此类动效往往出现在菜单中，在网页的内容框架中帮助吸引用户的注意力。使用此类动效的目的除了吸引用户的注意力之外，还有引导、启发用户理解界面布局刚刚所发生的改变，它们往往用来承接、过度界面的变化。

一个经典的例子就是触发隐藏内容的按钮，当用户点击这个按钮，隐藏的内容面板出现，当你关闭这个内容面板后，它缩回隐藏到按钮后方。当用户第一次操作的时 候，TA并不能够预测到会有这样的交互，当TA点击按钮后，隐藏的内容面板逐渐变大出现的动效引导了用户的注意力，并避免让用户误以为TA已经离开了当前 页面，或者误以为主页的内容忽然消失了（其实是被出现的内容遮挡住了）。关闭内容面板的动效帮助用户联想到小时的内容和按钮的关系，因此下次他们就会记得 相应的操作所带来的效果。

逻辑目的：避免突然的变化导致的茫然失措，引导用户联系动作前后的关系。

相同的位置，不同的动作（Same Location, New Action）

一条众所周知的可用性规则：设计和网页的内容应该具有连续性。一个具有连续性的网页是可以根据用户的经验、设计的风格来感知的，是可以学习的。因此，这条可用性规则应该被用在操作按钮的设计，以及其他的控件设计当中。

在某种场景中，我们被迫将一个操作按钮设计成可以根据场景的不同而具有不同功能的效果。我们经常在极其有限的设计场景中看到类似的案例。因此，用户需要学习/熟悉同一个操作按钮在不同的场景下代表的不同功能。

“保存”和“编辑”应该是最具代表性的例子了。但这只是一个简单地案例，因为他们代表着完全不同的动作，很少会让用户混淆误解。当两个操作无法清楚的区分对比时，用户就会容易困惑，这就会带来体验上的痛点。在这种情况下，功能性的动效可以解决这个问题。

逻辑目的：帮助操作按钮突出功能的变化。

放大（Zoom In）

这条原则与上文的引导性原则相似。在这类动效中，用户在列表中选择一条内容，然后点击放大（跳转）到内容细节的页面（页面跳转），同时又能够回到列表主页 中。这类动效经常出现在图片库、卡片或者商品的选择页面中。用户在其中选择一条内容，然后页面理解跳转到所选的内容主页面。这类页面交互的难点在于要让用 户了解页面跳转到了自己想要的页面。功能性动效在这里是必须的。

为了提高用户体验，以下几点需要注意：

1.动效的起点应该是列表的初始状态

2.动效中牵扯到的元素都应该有一个固定的视觉状态，例如有一个主色调、一个图标、一个加粗的标题或者一个缩略图

3.当用户选择了一个内容，在所跳转的内容主页中，动效中牵扯到的元素将会移动到显著、重要的位置。举个栗子，内容主页的颜色跟内容的主色调一致；内容中的图标被拉伸并且移动到页面的标题处；内容的名称变大并且出现在页面标题处。

4.操作按钮出现在内容主页中，比如“取消”，“关闭”，“返回”或者“X”

逻辑目的：关联缩略内容和主页内容。

视觉暗示（Visual Hint）

视觉暗示引导用户更好的理解怎样与产品的界面交互。视觉暗示经常被用在包含不规则元素或者固定导航的设计中。当用户打开一个新的页面时，一个随即被触发的单次播放动画很容易吸引用户注意到某个设计元素的功能特性，这就是视觉暗示的作用。

逻辑目的：暗示用户不规则元素的功能或隐藏的功能。

高光标注（Highlight）

高光标注帮助用户在复杂混乱的排版中注意到重点内容。设计师在设计过程中经常会尽力避免复杂混乱的排版布局，这样做的结果是页面往往会整齐的被分割成几块，并有规则的填充文本内容和视觉元素。这些被整齐分割的版块会使用户迷失在页面中，找不到重点。

一个避免混乱的方法是去除杂乱的内容。但这在实际操作中很难实现，现实的例子就是像新浪，或者淘宝这样的平台类网站/app中，主页中的任何一条内容都是很难去除的，这往往牵扯很多市场因素、业务因素等等。

微动效，在这种情况下将起到非常显著的作用。相比动效，无论是文本还是静态图都无法更加显著地吸引用户的视线。但需要注意的是，引入动效将会使原本已经混乱复杂的页面布局更加扑朔迷离，所以是否增加动效，增加多少动效需要对整个页面的复杂度进行权衡。

逻辑目的：吸引用户的注意力，在复杂的界面布局中突出重点。

模拟（Simulation）

有时在设计研究和用户访谈中我们发现，用户的某些需求只有在模拟现实情景中才会被满足，对于这种特殊的情况，我们需要设计定制的功能性动效。举个例子，足球 比赛的数据分析，标准化的图表、数字对比不会帮助用户对与比赛数据的理解。再举个栗子，通过地图展示不同时段的气候温度，用户可以很容易追踪到明天巴黎与 伦敦的天气情况。

逻辑目的：模拟现实场景可以帮助用户理解捕捉特定的信息。

视觉反馈（Visual Feedback）

视觉反馈在用户界面设计中非常重要。按钮，操作控件，以及其他交互元素都需要反映用户的操作，它们能够引导用户与页面元素的交互。

功能性动效需要设计的非常细致入微（微动效），而且需要在用户操作后具有反馈动作。点击按钮后的状态反馈在界面设计中是必须的，它将提示用户点击操作已完成，页面将会展示后续的反应。

逻辑目的：反映用户的操作。

系统状态提示（System Status）

好的交互意味着：用户需要在任何情境下都要懂得页面的内容，了解何时何地进行何种操作将实现何种功能。功能性动效能够对系统的状态（页面状态）进行实时的监 控，能够使用户在第一时间了解某个动作已经开始，持续中，以及何时完毕。在HTML网页中，第一个实现这种功能性动效的是GIF，并且在目前仍被用来展示 动作的状态。

高效的功能性动效通常会遵守以下规律：

1.清楚的反馈指示操作的开始状态

2.反馈给用户系统持续中的状态

3.评估动作的进度状态

4.清楚的反馈指示进度已完成状态

举个例子，“下拉刷新”动作，当用户下拉后，页面会出现不停旋转的圆圈来提示用户页面正在刷新，当刷新完毕后，圆圈消失，内容更新。试想如果没有圆圈旋转，用户可能会怀疑页面并没有刷新，这可能导致用户在此下拉页面。

逻辑目的：在一系列操作中展示不同的状态变化。

营销工具（Marketing Tool）

这类动效相较上文的动效来说具有更弱的逻辑性，但是却更加的活泼生动！

当我们需要指导用户怎样操作产品时，当我们向用户推荐某个功能点时，当我们向用户推销平台里的某个产品时，营销工具类的动效就能够帮助到我们。这类动效或许没有以用户为核心来设计，但它绝对能够完成营销的目的。

逻辑目的：支持产品品牌概念，帮助推销产品。

译文来自：简书

译者：薛斯塔

英文原文地址：http://www.smashingmagazine.com/2015/05/functional-ux-design-animations/