很棒的UI动画技巧-改善UI微交互的实用建议

自译外文 分类: 经验/观点 版权: 原作者: 未知
1247 25 20 0
2018-07-11
8.1
普通推荐

改善UI微交互的实用建议

Image title


很棒的UI动画技巧-改善UI微交互的实用建议。


让我们看一些UI动画从好到好的例子。通过这里和那里的一些调整,您可以使用动画提升您的UI模式。


列出的交互表示状态之间的连续性,表示共享元素之间的关系,并引起用户注意他们应注意和采取行动的事物。


为了创建这些动画,我遵循了Material Motion,IBM的动画原理和UX in Motion Manifesto中的指导原则。


所有的交互都是使用InVision Studio的早期版本进行的。您可以在此处下载源文件。



使标签中的内容滑动


Image title

左边的内容淡入淡出。右侧的那个带有标签。


一个好的动画将内容从一个状态转换为另一个状态。

一个伟大的动画通过使内容在状态之间移动来显示转换的连续性。


当您设计像标签或弹出菜单这样的交互时,请尝试将内容的位置相对于打开它的操作。这样,您不仅可以为内容的可见性设置动画,还可以为位置设置动画。哦,当你在它的时候,添加一个滑动手势,将你从一个内容带到另一个内容。



连接卡的共享元素


Image title

左侧的内容打开一个向上滑动的新屏幕。右侧的卡片展开并填满屏幕。


一个好的动画使用左推或向上滑动等过渡来在细节屏幕上显示内容。

一个伟大的动画通过动画共享内容在两个状态之间建立连接。


在不同状态之间制作动画时,查看它们之间是否存在任何共享元素并连接它们。使用InVision Studio时,在创建Motion转换时会自动连接两个链接屏幕之间重复的组件。这使得原型制作动画变得轻而易举。


查看动画宣言,了解您可以应用的动画类型。上面的示例使用了Masking,Transformation,Parenting和Easing原则的组合。



在您的内容中使用级联效果


Image title

左侧的卡片通过滑动和淡入显示。右侧的卡片具有相同的动画,但每张卡片都有短暂的延迟。


好的动画会在材料进入屏幕时改变材质的位置和不透明度。

一个伟大的动画很快就会错开每个组或元素的外观。


要完成瀑布效果,请尝试对每个内容或每组内容应用延迟。保持相同的缓和和持续时间,因此感觉一致。尽管如此,不要对每个小元素进行级联 - 使内容组动画化。保持动画的快速和活泼。谷歌建议开始每个元素不超过20毫秒。查看Material Motion中的编排原理以查看更多示例。



使内容将其他元素排除在外


Image title

左侧的动画在其他内容的顶部动画。右边的动画随着内容的增长将内容推出。


好的动画移动并在上下文中显示元素。

伟大的动画展示了当他们改变时影响周围环境的元素。


使您的内容中的元素了解周围环境。这意味着使内容吸引或排斥其周围的元素。有关更多示例,请查看Material Design中的Aware运动原理。



使菜单显示在上下文中


Image title

左边的菜单从下面飞过。右侧的菜单从创建它的操作扩展而来。


好的动画菜单显示从打开它们的按钮方向出现的内容。

从创造它们的动作中产生了很好的动画菜单,从触摸点开始增长。



使用按钮显示不同的状态


Image title

左侧的按钮显示指示状态的文本。右侧的按钮使用容器显示不同的事件。


良好的交互显示按钮旁边的事件。

很棒的互动使用按钮本身来显示不同的状态。


尝试使用按钮的容器来提供状态的可视反馈。例如,您可以使用微调器或加载动画替换CTA; 或者您可以向显示进度的背景添加动画。解决方案取决于您,我们的想法是使用用户已经与之交互的空间。如果您使用按钮颜色和复制来确认成功状态,则奖励积分。



注意一些重要的事情


Image title

左侧的示例使用颜色和位置使元素脱颖而出。右侧的那个使用微妙的动画来引起用户的注意。


优秀的设计使用颜色,大小和位置来突出用户需要注意或采取的重要行动。

伟大的设计使用动画来引起对重要动作的注意,而不会造成破坏性。


当用户需要对重要事项采取行动时,请尝试设置动画以吸引他们的注意力。从一个微妙的动画开始,增加与动作重要程度相关的强度(大小,颜色和速度的变化)。仅将其用于关键操作 - 您使用此效果的次数越多,其影响就越小......用户获得的烦恼越多。


结论


我希望这些示例可以帮助您在为交互添加动画时做出更好的决策。借助InVision工作室等新动画和原型制作工具,我预测我们很快就会看到创意互动的复兴。我们只需要记住负责任地使用这个新的超级大国。


让我们应用动画来解释状态的变化,引起对必要动作的注意,确定元素之间的关系,并为我们的产品添加一些乐趣和特征。通过遵循这些原则,我们将把动画从好转变为好转。


快乐动画!

cgzlfl

设计是门逻辑学,然后才是美学

5粉丝/3关注

我们仍然有10个小小的设计错误复杂性设计的思考

cgzlfl

cgzlfl

设计是门逻辑学,然后才是美学

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN