美文网首页设计师秃头秘诀
盘点那些年最常用却又不会的6种指向型动效

盘点那些年最常用却又不会的6种指向型动效

作者: c966d1f641e6 | 来源:发表于2019-08-02 22:28 被阅读0次

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

指向型动效的分类

1.滑动

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

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

2.扩大

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

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

3.最小化

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

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

4.切换对象

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

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

5.翻页

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

适合场景:当用户进行一些翻页操作时。例如看小说,读长篇文章,使用这样的效果会更贴近现实生活,引起用户共鸣。

6.滚动

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

适合场景:当用户垂直或者水平移动页面时。例如列表,图片,很多场景下都可以使用,也因此过于平凡,可以加一些动效让页面活起来。

在这里我相信有很多想要学习UI设计的小伙伴,我自己是一名从事了多年UI设计工作的设计师,辞职目前在做自己的私人定制课程,今年年初我花了一个月时间整理了一份最适合2019年学习的学习干货,从最基础到实战都有整理,送给每一位想学习的小伙伴,想要获取的可以关注然后私信我“学习”两个字,即可免费获取资料,伸手党勿扰~

相关文章

网友评论

    本文标题:盘点那些年最常用却又不会的6种指向型动效

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