QQ登录

登录|注册 上传

飞特网

  • 飞特网官方微博
  • 飞特网微信公众号
飞特网顶部通栏AD位

UI交互动效中转场的那些事儿

鑫鑫设计发布于:2020-3-25 16:29 |原作者: 酷酷的小磊
简介: 随着互联网时代的快速发展,动效设计在很多产品里随处可见。并且在很多设计平台里,可以看到,设计师们都在不断的尝试、不断的突破,不断的去创造更多有趣的动效。 但是在创造的过程中,我们不能只停留在酷炫的动画效果上,我们也要遵循动效的基本规则。 ... ... ...

版权申明:本教程出自“酷酷的小磊”原创,感谢“酷酷的小磊”的原创教程分享!

UI交互动效中转场的那些事儿 飞特网 UI设计教程

FEVTE编注:更多UI设计教程,和UI设计理论知识请访问飞特网UI设计教程栏目:https://www.fevte.com/plan/UIdesign/

前言

随着互联网时代的快速发展,动效设计在很多产品里随处可见。并且在很多设计平台里,可以看到,设计师们都在不断的尝试、不断的突破,不断的去创造更多有趣的动效。

但是在创造的过程中,我们不能只停留在酷炫的动画效果上,我们也要遵循动效的基本规则。

UI交互动效中转场的那些事儿 飞特网 UI设计教程

2020,在这新的一年,身为设计师的我们,除了拥有极致的工匠精神外,还更应该理解动效设计背后的理论知识。

这样,我们才能做出更具有表现力、且更为丰富的动效设计。

今天这篇文章,我准备从以下6点和大家展开讨论。

UI交互动效中转场的那些事儿 飞特网 UI设计教程

我也是一个在动效学习道路上努力向前的同学,以下内容仅代表我的个人观点和想法,如有不妥,还请指出,同时也欢迎还有不同的思路和想法的小伙伴,一起探讨交流。

一、交互动效

扁平化设计发展至今,单一的视觉图形已经很难再满足更多的场景与不同的用户。所以动效设计被引用到互联网产品设计当中,并且效果良好,因此动效设计在互联网产品当中被用的越来越广泛。它不仅可以更直观的表现界面信息,还可以进一步引导用户的操作,使得用户体验更加舒适自然。

互联网产品的动效设计其实也有着不同的分类,这里,我将产品动效设计分为了三个类别,功能、展示和交互动效。而我们今天这篇文章主要讨论的是交互动效。

UI交互动效中转场的那些事儿 飞特网 UI设计教程

1、功能动效

这种动效常见的有,例如产品中的刷新动效或者点赞触发的微动效,他们更多的是在于产品的功能上进一步加强或者提高产品的体验度和情感化。

2、展示动效

这种动效其实和功能动效本质上有一些相似之处,他们都是比较依靠动效设计师,通过软件直接输出,不管是是GIF格式还是Json格式。

这种动效常见的有,例如直播产品中的火箭或者产品品牌形象的互动等等。

3、交互动效

交互动效是我准备和大家着重讨论的动效类型。他和前两者不同,他更偏向于整个产品使用的体验,他需要设计师和开发一起协同完成。

这种动效基本包含了我们产品体验中的一大部分,页面与页面之间的链接、组件间的转换,以及用户的操作反馈等等。

正如上面所说,即使是交互动效也会有不同的功能区分,那我们应该如何区分使用场景、以及如何针对性的去制作交互动效呢?

二、何为转场?

想做好一个交互动效,我们不仅仅需要考虑用户的使用场景、功能性,还需要考虑整个动效的持续时长、曲线的运用、转场以及整个动效的合理编排。

由于动效的内容体系很庞大,但哪怕是一个最基本的动效,肉眼最直观的就是转场,而转场也是衔接页面与页面中最重要的内容。

瞎扯了半天,啥是动效转场呢??接下来,我给大家分享一下我对于动效转场的一些想法.....

UI交互动效中转场的那些事儿 飞特网 UI设计教程

单从字面意思上理解"转"代表转换,"场"代表场景。

转场是每个段落都具有某个单一的、相对完整的意思,如表现一个动作过程,表现一种相关关系,表现一种含义等等,这就叫做转场,也可以成为场景过渡。

用最直观的例子描述,就是从家里去公司,这个就是场景过渡。那么在整个去公司的路上,我们会遇到很多不同的小伙伴,我们暂且把他们称作为转场的其他元素,甚至在转场的过程中,我们也可以选择不同的交通工具,而这,就是我们转场过程中不同的转场方式。

UI交互动效中转场的那些事儿 飞特网 UI设计教程

关于交互动效的转场,我们设计师更应该合理的去编排他们,将这些有关联的元素,按先后按顺序展现给用户,整个动作的过程是完整的,而这个过程将这些元素连接在一起。不仅如此,在转场的过程中,我们更应该选用一种流畅连贯的方式予以过渡。

所以,接下来我们通过这几个相关的内容继续深入拓展,深入的探讨关于动效中转场的内容。

三、转场作用

正如前面所说,转场作为动效设计中,肉眼比较能观察到的变化。而转场作为其中的一部分,那他是如何的呢?以及对整个动效又能发挥什么作用呢?

随着产品体验不断的优化,用户体验一直都在追求流畅化,所以动效设计不仅仅需要传递信息给用户,也要带给用户更好的体验感。

而转场在交互动效中的作用,我大致的总结了以下三点。

UI交互动效中转场的那些事儿 飞特网 UI设计教程

1、状态反馈

正如前面所说,转场指的是动效设计中,场景、页面或者组件之间的过渡,而动效设计中的转场可以及时的反馈用户的操作,以及组件切换的状态。

UI交互动效中转场的那些事儿 飞特网 UI设计教程

2、层级关系

动效设计中的转场可以有效的帮助用户明确界面以及元素之间的层级关系,例如很多父子级页面等等

UI交互动效中转场的那些事儿 飞特网 UI设计教程

3、交互引导

动效转场的过程中,可以利用一些处理手法,有效的去引导用户关注内容,并且可以引导用户接下来的操作。

UI交互动效中转场的那些事儿 飞特网 UI设计教程

四、转场元素

一个优秀的产品动效设计,转场的过程中,元素的顺序都是清晰直观的,这就和迪斯尼动画12法则当中的预测是一样的,我们应该突出重点的内容,不影响用户的视线,次要的的内容尽可能的弱化。并且元素也是形成动效必要的组成部分。

所以在动效的转场过程中,我们可以将所有的元素一共分为四个类别。

UI交互动效中转场的那些事儿 飞特网 UI设计教程

1、停留元素

一般在前后页面中都存在的内容,两个页面可以共用一个元素,或者页面间小版块的动效转场...

需要注意的是停留元素在转场过程中不进行任何变化。

2、入场元素

当用户进行某项操作之后,触发界面或元素之间的转场。

而转场过程中,入场元素是最关键的元素之一,也是用户最关注的内容。

UI交互动效中转场的那些事儿 飞特网 UI设计教程


123下一页
飞特网—站内广告
3

好评

差评

刚表态过的朋友 (3 人)

鑫鑫设计
澳门特别行政区 澳门特别行政区 平面设计师
+ 关注 私信
  • 交互流程中的三大重点
  • UI交互动效中转场的那些事儿
  • 设计师的能力模型与职级晋升

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业


关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 手机版| 飞特网