2017-03-31 嗨猫

      人类一直是视觉驱动的生物，所以影像的影响只会在动画的帮助下而提升。我们的眼镜本能的会注意移动的物体，而动画就像眼前的糖果——如此引人醒目。动效的应用能够在众多app中脱颖而出。最近，越来越多的设计师将动画作为增强用户体验的功能性元素。动画不再是只是一种视觉上的刺激，它已经是成功的交互的重要的工具之一。

      但是，如何在设计中让动效出现在合适的位置，以及合适的地方？好的交互动效：他有存在的意义，是功能性的。本文将讨论功能性动效在设计中的作用，并了解何时将动作结合到设计中。

什么是功能性动效？

      功能性动效是嵌入在UI设计中的微妙动画，是该设计功能的一部分。它加强了设计，并且是非常明确和合乎逻辑目的的。

包括：

1.减少认知负荷

2.防止视觉干扰

3.体现出层级空间关系

4.动画反应出真实物理世界

       在以用户为中心的设计方法中，用户是主要焦点，用户界面需要直观、响应、人性化的。

功能性动效在界面设计中的作用

1.用户行为的视觉反馈

      良好的互动设计需要提供反馈。反馈可以让用户感觉到正在于屏幕上的真实元素交互，并及时的演示此交互的结果（无论是否成功）。

      用户界面上的元素（如按钮和控件）应显示为有形的，即使他们在一个玻璃蒙层之后。视觉和运动线索让用户感觉像是直接操控。

       当你需要通知用户有关操作的结果时，视觉反馈是最直接的。操作不成功的情况下，功能性动画以快速简便的方式提供有关问题的信息。例如，当输入错误的密码时，可以使用摇动动画。很容易看出为什么摇动是一种相当普遍的姿态来传达“不”这一此。因为一个简单的摇头是人们彼此反馈的方式。

目的：

· 确认系统已收到用户的操作。

· 确认（或拒绝）用户的操作。

2.系统状态的可见性

       作为可用性启发式之一，系统状态的可见性仍然是用户界面设计中最重要的原则之一。用户希望在任何给定的时间在系统中知道他们当前的前后状态，应用程序不应该让他们猜测——他们应该通过适当视觉反馈告诉用户发生了什么。数据上传和下载过程是功能性动画的好机会。例如：动画加载栏显示进程的速度有多快，并设置对操作的处理速度有何期望。

      这种类型的功能性动画也可以用于吸引用户注意应用程序的重要状态变化，例如来电：

或者收件箱中的新电子邮件。

目的：

· 提供系统状态的实时通知，并使用户能够快速了解发生的情况。

3.视觉提示

     首次用户通常需要帮助才能了解如何使用应用界面。例如某些工具类应用。对于包含不熟悉或独特交互的界面（如手势驱动界面），这一点尤其如此。没有帮助，用户可能会对如何与应用进行交互而感到困惑。

      在教导用户使用你的用户界面是，你应该提供一组视觉提示，从而传达什么交互是可能的。这种功能性动效驱使用户注意可能的交互。视觉提示可以让用户了解即将发生的事情。例如，可以在ios相机应用（ios7之前）中找到准备用户拍照的功能性动画。

      或者，通过展示设计中的某些功能如何操作，视觉提示可以让用户采取进一步的步骤。

目的：

· 通过向用户提供即将发生的事情的线索，创造必要的期望

· 帮助用户指明方向

· 告诉用户他们如何能够与屏幕上的元素进行交互

4.导航过渡

      导航过渡是应用中各模块之间的切换，例如从高级视图到详细视图。功能性动效让用户通过这些时刻变化来顺畅的感受父级、子级层之间的关系，通过创建过渡状态之间的可视化连接来解释屏幕层级关系。动画可以有效的突出父级到子级间的运动。

       同级之间的切换发生在层级结构相同级别的元素之间。例如：当用浏览选项卡时，将使此动画。

      在这两种情况下，功能性动效可以帮助眼睛看到一个新的对象来自哪里，并且隐藏的对象在哪里（可以快速被找到）。它提供了视觉线索，更容易遵循和加强功能交互。

目的：

· 定义屏幕与元素之间的空间关系

· 通过帮助用户了解页面布局中刚刚发生的更改，避免了令人惊讶的过渡。

5.品牌

       前面的说的动画是合乎逻辑层面的，但这也是充满情感的。通常，有一大堆应用具备相同的精确的功能和能完成相同的任务。他们肯能都有良好的用户体验，但人们喜欢的东西不仅仅是一个很好的用户体验，他们需要与用户建立情感交往。

       将动效参与到品牌塑造中，他可以用作营销工具。支持公司的品牌价值或突出产品的优势，同时使用户体验真正的愉快和难忘。该方法可能不是以用户为中心，但它具有功能目的。

目的：

· 娱乐用户，带来同理心和乐趣设计

· 创造产品的标签，帮助用户与产品产生情感，增加品牌知名度

· 如何找到平衡点？

      有用，还是只是眼前的糖果，如何去找到其中的平衡点？花时间考虑什么时候出现动画是不合适的，这点很重要。

有目的的动画

      动画应该始终是一个目的，他们不因为因为动画而做动画。当动画不符合功能目的时，它会感到尴尬或烦人，尤其是在没有任何动画的情况下可能是更快的流程。

      请记住，用户来到网站或者启动应用为目的，我们需要在短时间和时间范围内向他们显示他们是什么。因此当决定在你的 应用中使用动效时，仅在具有意义的情况下加入动画，并且不会分散用户成功完成他们打算做的事。

保持密不可分

      及时是好的动画，当它被滥用时也可能令人厌烦。在设计动画时，请问自己一个问题：动画在第100次使用上会变得烦人吗？还是普遍清晰而不引人注意？

通过原型测试你的动画

      在你的工作中想增加动画时，多做测试和迭代。减少一个完整的返工，去掉最多的瑕疵。

good night。

译文 | 02

原作者：Nick Babich