美文网首页设计产品运营商业模式UI设计学习
UI设计中的基本动效,来了解一下

UI设计中的基本动效,来了解一下

作者: dd0cdfcb3986 | 来源:发表于2019-06-08 14:39 被阅读0次

什么是指向性动效,是指能够有效的描述物体之间的逻辑关系,同时通过视觉效果,可视化的描述用户操作时候当前的状态,用户可以很清晰的感受到物体与物体之间的位置或者层级关系。

指向型动效的分类

1.滑动

信息列表会跟随着用户的交互手势而动,然后卡片到相应的位置上,保持整齐感,它属于指向型动画,物体的滑动取决于用户是用那种手势滑动的。它的作用就是通过指向型转场,有效帮助用户清理页面层级的排列情况。

2.扩大

页面中的卡片会从缩略图转化为全屏视图(一般这个卡片的中心点也会跟随移动到屏幕的中央)。反向动效就是卡片从全屏视图转换为缩略图。它的优点是能清楚的告诉用户点击的地方被放大了。

3.最小化

看完文章的你,想要一些AE、ps学习资料或者有不懂的都可以找我咨询,加我建立的UI学习q群:927910296,进群可以找我领取相应的笔刷素材大礼包,还可以跟群里的其他设计大佬和学习者一起交流学习,获取更多其他软件学习资料。 想学UI设计的小白或者零基础都可以领取到学习资料ps笔刷神器+ps和AE软件

页面元素点击之后缩小,然后移动到屏幕上相应的位置,相反的动效就是扩大,从缩略图重新变为全屏。这样做的好处是能够清楚的告诉用户,最小化的元素可以在哪里被找到,如果没有动效引导,可能用户需要花时间去寻找。

4.切换对象

当前页面移动到后面,新的页面移动到前面,这样能够清楚解释页面之间是进行切换的,不会显得转换的太突兀和莫名其妙。

5.展开推叠

堆叠在一起的元素被展开。能够清楚的告诉用户每个元素的排列情况,从哪里来到哪里去,也显得更加有趣。

6.翻页

当用户实施滑动手势的时候,出现像现实生活中翻页一般的效果。真正动效转场也能够清晰的展现列表层级的信息架构,并且模仿现实生活中的动效更加富有情感。

7.添加到列表

新的元素加入到原有的列表中,旧的元素被推开而不是替换,从而有现实中腾出位置的感觉,这种转场效果能够清楚的展现列表重新排列的过程,让用户知道新旧信息的位置,不会产生迷惑。

8.导航标签转换

根据内容的转换,按钮相应的在视觉上做出改变,而标题是随着内容移动而改变的,这样能够清晰的展示标签和内容之间的从属关系,让用户能够清晰理解页面之间的架构。

9.融合

元素会根据用户的点击交互而分离或者是结合,用户可以感受到元素与元素之间的关联,比起直接切换,显然用融合动画更加有趣。

10.滚动

根据用户的手势进行滚动操作,非常使用与列表信息的查看。这个交互方式是我们用的最频繁的,仙子我们也可以加入一些动效使这个交互更加的有趣和丰富。

11.平移

当一张图片在我们有限的屏幕里没有办法看完的时候,会使用这样的效果。除了放大效果,这样的平移还可以加上动效配合一些功能使用。

12.保存指示器

用户一旦进行保存、下载某个物体,物体会复制一份,同时缩小、移动到保存指示器中。这样可以提示用户下载或者是收藏的内容在哪里可以找到,能够告诉用户对象已经被添加。

相关文章

  • UI设计中的基本动效了解一下

    什么是指向性动效,是指能够有效的描述物体之间的逻辑关系,同时通过视觉效果,可视化的描述用户操作时候当前的状态,用户...

  • UI设计中的基本动效,来了解一下

    什么是指向性动效,是指能够有效的描述物体之间的逻辑关系,同时通过视觉效果,可视化的描述用户操作时候当前的状态,用户...

  • 动态设计到底有多好用呢?

    作为目前的热门设计,动效是需要每个UI设计师都来学习使用的,但是,许多UI设计师对于动效的了解却少之又少,今天就为...

  • 【设计技法】principle基础知识

    行业对于UI设计师的要求越来越高,UI设计师不仅需要静态界面的设计,更要掌握一些动效软件,学会用动效来包装自己的作...

  • UI动效精准落地与交付 | 生产环境中的动效落地

    在UI设计中动效分为以下几种 一、矢量图形动效 二、情感化设计 三、特效 四、交互转场 矢量动图 路径动画 矢量动...

  • UI设计中的动效具备哪些主要作用

    UI设计中的动效具备哪些主要作用?动效的使用能够有效提升UI设计页面的整体效果,使操作界面具备更加强烈的趣味性,从...

  • UI动效一般具备哪些独特的作用

    UI动效一般具备哪些独特的作用?很多设计师会选择在UI设计中添加适当的动效,以提升页面的表达效果,带给用户更加美好...

  • 腾讯出品的交互微动效设计指南

    本设计指南适用于UI设​计界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了...

  • UI设计中的动效使用

    UI设计中的动效使用 对于从事ui设计工作或者目前在学习ui设计的人来说,UI设计的学问可大了,它包含了太多太多其...

  • UI设计中的基本动效知识-上篇

    本文主要说的是指向性动效。什么是指向性动效? 是指能够有效的描述物体之间的逻辑关系,同时通过视觉效果,可视化的描述...

网友评论

    本文标题:UI设计中的基本动效,来了解一下

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