交互动效优秀的UI动画设计技巧

交互动效优秀的UI动画设计技巧本文笔者将为大家展示刘凯一些UI动画的案例，期以通过这些案例，帮助大家在为交互添加动画时做出更好的决策。让我们看一些ui动画从好到优秀的例子，通过这里和那里的一些调整，你可以换用动画提升你的UI模式。列出的交互表示状态之间的连续性，则表示共享元素之间的关系，并将用户的注意力引用到他们应注意指称和采取行动的事物上。为了创建这些动画，我遵循了MaterialMotion、IBM的动画原则和UXinMotionManifesto中的指导原则。所有的交互都是选用InVisionStudio的早期访问版本完成的。左边的内容淡入淡出。右边那个带标签的幻灯片。当您设计像标签或弹出像菜单这样的交互时，请尝试将内容的位置相对于打开它的操作。这样，您不仅可以设置内容的可见性，还可以设置位置的动画。哦，当你在浏览它的时候，添加一个轻扫手势，将你从一个内容带到另一个内容。左边的内容打开了一个新的屏幕，可以向上滑动。右边的卡片展开并填满屏幕。状况在不同状态之间制作动画时，查看它们之间存在任何共享元素并连接它们。使用InVisionStudio时，在创建Motion转换时会自动连接两个链接屏幕之间重复的组件，这使得原型制作动画变得轻而易举。查看MotionManifesto，y解您可以应用的动画类型。上面的示例使用了Masking、Transformation、Parenting和Easing原则的组合。左侧的卡片通过滑动和淡入显示。右侧的卡片具有相同的动画，但每张卡片都有短暂的推延。要完成瀑布效果，请尝试对每个内容或每组内容应用延迟。保持相同的平复和持续时间，因此感觉一致。尽管如此，不要对每个小元素进行级联，并使内容组具有动画效果。能保持动画的快速和活泼。谷歌建议开始每个元素不超过20毫秒。查看MaterialMotion中的编排原理以标示出更多示例。左边的动画在其他内容之上进行动画。右边的动画随着内容的增长将内容推出。使你内容中的元素了解周围环境。招引这意味着使内容吸纳或排斥其周围的元素。有关更多示例，请查看MaterialDesign中的Aware运动原理。左边的菜单从右边飞进来。右边的菜单从创建按钮它的操作按钮展开。左侧的按钮估算指示状态的文本。右侧的按钮使用容器显示不同的事件。尝试使用按钮的容器来提供状态的可视反馈，例如：你可以使用微调器或加载动画替换CTA;或者你可以在显示进度的背景中添加动画。解决方案来判断你，我们的论调是使用用户已经与之交互的空间。如果你使用按钮颜色并复制以确认成功，则奖励积分。左侧的示例使用颜色和位置使元素脱颖而出。右侧的那个换用的动画来引起用户的注意。当用户必需需要对重要事项采取行动时，请尝试设置高难度以吸引他们的注意力。从一个令人不安的动画开始，增加与动作重要程度相关的强度（大小，颜色和速度的变化），仍仅将其用于关键操作——你使用此效果的次数越多，其影响就越小……用户获得的烦恼越多。我希望您示例可以希望这些在为交互添加动画时做出更好的决策。借助InVisionstudio等新动画片和原型制作工具，我预测估计我们很快就会看到创意互动的复兴。我们只需要记住认真负责地使用这个新的超强工具。让我们应用动画来解释状态的