动效设计及其对用户体验的影响

2019年10月29日


在过去的日子里,动效设计受到美学的限制。但是,在当今世界中,动效设计是使用户与品牌数字产品的交互更加简化和直观的关键要素。公司旨在通过其产品用户体验提供更好的叙述,从而使动效设计成为现代用户界面设计的重要组成部分。


-1-


“动效讲故事。应用中的所有内容都是一个序列,动效是您的指南。对于单击的每个按钮和屏幕切换,都会有一个故事。” 苹果人机界面团队的前负责人Craig Dehner说。设计师需要从设计过程的一开始就考虑互动中的此类时刻。


动效在增强用户体验方面起着至关重要的作用,并为视觉叙事添加了强大的选项。


动效设计


动效设计有助于创建易于使用,令人愉悦的用户界面。动画在增强用户体验方面起着至关重要的作用,并为视觉叙事添加了强大的选项。


但是,将动效和过渡的控制作为交互设计的一部分逐渐增加了用户界面的复杂性,并需要更多的设计者时间。


动效设计的正确实施有助于品牌获得更好的高质量用户体验。利用动效设计来满足用户需求,并改善用户交互的各个方面。动效设计演示了应用程序UI元素之间的关系,从而使导航更加轻松。设计师可以使用动画图标,插图和徽标与用户进行交流。


-2-

过渡模式


简单性和一致性是设计可导航过渡的关键。

让我们从专注于导航过渡模式的设计开始,这为动效设计提供了坚实的基础。简单性和一致性是设计可导航过渡的关键。UI设计人员和开发人员可以在实现过渡时采用两种类型的运动模式。


基于容器的过渡

没有容器的过渡

基于容器的过渡


如果应用程序的用户界面由按钮,卡片或列表组成,则过渡设计基于对容器进行动画处理。

用户体验设计


如果应用程序的用户界面由按钮,卡片或列表组成,则过渡设计基于对容器进行动画处理。通常,由于容器分隔符的可见边缘,很容易发现容器。但是,有时在过渡生效之前容器是不可见的。也就是说,直到发生过渡之前,没有可见的分隔线或容器。


这是一个基于容器的过渡的示例:Material Design的减缓减速使缩放动画以峰值速度开始,然后逐渐减慢直到变为静态。最后,屏幕显示只是淡出,没有缩放比例。因此,来自动画容器的出口要比入口更微妙,为此,过渡会将用户的注意力集中在新内容上。


没有容器的过渡


用户体验


对于其过渡不是基于容器的屏幕(例如,当用户点击屏幕底部的图标导航到新的目标页面时),过渡遵循两步模式:初始显示淡出,而下一显示淡入。


使用Material的减速缓动,新的显示也可以随着淡入淡出而微妙地放大。“缩放”仅在过渡开始时适用,以吸引人们注意取代旧内容的新内容。


-3-


图形提示


动效设计通过使用动画与用户进行通信,以向用户传达重点,下一步做什么或页面上最重要的内容,从而为应用程序或Web体验的用户提供指导。


动效设计通过使用动画与用户进行通信,以向用户传达重点,下一步做什么或页面上最重要的内容,从而为应用程序或Web体验的用户提供指导。考虑使用运动来确认用户输入并帮助用户导航信息而不会失去方向。动效使导航交互看起来更自然,更抽象。Motion在保持上下文的同时将生命带入了用户界面。


流畅,响应性运动


用户希望用户界面流畅,响应迅速并已开始要求它们。在Web上,用户通常在不确定其功能时将鼠标悬停在该元素上。良好的用户界面可以通过向用户提供即时反馈(可能是动画形式)来奖励这种习惯。为了获得不间断的浏览体验,请立即回答用户可能遇到的任何问题。在响应触摸的设备上,用户界面设计通过允许用户以令人愉悦的方式进行深层连接而变得活跃起来。

 

动效设计


-4-


完美过渡


当一项功能过渡到另一项功能时,您可以使用动效设计来娱乐或分散用户的注意力。


动效设计使各种元素之间的流程变得通俗易懂,使用户能够导航和执行用户友好的交互。另外,当一项功能过渡到另一项功能时,您可以使用动效设计来娱乐或分散用户的注意力。例如,动画在页面加载时吸引了用户的注意力,从而产生了速度的幻觉,并使用户更加耐心地等待查看其内容。


激动的情绪


公司数字产品的动效设计可以增强您品牌的形象。与静态视觉效果相比,添加动效设计来表达用户界面的角色会在用户中引起更大的情感反应。有效的动作设计强调用户界面的个性,而不是视觉识别,因此,对用户的行为和情感有很大的影响。就像人们的肢体语言和移动方式显示出自己的个性一样,用户界面中的运动也是如此。Motion有助于确保数字互动以及您的品牌在客户中引起共鸣。


动效设计和UI开发已经变得更加复杂,但是节省时间的设计工具提供了重要的效率。


Sketch的SQUID UI Flow模板 -此工具可帮助许多UX专业人士在短短几分钟内创建优雅的用户流。


Iconic —世界上第一个应用程序图标纲要,提供了Sketch,质量清单和验证工具的高级模板,因此设计师可以快速完善其设计资产。


动效设计


-5-


展示互动


使用动态图形创建独特的,高转换率的视频,演示用户与品牌数字用户界面的交互。


您可以使用动态图形创建独特的高转换视频,以演示用户与品牌数字用户界面的交互。动画视频提供了到目前为止我所介绍的动效设计的所有优点,并可以帮助您更快地发展业务。您可以创建使用几种不同类型的动画的动画视频,包括以下内容:


动态图形

卡通动画

虚拟现实动画

数字定格动画

2D角色动画

设计竞赛市场


查看设计竞赛市场,找到一个为本文描述的问题提供解决方案的市场。在这些网站上,您可以找到来自许多不同设计师的多种设计。另外,您不必为它们付出很多。如果要创建自己的设计,请确保它们在竞争中脱颖而出,从而在设计竞赛市场中脱颖而出。


结论


动效设计已经成为用户界面的关键元素,它可以确定解决方案是否成功。


精心设计的动效设计解决方案使用户倍感欣慰,有时也会感到高兴。动效设计已经成为用户界面的关键元素,它可以确定解决方案是否成功。运动设计是传达与用户紧密相关的连贯叙事的创新方式。另外,运动是用户友好的用户界面设计的组成部分。确保您的动作设计和动画具有针对性且足够细微,可以为用户提供令人敬畏的体验。

关联阅读:

大邦创新官网主页