在UI设计中正确地使用UI动效

来源：网站建设行业资讯网
添加时间：2021-12-16

如何在UI设计中正确地使用UI动效呢？又该怎样通过动效来传递意图信息呢？
在而今UI设计师满地都是的情况下，UI设计师除了日常的UI设计能力之外，要保持比较高的竞争力，还需要具备一定的动效能力。但是很多设计师在掌握了动效能力后，并没有能够很恰当地去使用动效。
那么怎样在UI设计中正确地使用UI动效呢？
在过去几年的时间里，高保真原型工具的爆炸式发展，给了设计师们一个创造详细交互动效的机会，设计师们花了很多时间去学习这些工具，然而很多设计师在原型工具的技术细节上迷失了方向。
设计师们必须后退一步，问一下动效的目的是什么？通过动效来传递意图信息，动效用来作为更好的向用户传递信息的工具，设计者应该避免使用那些妨碍用户操作体验的浮夸动效。
设计师可以利用动效来解决设计问题，比如：通过进入和退出动效来显示对象之间的连续性和关系，从减少认知成本到改进用户决策操作方面入手，有意义的动效可以让用户愉悦和高效。
一、减少认知成本
认知成本是完成一项任务所需的脑力劳动。
维基百科说：“沉重的认知负荷会对任务完成产生负面影响。”
当用户在网站上时，他们会收到大量的信息。因此，他们有选择性的注意力。“隧道视野”意思是他们直接专注于他们正在进行的屏幕区域，因此，用户不会看到屏幕上的所有内容。
作为设计人员，创建易于使用的界面非常重要，这释放了用户完成任务的精神努力。
设计师如何用动画来达到这个目的？
动效，当使用好时，通过有效的用户沟通反馈能减少用户的困惑。另外，通过释放用户的思想，注意力可以被吸引到更重要的事情上，比如：页面的“响应动作”。
二、吸引用户的注意力
NNgroup说：“使用动效的一个有效方法是吸引用户的注意力，吸引用户注意力的好处是——引导用户关注屏幕上的界面和元素之间的层次和关系。”
动效不需要直接在用户的视野中进行。NNgroup的文章解释说：
由于我们的生物学认识到外围的潜在危险，外围视图中的移动可以更快地吸引用户的注意力。然而，用户已经学会不去注意那些传统意义上的侧边栏和标题栏的横幅或弹出框，因此设计师必须确保UI和动画不遵循这些模式。设计师可以通过最大限度地减少单次发生的运动量，以及位于用户认为相关信息所在位置的动画元素，来避免视觉盲点。
三、可视化层次结构
设置页面元素加载到屏幕上的顺序可以传递页面的视觉层次结构，使用微妙的动画将向用户显示页面布局以及关注哪些内容，从而减少认知负担。
另外，通过对不同元素使用相同的动画，用户很容易理解元素被分组并且可以执行类似的动作，因为人类的头脑总是在寻找创造性的模式。
四、做出更好的决定
微交互（单个对象的转换）和宏观交互（对象之间的转换）中的动效可以通过系统为用户提供上下文之间的联系，动效还可以教会用户新的交互手势。动效完成后，用户可以快速了解信息如何组合在一起，从而做出更好的决策。
动效还有可以发现性，状态之间的转换可以传达单个对象的功能。例如：菜单图标可以转换为关闭图标以向用户显示同一按钮可以完成两个操作。
动效可帮助用户构建更好的空间信息心智地图，在小屏幕的时代，这是至关重要的，用户可以很容易地迷失在移动端小屏幕的迷宫中。但是，动效可以让用户通过返回屏幕间的步骤，来学习如何使用应用程序。
例如：用户通过右滑动进入到一个页面中，他们会发现如果想要回到主页面，他们可以向左滑动。为了确保视觉的可发现性，应结合动效。
五、新手入门
动画可以帮助创建新用户的上手入门，通过在正确的时间向用户展示正确的东西，设计师能够有一个高效的信息传递，渐进地信息传递使系统更容易被用户学习和使用。在向用户介绍应用程序的工作方式的同时，可以在新内容中加入轻松的动画，这有利于用户记住重要的事情。
六、制造惊喜
动画是给用户带来惊喜和增强用户体验的绝佳方式。但是，在尝试用动画取悦用户之前，设计师应该先满足用户的基本期望，并首先尝试消除体验不好的基本因素。否则，不会有令人愉快的动画效果。
动画的频率、持续时间和速度也会影响用户对系统的感知，这是设计师在创建动画时应考虑的。
以上内容由深圳网站建设，深圳网站设计，深圳网站建设公司，深圳网站制作，深圳网页设计，深圳网页制作，深圳营销型网站建设，（/）整理编辑。