一位优秀的用户体验设计师能够轻松地解释设计概念中每个决策背后的逻辑。包括信息架构、页面内容结构、流程及假说。
动画迟早会被融入线框图中，但在做设计决策或解释它们的时候，就会略显尴尬，因为理由基本上就是“这很酷啊！”或者“这很流行”“多有意思”，这些理由使得设计一开始就毫无说服力。在考虑设计时，我们应该更加深入地研究动画，就像解释其他设计元素那样，有依据地定义动画并解释其目的。
→ 什么是功能动画？
功能动画是一种微妙的动画，我们将它嵌入到用户界面设计中，是设计流程的一部分。
不同于迪士尼工作室动画或电脑游戏动画，功能动画有着明确的逻辑目的，支持解决方案，传达设计概念。功能动画是用户体验设计库中的又一个工具。
完美情况下，我们应该能根据一组定义好的逻辑目标来验证功能动画。如果设计中的某一特定动画能符合逻辑目标，那么它就是有效的功能动画，它的存在就是合理的。但如果不符合目标，那就可能是多余的，需要重新考虑。
在过去的一年里，我经历了大量的项目，总结出九种逻辑目标以验证功能动画。通过检验，定义好的动画都至少能够符合这九种目标之一。
这在其他方面也有点用处：当一个动画不满足功能目标时，通常让人感觉怪怪的或恼人的。下面就是我收集的这九种目标，希望能帮助你验证自己设计的动画。
方向照亮结构。导航中的动画能够反映网站的信息架构。这类动画背后的逻辑是保持用户的方向感，帮助用户理解页面布局的变化：是什么触发了变化以及如何在需要时再次触发。
一个经典的例子是切换隐藏内容按钮。点击按钮，出现隐藏面板，关闭面板又回到操作按钮。
第一次使用时用户可能无法预测即将发生的互动，隐藏面板逐渐变大的开启动画让用户有了方向感，并且不会觉得离开了页面或内容忽然不见了，他们仍旧掌控着发生的一切。关闭动画让用户把缩小的面板和操作按钮联系在一起，这样下次他们就知道如何再次打开面板了。
逻辑目标：避免突然的过渡，并引导用户。
示例：
一个众所周知的可用性原则：网站的设计要和内容要保持一致。一个一致的网站是可预测的，也就是可学习的。这个原则不仅适合操作按钮，也适合其它方面。
某些情况下，通常是在设计空间有限时，我们不得不设计功能发生变化的操作按钮。因此，如果用户已知某一操作按钮的原有功能，还需要知道新功能。
“保存”和“编辑”按钮可能是最常见的转换按钮的案例了。因为这两个动作是相互矛盾的关系，背景相同，因此是十分简单的案例。如果两个动作之间没有明显的关系，就会面临可用性挑战，这也是功能动画起到作用的地方。
逻辑目标：在操作按钮上强调功能转变
示例：
第三类动画与前面提到的“指向性”动画有些相似。在此类动画中，用户选择列表中的一个标签，放大观看细节（会覆盖列表），然后还能返回看整个列表。
通常会在图片库、卡片、项目栏中出现这种情况。用户会选择一个标签然后马上看看与之相关的具体内容。
这里面临的挑战是要让用户感觉仍在控制状态，并能够保持在给定环境中，这种情况下肯定需要功能动画。
在研究大量的此类功能动画时，我注意到一种常见模式，如果精确实现，可以提升动画效果：
01 初始状态是各项的原始列表
02 每一项都设计独特的视觉线索，比如主色、标识、粗标题或缩略图。
03 当用户做出选择，视觉线索就会出现在新页面的明显位置。比如，某项的颜色是整个页面的主色调，标识在页面标题的位置，名称是页面中更大更明显的标题。
04 打开的新页面上要有醒目的关闭按钮，如“取消”“关闭”“返回”或“X”。
逻辑目标：缩略图与详细视图相关联
示例：
视觉提示有助于用户更好地理解如何与产品互动，当产品包含非常规内容或独特的导航方式时尤为需要。
打开一个页面时，会很容易发现这种功能动画——突然触发一次快速动画，演示某一操作功能。
逻辑目标：提示非常规功能或隐藏操作。
示例：
在糟糕的界面中，这类动画可以让某一内容在混杂的图层中凸显出来。
设计师通常都会力争避免布局嘈杂，因为这会让屏幕布满了文案和视觉内容碎片，争相吸引用户的注意力。
降低页面嘈杂的方式之一就是删除。但是有时候却不好做到这一点。比如一个新闻网站，谁会想要把文字新闻和图片从主页中删掉呢？
本质上，运动在用户界面中是最明显的，无论是文字段落还是静态图片都无法与之相争。我们可以利用动画的这个优势。但是要记住，让物体更加显眼会让页面更加聒噪，这只是不得已而为之。
下面的动画案例中，可以看到由于背景拥挤，加入购物车的卡片不太引人注意，因此加入了动画强调。
逻辑目标：摆脱嘈杂的布局，吸引用户的注意力。
示例：
有时在设计分析和用户访谈中，发现用户有个需求，可以通过定制模拟过程来解决。
这种特殊情况下，我们可以创建定制的功能动画。下面的例子中，足球分析是以互不干扰的图形、数字、表格、图表展示的。
逻辑目标：模拟难以传达的主题。
示例：
视觉反馈在用户界面设计中非常重要。现实世界中，按钮、控件和对象对我们的互动做出反馈，这就是人们预期事物运转的方式。
但要牢记，这类的功能动画要很细微地响应式设计。按钮反馈在每个界面中都会用到，如果在不必要的地方使用功能动画，可能适得其反。在触屏设备上，功能动画可以替代翻转效果。
逻辑目标：确认用户行为。
示例：
这类动画都是关于控制力的。对于用户而言，控制意味着在任何时间都知道并了解当前在系统中的状态。
功能动画可以实时反应系统状态，让用户快速了解什么时候开始，停留多久以及什么时候结束。或许第一个功能动画就是 HTML网页中的旋转gif图，这种形式至今还用在很多界面过程中。
这类有效的功能动画一般遵循以下模式：
01 明确反馈流程的开始。
02 过程进行中展示持续性反馈。
03 预估过程的结束（也可能是加载失败）
04 清晰地反馈过程已结束
这类动画中有大家熟知的“下拉刷新”，它会触发移动设备中的内容更新。在大量不同的应用中试验这些动画，你会发现，如果缺少以上四个步骤之一，就会觉得怪怪的。比如说，过程终止时缺少清晰的反馈，造成不确定性，可能会引起用户再次发起下拉刷新的操作。
逻辑目标：线性过程中传达控制感。
示例：
这类动画都是关于营销的，非常有趣哦！前面提到的八类动画都要合乎逻辑性，但是这一类动画充满了感性色彩。
当我们需要指明产品行为、强调特定功能、提升独特性能或者甚至将品牌价值和风格融入产品时，都可以应用此类动画。它能为营销战略很好地服务，虽然可能不是特别明显地以用户为中心，但它确实有一定的功能目的。
逻辑目标：传递公司品牌价值或突出产品优势。
示例：
总结
动画为网站或APP起到很大的愉悦作用或突出作用，但是要牢记功能优先。
MailChimp的沃尔特在他的著作《情感化设计》中描述了用户需求层次。与马斯洛需求层次理论相似，但沃尔特描述的是用户的需求。沃尔特的层次结构将功能需求定位在金字塔的底层，而精神需求位于顶层。也就是说，只有满足了基础功能需求，才可能实现精神愉悦的需求。本文中我只是研究了基础功能，而未涉及快乐和愉悦等方面。
到现在，我已经总结出九类规则。这九类规则适用于我看到的所有动画类型。我可以依此来评估界面中的动画，并在线框图设计中应用强有力的指导原则进行动画设计。希望这些原则在设计过程中，可以像帮助我一样帮到你。
研究仍在继续。当你下一次遇到功能动画，请继续针对这九类中的某一类进行测试。如果发现并不属于其中任何一种，并且有着明确的功能目的，可以分享给我们，也许你发现了第十类功能动画哦！
原文地址
https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/
欢迎指教和讨论
