UI设计之转场效果设计经验分享

　　转场的类型有很多很多，甚至在电影中以及我们的PPT软件中都可以看到各式各样的转场，比如飞出、折叠、翻转、淡入等等各式各样的方式。犹如天下武功，各门各派。那么，在交互动效中，什么样的转场类型才适合呢？一般常用的转场又包含哪些呢？这里，我总结了四点，一起来看看。
　　1、移动转场
　　顾名思义，这是一个通过移动完成的转场，在产品设计当中还是很常见的。不同的区别点就在于与移动的方向，有从右往左的，有从左往右的，也有从下往上的，那当然也有从上往下的，这么这四种，在本质上又有哪些区别呢？
　　其实我们把整个界面结构想象成一个大的结构，二级页面以上一般都在当前界面的右边，所以从左到右的转场一般都为进入下一级页面，那相反就是从右往左。而从下往上的一般都作为当前页面任务流程中的操作，不需要进入下一级页面，从上往下也是同理，只不过针对不同的使用场景，呈现的位置不同。
　　另外需要注意的就是，移动转场中，左边的界面一般在界面结构的上方滑动入场，紧跟着底部的界面退场，但是只会退出一半，并不是全部退出，这样的话，就会造成入场元素运动快，退场元素略微缓慢。所以这也就是我们前面给大家分析的，退出元素和入场元素的区别。移动转场相对来说，比较简单快速，开发实现的成本也很小，总体来说我们在各大产品中，基本上都可以看到这种类型的转场方式，并且他可以清晰直观的体现界面的结构以及从属关系。
　　2、补间联动
　　这种转场的方式，更加直观的展现了转场过程中元素的变化。而转场的方式有点像keynote里面的神奇移动，也就是在转场的过程中，元素进行了大小、位置、颜色等参数上的变化。比如咱们前面讲解的持续元素，通常都是利用了补间联动的转场效果。这种类型的转场在产品设计当中也是很常见的，不过常出现的场景一般为当前页面中的某个交互后引发元素等参数的变化，这样可以更加直观的展现元素变化。
　　3、淡入淡出
　　在早起互联网产品中，我们可以看到各式各样的转场，比如、折叠、翻滚、3D环绕等等。但是，随着现在互联网产品越来越成熟，转场的方式也越来越简洁实用，淡入淡出就是如此。这种转场的方式在我们整个产品交互动效设计中常见的一种类型了，也是适合的，但是淡入淡出也分为很多不同的方式，那么我们根据不同的场景，有不同的使用方式。
　　3.1、单向淡入淡出
　　转场的过程中，入场元素或退场元素在整个界面的上方进行淡入淡出，其他元素没有变化。所以这种的转场方式适用于前后层叠的场景。
　　3.2、重叠淡入淡出
　　与单向不同之处就在于，入场元素和退场元素同时进行淡入淡出，所以在转场的过程中，会出现元素重叠的效果。所以这种转场的方式适用于转场前后布局一致的界面。
　　3.3、双向淡入淡出
　　这种转场的方式就是，入场和退场的元素相互进行淡入淡出，只是两者错开时间。因此，在转场的过程中，不会出现元素重叠的效果。所以这样的转场方式适用于布局样式不相同的界面，这样可以有效的减少转场过程中的干扰。基本来说，只要涉及到转场，我们都可以使用到淡入淡出的技巧，常见的比如一级页面的切换，进入详情页面等等。
　　淡入淡出作为一个十分常见的动效转场，这其中的细节太多太多，虽然一个转场可能只是简简单单的1秒钟不到，但是我们也要仔细、深入的去解析它。我们需要针对不同的页面结构以及使用场景，从而选择不同的淡入淡出的方式。
　　4、其他转场
　　上面总结的三种转场类型属于比较常见的，但是还包含一些其他类型的转场，我在这边把他们放在一起给大家大致的举例说明一下。

　　4.1、容器转场
　　在界面设计当中，元素、信息等待都是置入在一个容器当中，而容器也就是我们承载信息的载体。在大部分的动效转场当中，如果动效涉及到了这些内容，那么就可以基于这些容器来进行动效设计，这也就是我们所说的容器转场。容器转场的动效设计整体来说更加直观、规范，不单单是案例中的按钮，也可以利用到更多不同的元素中。
　　4.2、共享转场
　　共享转场这种动效设计，指的是转场过程中，界面前后的某些元素，共享同一种转场方式。这样的动效设计更加具有连续性，并且在转场的过程中更加流畅。需要注意的是，因为这种转场元素，没有中间可过度属性，所以在动效的转场过程中，比较难调节属性，只能利用转场元素共享的元素，实现前后的流程过度，而常用的方法就是，旋转、移动、缩放等等。一部优秀的影剧少不了一个优秀的导演，而导演在剧中的作用，就是将这些内容和演员，通过不同的表现手法编织成一部作品。