界面交互动效的核心知识

作者: ee6bac0a08be | 来源:发表于2017-04-09 17:01 被阅读145次

前言:这篇文章是基于我自己的理解对界面交互动进行了分类整理和总结。这篇文章的作用是为以后讲解用keynote,flinto,protopie等软件如何做高保证交互的demo做的热身工作。

什么是界面交互动效?

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

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

1.让用户清晰地感受到当前所处场景和层级关系。

2.多种UI元素之间的相互转换。

3. 给用户制造惊喜感使用户愉悦。

界面交互动效五大注意点

1.避免动效过于花哨、酷炫、标新立意

2.在效率型应用中,过度、无意义的动画只会阻塞任务流程

3.动作动效不超过1秒

4.用户专注内容时,不要用吸引注意的动画去打扰

5.出现频率高的操作动效,避免用户反感,延迟操作时间

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

1.linear曲线(匀速运动)除了一些特殊场景如加载、很少被使用。

2.easeIn(先缓后快)使用场景较少,主要在掉落、中使用。

3.easeInOut(头尾缓、中间快)通常在轮转切换的动画中使用,这类动画的触发对象与运动对象并不是同一个元素。

4.easeOut(先快后缓)最常见的效果,其触发对象与运动对象往往是同一个。主要用在展开、收起、出现、移动等动画中。当不知道用哪个缓动曲线时,用这个一般不会错。

5.曲度主要表现运动过程的力的大小,曲度越大,启示力或阻力越大。

6.回弹则表现的是运动的剧烈程度及对象的质地。

7.运动时间一般都控制在0.3s-0.8s之间,过长的时间会让人感觉拖沓,不自然。


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

1.界面内的交互动效

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

点击更多按钮出现下拉菜单 出现底部浮层 出现浮层动画

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

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

1.硬切到下一页

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

3.下一页从下往上弹出

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

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

1.动效创意方面的创新要依据用户的认知模型。单纯很炫很酷的动效如果脱离了用户的认知模型,那么这样的交互动效对于整个产品来说是有害的。

2.做界面交互动效的目的是为了更好地落地。如何更好地高效地表现我们设计的动效。同时使得我们制作的动效可以很好的运用到实现落地中,这是很重要的,不然所有的一切都是海市蜃楼。

作者:UX,个人微信号:goldseng,微信公众号:用户体验学堂

相关文章

  • 界面交互动效的核心知识

    前言:这篇文章是基于我自己的理解对界面交互动进行了分类整理和总结。这篇文章的作用是为以后讲解用keynote,fl...

  • 交互动效的设计与落地(上)

    什么是交互动效? 交互动效是指展现界面间的转换或界面内元素变化的交互反馈,分为动:动作,即用户操作;效:效果,即界...

  • 交互微动效设计小结

    本文微交互动效设计描绘的方向属于功能性动效,适用于UI界面的交互动效设计。具有清晰的逻辑目的,着重帮助用户理解和有...

  • UI交互动画:纵享丝滑,不止是德芙

    UI界面视觉已然走到了一端,但动效在移动用户体验领域却逐步走向高峰。动效已成为用户界面的重要组成部分,使其更具互动...

  • 【视觉设计】UI动效的常见用法

    动效是UI设计中最强有力的工具之一,它强化了界面的互动性和生命力。动效让用户可以更快地从界面获取反馈,提供更快更有...

  • 手机动效设计分析

    使用动效的目的: 常见的交互动效: 交互动效设计基本原则 创新交互动效设计 优秀手机动效应用 我们的产品可以借鉴地...

  • 《一个APP的诞生》:第六章UI设计

    1. UI设计的定义: 是指人与机器进行互动过程时的界面进行创造、美化。 用户界面:系统和用户之间进行交互和信息交...

  • 关于IOS核心动画

    iOS 核心动画高级技术核心动画是基于苹果iOS用户界面的技术。通过使用核心动画的全部功能,可以用2D和3D视觉效...

  • #交互动效#

    使用PPT做动效 1.牢记设计目标 不为动效而动效,思考需求和场景,确定目标; 2.快速展示呈现 只为快速准确地表...

  • 关于交互动效1

    交互动效:包括哪些能够为产品赋予生机的动态的界面元素及视觉效果,这些交互效果通常与特定的响应行为相关,甚至包括那些...

网友评论

    本文标题:界面交互动效的核心知识

    本文链接:https://www.haomeiwen.com/subject/viqhattx.html