欢迎来到鲍余网络官网 官方微信 官方微博 IDC网站
深圳网站建设官方微信

网络之路,从这里开始

热线电话

18576678080 / 0755-85278776

热点资讯
首页 > 热点资讯 > 网页设计中的动画详解

网页设计中的动画详解

  • 所属分类: 热点资讯
  • 发布时间:2015-07-17 17:09:53
  • 作者: 鲍余网络
  • 点击量:
网页设计中的动画详解
 
一.界面元素动画
这是一种让用户了解他们的操作(比如点击)被记录的动画。变化的发生需要他们的点击来催化,无论是转向另一个页面,打开侧边栏或模态窗口,还是在客服窗口中发送电子邮件。
 
不是说有反馈更好,而是如今反馈是必须的,这是个扁平化设计的世界。人们需要了解界面与装饰物之间的区别。让元素运动起来,是简单微妙的交互方式,给予用户他们所需的反馈。
 
它就像改变按钮背景色或让它跳动那么简单。这个类型也包含了侧边栏菜单“滑入”页面的动画,还有模态窗口放大显现的动画。
 
 
二.等待动画
这个也是,同样是为了给用户提供反馈。这类动画,会在某些操作正在后台进行时呈现给用户,你可不想让他们等到崩溃。
 
这类动画的作用很久以前就得到了印证,就在图形化用户界面首次发明的时候。最早的方式是鼠标指针变成沙漏,还有进度条也是。Apple在某时刻采用了“旋转的沙滩排球”,而windows则呈现了文件优雅地从一个文件夹飞向另一个。这些惯例第一时间就被网页采用了,理由很充分。当用户开始疑惑正在发生什么时,他们会一直点击或点按。这是沮丧的一种表现。他们认为这样会让进度加快一点。
 
无论哪种方式,告诉用户正在发生的事情,哪怕通过一个简单的进度条,也能极大减轻精神负担……即使对于我们这些使用电脑很久的用户也是一样。
 
三.讲故事的动画
如今,用动画来讲故事已经超越了卡通。实际上,我要讲的完全不是那些动画。而是那些被设计出来与用户互动(比如向下滚动)的网站,操作引发了动画,讲述了故事。
 
有些普遍例子,那些页面会在你眼前将产品“装配”起来,以此展现新产品。其他则更像卡通片,有个小卡通形象跟随你到页面的每个地方。
 
这些动画的作用……存在争议。通常它们并没有提升可用性的意图,只是为了让用户印象深刻,为他们提供页面主题相应的环境。它们可能是在试图呈现一件产品的工艺,或是分享打造这件创造物的经历。
 
动画能否做到这点,取决于它们本身的质量。是否过度影响了网站的性能,或是影响了页面内容本身。如果用户在网站上找不到自己要的东西,世上所有的动画效果都救不了它。
 
有两个案例我的确很喜欢,它们来自深谙此道品牌:Apple和Sony。
 
Mac Pro的页面,致力于向下滚动时精确呈现内部构造:
 
同时,在Sony网站中,他们展现了多款不同设备。当然,“装配感”并没有那么强烈,各部分相互撞击,在火焰效果中成型。
 
四.纯装饰动画
无论好坏,有些人在网站上加入一些没有目的的动画,只是为了让人看到。这值得吗?
 
值得,也可以说不值得……
 
我会尽量避免,因为它使人分心。你想要人们的视线集中在商品信息和购买按钮上。让他们来此达成目的。如果网站没有提供特定的目标,或者确定目标时过于使人分心,他们就不会再回来了。
 
 
装饰性的动画应该完全隐藏起来。在人们完成行动召唤后再展现出来。还可以包含微妙的动画,只在用户触发某个特殊操作时才展现,比如鼠标悬停在页头和页尾的某个小物件上面。
 
在WDD网站中,鼠标悬停在logo上会让它动起来,虽然这点尚存争议。因为logo是个链接,并非纯装饰物,但它仍然是个不错的例子。Google随便一搜,就会找到很多带有彩蛋的网站(比如跳出一只哥斯拉并且咆哮怒吼……我不是在开玩笑)。
 
还有很多其他例子,包括Google众所周知的彩蛋:
 
 
在任何页面一路滚动到最底部,会出现一只友善的恐龙“给你拍照”。而且在有气球的页面上,画面中的气球会微妙地来回飘浮。
 
本文编辑由深圳网站建设公司鲍余网络小编老余编写,转载请注明。
关键词:

相关文章:

有做网站需求?   联系客服经理 提交需求 直接拨打业务电话:0755-85278776