界面交互动效核心知识的分类与总结

这篇文章是基于我自己的理解对界面交互动进行了分类整理和总结。


这篇文章是基于我自己的理解对界面交互动进行了分类整理和总结。

界面交互动效核心知识的分类与总结

什么是界面交互动效?

界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的过程中,表现清晰的层级关系,自然的引出与结束。交互动效有着承上启下的重要作用。

界面交互动效是用来干什么的?

  • 让用户清晰地感受到当前所处场景和层级关系。
  • 多种UI元素之间的相互转换。
  • 给用户制造惊喜感使用户愉悦。

界面交互动效五大注意点

  1. 避免动效过于花哨、酷炫、标新立意
  2. 在效率型应用中,过度、无意义的动画只会阻塞任务流程
  3. 动作动效不超过1秒
  4. 用户专注内容时,不要用吸引注意的动画去打扰
  5. 出现频率高的操作动效,避免用户反感,延迟操作时间

如何设置缓动曲线与时间让动效更加自然,可以看下面的一些总结

  1. linear曲线(匀速运动)除了一些特殊场景如加载、很少被使用。
  2. easeIn(先缓后快)使用场景较少,主要在掉落、中使用。
  3. easeInOut(头尾缓、中间快)通常在轮转切换的动画中使用,这类动画的触发对象与运动对象并不是同一个元素。
  4. easeOut(先快后缓)最常见的效果,其触发对象与运动对象往往是同一个。主要用在展开、收起、出现、移动等动画中。当不知道用哪个缓动曲线时,用这个一般不会错。
  5. 曲度主要表现运动过程的力的大小,曲度越大,启示力或阻力越大。
  6. 回弹则表现的是运动的剧烈程度及对象的质地。
  7. 运动时间一般都控制在0.3s-0.8s之间,过长的时间会让人感觉拖沓,不自然。

界面交互动效核心知识的分类与总结

界面交互动效如果以动效的表现属性来分可以分为两种:

  • 第一种:为衔接类型动画。主要针对不同界面直接的衔接,为带来更流畅的操作观感所做的设计,弥补两个界面直接的差异所带来的用户感知落差。
  • 第二种为特效类动画。特效的核心目的是为了吸引用户的注意力,提高信息敏感度,在游戏界面设计当中使用更为广泛,能够带来更加绚丽的动态画面。

界面交互动效如果以界面的维度来说可以分为以下两类:

第一类:界面内的交互动效

在一个界面内的交互动效特别多,例如点击加号出现下拉菜单,出现浮层动画提示,点击舵式导航出现选择类型和遮罩,点击按钮出现评论点赞,当前页面的展开收起,加载等等。如下图所示:

界面交互动效核心知识的分类与总结

界面交互动效核心知识的分类与总结

界面交互动效核心知识的分类与总结

界面交互动效核心知识的分类与总结

界面交互动效核心知识的分类与总结

界面交互动效核心知识的分类与总结

界面交互动效核心知识的分类与总结

第二类:界面间的交互动效

几个界面之间的的交互动效通常是平缓过渡到下一页。常见的有以下几类:

1.硬切到下一页

界面交互动效核心知识的分类与总结

2.下一页从右往左推入(上一页从左往右推出)

界面交互动效核心知识的分类与总结

3.下一页从下往上弹出

界面交互动效核心知识的分类与总结

4.上一页的元素过渡到下一页

界面交互动效核心知识的分类与总结

看完上述的阐述,接下来是最后的两个建议点。

  1. 动效创意方面的创新要依据用户的认知模型。单纯很炫很酷的动效如果脱离了用户的认知模型,那么这样的交互动效对于整个产品来说是有害的。
  2. 做界面交互动效的目的是为了更好地落地。如何更好地高效地表现我们设计的动效。同时使得我们制作的动效可以很好的运用到实现落地中,这是很重要的,不然所有的一切都是海市蜃楼。

 

作者:UX,华为ITUX交互组组长  微信公众号:UEDC

本文由 @UX 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22623/

(0)
CatherineCatherine
上一篇 2017-05-02 09:50
下一篇 2017-05-02 12:12

相关推荐

  • 在设计注册/登录界面时要注意的常见问题

    当用户完成注册之后,可以选择性地提供额外的信息,而这些信息可能会给给用户带来更加定制化的用户体验 。为了安全起见,绝大多数的网站还是提供了邮箱验证甚至电话验证的环节,甚至提供备用安全邮箱的验证机制。

    2017-05-29
  • 用户体验是一门玄学秘籍

    Part 01 - 用户体验和用户体验设计关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。1.1 什么是用户体验?用户体验的定义有很多种,我比较倾向的解释是:“用户体验是人对于使用一个产品、系统、...

    2018-02-22
  • 动起来才好玩——创意交互设计景观

    设计是靠亮点征服人,吸引眼球,大部分方案构思雷同,建成后风格水平都差不多,如何让场地更加吸引人而脱颖而出,这就需要在新、奇上下功夫。电子梦幻天幕世贸天阶最著名的“全北京向上看”的“超豪华LED天幕”,这座天幕将为整条商业街带来富于梦幻色彩和时尚品位的声光组合,成为一座吸引人潮的世界级奇观。建成之后,人们在这里可以欣赏缤纷悦目的日夜景观,感受现代科技带来的富于梦幻色彩和时尚品位的声光艺术。而且游客可以把想说的话发送短信到平台号码,天幕上就...

    2018-02-03
  • 在设计登录注册之前,注意这10个要点能迅速提高用户体验

    有盆友问起注册/登录的体验,结合网上各路高人的分享,于是我总结了一些自己对如何在注册和登录时提高用户体验的一些发现或看法,若观点有不对的地方,望大家批评指正,欢迎大家的分享与交流~

    2017-05-26
  • 用户体验与可用性的差别有多大?

    一个好的用户体验究竟是什么?它与可用性易用性的差别有多大?这是从事这份工作后没有停止思考过的一个问题,因为对用户体验不同的解释会导致不同的测量范围。哪些用户体验信息(从我们的定位用户处直接或者间接可测量的数据)是对你们的组织有用的?起到什么样的作用?

    2017-05-13
  • 在交互设计中,需要注意的四个小tips

    在移动互联网时代发展的今天,场景思维对于用户体验设计的影响不言而喻。大道理在此不多说,大家都懂。在这里,笔者和大家分享一个近期手上的设计task中总结出来的几个交互设计的小tips。

    2017-05-18
  • 我总结的一套表单设计指南

    作者:jakd007(UXRen会员)   表单在移动端设计中最常见的界面,每个手机系统及应用对表单都有不同的设计,本文目标是总结出一套表单设计指南,以提高日后工作效率。 表单在移动端设计中最常见的界面,每个手机系…

    交互专题 2017-08-07
  • 【交互设计】北京中技华软科技服务有限公司内部主题分享会第七期

    北京中技华软科技服务有限公司内部主题分享会第七期主题:交互设计时间:2018年4月23日主讲人:高旭2018年4月23日上午,北京中技华软科技服务有限公司进行了第七期内部主题分享会——交互设计。交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。主讲人高旭分别从交互设计的起源、原则...

    2018-04-24
  • 在APP中,Tab Bar 是固定好还是不固定好?

    本文作者将来着重谈谈APP中的Tab Bar 是固定好还是不固定好,你觉得呢?

    2017-05-01
  • 50个国外设计机构网站设计欣赏

    Web设计灵感总是帮助我们走在新趋势, 设计结构、颜色和总体设计过程。有很多灵感的网站列出的主题就是我想要这一个是不同的。所以在这个今天的帖子我收集了50个国外设计机构网站设计欣赏,为你找设计的灵感。

    2017-06-03