恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI界面中的动效使用原则
0.0°
2017-06-30 原创文章 经验/观点 举报 1935 8 8 0

平时工作中对于动效的分析和笔记总结,个人观点,希望对大家有所帮助,有不足之处还望多提建议



在一些移动端应用和其他产品中,相比于其他视觉手法,通过动效来传递信息,更能在短时间内抓住用户的注意力,从而使得用户更有兴趣去继续使用、或者等待下一步的操作,让用户明白页面中的元素是如何交互存在的,让用户在陌生情况下更容易、轻松的去熟悉、了解产品。动效本身还让产品更加充满活力。


下面我们对动效在UI设计界面场景中的应用以及一些基本原则的分析



1、减少认知负担

认知负担是用户去认识、了解一个陌生事物所耗费的精力,尤其是用户对于一件较为陌生的事物时,需要花费很长的时间去理解,而且往往不一定会很好的理解,那么,设计出易用、便于用户去快速理解的页面是至关重要的。优秀的动效能够与用户建立一种反馈,让用户能够更轻松使用的同时,与产品形成一个很好的互动。

Image title


页面元素以动画的形式在屏幕上有序出现的时候,形成的视觉层级,在动画中就能够显示出页面布局以及优先级,并告诉用户此时应该关注哪里,同时以此来解决认知负担。



2、提示性

通过动效,我们可以为一些新用户,在不了解产品背景的情况下,通过动效中的一些隐喻方式呈现,在合适的时间展示合适的内容,更为清楚的展示应用是如何运行的,同时,用户会很清楚的知道下一步的操作是怎样的。

Image title


通过页面内容的渐进式呈现,告诉用户现在所展示的内容,以及将要展现的内容,通过这种渐进式的呈现方式增肌产品的易用性。



3、个性化

任何动效都应该追求个性化,优秀的动效让用户感受到流畅的操作和愉悦的体验。通过动效,让产品更具有鲜明的特性。在某种程度上,动效还应该具有一定的预知感,以免让用户产行突兀感,用个性化的动效来稳固产品的整体体验。

Image title

在整体的动效中,都保持着一种流畅性和愉悦性,同时在动效中增加品牌宣传,为用户对产品的品牌更进一步的了解。



4、趣味性

后台加载、缓存信息对于许多产品来说是不可避免的一部分,在这个情境下,我们虽然不能解决加载的问题,但是我们可以让它更有趣。

如果一款应用能够在加载的时候给用户看一些有趣的东西,那么无疑会让用户对产品产生一定的友好感,同时,也能够降低对于时间的感知,在这种情境之下,自然会降低甚至忽略加载带来的感觉。

Image title

Image title


应用中最常见的动效就是下拉刷新,当下拉的时候,这个动效会随之出现,后台会加载、更新相应的数据,那么就要抓住这个时间,营造良好的体验。



系统状态

Image title

Image title


对于一些系统中的控件元素,在切换状态时自然会引起用户的注意力,通过动效的方式方切换效果不再死板,会给用户带来颠覆性的体验。



5、指向性

好的动效设计,可以让用户清晰的知道页面之间的联系,了解各个元素的物理状态,同时知道元素当前所处的环境。那么,在设计动效时就要有一定的指向性,通过页面中的进进出出,构建一种“物理空间感”,动效知道用户下一步操作,给予用户清晰的路径。

Image title


自从拟物效果逐渐被扁平化风格取代之后,UI元素的表现形式更加多元化,无论是拉伸、变形或者滑动等等,需要精心调制元素的运动效果,让整体的效果流畅润滑。



6、视觉反馈

对于用于的交互行为,在设计动效时应该及时给予反馈而且直观易懂,但同时又不能太过突兀,反馈应该和用户的交互行为紧密联系,打造近乎无缝式的交互体验。

视觉反馈对于任何UI界面都是至关重要的,视觉反馈可以用户得到一种对产品的“控制感”,让用户切身感受到一切是在掌握之中的,而这种掌握意味着用户能够明白和理解当前的内容和状态。

Image title


界面中的元素,例如按钮和控件,应该看起来是可以点击的,即便他们实际上是虚拟的,在屏幕背后。

但是在我们的现实生活中,按钮(例如开关)和控件,当我们交互触发的时候会产生响应,人们期望在界面中也能够得到类似的反馈。



7、创造愉悦感

动效可以为产品带来趣味性同时增强用户体验,需要注意的是,在运用动画之前,要确保软件的使用流畅性和满足用户的基本需求,动效的频率、持续时间和速度等因素都会影响用户的体验。

Image title


下面大概列举关键的几个因素:

     1、频率

          动画在应用中出现的频率是需要注意的,用户第一次看到动效时会有新鲜感,但在不需要的情境下或者多次出现就会变得很烦躁。

     2、持续时间

          在做动效设计时,必须意识到用户愿意花费多长时间来等待一个动效完成,而不会因为时间过长而放弃当前任务。根据一般的动效准则,100ms的时间对于用户来说称得上一瞬间,200ms到500ms,用户能够识别哪些有趣的动效。动效太快很容易让用户没有感觉到或者错过,而太慢会让整个应用感觉运行缓慢。

     3、速度

          动效的速度会影响用户感知,加载动效通过视觉形式分散用户的注意力,从而让用户感知到较短的等待时间。动效循环的周期数同样等影响用户感知。



8、功能连接

通过动效可以很好的解释界面元素之间的关系,页面与页面之间的层级划分,并且说明他们是怎么进行完美交互的。

Image title




9、情感性

优秀的动效能够唤起用户的情绪,而这就需要流畅、愉悦,同时带有一定的情感在动效之中,让用户感到一切都是那么自然。

Image title




总结

上面是自己平时总结的一些知识点,比较偏向于理论化,主要是一些原则上需要注意的地方,但是实际情况中,一个好的动效需要同时满足以上的好几条原则。

总之,好的动效是为产品的用户体验而服务的,在设计动效时需要注意界面的交互逻辑关系、流畅性,才能让动效在产品设计中发挥真正的作用。








更新:2017-06-30

收藏

8人已收藏

绽放0525

闪回一幕一幕,记忆匆匆的过往

  • 9

    作品

  • 65

    粉丝

  • 81

    关注

  • 生活家 - APP视觉设计
  • FINER家居网页设计
  • 向明天起航!
  • 垂直电商&网页界面展示

    猜你喜欢

      2017-06-30 原创文章 经验/观点 举报 1935 8 8 0

      UI界面中的动效使用原则

      0.0°

      你确定要举报UI界面中的动效使用原则

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年06月30日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录