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

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

文章目录[隐藏]

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

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

一.  什么是界面交互动效?

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

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

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

三. 界面交互动效五大注意点

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

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

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

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

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

第一种:为衔接类型动画

主要针对不同界面直接的衔接,为带来更流畅的操作观感所做的设计,弥补两个界面直接的差异所带来的用户感知落差。

第二种:特效类动画

特效的核心目的是为了吸引用户的注意力,提高信息敏感度,在游戏界面设计当中使用更为广泛,能够带来更加绚丽的动态画面。

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

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

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

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

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

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

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

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

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

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

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

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

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

△ 硬切到下一页

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

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

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

△  下一页从下往上弹出

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

△  上一页的元素过渡到下一页

总结:

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

欢迎关注作者的微信公众号:「UEDC」

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

「超实用新手指南!零基础如何学习动效」

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

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34212/

(0)
震天下震天下
上一篇 2017-09-11
下一篇 2017-09-13

相关推荐

  • 交互设计师高级:兴趣、场景推荐核心算法之‘多维空间的两个向量夹角的余弦公式’

    不知道大家有没有关注过你手里的APP,那么它在不停升级中变得越来越懂你,越来越知道你的喜好,举例先:网易云音乐的推荐、今日头条的新闻推荐,他们都是你使用越长时间使用频率越多对你兴趣越准确的判断从而推荐给…

    交互设计 2015-08-31
  • 关于用户体验&交互设计的视频分享【日常思考0001】

    (。・∀・)ノ゙嗨这里是Chiki的深夜抽风小记录,做个日常思(bing)考(zheng)收集。公众号取名“Design for What"是希望以后自己做设计的时候可以多思考设计是为什么Find your passion,and let it kill you那么开始今天的开场首秀!今晚本想磕磕榛子垫垫肚子就……就开始做事来着,结果不小心打开平板……看了会视频(明明是好久……都是借口😭)不过视频不错分享给大家👇视频在这:截了有点不一样...

    2018-04-14
  • Sketchbox:会画图就能使用的AR建模应用

    在目前的情况下设计虚拟现实和增强现实产品并不容易,仍存在挑战。Unity和Epic Games可以说是现在比较常用的编辑应用,帮助用户以非常精确的方式去编辑虚拟现实内容。但需要指出,这两者都是为已掌握相关技术的人群所提供的技术项目,虽然没必要会写代码,但是了解一些简单的原理和技术能达到的界限也还是需要的,从这方面看,设计VR或AR产品的门槛相对还是比较高的。最近,Y Combinator的最新一期项目中的Sketchbox可以帮助设计师...

    2018-03-23
  • 【曝光台】用户体验不佳 “海带宝”屡遭投诉

    导读凭借业内领先的电子物流平台和遍布全球的优质物流资源,海带宝为全球跨境电商、代购平台提供一站式综合进口物流解决方案。然而,据“电子商务消费纠纷调解平台”(微信ID:DSWQ315)接到的用户投诉维权案例统计,“海带宝”存在提现等待队伍长、转运速度慢、用户体验不佳等问题。电子商务研究中心(100EC.CN)了解到,深圳海带宝网络科技股份有限公司成立于2013年8月,是一家基于互联网智能化物流解决方案的高新技术企业,国内现有员工300余名...

    2018-04-26
  • 交互设计与空间展示的深度结合 | 通过交互科技扩展展览空间的体验维度

    本文分为两个主部分,第一部分为如何理解,通过交互科技扩展展览空间的体验维度,第二部分将结合若干具体案例,为大家分享怎样运用交互科技,扩展展览空间的体验维度。大理石是大型彩色模压形状,能够和人通过声音…

    2017-08-01
  • 设计师的知识管理

    作者: shareboy 人们每谈到设计很自然的就会联想到创意、想法。作为设计师,好像我们的大脑里就理所应当地充满了各种创意,然而这些创意是本来就存在于大脑里的吗?显然不是。 有人说创意来自冥想,我不否认有些天…

    2015-04-22
  • 小优姐姐,大家都在说的交互设计,它日常工作内容究竟是啥?

    封面设计:vivien bertin每次亲朋好友来问我,做什么工作的啊?自豪的回答:交互设计然后然后就没有然后了。。。朋友每次看完俺的文章都会说很好啊还会给我打赏但是最后的最后会补充一句没看懂,太高深以及最近被一波接地气的央视海报刷屏大家纷纷表示看到了希望先来两张海报让大家感受一下连一向以严肃正经形象示人的央视好像被触发了某个开关变得越来越不正经亲切可爱咱们交互设计师是不是也要走下神坛来说说交互设计师每天那点事9:00查看邮件确认是否有...

    2018-01-31
  • Google如何从两方面正确简化产品?

    来源:优设网 作者:王笑Nothing编译   很多设计师同学为了适应简约的潮流,在简化产品方面绞尽脑汁,但简化不是两个不要:这个不要,那个也不要,简化是一个细心活。今天教同学们简化双板斧:重点是什么,何时简…

    2014-09-21
  • 如何让头脑风暴更有效率

    头脑风暴法是广泛用于团队的一个产生想法和解决问题的方法。然而,许多头脑风暴活动是有不完美的,最终并不能帮助激发思想上的创新。众所周知,传统的头脑风暴,团体在一起,把想法一个接一个的表达出来,通常这是…

    2014-11-10
  • 交互设计的3大要素:用户、目标、行为

    交互的三要素:用户、目标、行为 讲个故事,小鹏是个销售员,下午出去拜访客户,完事后发现已经六点多了,非常饿,小鹏想回家自己做饭吃,但是实在是太饿了,回家又要做好久的地铁,还不如就在附近找家小饭馆吃了呢…

    2016-05-08