如何在 UX 工作流程中集成运动设计
已发表: 2022-03-10 作为 UX 专业人士，我们在提高客户体验标准方面发挥着关键作用。 对细节的简单关注通常是向客户发出我们正在考虑他们的信号。 在数字空间中，我们专注于应用设备和流程中的用户交互。
随着桌面计算能力的不断提高、浏览器的复杂性和原生应用程序的使用，我们每天都在学习新的方法来突破定义精心设计的 UI 的极限。 如果使用得当，运动可以成为帮助用户实现目标的关键工具。
关于 SmashingMag 的进一步阅读：
- 终极动态图形教程综述
- 将 After Effects 融入 UX 工作流程
- 电影史上的电影片名设计艺术
- 在 Photoshop 中创建高级动画
何时考虑动画
作为 UX 设计师，你很可能是项目发现阶段的一部分，如果没有运行的话。 这可能包括利益相关者访谈、角色、品牌访谈、可用性测试、旅程映射、上下文查询等。在这个阶段，你会了解很多关于你的用户的信息，但很可能他们永远不会直接告诉你他们需要动画或动作。 那么，你怎么知道动画在 UI 设计中是否值得考虑呢？
与用户交谈时，您可能会听到以下反馈：
- “我不知道该把重点放在哪里。”
- “这里最重要的是什么？”
- “我不想使用这个工具。”
- “我怎么知道下一步该做什么？”
- “我怎么知道我已经完成了我的任务？”
- “我不明白这些数据告诉我什么。”
像这样的陈述可能会揭示使用动作来增强体验的机会。
从团队中获得支持
在这一点上，作为一名设计师，您可能正在考虑一些关于运动如何增强体验的初步想法。 你如何让你的想法得到认可？ 试图说服利益相关者、产品经理、客户和开发人员团队相信，在动画增强上花费额外的时间和金钱“感觉就像做正确的事情”只会让你到目前为止。 在您的典型项目已经很苛刻的时间表中，您如何为额外的工作腾出时间？ 你如何让团队相信动画是特定 UX 场景的正确解决方案？
获得团队支持的最快和最通用的途径是将动画创意与用户需求和目标保持一致。 这将确保您不仅仅是为自己创建动画，对用户没有任何好处。
如何使动画与用户需求保持一致
当动画概念与特定的用户需求保持一致时，它们就会开始显示其价值。 这也可以防止您考虑无意义、过于复杂的动画。 避免浪费每个人的时间和精力，尤其是在动画对观众没有价值的情况下。
动画的关键功能
动画具有以下功能：
- 在他们的环境中定位用户，
- 提供更深层次的清晰度，
- 向用户提供有用的反馈，
- 允许更有想象力地使用屏幕空间（画布上和画布外），
- 加强元素的层次结构，
- 引导用户的注意力，
- 提示下一步该做什么，
- 在导航上下文之间顺畅地传输用户，
- 解释屏幕上元素排列的变化，
- 提供立即确认用户输入的视觉提示，
- 更好地传达品牌信息，
- 创建外观和感觉就像直接操纵屏幕的启示，
- 创造内在的美学和吸引力，鼓励使用和增加采用。
该矩阵说明了如何将用户研究反馈映射到动画函数：
“用户体验动画有能力解决许多常见的用户需求，帮助人们完成他们的目标。 该矩阵将示例用户研究反馈（顶部）与动画功能（侧面）对齐。
当以这种方式进行优先排序时，它显示了动画如何主要是一种增强用户体验的工具，而不是一种创造吸引力的新颖方式。”
— 马克·迪·斯库洛
如何将动画集成到 UX 工作流程中
以下是在 UX 工作流程中集成动画的建议策略。 如果您的项目是敏捷的，那么这种方法应该在 sprint 周期的持续时间内发生。
发现和探索
只有当您充分了解您的受众并确认您的设计符合该理解时，您才能与您的团队进行协作。 所以，先打好基础。
- 研究使用并熟悉有关目标受众的所有可用信息。 这可能是人工制品，例如角色、客户旅程地图、用户研究、品牌指南、风格指南等。
- 对齐确保您的动画满足特定的用户需求和目标。 如果可能，将您提议的动画功能与特定的用户反馈（如上图所示）对齐，并展示它将如何增强用户完成目标的能力。
- 探索花时间探索展示动画的各种灵感来源。 有很多作品集网站，例如 Dribbble、Behance 和 CodePen，您可以在其中找到许多可以重复使用的示例。
- 沟通尽早与您的开发团队和客户分享您的意图。 让他们知道您正在考虑需要动议的解决方案。 准备好你的研究结果，并使你的想法与用户的需求和目标保持一致。 一个人做更有挑战性； 与您的开发人员合作。 技术人员可以扩展可能性。 尽早沟通将减少一个想法过早被否决的机会。
设计和故事板
- 草图与任何设计过程一样，最好的起点是纸、白板和/或绘图应用程序。 这种媒介以一种不羁、迭代的方式让创意源源不断地流动。 你需要：
- 一张纸或笔记本（故事板模板是理想的）；
- 白板；
- 任何绘图程序或应用程序（SketchBook Pro、Mischief、Photoshop）；
- 如果您使用笔（触控笔）显示器或数位板，则可获得奖励积分。
- 故事板一旦您有了一些想法和想法，就可以创建动画关键状态的故事板。 依靠简单的注释来设想流程。 这是在流程早期与他人交流想法的有效方式。
- 分享草图和故事板是从团队获得早期反馈的绝佳工具。 不要羞于分享你的草图和故事板。 它们是让您的团队了解您计划创建的内容和收集有价值的协作见解的绝佳工具。
- 决定根据可用的时间，决定需要制作什么原型以及如何审查和/或用户测试您的动画。 然后，您需要选择合适的方法来创建您的原型。
原型动画
在您花费大量时间编码之前，原型可以迅速将您的想法付诸实践。 从用户体验的角度来看，原型的主要目的是在设计过程的早期将您的想法传达给用户，此时改进和迭代更容易且成本更低。
制作原型动画有两种主要方法。 范围从使用市场上众多应用程序之一的高度探索性原型到直接跳入编码原型，以最准确地表示生产环境中的可行性。
是使用原型应用程序还是创建编码原型的选择归结为以下几点：
- 解释相互作用需要多少保真度？
- 有多少时间可用？ （时间等于成本。你有时间学习新工具吗？）
- 您目前最熟悉哪些工具或方法？
- 运动有多复杂或复杂？
使用您自己的判断来确定正确的方法。 如果您可以使用简单的 Photoshop 时间轴动画轻松快速地传达动作，那将与完全编码的原型一样有效。
原型设计应用
原型设计应用程序简化了我们对界面中动画的看法。 每天，越来越多的工具可供设计师使用。 这些工具正在迅速发展，包括用于创建过渡、变换和补间的功能。
您选择的应用程序将取决于运动概念是否更具探索性。 此外，还要考虑创建原型需要多快、如何审查、如何与用户一起测试以及设计人员对应用程序的舒适程度。
以下是用于 UX 动画的流行原型设计应用程序列表：
- Adobe Photoshop 通过使用时间线，可以轻松地将在 Photoshop 画布中开始的合成转换为帧动画。 Photoshop 对于在现有合成之上进行运动探索非常有用。
- Adobe After Effects 此工具是无限创意探索的动力源泉。 过度使用此工具的危险在于，很容易创建无法使用当前前端技术构建的东西。 撇开风险不谈，After Effects 如何融入 UX 工作流程值得考虑，因为该工具具有许多创造性用途，尤其是在探索新的可能性和通过运动突破极限时。
- 主题演讲 是的，主题演讲。 利用“Magic Move”属性的自我播放演示是显示 UI 交互性和动作的快速方式。 Thoughtbot 对使用 Keynote 制作原型动画进行了精彩的概述。
- Adobe Edge Animate 此环境允许设计人员使用类似关键帧的动画来探索运动 UI 概念。 它生成的输出依赖于专有的 JavaScript 库，这将使许多开发人员对使用该工具制作的动画的生产准备情况持怀疑态度。
- Axure 8（测试版） 这个激动人心的 Axure 新版本添加了更多动画模式和许多有趣的缓动选项。 Axure 让您在早期的线框图工作中考虑运动。 动画主要通过事件（
onPageLoad、OnClick、OnHover、OnMouseOver等）完成，不包括任何关键帧。 然而，它确实让设计师以一种更容易与开发人员沟通的方式思考。 - InVision 这个高度协作的基于浏览器的应用程序包括一系列动画转换和手势。 屏幕流原型设计工具（您可以在其中围绕通过交互连接的一系列屏幕构建原型）非常适合快速设置可点击热点而不会变得过于复杂。 所有动作都发生在点击事件或页面重定向上。 在任何设备上轻松预览您的设计。 它甚至包括免费的移动用户测试功能，以便您可以在 InVision 中进行用户研究。 也有计划加入更多基于时间线的动画功能。 很酷。
- Flinto 这款适用于 Mac 的移动应用程序原型制作工具可让您快速链接屏幕并应用动画过渡。 它具有许多动画过渡属性，可以对其进行微调以获得恰到好处的运动。 通过在旧屏幕上拖放新屏幕，可以轻松地在这个屏幕流原型设计工具中进行迭代。
- 原理 这个适用于移动应用程序的原型制作工具，也适用于 Mac，允许您使用时间轴来设置动画过渡的关键帧。
- Proto.io 这个基于浏览器的应用程序包含一些复杂的动画功能。 通过使用“交互”和“状态”，设计师可以制作复杂运动的原型，甚至可以创建类似关键帧的动画。
编码原型
更有技术倾向的设计师可以切入正题，直接跳入其前端 UI 框架中可用的库，开始原型设计过程。 否则，这部分流程将需要与开发人员合作。
依靠标准的开箱即用运动模式库可能会限制您对解决方案的探索，从而导致平淡无奇的结果。 同时，不考虑可行的方法是有风险的，并且肯定会产生失望和浪费时间。
一个乐于卷起袖子并深入研究代码的用户体验设计师将更好地控制细节。 他们也将立足于现实。 这需要熟悉 HTML 和 CSS，有时还有 JavaScript。 设计人员需要很好地掌握如何在现代前端开发环境中工作。 当设计师和开发人员可以以这种方式协作时，成功的可能性总是很高。
以下是可用于编码 UX 原型的许多 UI 框架和库的一个小示例。
- CSS3 动画 这是最基本的入门方式。 希望创建编码原型的 UX 动画师需要在 CSS3 和 HTML5 方面有扎实的基础，以了解 Web UI 如何工作的基础知识。
- Motion UI, ZURB 这个 Sass 库最初用于 ZURB 的 Foundation for Apps，将帮助您快速创建 CSS 过渡和动画。 使用简单的类或 Sass mixin 快速制作动画元素和动作原型。
- Transit 这个简单的 CSS 转换和转换库是为那些熟悉 jQuery 的人准备的。
- Velocity 一个更健壮且文档完善的 JavaScript 库，它是专门为动画设计师量身定制的。
- GSAP（GreenSock 动画平台）这个成熟的动画平台将为 JavaScript 可以触摸的任何东西（CSS 属性、画布库对象、SVG、通用对象等）制作动画。 Google 推荐它用于 JavaScript 动画。
- Famous 一个成熟的应用程序框架（主要用于移动端），Famous 建立在开源 3D 布局引擎之上，与 3D 物理动画引擎完全集成。 Famous 背后的想法是，浏览器从来都不是用来渲染应用程序的——游戏是用来渲染应用程序的。 如果你想要流畅的图形和动画（60 FPS），你需要 GPU 加速，Famous 通过渲染到 DOM、canvas 或 WebGL 使之成为可能。
- Framer Framer 是一个独立的原型设计框架和编码环境。 它与 Photoshop 和 Sketch 集成。 虽然它不会生成可用于生产的代码（并且从 JavaScript 切换到 CoffeeScript 是有问题的），但它确实可以帮助设计师分享感觉真实的原型。 它支持对手势交互和运动的细粒度控制，使设计人员能够准确地与开发人员交流这些交互。
- React 由 Facebook 开发，React 是一个 JavaScript 库，用于构建大型、动态、数据驱动、生产就绪的用户界面。
与用户一起测试
以下是与用户进行测试的基本过程：
- 安排代表您的目标受众的一小群参与者（最好是五个参与者）。
- 进行测试用户测试会话非常适合验证您的动画是否有效。 让参与者完成将在您的应用程序中执行的典型任务。 观察你的动画是帮助还是损害体验。 理想情况下，用户体验会话是通过视频捕获的，以便之后可以参考和查看它们。 如果您要远程进行会议，请利用 GoToMeeting 和 WebEx 等 Web 会议应用程序中提供的屏幕录制功能。
- 查看反馈花时间思考从用户测试会话中收集到的见解。 确保正确解决初始发现阶段的用户需求和顾虑。
- 决定完成用户测试并审核反馈后，您可以对是否需要进一步改进或是否已准备好投入生产做出明智的评估。
最后的笔记
在设计中考虑动效的用户体验设计师会发现自己承受着解释、沟通和捍卫为什么需要额外努力的压力。
了解您的听众，并尽早将您的意图传达给团队。 利用当今越来越多的可用方法，从纸张到代码，这将帮助您获得将动画顺利集成到工作流程中所需的支持。
对于 UX 动画，微妙是关键。 专注于帮助用户实现目标至关重要。
资源
- “UX 设计中的功能性动画”，Amit Daliot，Smashing Magazine Daliot 概述了 UX 设计中的动画是如何在体验中创建清晰和逻辑的工具，包括许多有用的示例。
- “你的 UI 不是迪士尼动画，”Sophie Paxton，Medium Paxton 提供了关于如何避免创建仅仅妨碍用户的动画的深刻见解。
- Animate.css，Daniel Eden 这里有一堆很酷、有趣和跨浏览器的动画，你可以在你的项目中使用。
- CodePen 动画示例 CodePen 鼓舞人心的 UI 动画游乐场可以被剖析和分叉以创建新概念或只是进行实验。
- “使用 CSS 动画 SVG”，Chris Coyier，CSS-Tricks 开始在 HTML 中使用内联 SVG 代码，并通过 CSS 动画元素。
- “A Modern Web Designer's Workflow”（视频），Chris Coyier，CSS-Tricks 尽管已有几年历史，但它仍然是现代前端工作流的相关示例。
- “动画示例”，react.rocks 这个画廊展示了 React 对动画的强大功能。