用户体验设计中的功能动效

作者：Amit Daliot

出处：

http://www.smashingmagazine.com/2015/05/functional-ux-design-animations/

一个优秀的用户体验设计师可以很容易的解释设计概念中每个决策背后的逻辑。通常包括信息架构，页面内容的层级，流程和既定假设。

动效一旦应用在线框图概念中，那么再对设计做决定或解释它们就会变得困难。像诸如“这会很酷”“很潮”“令人激动”，会让设计开始失去说服力。在我们的设计考虑中，动效理应占更多的比重。我们应该去定义动效并阐述其目的——像我们阐述一个设计中的其他元素一样。

什么是功能性动效？

功能性动效是微妙的动效，是我们嵌入用户界面设计中的流程的一部分。

和迪斯尼动画或者游戏动画不同，我们这里讲的功能动效拥有一个清晰的、有逻辑性目的。这个目的是通过支持我们想要传递的解决方案，来为设计理念服务的。因此，功能动效是我们体验设计工具库中的又一工具。

如果一切完美，我们应该可以验证功能动效与清晰设定逻辑的目的。如果一个动效在我们的设计里面遵循我们设定的逻辑目的，那么它就是一个有效的功能动效，它存在在我们的设计中便是合理的。但是，如果它不与逻辑目标相符，那它可能就是多余的，需要重新慎重考虑这个动效存在的意义。

在过去的一年左右的时间里，我做过各种各样的项目，在此期间收集并整理了一系列九个逻辑目的，现在我用这些逻辑目的帮助验证功能动效。我意识到，通过查看一个被很好定义的动效，可以很容易的把它们放入到这个系列中的一个点中或者增加更多的组。

也可以这样思考：当一个动效不符合一个功能性目的，那么这个动效的存在可能会让用户觉得困惑或者恼怒。下面是我目前收集的这一系列的动效，我希望会在你的设计中有所帮助。

导向

导向会阐明结构。在这组中，收集的是一些扮演导航角色的动效，它是网页信息结构的反映。这种动效是想要吸引用户对导向的注意，帮助用户理解页面布局刚刚发生的变化：什么导致了这个变化，下次想要使用的时候怎么再次打开。

一个典型的例子是：一个按钮，可以切换隐藏内容（如个人资料等）。当你点击它时，会出现一个隐藏的面板，当你关闭面板，它就缩小回操作按钮。

第一次接触的时候，用户可能对马上要发生的事情（做了动作之后的回馈）猜的不那么准。隐藏面板尺寸不断变大的载入动效可以帮助用户更好的知道发生了什么，而不是觉得自己离开了页面或者内容突然消失了。这样用户就产生一种自在的掌控感。收回的动效可以帮助用户关联打开对应面板的按钮或者图标，这样他们就会知道下一次从哪里打开这个面板

逻辑目的：避免突然间变化，让用户知道自己在哪。

相同的位置，新的功能

一个众所周知的易用性准则：保持设计和站点内容的一致性。一个具有一致性的站点通常是可预见性的，因此也是可以学习的。此规则也适用于按钮的操作。

在某些情况下，我们必须要设计一个在一定条件下功能会发生一定变化的按钮。我们这样做通常是因为空间受限，如手机等。因此，在用户已经知道按钮的一个功能情况下，他还得学习另一个新功能。

"保存”和“编辑”按钮是功能转化按钮的最常见的例子。但是这个又是最简的，因为这两项操作是互斥的，他们具有相同的情景。在其他的情况中，当两个功能之间不具备明显的联系，可用性的挑战就凸显出来了。功能动效这个时候就能发挥很好的作用。
逻辑目的：强调动作按钮的功能变化。

放大缩小

第三组的放大缩小看起来和第一组的导向有些相似。在这些动效里面，用户在列表里选择一个条目，然后就变成了这个条目的内容或细节（取代了列表视图），并且能够返回之前的条目列表。

我们经常在图像库、卡片和条目选择中见到这样的动效。用户选择了一个条目，条目马上响应用户的选择，在屏幕上显示对应的细节内容。
这里的困难是必须让用户继续拥有掌控感，并且还在原来的流程中。功能动效在这时候往往是必不可少的。

在研究这个组中的功能动效时，我注意到一种共同的模式，当下面条件被准确的实施时，会增强动效的功效：
初始状态时条目的列表。

每个项目被指定一个单独的视觉提示，例如一个主色调、一个符号、一个加粗标题或者是预览图像。

当用户做出了一个选择，一个新的页面出现，所选择的条目的视觉提示的要素被突出出来。例如，整个页面的颜色可能延续了之前所选条目的主色调；或者，之前页面的符号被扩大并且定位到页面的标题；或一个条目的名字会变的更大，出现在页面的标题。

一个较明显的关闭动作按钮出现在新的页面，如“取消”，“关闭”，“返回”或“x”。

逻辑目的：把条目与详情页关联。

视觉提示

视觉提示可以帮助用户更好的知道怎么去操作产品的界面。尤其是设计包含非常规对象或者单一的导航形式时，显得尤为重要。

这种功能动效是很容易被察觉的。当我们打开了一个页面，突然触发一个快速的一次性动效，来演示如何操作产品中的功能。

逻辑目的：可以展示非常规功能或者隐藏的事件

聚焦重点

这一系列组帮助用户在不利情形中超越嘈杂的格局。

设计师通常努力避免嘈杂的格局，这些格局以各种文字和视觉内容堆积在屏幕上，他们彼此竞争以引起用户的注意。

将接口噪音最小化的一种方法就是消除杂波。然而，有时候这项任务也不是那么微不足道。想想一个新闻网站，每个用户都希望从主页中删除不感兴趣的消息或图像。

运动，由于其性质，使其在用户界面表现最突出。无论是文本段落还是一成不变的图像都无法与运动一较高下。凭借这个功能性动效组，我们可以利用这一点。不过，需要注意的是：通过添加更突出的物体会增加接口噪音，会起到相反的效果。

在以下的动效示例中，我们看到，由于背景拥挤，把商品放到购物车里这过程看得不够清楚，因此需要动效。

逻辑目的：超越嘈杂的布局，抓住用户的注意力。

模拟

在设计分析和用户访谈过程中，我们发现用户有时候会有这方面的需要，但这只能通过定制的模拟来解决。

对于这些特殊的情况，我们将创建一个自定义的功能动效。在下面的例子中，足球分析学呈现的方式是人物、数字、表格和图表都无法相比的。在第二个例子中，用户可根据时间和地理来监控地图上的温度——这是一个几乎不可以用其他方式来解决的特定用例。

逻辑目的：模拟在其他方面难以传达的主题。

视觉反馈

视觉反馈在用户界面设计中非常重要。在现实生活中，如果按钮、控制和物体会对我们的互动作出反应，是所有人喜闻乐见的。

但请记住，这一系列组中的功能动效是非常微妙的，响应式设计。按键反馈被广泛应用于各个界面，因此在不需要的地方使用功能动效将会是弊大于利。在触控应用装置中，功能动效作为翻转效果的替代品会是最有利的。

逻辑目的：确认用户的操作。

系统状态

这组全都是关于控制的。对用户来说，控制意味着在任何特定的时间认识和理解他们在系统中的当前情况

功能动效提供系统状态的实时监控，使用户能快速了解一个操作何时开始，剩余多少时间以及何时结束。也许，在HTML网站担任这个角色的第一个功能动效是微调的图片交换格式，这目前仍在许多界面中使用，以表明进行中的操作。
这组中的有效功能性动效通常遵循这种模式：

1、显示清晰的反馈以表明进程已经启动。

2、对进程终止作出清晰的反馈。

3、对过程的完成进行评估（顺便提一下微调控制失败的步骤）。

4、对进程终止作出清晰的反馈。

该组中最著名的动效是“下拉刷新”，它启动移动设备的内容更新进程。检查这些动效在不同应用程序中的实现情况，你很快就会发现，那些与上述规定的四个步骤不完全相符的动效会让人觉得有点不对劲。例如，由于缺少对进程终止的清晰反馈而引起的不确定性会促使用户重新启动刷新操作。

逻辑目的：在线性过程中传输控制感。

营销工具

这组都是与营销有关的——它有些有趣的动效！这一系列的前八组动效是十分有逻辑的，而这组是充满情感的！

假设我们需要表明产品行为，突出独有特征，提升独特能力或甚至将品牌价值和风格融入到产品中。

在所有这些场景中，动效可能会很好地为公司营销策略服务。这种方法可能不明确以用户为中心，但它肯定带有功能目的。

逻辑目的：支持公司的品牌价值或突出产品优势。

小结

当涉及到在网站和应用中提供乐趣时，动效发挥了巨大作用。但是，永远记住，它们首先必须是功能性的。

MailChimp的Aarron Walter在他的情感设计书籍中写到用户需求层次。这类似于Walter的层次，把功能需求定位为金字塔的底部，而娱乐需求则位于最顶端——只有底部得到满足，顶部才适用。在这篇文章中，我只涉及功能需求底部，而没有研究快乐和喜悦方面的内容，这些内容有他们自己的文章来描述。

到目前为止，我已经编辑了一系列九条规则。这九条规则很好地映射了到目前为止我所遇到的每一个动效。他们有助于我对在界面中所看到的动效进行评估，同时也是一套强有力的指导原则，决定如何将动效添加到线框设计中。我希望他们在你的设计过程中能对你也有所帮助。

这项研究正在进行中，所以，当你再遇到功能性动效的时候，继续进行并用这些九组中的任意一组来对它进行测试。如果它不完全符合九组中的任意一组，并且该动效的目的非常明确，跟我们分享吧，或许你已经发现了第十组规则。

from alimamaux