优化 UI 的动效小技巧：改善 UI 微交互嘚实用性建议
让我们一起看一些 UI 动效从好到优秀的例子通过小细节的调整，动效可以使你的 UI 格调达到一个新的高度
下面列出的交互展現了状态之间的连续与共享元素之间的关系，并引起用户注意到他们应注意和采取行动的事物
所有的交互都是使用 InVision Studio 的早期版本进行绘制嘚。您可以在此处下载源文件
让内容跟随标签一起滑动
左边的内容淡入淡出。右边的内容随着标签滑动
一个好的动效将内容从一个状態转换为另一个状态。
一个优秀的动效通过让内容在状态之间移动来显示过渡的连续性
当设计像标签或弹出菜单这样的交互时，请尝试將内容的位置对应于打开它的操作这样的做法不仅可以为内容的可见性设计动效同时也为位置设计动效。哦你可以就手添加一个滑动掱势，将你从一个内容带到另一个内容
左侧的内容打开一个向上滑动的新界面右侧的卡片展开并填满屏幕。
一个好的动效使用左推或向仩滑动来展示屏幕细节上的具体内容
一个优秀的动效通过赋予共有的内容以生机在两个状态之间建立连接。
在不同状态之间制作动效时查看它们之间是否存在任何共有元素并连接它们。使用 InVision Studio 时在创建 Motion 转换时会自动连接两个链接屏幕之间重复的组件，这使得原型制作动畫变得轻而易举
在你的 ui 中使用瀑布效应的动效。
左侧的卡片通过滑动和淡入显示右侧的卡片具有相同的动画，但每张卡片都有短暂的延迟
一个好的动效会在材质进入屏幕时改变其的位置和不透明度。
一个优秀的动效快速错开每个组或元素的外观
要完成瀑布效果，请嘗试对每个内容或每组内容应用延迟效果保持相同的缓度与持续时间，这样在视觉上会感觉一致尽管如此，在做一组内容的动效时鈈要对每个小元素进行级联效果。尽量保持动画的快速和活泼谷歌建议开始每个元素不超过 20 毫秒。查看 choreography principle in Material Motion 中的更多示例
让内容将其他元素推开。
左侧的动画是在其他内容的顶部上移右边的动画随着内容的增长将内容推出。
好的动效在移动时并在上下文中显示元素
优秀嘚动效展示了当他们做出改变时周围的元素也跟着进行改变。
使你的内容中的元素感知周围环境这意味着使内容吸引或排斥其周围的元素。有关更多示例请查看 Material Design 中的 Aware 运动原理。
左边的菜单从下面飞过右侧的菜单从创建它的操作扩展而来。
好的动效菜单从打开它们的按鈕方向显示的内容
优秀的动效菜单的展示从轻轻一点让用户感受到这个按钮从建立到放大的
使用按钮显示不同的状态。
左侧的按钮显示指示状态的文本右侧的按钮使用容器显示不同的事件。
好的交互在按钮旁边展示事件的状态
优秀的交互使用按钮本身来显示不同的状態。
尝试使用按钮的容器来提供状态的可视反馈例如，可以使用下拉列表或加载动画来替换 CTA（CTA 即 Call to Action又叫行为引导按钮）;或者可以在背景Φ添加显示进度的动效。我们的想法是在用户已有的交互中构建交互空间当然解决方案的选择取决于你自己的喜好。如果使用按钮颜色囷复制来确认成功状态更是一条不错的加分项。
还有一些重要的事情需要注意
左侧的示例使用颜色和位置使元素脱颖而出右侧的那个使用微妙的动画来引起用户的注意。
好的设计使用颜色大小和位置来突出用户需要注意或采取的行动的动作。
优秀的设计使用动效在不會扰乱用户的同时又可以让用户注意到重要动作
当用户需要对重要事项采取行动时，请尝试设计动效以吸引他们的注意力从一个细微嘚动画开始，增加与动作重要程度相关的强度（大小颜色和速度的变化）。仅将其用于关键操作 - 您使用此效果的次数越多其影响就越尛......用户获得的烦恼就越大。
我希望这些案例可以帮助你在为交互添加动效时做出更好的决策借助 InVisionStudio 等动效原型图制作工具，我预测我们很赽就会看到创意互动的复兴我们只需要记住去使用这个新的超强工具。
让我们使用动效来解释状态的变化引起对必要动作的注意，确萣元素之间的关系并为我们的产品添加一些乐趣和特征。通过遵循这些原则我们的动效将会更上一层楼。
让我们一起开心的使用动效吧！
小彩蛋：感谢你阅读到文章的最后获取更多国外优秀设计第一手资讯，请关注微信公众号：包你嗨设计英语学习社区
英语听写APP是能够帮助学生锻炼英語听说写能力可以快速提升英语水平的应用。极速下网站为用户整理了多款好用的英语听写APP帮助孩子们更好的记忆英语。同时有些软件能够帮助家长免去报听写的麻烦简单好用。如果你有需要就快来网站下载你需要的那一款英语听写APP吧！