自然而流畅——聊聊界面的切换动画

在使用一些移动端的 App 或 PC 端的软件的时候，我们常常会有一些界面之间切换的操作，尤其是在移动端的设备上，因为屏幕尺寸和交互方式的特性，就更多的会出现这些切换的操作，而很突然地从一个界面切换到另一个界面会给用户带来困扰，所以在触发这些操作的同时，往往需要过渡形式的动画来引导用户是如何从一个界面切换到另一个界面的，我们来看看一些常见的界面切换的过渡方式吧。

1.淡入淡出

淡入淡出的过渡效果是最为常见的处理手法，这种效果往往能很直观的表现从一个画面到另一个画面变化的过程，视觉表现上比较柔和，但同时通常会局限在需要过渡的两个界面之间有一定的共同特点。

比如把iPhone从第一屏滑动到Spotlight页面时候的效果，我们可以看到有个黑色半透明背景从无到有的过程，同时首屏的图标从完全不透明慢慢变成透明状向右移出屏幕。

再比如在Windows7平台上的Aeropeek功能，当把鼠标移动到桌面右下角的显示桌面按钮的时候，窗口内容就会以淡入淡出的效果从不透明过渡到全部透明的效果。

iOS的Music界面也同样用到了这样的效果，从“正在播放”界面切换到上一级界面的时候，顶部的状态栏和标题栏就会用淡入淡出的效果，从播放界面的深色转换为列表界面的浅色。

2.场景切换

场景切换通常用于两个不同的界面之间，视觉效果会看起来很酷，缺点是会需要因为切换场景而需要等待时间。

我们来看看Apple的Cards应用，从选择一张卡片，到进入编辑卡片的界面，卡片缓缓地飞入到一个皮革质感的桌面。

再比如iOS里面的“用电子邮件发送照片”，也同样是使用了这类效果（照片进行移动，同时邮件界面从底部滑入屏幕）。

此类过渡效果不太适用于需要经常切换的页面之间，过多的等待时间会让用户感到焦躁。

标签： 界面切换 移动App设计 视觉设计 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。