发布时间：2022-5-24 分类： 行业资讯
如何在UI设计中正确使用UI效果？如何通过行动传递有意的信息？本文将为您提供答案。
在现在UI设计师遍布各地的情况下，除了日常的UI设计功能外，UI设计师必须保持相对较高的竞争力，并且还需要具有一定的动态效果。但是，许多设计人员在掌握动态功能后无法正确使用动态效果。
那么如何在UI设计中正确使用UI效果呢？
在过去几年中，高保真原型制作工具的爆炸性发展为设计师提供了创建详细交互的机会。设计人员花了很多时间学习这些工具，但许多设计师正在使用原型工具。技术细节迷失了方向。
设计师必须退后一步，询问效果的目的是什么？通过使用灵感来传达意图信息，并作为向用户传达信息的更好工具，设计师应避免使用妨碍用户操作体验的夸张效果。
设计人员可以使用动态效果来解决设计问题，例如：进入和退出动态以显示对象之间的连续性和关系，从降低认知成本和改善用户决策开始，有意义的动态可以使用户愉快和高效。
首先，降低认知成本
认知成本是完成任务所需的心理工作。
维基百科说：“沉重的认知负荷会对任务完成产生负面影响。 ”的
当用户在代购源码网站上时，他们会收到大量信息。因此，他们有选择性的关注。 “隧道视觉”意味着它们直接关注于他们正在处理的屏幕区域，因此用户无法在屏幕上看到所有内容。
作为设计师，创建一个易于使用的界面非常重要，可以释放用户的心理努力来完成工作。
设计师如何使用动画来实现这一目标？
如果使用得当，动态效果可以通过有效的用户通信反馈减少用户的混淆。此外，通过释放用户的想法，可以吸引更多重要的事情，例如：页面上的“响应操作”。
二，吸引用户的注意力
NNgroup表示：“使用动作的有效方法是吸引用户的注意力。吸引用户注意力的好处是 - 引导用户注意界面和屏幕上元素之间的关系和水平。” ;
效果不需要直接在用户的视野中完成。 NNgroup的文章解释说：
因为我们的生物学认识到周边的潜在危险，周边视野中的运动可以更快地吸引用户的注意力。但是，用户已经学会了不要注意侧边栏和标题栏的传统意义上的横幅或弹出窗口，因此设计人员必须确保UI和动画不遵循这些模式。设计师可以通过最大限度地减少单次出现的运动量来避免视觉盲点，以及用户认为相关信息所在的动画元素。
第三，视觉层次
设置页面元素加载到屏幕上的顺序可以传达页面的可视层次结构，微妙的动画将向用户显示页面布局和要关注的内容，从而减轻认知负担。
此外，通过对不同元素使用相同的动画，用户很容易理解元素被分组并且可以执行类似的动作，因为人类的头脑总是在寻找创造性的模式。
第四，做出更好的决定
微交互（单个对象的转换）和宏交互（对象之间的转换）的效果可以为用户提供通过系统的上下文连接，并且运动还可以向用户教授新的交互手势。一旦效果完成，用户就可以快速了解信息的组合方式，从而做出更好的决策。
移动性也是可发现的，状态之间的转换可以传达单个对象的功能。例如，菜单图标可以转换为关闭图标，以向用户显示相同的按钮以执行两个操作。
动态效果可以帮助用户构建更好的空间信息心智图。在小屏幕时代，这是至关重要的，用户很容易迷失在移动端的小屏幕迷宫中。但是，动画允许用户通过返回屏幕来学习如何使用该应用程序。
例如，用户直接滑入页面，他们会发现如果他们想要返回主页面，他们可以向左滑动。为了确保视觉可发现性，它应与动态效果相结合。
五，新手入门
动画可以帮助您开始使用新用户。通过在适当的时间向用户呈现正确的内容，设计人员可以进行有效的消息传输，并且渐进式信息传输使用户更容易学习和使用系统。在向用户介绍应用程序的工作方式时，您可以为新内容添加简单的动画，这有助于用户记住重要的事情。
六，制造惊喜
动画是一种让用户惊喜并改善用户体验的好方法。但是，在尝试使用动画制作用户动画之前，设计师应首先满足用户的基本期望，并首先尝试消除体验不佳的基本因素。否则，将没有令人愉快的动画效果。
动画的频率，持续时间和速度也会影响用户对系统的感知，设计人员在创建动画时应考虑这些感知。
为用户增加动力的理想之处在于用户真正需要活跃的地方，并且您的动机不应该干扰用户的行为。
频率
设计师应该考虑用户观看动作的频率。这是第一次，效果看起来很新，可以让用户感到惊讶。然而，稍后多次出现可能变得烦人。通常可以在用户测试和反馈中收集类似的反馈。
八，持续时间
设计师应该知道用户在放弃之前愿意等待动画或其他操作的时间。
NN小组发现任何100毫秒（1秒=1000毫秒）的内容对用户来说都是即时的。理解动态需要一些时间，范围从150ms到350ms。
根据Val Head的说法：一般运动持续时间指示器应在200ms到500ms之间运行。因为这是一个指导原则，我们的目标是使动态外观自然。用户同意他们似乎熟悉的内容，因此最终取决于设计师的最佳判断。当涉及运动运行多长时间时，速度太快，用户可能会错过它，速度太慢，并且用户可能认为系统太慢。
九，速度
整体运动的速度将影响用户的感知;较慢的动作会使用户感觉整个系统也很慢。但是，动作可用于隐藏负载延迟并增加用户参与度。
加载动态允许用户采取视觉反馈，因此用户可以感受到更短的等待时间，并且运动中的周期数也可以提高感知速度。 Facebook有一个骨架内容加载动画，这是传统加载的优雅解决方案。
Viget的一项研究发现，人们等待比一般动态更长的品牌负荷效应。
十，可用性
设计师应该考虑动画的可用性。对于患有前庭功能障碍的人（一种导致太快的物体眩晕的情况），运动会引起头晕，头晕或恶心。这是Apple iOS7可以关闭动画过渡和移动背景的原因之一。
视差滚动是一种背景比前景移动得更快的方法，是运动的一个例子，如果使用不当会导致恶心。为了解决这个问题，设计师应该考虑不允许动画自动播放。如果用户启动效果，他们将更加准备，不会引起不适。
设计师应牢记以下几点，以确保最佳输出：
目标：与用户通信的动画是什么？焦点：用户目前的焦点在哪里–用户在哪里看？
运动力学：
频率：这个动画多久播放一次？持续时间：这个动画应该播放多长时间？速度：这个动画应该有多快？触发器：动画如何触发？通过用户操作？还是自动的？辅助功能：如果用户关闭动画，用户体验将如何受到影响？
原作者：Naema Baskanderi
原始地址：https://uxdesign.cc/ui-animation-please-use-responsibly-e707dbdb12d5
本文由@小贱剑发表，未经作者许可不得复制
该地图来自Pexels，基于CC0协议
