抓住用户的设计：页面切换的动画过渡

《抓住用户的设计：页面切换的动画过渡》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、抓住用户的设计：页面切换的动画过渡在使用一些移动端的App或PC端的软件的时候，我们常常会有一些界而之间切换的操作，尤其是在移动端的设备上，因为屏幕尺寸和交互方式的特性，就更多的会出现这些切换的操作，而很突然地从一个界而切换到刃一个界面会给用户带来困扰。所以在触发这些操作的同吋，往往需要过渡形式的动画來引导用八是如何从一个界面切换到另一个界而的，我们来看看一些常见的界ffi切换的过渡方式吧。1.淡入淡出淡入淡出的过渡效果是最为常见的处理手法，这种效果往往能很直观的表现从一个画面到另一个画面变化的过程，视觉表现上比较柔

2、和，但同时通常会局限在需要过渡的两个界面之间有一定的共同特点。比如把iPhone从第一屏滑动到Spotlight页而时候的效果，我们可以看到有个黑色半透明背景从无到冇的过程，同时首屏的图标从完全不透明慢慢变成透明状向右移出屏幕。再比如在Windows7平台上的Aeropeek功能，当把鼠标移动到桌而右下角的显示桌面按钮的时候，窗口内容就会以淡入淡出的效果从不透明过渡到全部透明的效杲。iOS的Music界而也同样用到了这样的效果，从“正在播放”界而切换到上一级界面的时候，顶部的状态栏和标题栏就会用淡入淡出的效果，从播放

3、界血的深色转换为列表界面的浅色。2.场景切换场景切换通常用于两个不同的界面之间，视觉效果会看起來很酷，缺点是会需要因为切换场景而需要等待吋间。我们来看看Apple的Cards应用，从选择一张卡片，到进入编辑卡片的界面，卡片缓缓地飞入到一个皮革质感的桌面。再比如iOS里而的“用电子邮件发送照片”，也同样是使用了这类效果（照片进行移动，同时邮件界而从底部滑入屏幕）。此类过渡效果不太适用于需要经常切换的页面之间，过多的等待时间会讣用户感到焦躁。3.翻转界面翻转界面的方式在iOS平台相当常见，通常翻转前后的两个界而存在一定的

4、联系。常见于设置界面和列表界面。如下图的“正在播放”界而和“专辑列表”界而的切换。4.黑屏有iPhone的同学nJ'以一起来做个测试，把iPhone的壁纸和锁屏界而设置为两张不一样的照片时（注意，一定要不一样哦），当你划开解锁按钮以后，屏幕会先以淡入淡出的方式黑屏一下，然后再慢慢亮回来I叫到主界面'0有时候我们也会在游戏里看到这样的效果，比如打开CuttheRope应用，当点击设置按钮后，也会以黑屏的方式切换界面。5.变形i0S中打开一个文件夹会以一个带箭头的样式展开，而展开的那部分最后却缺少了那个小三角的那部分而积

5、，让我们放慢速度看看iOS是如何很口然的把小三角隐藏掉的吧：在打开文件夹的同时，我们可以很清晰的看到那个小箭头渐渐缩小直到完全没有。虽然这里的变形速度很快以至于人眼可能很难去察觉到它的变化过程，但是以合理又口然的变形过程来达到最后想要的形状结果也正是体现细节的一部分。6.形式追随内容的缩放此类动画的表现通常述会伴随淡入淡111的效果配合，比较常见的是Window7的任务栏预览窗格，当鼠标从一个图标移动到另外一个图标的时候，因为预览窗口的人小不一致，所以窗口会针对内容的人小自动缩放至适当的人小，而内容则会伴随以淡入淡出

6、的方式变化。在Mac平台下，此类页面切换的过渡方式则更常见，比如在MacF打开系统配置，在系统配置里面切换任何一个设置项都会有这种效果。3.放大放大的效果常见于从一个较小的元素进入到一个较人的界面时候的过渡，有吋候也会伴随淡入淡出的效果作为配合。如GarageBand中，选择一个乐器进入该乐器的编辑界面时所使用的效果。4.多种效果同时使用在有些复杂的界面切换过程中，有时候仅仅使用一种方式來实现界面的切换是远远不够的，为了能够更生动而白然的在界面中进行切换，需要同时运用儿种过渡效果。比如上图的Lion系统，将iTune

7、s全屏的过程中，可以看到桌面背景在进行左右切换的同时，iTunes伴随淡入淡出的效果并且放人至全屏，Dock则往下移动以腾出屏幕空间给iTunes全屏。这样做的冃的1是很好的将iTunes界面过渡到全屏的状态，2是背景的切换代表着全屏的iTunes作为一个单独的Space存放在Mac的屏幕里。也由此可见，以怎样的动画过渡效果去实现界面的转换实际上也在告知用户，我这样切换意味着什么。除了以上列出的这些过渡效果以外，还有更多的过渡效果没有在这里列出來。人家可以进一步去挖掘和发现更多。动画除了可以使界面变得不那么死板以外，

8、合理的动画也会11：用户很直观的了解到界而与界而之间的关系以及如何切换的，更能增加用户在使用过程中的流畅性，从而提升体验。最后，作者留个小小的作业。在iPad的主屏上，重力感应导致的横竖屏切换，它是以怎样细微的动画过渡来实现的呢？人生是伟大的宝藏，我晓得从这个宝藏里选取最珍贵的珠宝。