当前位置:首页 > 经验学习 > 交互设计

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

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

在使用一些移动端的 App 或 PC 端的软件的时候,我们常常会有一些界面之间切换的操作,尤其是在移动端的设备上,因为屏幕尺寸和交互方式的特性,就更多的会出现这些切换的操作,而很突然地从一个界面切换到另一个界面会给用户带来困扰,所以在触发这些操作的同时,往往xu(需)要过渡形式的动画来引导用户是如何从一个界面切换到另一个界面的,我们来看看一些常见的界面切换的过渡方式吧。
1. 淡入淡出
淡入淡出的过渡效果是最为常见的处理手法,这种效果往往能很直观的表现从一个画面到另一个画面变化的过程,视觉表现上比较柔和,但同时通常会局限在需要过渡的两个界面之间有一定的共同特点。
比如把iPhone从第一屏滑动到Spotlight页面时候的效果,我们可以看到有ge(个)黑色半透明背景从无到有的过程,同时首屏的图标从完全不透明慢慢变成透明状向右移出屏幕。

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

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

2. 场jing(景)切换
场景切换通常用于两个不同的界面之间,视觉效果会看起来很酷,缺点是会需要因为qie(切)换场景而需要等dai(待)时间。
我们来看看Apple的Cards应yong(用),从选择一张卡片,到进入编辑卡片的界面,卡片缓缓地飞入到一个皮革质感的桌面。

再比如iOS里面的“用电子邮件发song(送)照片”,也同样是使用了这类效果(照片进行移动,同时邮件界面从底部滑入屏幕)。
此类过渡效果不太适用于需要经常切换的页面之间,过多的等待时间会让用户感到焦躁。

3. 翻转界面

翻转界面的方式在iOS平台相当常见,通常翻转前后的两个界面存在一定的联系。常见于设置界面和列表界面。
如下图的“正在播放”界面和“zhuan(专)辑列表”界面的切换。

4. 黑屏
you(有)iPhone的同学可以一起来做个测试,把iPhone的壁纸和锁屏界面设置为liang(两)张不一样的照片时(注意,一定要不一样哦),当你划开解锁按钮以后,屏幕会先以淡入淡出的方式黑屏一下,然后再慢man(慢)亮hui(回)来回到主界面。

有时候我们也会在游戏里看到这样的效果,比如打开Cut the Rope应yong(用),当点击设置按钮后,也会以黑屏的方式切换界面。

5. 变形
iOS中打kai(开)一个文件夹会以一个带箭头的样式展开,而展开的那部分最后却缺少了那个小三角的那部分面积,让我们放慢速度看看iOS是如何很自然的把小三角隐藏掉的吧:

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

在Mac 平台下,此类页面切换的过渡方式则更常见,比如zai(在) Mac 下打开系统配置,在系统配置里面切换任何一个设置项都会有这种效果。
7. 放大
放大的效果常见于从一个较小的元素进入到一个较大的界面时候的过渡,有时候也会伴随淡入淡出的效果作为配合。如GarageBand中,xuan(选)择一个乐器进入该乐器的编辑界面时所使用的效果。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: