首页 > 网页教程 > 设计分享 > 交互设计上常见的界面切换动画如何优化

交互设计上常见的界面切换动画如何优化

时间:2014-07-24    来源:腾讯CDC

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

一、淡入淡出

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

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

产品设计 界面切换 交互设计

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

产品设计 界面切换 交互设计

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

产品设计 界面切换 交互设计

二、场景切换

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

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

产品设计 界面切换 交互设计

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

产品设计 界面切换 交互设计

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

相关推荐
网页交互设计的一些理解
深挖交互设计的细节提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
电子商务网站如何设计高效易用的网站左侧导航树
网页视觉设计如何针对用户有效表达信息
交互设计之浅谈下意识设计
前瞻:2012年Web设计和开发的15个最新趋势
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻找最简单直接的解读办法
移动应用开发:无线终端用户理解工作方法分享
分享:体验设计师需要学习的一些前端技术
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
浅谈交互设计中的默认值对用户的影响
深入分析网页栅格系统的规范制作
深入谈交互设计之人人都懂交互设计
移动应用设计的横竖屏切换中的界面设计与体验提升
交互设计:移动应用与PC应用的交互差异浅析
交互设计师应该如何设计直观且有说服力的作品集
移动设备动画设计的12个原则分享
分析用户界面中扁平化设计的优缺点
分享淘宝购便利交互设计心得
富有灵感和创意的web布局及交互设计赏析
符合用户操作习惯的网站界面设计分享
18个超棒的响应式Web设计前端开发教程
在视觉设计中对像素的深度解析
网页设计中创新式布局与交互设计思考
换汤不换药?看应用们如何“为iOS 7设计”
产品设计:万水千山总是情 不要图片行不行
APP浏览体验设计的思考:如何理解用户的眼?
网页设计怎么破?创新式布局与交互的设计
四大网页设计秘诀:让用户第一眼就爱上你的网站

精彩推荐

热门教程