全国咨询热线:

0371-65852003

郑州UI设计培训班介绍UI设计中的12个基本动效

发布日期:2019/10/09 11:04:03 浏览次数:15

    动效的主要功能是用来呈现 UI 中不同元素之间的关系,来帮助用户在界面和界面之间进行导航。动效还可以加持到图标、Logo、插画等元素上,来赋予 UI 以个性,但是 UI 本身的可用性的优先级是一定要高于视觉和动效的表达。下面红狐郑州UI设计培训班小编就为大家介绍一下UI设计中的12个基本动效:


timg (4).jpg


    1、滑动


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


    2、扩大


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


    3、最小化


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


    4、切换对象


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


    5、展开推叠


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


    6、翻页


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


    7、添加到列表


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


    8、导航标签转换


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


    9、融合


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


    10、滚动


    根据用户的手势进行滚动操作,非常使用与列表信息的查看。这个交互方式是我们用的最频繁的,仙子我们也可以加入一些动效使这个交互更加的有趣和丰富。 》》》推荐阅读:郑州UI设计培训班介绍UI设计常用的理论规则


    11、平移


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


    12、保存指示器


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


    红狐郑州UI设计培训班是一家专业的IT教育品牌企业,主要培训课程有:UI设计、PHP程序开发、WEB前端、SEO优化等,可以让学员边培训边工作,毕业既有工作经验。各位想要参加培训的学生可以直接拨打公司客服电话报名哦!



  1. 上一篇:郑州UI设计培训班介绍7个UI设计技巧
  2. 下一篇:郑州UI设计培训班介绍UI设计的十大原则

红狐企业网-专注于IT行业服务教育—您成功路上的垫脚石!

15年企业IT行业服务,值得信赖/15 years of enterprise IT industry service, trustworthy

河南省郑州市金水区农业路东1号(豫博大厦西塔511室)

0371-65852003/66110309 13526898517

123434446@qq.com

扫一扫加关注,获得更多资讯

Copyright©2018-2019 红狐企业网IT培训中心 www.xxxxxxx.edu.cn 版权所有 All Rights Reserved 豫ICP备16004903号-5