本页面由英文自动翻译而成，内容中可能存在翻译错误

Animations & Micro Interactions#

注意： LinkedIn Learning 资源正在逐步替换中。

本课我们将学习交互设计 (IxD) 中的微交互，以及它们在用户界面/用户体验 (UI/UX) 中的应用。Adobe XD 和 Figma 等软件并非真正的动画软件，但动画往往用于模拟滚动、滑动、点击等微交互。此外，微交互通常用于提示特定信息，旨在提升用户体验。

• Adobe XD
  • 观看此视频，了解如何在 Adob​​e XD 中使用自动动画功能：https://www.linkedin.com/learning/adobe-xd-prototyping-tips-and-tricks/auto-animate?autoplay=true&resume=false&u=2087740
  • 学习如何使用自动动画创建微交互：https://helpx.adobe.com/au/xd/help/animate-prototypes.html
  • 使用智能动画创建高级动画Figma：https://help.figma.com/hc/en-us/articles/360039818874-Create-advanced-animations-with-smart-animate
• Figma
  • 请参考提供的 Figma 微交互 LinkedIn Learning 课程（选择您想学习的微交互）：https://www.linkedin.com/learning/designing-microinteractions-with-figma/microinteractions-in-figma
  • 动画Figma：https://help.figma.com/hc/en-us/articles/360040315773-Prototype-in​​teractions-and-animations
• 其他资源
  • 咨询用户体验专家：微交互如何提升用户体验：https://xd.adobe.com/ideas/principles/human-computer-interaction/how-micro-interactions-can-enhance-the-user-experience/
  • 动态用户界面设计：https://project-awesome.org/fliptheweb/motion-ui-design

任务#

按照教程创建一个动画原型。尝试在用户界面中使用不同类型的动画。你可以将之前工作表中设计的屏幕重新用于此任务。在你的用户界面中完成以下各项动画：

• 滚动/滑动动画
• 按钮动画
• 进度动画
• 使用微交互向用户提示错误

提交 以上所有动画都可以在单个屏幕或多个屏幕中完成。使用 Adob​​e XD 或 Figma 中的分享功能提交你的交互式原型的 URL。如有需要，请上传到论坛。