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

标签: CDC上海 视觉设计 切换 动画 | 发表时间:2012-07-18 10:58 | 作者:CDCer
出处:http://cdc.tencent.com

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

1.    淡入淡出

  淡入淡出的过渡效果是最为常见的处理手法,这种效果往往能很直观的表现从一个画面到另一个画面变化的过程,视觉表现上比较柔和,但同时通常会局限在需要过渡的两个界面之间有一定的共同特点。
  比如把iPhone从第一屏滑动到Spotlight页面时候的效果,我们可以看到有个黑色半透明背景从无到有的过程,同时首屏的图标从完全不透明慢慢变成透明状向右移出屏幕。

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

 

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

 

 

2.    场景切换

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

 

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

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

 

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

 

4.    黑屏

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

 

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

 

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

 

     在打开文件夹的同时,我们可以很清晰的看到那个小箭头渐渐缩小直到完全没有。虽然这里的变形速度很快以至于人眼可能很难去察觉到它的变化过程,但是以合理又自然的变形过程来达到最后想要的形状结果也正是体现细节的一部分。

 

6.    形式追随内容的缩放

     此类动画的表现通常还会伴随淡入淡出的效果配合,比较常见的是Window7的任务栏预览窗格,当鼠标从一个图标移动到另外一个图标的时候,因为预览窗口的大小不一致,所以窗口会针对内容的大小自动缩放至适当的大小,而内容则会伴随以淡入淡出的方式变化。

 

     在Mac 平台下,此类页面切换的过渡方式则更常见,比如在 Mac 下打开系统配置,在系统配置里面切换任何一个设置项都会有这种效果。

 

7.    放大

     放大的效果常见于从一个较小的元素进入到一个较大的界面时候的过渡,有时候也会伴随淡入淡出的效果作为配合。如GarageBand中,选择一个乐器进入该乐器的编辑界面时所使用的效果。

 

8.    多种效果同时使用

     在有些复杂的界面切换过程中,有时候仅仅使用一种方式来实现界面的切换是远远不够的,为了能够更生动而自然的在界面中进行切换,需要同时运用几种过渡效果。

 

     比如上图的Lion系统,将iTunes全屏的过程中,可以看到桌面背景在进行左右切换的同时,iTunes伴随淡入淡出的效果并且放大至全屏,Dock则往下移动以腾出屏幕空间给iTunes全屏。

     这样做的目的 1 是很好的将 iTunes 界面过渡到全屏的状态,2 是背景的切换代表着全屏的 iTunes 作为一个单独的 Space 存放在 Mac 的屏幕里。也由此可见,以怎样的动画过渡效果去实现界面的转换实际上也在告知用户,我这样切换意味着什么。

  除了以上列出的这些过渡效果以外,还有更多的过渡效果没有在这里列出来。大家可以进一步去挖掘和发现更多。动画除了可以使界面变得不那么死板以外,合理的动画也会让用户很直观的了解到界面与界面之间的关系以及如何切换的,更能增加用户在使用过程中的流畅性,从而提升体验。

     最后,留个小小的作业。在iPad的主屏上,重力感应导致的横竖屏切换,它是以怎样细微的动画过渡来实现的呢?

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5822)

相关 [然而 界面 切换] 推荐:

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

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

横竖屏切换中的界面设计与体验提升

- - 所有文章 - UCD大社区
之前一周朦朦胧胧的过掉了,想来也没什么可回忆的. 这是一种不坏的状态,就像每天早上莫名的空洞,它们都代表着生活和工作里至少还没有很坏很衰的事情让人焦虑. 杂志一般的小译文一篇,适合这样的下午做一做,适合这样的周末读一读. 眼下,智能移动设备内置的加速计的主要作用,就是根据设备的定向方式来决定屏幕的显示模式,也就是在横屏或竖屏模式之间进行切换.

javascript图片切换

- Haipeng - 博客园-首页原创精华区
闲来无事,练习js,参照网上的一些源码写了一个图片切换程序,刚来博客园,不懂怎么发布js程序,懂的朋友可以留言告之. 1.图片切换效果有以下几种:随机切换   4格纵向百叶窗  16格横向百叶窗  由里至外逐渐放大   中间向左右两边逐渐放大   中间向上下两边逐渐放大   由上至下落幕   由左至右   由左上至右下   由右下至左上              8格纵向百叶窗    8格纵向百叶窗2   8格万花筒  24格万花筒  4格滑行左上至右下  4格滑行左上至右下  4格滑行落幕   4格滑行延伸.

从 screen 切换到 tmux

- iworm - LinuxTOY
在我的 Linux 生活中,我曾做过几次重要的切换. 我先是从 Archlinux 切换到 Gentoo,后来又从 bash 切换到了 zsh. 现在,我又从 screen 切换到 tmux. 对于各个终端控来说,screen 是几乎每天都会使用的好工具,抛开确实不易. 但有了更加好用的 tmux,我为什么不切换.

《然而未必不见得》

- Dre.J - 【枪·东东枪的枪】
“黄继光堵枪眼,我拿青春赌明天. ”情景喜剧《我爱我家》里,贾志新曾在向记者介绍自己见义勇为经过时冒出这么两句词儿来. 这种玩法以前叫什么我不清楚,现在比较常见的说法是“混搭”,用外文的话得叫remix,用菜名儿叫“乱炖”,要是换麻将术语,就是“十三不靠儿”. 地方戏曲曲艺里早就有过类似的唱词,常见的是“张冠李戴”派,比如河南豫剧里的“十八扯”——“十冬腊月里好热的天,牛皋把守在虎牢关,取妻名叫穆桂英,生下一个花木兰,姜子牙差人来下聘哪,差来个媒婆潘金莲……”相声里这类东一榔头西一棒子的唱词儿就更多,熟悉相声的恐怕都能想起几段来.

Public DNS Tool-DNS切换工具

- - 无名小卒
Public DNS Tool v9.1下载: dbank| kuaipan| 官方. 无名小卒(Digital Fingerprint: b98c67913fef00419d415179421ab42f) Related Posts. Webluker-免费CDN、DNS解析和网站监控服务.

redis+Keepalived主从热备秒级切换

- - 开源软件 - ITeye博客
安装使用centos 5.10 . 编译环境 yum -y install gcc gcc+ gcc-c++ openssl openssl-devel pcre pcre-devel. 当 Master 与 Slave 均运作正常时, Master负责服务,Slave负责Standby;. 当 Master 挂掉,Slave 正常时, Slave接管服务,同时关闭主从复制功能;.

spring数据源动态切换

- - 企业架构 - ITeye博客
     原文->http://exceptioneye.iteye.com/blog/1698064.       在Spring 2.0.1中引入了AbstractRoutingDataSource, 该类充当了DataSource的路由中介, 能有在运行时, 根据某种key值来动态切换到真正的DataSource上.

Gmail推出可切换的多种收件箱模式

- 小明 - 互联网的那点事
据国外媒体报道,Google日前对Gmail收件箱的功能和用户界面进行了升级,可以支持以标签切换多种收件箱模式. 此前,Gmail的收件箱只有一种模式,即按照时间先后顺序列出收到的所有电子邮件. 在新版中,上述模式被称为“经典模式”. 除此之外,Google还增加了若干种界面模式. “重要顺序”,即按照信件是否重要依次列出,用户可以自行设置通信的重要级别.

SwitchyPlus 发布,全平台原生API支持代理切换

- KP - Chrome迷
感谢读者 xxy171070 的分享. SwitchyPlus 是一款基于 Chrome 原生的实验性代理 API 开发的代理切换扩展,主要功能和 Chrome 平台上大名鼎鼎的代理切换插件 Proxy Switchy. 基本上一样,不过由于采用的是 Chrome 原生的 Proxy API,所以可以完美在各种平台上实现,不受系统代理调用的限制.