ui设计中的5个基本动效-千锋教育深圳校区

ui设计中的5个基本动效-千锋教育深圳校区

 动效可以帮我们提升用户体验，使ui界面显得更加一致和真实，并给整个产品带来创新的感觉。如果想要你的ui界面更出彩，恰到好处的使用动效将是明智的选择。今天千锋小编就和大家分享5个基本的动效，希望能对大家有所帮助。

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

适合场景：当你设计的元素需要导航以列表方式呈现的时候可以使用滑动效果。例如一些明星的选择，款式的选择，适合用这样的方式呈现。

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

适合场景：当你设计的元素是需要和用户进行单一交互的时候。例如点开图片查看详情，让转场过渡更自然。

三、最小化

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

适合场景：当用户想要最小化某个元素的时候。例如搜索、添加快捷按钮的点击事件，符合从哪来到哪去的原理。

四、切换对象

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

适合场景：当用户在元素之间切换。滑动效果相对来说比较单一和常见，使用动效切换可以让用户产生眼前一亮的效果，例如一些商品款式的切换，就可以使用这样的效果

五、展开推叠

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

适合场景：当用户打开一堆功能选项的时候。例如一个功能里面隐藏了好几个二级功能时，就可以使用这样的效果，利于用户引导。

千锋教育ui设计课程将在移动端界面设计学习阶段学习AE动效设计软件，通过讲师细致的讲解和学员大胆的实战训练，学员将掌握自主进行动效设计的能力。把握时代潮流技术，融入前沿开发技能，娴熟驾驭各种技法，千锋教育ui设计给你不一样的学习体验。

千锋深圳校区：http://sz.mobiletrain.org/

深圳西部硅谷校区地址：深圳市宝安区宝安大道5010号深圳西部硅谷A区B座605-619

深圳大学城校区地址：深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼

培训咨询专线：0755-33582485-801（硅谷校区）0755-86660670-801（大学城校区）

咨询热线4008119990

咨  询  QQ  : 1660794050

面授课程：全栈HTML5+培训、UI交互设计培训、PHP培训、Java+云数据培训、大数据开发培训、VR/AR/Unity游戏开发培训、Python培训、Linux云计算培训、全栈软件测试培训、Android培训、iOS培训、好程序员

ui设计中的5个基本动效-千锋教育深圳校区