本文希望通过七个GIF传说证明动态设计并不复杂。只需对关键点添加一点改动就可以大大增强效果。

通过这些示例，您将发现状态连续性，元素相关性以及用户注意力控制的重要性。

在动态设计中，我参考了设计规范：Material Motion，IBM的动画原理，运动宣言中的UX。

我使用的工具是InVision Studio的早期版本，您可以从Dropbox下载源文件。

滑动标签

左边的内容区域由渐变改变;右侧的内容区域使用选项卡

优秀的效果将使用渐变切换页面元素

切换时，出色的运动将保持状态连续性

设计选项卡或多级菜单时，可以尝试将界面元素的位置与其打开方式相关联。除了可见性之外，这种运动还可以涉及增加位置。这样，滑动手势也可以。

关联卡元素

左边新打开的页面滑出;右侧新打开的页面从前一张卡片扩展

好动作将使用幻灯片打开新页面

优秀的运动将关联不同状态下的相同元素

在设计状态转换时，您可以查看两者之间是否存在相同的元素，如果是，则可以关联它们。当InVision Studio创建Motion转换时，两个屏幕之间的重复元素会自动链接，这一特性使原型运动更加简单。

如果你想知道可以使用哪些效果，我建议你去《十二条动效体验原则》（Z Yuhan：我刚刚翻译了它）。在上面给出的示例中，使用了掩码，转换，父子关系和缓动原则。

瀑布流动效果

左边的卡片显示滑动和渐变;右图的基本效果是一样的，但每张卡的延迟时间不同

优秀的动作通过控制所有元素的位置和可见性来显示加载过程。

优秀的动作将错开不同元素和群体的外观

在均匀缓和和速度的前提下，通过延迟设置实现瀑布效果，确保一致的视觉体验。无需为每个窗口小部件设置延迟，确保正确的分组粒度使运动更有效，更快速。 Google建议瀑布效果元素的显示间隔不超过20毫秒。更多示例：Material Motion中的编排原则。

元素之间的力量

左侧的卡片浮动在页面顶部;当右边的卡很大时，推开周围的元素

优秀的动态控制元素本身会发生变化

优秀动态注意力元素对周围环境的影响

体现元素之间的力量，即相互吸引或排斥。如果您想了解更多信息，可以访问Material Design的Aware动作。

让菜单“ldquo;成长”出来

左边的菜单会从下到上弹出;右侧的菜单将从按钮> ;; grow>

优秀的运动使元素出现在触发方向

出色的活力使元素能够从父母中生长出来。

使用按钮显示状态

左图显示使用按钮外部文本的状态;右图显示使用按钮框本身的状态

好动作将提示放在按钮附近

使用按钮本身显示状态变化的优秀动作

尝试使用按钮显示状态更改，例如使用按钮文本显示提示，或使用按钮框显示进度。无论哪种方式，目标是充分利用用户的注意力（Z Yuhan：了解更多，看看《谷歌 Material Design 从这些方面打破了我思维局限》的“不是视线跟踪元素，而是元素跟踪视线”）。

认真对待这件事

左图使用颜色和位置使元素脱颖而出;正确的图像使用微动画来吸引用户的注意力

优秀的设计突出了颜色，大小和位置的重要元素

优秀的设计使用动态效果吸引用户注意力，从而避免破坏已建立的框架

当用户需要执行一些重要操作时，请尝试使用动态效果来吸引他们的注意力。根据重要性确定所需的动态（例如大小，颜色和速度）。但请确保仅在重要操作上使用它——因为你使用的越多越弱;…用户会更烦人。

总结

我希望这些例子可以帮助您做出动作设计的决策。借助InVision Studio等新的动态原型制作工具，创意互动领域将迅速变得更好，并且不要忘记对运动的关注。

在设计时，不要忘记使用动态来解释状态变化，正确吸引用户的注意力，解释元素关联，并为产品添加一点乐趣和个性。上述设计原则足以将我们的动力从快速有效的卓越提升到卓越。

让我们愉快地创造动态效果！

原始地址：优秀的UI动画提示

原作者：哟嘿，小朋友，我是设计师和联合创始人Pablo Stanley，Carbon Health of。我正在创作一个名为The Design Team的幽默漫画故事，并在Twitter上发布一些与设计相关的内容。您还可以查看我的YouTube频道，Sketch Together，其中有很多设计教程。感谢您阅读（西班牙语）。

译者：Z Yuhan，Goose Factory·交互设计

翻译地址：https://zhuanlan.zhihu.com/p/35204204?group_id=964100644554166272

本文由@Z Y​​uhan授权，未经作者许可复制。

该地图来自Pexels，基于CC0协议

« 最全面的动态效果着陆方法（第1部分）：界面设计中良好动态的影响是什么？ | 关键词分析：研究百度需求图挖掘关键词 »