手机界面的切换动画设计技巧有哪些
新闻来源：优漫教育
日期：2021-10-27
对于某些移动应用或PC软件，我们常常会在界面间做一些切换，特别是在移动设备上，由于屏幕大小和交互方式的特点，这样的切换动作会更频繁，而且用户从一种界面切换到另一种界面也会造成麻烦，因此当用户触发这些动作时，为了引导用户从一种界面切换到另一种界面，我们常常…
下面看几个通用接口转换模式。
1.过渡效果淡入淡出是最常用的处理方式。这一效应常常能直观地表现出从一张照片到另一张的变化。其视觉性能相对来说比较柔软，但是同时它又限制了两个接口之间的通用特性。举例来说，当iphone从折叠上方滑向聚光灯页时，我们可以看到一个从无到有的黑色半透明背景，同时第一个屏幕上的图标从完全不透明变成透明，从屏幕右边移开。
2.Aeropeek是View7平台上的另一个示例。在鼠标移至右下角的“桌面”按钮时，窗口的内容永远不会变得完全透明。iOS的音乐界面也使用相同的效果。在从“播放”界面切换到下一界面时，最上面的状态条和标题条就会渐行渐远，播放界面由深色变成列表界面。
3.场景切换场景切换通常用于两个不同的界面，视觉效果看上去很酷，但不利之处在于场景切换需要等待时间。下面来看一下苹果的卡片应用。从选卡到进入编辑界面，卡片慢慢飞进一张像皮革的桌面。
再举个例子，iOS里的“发邮件图片”，使用了同样的效果(图片移动，而电子邮件界面则从底部滑入屏幕)。
在需要频繁切换的页面上，这种转换效果并不适合，太长的等待时间将使用户焦虑不安。3.翻页界面翻转界面是iOS平台非常常见，翻转前后两个界面之间存在某种联系。通常出现在设置界面和列表界面中。按下面的方式在“正在播放”界面和“相册”界面之间切换。
4.学生在黑屏上带苹果手机，可以一起做测试。iphone的壁纸和锁屏界面被设置成两个不同的图片(注意，这些图片必须有所不同)，在开启解锁按钮之后，屏幕会淡淡地变成黑色，然后逐渐亮起并回到主界面。
有些时候，我们可以在游戏中看到这种效果，比如，当打开CuttheRope应用程序时，在点击设置按钮之后，界面将切换为黑屏。
5.在iOS中转换文件夹将以带箭头的方式展开，但展开的部分最终将失去小三角形的面积。再看一下iOS系统是怎样很自然的隐藏小三角形的。
在打开文件夹的时候，我们可以清晰的看到小箭头逐渐缩小直到完全消失。尽管在此变形的速度很快，人的眼睛很难觉察到其变化的过程，但这也是通过合理而自然的变形过程，以达到所期望的形状效果的一部分。6.按内容缩放格式。这类动画片一般都会有淡出效果。在窗口7中，任务栏预览面板更为常用。滑鼠从一个图标移到另一个，它会自动缩放适当的大小，因为预览窗口的大小不一致，并且内容会随着内容的变化而变化。
6.这种页面切换模式在苹果平台下是很普遍的，比如在苹果平台下打开系统配置，切换系统配置时就可以实现此功能。7.从较小元素到较大界面的过渡是非常普遍的，而且有时伴随着淡入淡出效应。举例来说，在GarageBand中，选择一种乐器来进入该乐器的编辑界面。
7.在某些复杂的界面切换过程中，可以同时使用许多效果。有时候仅仅通过一种方法实现一个接口切换是不够的。要想在界面上切换更加生动自然，必须同时使用几种过渡效果。
举例来说，在上面显示的Lion系统中，当你把iTunes移至全屏，你可以看到iTunes在从左到右切换时，iTunes会伴随着淡入和淡出的效果，并且放大到全屏，Dock则向下移动为iTunes全屏提供空间。这个想法是把iTunes界面变成一种全屏模式，而2切换背景则意味着全屏iTunes会以单独的空间存储在Mac屏幕上。从这一点上也可以看出，采用什么样的动画过渡效果来实现界面的转换，其实就是在告诉用户这种切换意味着什么。除以上所列的过渡效果外，还有其他一些过渡效果在这里列出。还有更多的挖掘和发现。动画片不但能使界面不太死板，而且能让使用者直观地了解界面与界面的关系及切换方式，从而增加使用者的使用流畅性，提升使用体验。最终，留点作业。重力导致的水平和垂直屏幕的切换，是怎样通过一个精细的动画转换来实现iPad的主屏幕？
