超赞的7个UI交互动画技巧建议 | 您所在的位置:网站首页 › 动画ui › 超赞的7个UI交互动画技巧建议 |
让我们一起看一些UI交互动画从良好到优秀的例子。通过对交互动画细节的一些调整,我们可以使用交互动画提升你的UI用户体验。 文章所列出的交互显示了界面状态之间的连续性,表示共享元素之间的关系,并唤起用户的注意力,让他们注意一些他们应该注意和采取行动的事情。 为了创建这些动画,我遵循了Material Motion,IBM的动画原理和UX in Motion Manifesto中的指导原则。 所有的交互都是使用InVision Studio的早期版本进行的。 1.让标签滑动切换平滑过渡
查看动画宣言,了解您可以应用的动画类型。上面的示例使用了Masking,Transformation,Parenting和Easing原则的组合。 3.在您的内容中使用级联效果
让内容中的元素了解周围环境。这意味着内容改变时会吸引或排斥其周围的元素。有关更多示例,请查看 Material Design 中的 Aware 运动原理。 5.使菜单显示在上下文中。左边的内容是菜单从下面飞进来,右边的内容是菜单从创建它的动作中扩展而来。 一个好的动画是菜单从打开它们的按钮方向显示出现的内容。 一个优秀的动画是从创建它们的动作中浮现出来,从触摸点开始展开。6.使用按钮显示不同的状态。 左边的内容是按钮显示指示状态的文本,右边的内容是按钮使用变化的容器来显示不同的事件。 一个好的动画是在按钮附近显示事件。 一个优秀的动画是使用按钮本身来显示不同的状态。尝试使用按钮的容器来提供状态的可视反馈。例如,您可以使用微调器或加载动画替换 CTA; 或者您可以在显示进度的背景中添加动画。解决方案取决于您,我们的想法是使用用户已经与之交互的空间。如果您使用按钮颜色和样式来确认成功状态,则奖励积分。 7.注意一些重要的事情。左边的内容是用颜色和位置使元素脱颖而出,右边的内容是使用微妙的动画来引起用户的注意。 一个好的动画会使用颜色,大小和位置来突出用户需要注意或采取的重要操作。 一个优秀的动画会使用动画来引起用户对重要操作的关注,并且不会对用户造成干扰。当用户需要对重要事项采取行动时,请尝试设置动画来吸引他们的注意力。从一个微妙的动画开始,增加与动作重要程度相关的强度(大小,颜色和速度的变化)。同时仅将其用于关键操作,您使用此效果的次数越多,其影响就越小,并且用户获得的烦恼也会越多。 结论我希望这些示例可以帮助您在为交互添加动画时做出更好的决策。借助InVision工作室等新动画和原型制作工具,我预测我们很快就会看到创意互动的复兴。我们只需要记住负责任地使用这个新的超级大国。 让我们应用动画来解释状态的变化,引起对必要动作的注意,确定元素之间的关系,并为我们的产品添加一些乐趣和特征。通过遵循这些原则,我们将把动画从好转变为好转。 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |