当前位置:首页 >  站长 >  交互设计 >  正文

如何正确使用UI动效?

 2018-04-17 15:11  来源:人人都是产品经理  我来投稿

  小程序创业扶持计划 实现月入10万创业梦

  如何在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 协议

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

责任编辑:西瓜

相关标签
ui设计

相关文章

  • 逗点创意设计:产品UI设计进入数据化智能时代

    随着信息化的不断发展,用户体验度的作用得到了明显的提高,商家也重视产品外观的设计,很多商家没有自己独立的UI专业设计所以需要找专业UI设计公司合作。但是目前国内专业UI设计师的能力水平却参差不齐,普通设计师与优秀的UI设计师还存在着很明显的差异,如何选择专业的UI设计公司尤为重要。

  • 扁平风的手机赛车游戏UI界面是这样设计的

    UI和UX设计师的工作归根到底还是满足用户的需求,解决问题。天马行空的脑洞最终还是要落实到实用的产品上的。即使在游戏当中,UI从来不是为了纯娱乐而设计的。之前,Tubik的设计师为游戏RealMultiplayerRacing设计了其中的插画元素《设计实战!为扁平风的移动端赛车游戏定制插画》,接下来

  • 6个能大幅度提升UI设计效率的Sketch插件

    自从Sketch推出以来,就逐渐取代Photoshop成为了UI设计领域最受人追捧的设计工具,其中的原因除了之前我们介绍的Symbols、组件库以及细化的功能体验之外,还有个非常重要的因素,那就是Sketch的插件社区非常活跃,时不时都会出现一些杀手级的插件,从而帮助你大幅度提升设计效率。在这里,笔

    标签:
    ui设计
  • 你知道按钮设计的7个基本原则吗?

    按钮是UI和交互设计的基本元素,它们是用户交互的时候,和系统进行沟通交流的核心组件,也是图形化界面当中,最早出现,也是最为常见的一种交互对象。在今天的文章当中,我们将会回顾一下按钮设计的7个基本原则,希望它们能够在设计的时候帮到你。

  • 为什么UI设计需要概念动效?

    在UI界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用,什么样的动效更优秀等等,这样的探讨层出不穷。在UI所涉及到的各种动画和动效当中,概念动效是被讨论的最多的话题。充满实验性的概念动效是动效设计最前沿的领域,是开发和实现上最具有挑战性的部分,也是新产品上线之后,用户最容易注意到,

    标签:
    ui设计
xm

热门排行

信息推荐

扫一扫关注最新创业资讯