衡量动效是否合格的核心因素

2021-06-10 分类：网站建设

在网站建设、网页设计、APP中我们会经常用到动动态效果设计，一个功能完备的动效不仅要足够微妙有趣，而且应当清晰且具有合乎逻辑的目的。动效的存在不仅降低了用户的认知负荷，沟通不同的环节，建立更为有效的信息和交互流程。但是更为重要的是，真正优秀的动效能让界面变得栩栩如生。

通过让元素在形态上进行叠加、分割、延伸、形变，动效让界面给人以更为真实、更加“物理”的质感。流畅顺滑的动效帮用户联通起上下文，阐释界面元素之间的关系，强化UI的层次感，消解环节与环节之间的冲突，缓解加载和过渡中的等待。

接下来，我们分析和总结一下成功的动效的六个基本特征：

1、响应

视觉反馈在界面中的作用无疑是重要的。对于用户而言，想要确认信息的欲望是一种生物本能，在现实生活中，按钮、控制面板等对象会对我们的操作给予反馈，那么用户面对界面中类似的东西的时候，会有相似的期望。

所以，UI应当精准而快速的针对用户的交互作出响应，只有这样用户才能将他们的操作、交互和控件的变化、效果联系到一起，形成回路。当他们清楚的知道什么样的操作会带来什么样的反馈，他们会觉得非常爽的。

深圳网页设计

2、关联

动效要能将新创建的界面和触发它们的操作或者控件关联到一起。产生关联的逻辑关系能帮用户理解界面中的变化是如何产生的。

下面我们看看两个菜单动效的设计案例。

第一个案例中，点击菜单按钮之后，菜单从远离按钮的地方伸展出来，这样用户的输入和触发的结果在物理距离上被割裂开了。

深圳网页设计

第二个案例中，菜单是从按钮旁边开始伸展开来的，距离上的关系让用用户清晰的知道是他们的点击触发了菜单出现的结果。

深圳网页设计

另外一个案例则是音乐播放器的按钮动效设计。“播放”和“暂停”可能是最常见的按钮设计，而这个典型的Material Design 风格的按钮动效设计中，点击“播放”按钮，动效过渡，“暂停”按钮出现，色彩和动效让两者之间呈现出因果关联，流畅而非间断。

深圳网页设计

平滑的过渡不仅让两者的功能呈现了出来，而且强化了两者的逻辑关系。

3、自然

好的动效设计应当尽量避免突兀的转变。动效中的每一个动作都应当从现实世界中获取灵感。最简单的一点，现实世界中物体的加速和减速都会受到重量、惯性和摩擦力的影响，类似的，在动效设计中，瞬间的启动和停止是不合规律的。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容