在UI中，能够有效的描述物体之间的逻辑关系，同时通过视觉效果，可视化的描述用户操作时候当前的状态，用户可以很清晰的感受到物体与物体之间的位置或者层级关系，这样的是指向性动效。指向性动效在UI中很重要，那在UI中有哪些指向性动效呢？千锋小编今天就来给大家整理了一些基本动效，希望可以帮助大家更好学习。　

滑动

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

扩大

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

最小化

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

切换对象

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

展开推叠

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

添加到列表

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

导航标签转换

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

融合

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

滚动

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

平移

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

      现在相信大家对指示性动效有了更好地了解。不再对UI保持一种神秘感，如果大家有想学习UI，或者想要提升自己技能的，可以到千锋UI培训看一下，千锋上海UI培训提供给到大家完整的学习路线，该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等，经验丰富的老师全程为你保驾护航，定期项目指导。

上一篇

程序员只能吃青春的饭吗？

下一篇

这样学习前端，事半功倍。