一位优秀的UX设计师可以轻松解释任何设计决策背后的逻辑，包括信息架构、内容层次结构、流程等。总有一天，产品概念原型中会引入动效，到那时，设计师就更难在原型中解释设计思路了。“这个动画很酷~”、“很接地气~”、“效果太棒了”将是他们唯一的评价。什么是函数式动画？微妙的功能动画是设计过程的一部分。隐藏在日常UI设计中。功能动画不同于迪士尼工作室，或专门为电脑游戏设计的动画。它有一个明确而合乎逻辑的目的来支持我们追求的设计解决方案。理想情况下，我们可以通过一套完整的使用原则来验证这些功能动画的可行性。在过去的几年里，我参与了各种项目。在这个过程中，我总结了9种动画原理。如果我们设计中的某个动画遵循了这些原则中的一个（或多个），那么它就是一个有效的功能动画，证明它可以应用到项目中。如果函数式动画不遵循这些原则，它可能是多余的，需要三思而后行，而且常常让人觉得烦人和笨拙。以下是我到目前为止收集的所有用途。希望对您的动效设计和验证有所帮助。PositioningOrientation方向明确了结构。在此类原理中，动态效果用于界面之间的导航，显示网页信息架构的方向。这类动画背后的逻辑是帮助用户感知他们在页面流中的位置，了解页面中的变化，是什么触发了这些变化，以及在必要时如何再次触发它们。一个典型的例子是通过按钮触发“显示/隐藏”内容。当您单击该按钮时，将显示一个隐藏的面板。当你关闭面板时，面板会“收缩”回操作按钮。用户在第一次使用时无法预知交互会带来什么。隐藏面板不断增加的展开动画会帮助用户保持方向感，不会让他觉得自己跳出了当前页面或者内容突然消失了。关闭动画可以让用户将“缩小”的面板与操作按钮联系起来，这样他们就会记住下次如何打开面板。使用方法：避免突兀的过渡，帮助用户定位。AppleMacOSX的窗口动画FacebookPaper的菜单动画动作切换SameLocation,NewAction有一个众所周知的可用性原则，即保持产品的一致性（译者注：Consistencyofdesignandfunction）。维护一个良好一致的网站（产品）可以降低用户的学习成本，并使内容和交互更具可预测性。此外，这个原则也适用于操作按钮。在某些情况下，当按钮被激活时，我们不得不在某些条件下改变这个昂贵按钮的功能，通常是在那些整体空间有限的设计中。因此，已经了解按钮原有功能的用户可能需要学习新的功能。保存和编辑按钮是一些最常见的切换按钮。这是最简单的情况，因为只要按钮的定义相反（译者注：比如点击后“add”变成“remove”），就说明他们在同一个场景中。在其他情况下，当两个动作没有直接的表面关系时，这是一个可用性问题，在这种情况下，您需要功能动画。用法：强调动作按钮的功能切换。GoogleMaterialdesign的ButtonMuteSwitchZoomZoom第三种类似于“定位”类型。在此类动画中，用户在列表视图中选择一个项目以放大到详细信息视图（覆盖原始列表视图），并可以返回到列表视图。通常应用于相册、卡片和项目选择器。用户选择一个选项并立即看到相应的详细视图。使用这种类型的动画的困难在于确保用户感觉他们仍然可以保持这种情况并且不会离开当前场景。在这种情况下，功能动画必不可少。在大量使用此类函数式动画后，我总结了一些通用规则，严格执行才能奏效：动画的初始状态是原始列表视图；每个选项都分配了一个视觉提示，可以是应用程序的主题颜色，也可以是符号、粗体标题或缩略图；当用户做出选择时，会创建一个新页面，并且视觉提示会移动到一个突出的新位置。例如，整个页面可以填充选项的独特颜色；选项的符号可以放大并移动到页面标题；选项名称可以放大显示为页面标题；一个突出的操作按钮用于退出这个新页面，例如“取消”、“关闭”、“返回”或“X”。用法：链接预览视图和详细视图。视觉隐喻VisualHint视觉隐喻帮助用户更好地理解如何与产品界面进行交互，那些具有非主流组件或特殊导航系统的需要更多的视觉隐喻。这种类型的功能动画很容易找到。当我们打开一个页面时，会立即触发一个一次性动画来演示某个功能是如何使用的。用途：为不常见的功能或不可见的操作提供提示。Source:DejanMarkovic强调这种动画Highlight可以帮助用户在充满复杂元素的界面中进行有效的操作。设计师通常会尽量避免设计复杂的界面布局——充满多媒体的满屏——不断争夺用户的眼球。减少噪音的一种方法是减少噪音，但有时这是不可能的。想一想，让一个新闻网站的站长去掉新闻的文字内容模块和首页的图片栏……在UI界面中，“体育”有一个很重要的特点，就是它是最容易引起注意，文字段落或静态图片都无法与之相比。我们可以用它来设计运动效果。但是，请记住，最容易引起注意的方法也是一种“分散注意力”。如果滥用，就相当于给界面加了噪音。用法：在复杂的界面中抓住用户的注意力。www.Photojojo.com#p#Simulation现实模拟有时，通过数据分析和用户访谈，我们发现用户的某些需求只能通过定制特定的界面来满足。对于这些特殊的用例，我们可以考虑设计一个自定义的功能动画。常用的方法很难安全地实施某些独特的案例。用法：适用于那些难以表达意思的场景。来源：MonterosaVisualFeedback视觉反馈在UI设计中，视觉反馈非常重要。在现实生活中，按钮、控制器和其他对象会响应用户交互。这就是用户期望事情如何运作的方式。但请记住，像视觉反馈这样的功能性动画应该尽可能“低调”，并且设计得易于理解。按钮反馈广泛用于每个UI界面，因此滥用不必要的动画可能适得其反。用途：响应用户操作。和这个类似的还有tumblr的系统状态SystemStatus这种都是关于“控制”的。对于用户来说，“掌控”意味着能够随时感知和了解系统当前的场景。功能动态实时监控系统状态，让用户快速感知某项操作的开始、剩余时间和准确完成时间。或许第一个满足这种需求的功能性动画就是HTML页面的“转菊花”GIF动图，至今仍在一些操作指令界面中广泛使用。高质量的系统状态功能动画通常遵循以下模式：流程启动后显示清晰的反馈；在此过程中提供反馈；估计过程的完成并提供反馈；在过程结束后提供成功或失败的反馈。有一个比较著名的动画效果“下拉刷新”，就属于这一类动画效果。在移动设备上，它通常用于触发内容的刷新。在几个不同类型的app中查看，你会发现这些动画都没有完全按照上面4个步骤进行，感觉很奇怪。例如，明确提升界面以结束进程将导致用户再次触发下拉刷新。用法：传达操作过程的可控性。YikYakApp的下拉刷新营销工具虽然这类营销工具只是与营销相关，但它已经有很多有趣的动态效果。前面的8种似乎与理性和逻辑有关，但这种类型只与情感有关。假设我们需要定义一个产品的行为，突出独特的特性，甚至捆绑品牌价值和风格。在这些场景脚本中，虽然这些方法不一定是以用户为中心的设计，但它们有一个明确的功能目标——满足公司的营销策略。用途：有助于突出公司的品牌价值，或产品的优势。来源：Creativedash总结：为我们的网站或移动产品添加动态效果可以给用户带来很多惊喜和愉悦，但请记住——形式追随功能，任何东西都是无用的，不是为了满足实际的功能需求，Motionformotionformotion,不要滥用动作。
