【DDC 译文】UX 设计中的功能性动效
图片来源：ZURB University
功能性的动效是指一种微妙且具有清晰合理目的的动画效果。它能减少认知负荷，防止对(界面)变化的忽视、还能帮助用户在界面的空间关系之中建立惯性回忆。更重要的是，动效给用户界面赋予了生命。
通过对界面元素进行组合、拆分、改变他们的形状和大小，动效可以让界面更加生动。你应当使用功能性动效流畅地在上下文间引导用户，解释屏幕上元素排列的变化，以及加强元素层次结构。
成功的动效设计具有以下六大特点：
1.响应
视觉反馈在用户界面设计中是非常重要的，因为渴望得到确认反馈信息是用户的一种天性。在现实生活中，按钮、控制键和其它物体会因我们的操作而产生相应的反馈，这已经是人们习以为常的交互方式。
图片来源：Smart Design
1
用户界面应该在用户点击输入框时，就准确及时地给予响应，表现出上一界面和当前界面的关系，以及哪些元素和操作导致了当前界面的出现。用户通过点击应用程序总是能知道发生了什么，这感觉很好。
元素对用户的操作意图给出了合适的回应。图片来源：MaterialDesign
1
2.关联
新出现的界面需要和那些导致它出现的元素或操作联系起来。这种联想式关系所隐含的逻辑，能帮助用户理解刚刚在视图的布局中发生的变化和什么触发了变化。
下面你能看到两个导航菜单的动效案例。第一个案例中，菜单从用户点击点以外很远的地方开始浮现，这就打破了点击行为和菜单动效的联系。
错误方式。图片来源：Material Design
1
在第二个例子中菜单从接触点出现，这就将元素关联在了接触点上。
正确方式。图片来源：Material Design
1
另一个例子是在特定条件下操作按钮功能的变化。“播放”和“停止”按钮可能是切换开关最常见的例子。将播放按钮转换为暂停按钮意味着这两个动作是相连的，并且点击一个按钮后另一个按钮才会出现。你应该提供按钮动效让这两种状态转换地更为流畅且避免间断感。
平滑地过渡到一个播放控件并告知用户按钮的功能，同时增加了一个惊喜的交互元素。图片来源：Material Design
1
3.自然
避免令人诧异的过渡，每一个运动都应该遵循现实世界中的作用力。在现实世界中，一个物体加速或减速的能力受重量和摩擦力的影响。同样的，好的界面设计中，动效的启动和停止也不能过于突兀。
下面你可以看到一个很好的例子，用户选择列表中的一项放大到详细视图。在扩展过程中，小卡片沿着弧线移动到它的目的地，扩展成一个更大的卡。
正确方式。在屏幕上向上移动的元素应该在运动过程中出现加速的力。图片来源：Material Design
1
4.有意图的
操作指南关注的是如何在合适的地点、合适的时间给出引导提示。而动态效果，因为其特性，则拥有界面上最高的可见性（译者补充：运动中的东西最易被人眼察觉）。无论是文本段落，还是静态图像都无法超越它。好的过渡有助于引导用户下一步的交互。
第一次使用时用户无法真正预测即将发生的交互，但适当的动效可以帮助用户引导方向，不会觉得内容突然发生变化。
Mac OS最小化窗口时使用的功能性动效，这个动效将第一个状态和第二个状态连接起来。
Mac OS最小化窗口动效
1
层级跳转间使用的过渡动效，用户在列表中选择一个项目或卡片元素，并放大到详细视图。这个交互动效能够让用户保持维持对界面情景的认知。
层级跳转间的过渡动效。图片来源：Material Design
1
5.快速
当元素在位置或状态之间移动时，运动应该足够简洁快速，不要造成用户的等待，同时又能保证过渡动效能够被用户所察觉并理解。
避免过慢的动画，因为它会造成不必要的迟缓并增加完成操作的耗时。
错误方式。图片来源：MaterialDesign
1
错开和放慢过多元素的运动会延长持续时间。
错误方式。图片来源：MaterialDesign
1
快速的动效，让用户不必等待动效完成。
正确方式。图片来源：MaterialDesign
1
用户会经常看到它们，所以应保持过渡时间短，保持动效持续时间在300毫秒内。
正确方式。图片来源：MaterialDesign
1
6.清晰
避免在一次动效中做多件事情，因为当多个项目需要在不同的方向或交叉路径移动时，它们就会变得很混乱，让用户晕头转向。
错误方式。图片来源：MaterialDesign
过渡应该是清晰的，简洁的，连贯的。关于动效，请记住少即是多。因此，我们应该只关注动效对用户的实际价值。
正确方式。图片来源：MaterialDesign
结论
总之，运动不是随意的，每个动作都是有目的的。运动原理是动效设计的基础原则，运动也能突出重点让你不会淹没在界面元素里。无论您的应用程序是有趣好玩或严肃直接的，使用运动原理能帮你建立一种清晰又具有凝聚力的界面体验。
谨慎设计。关注每一个细节是使人机交互易于使用的关键。
谢谢！
英文原文：Nick Babich, Functional Animation In UX Design: What Makes a Good Transition?
原文地址：https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e# .i3v9b5n7e
关键字：设计, UX, 动效
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
