×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

首页 > 新闻 > 网页设计 > 网页设计中的动画详解

网页设计中的动画详解

2015-06-261022分享

网页设计中的动画详解

一.界面元素动画

这是一种让用户了解他们的操作(比如点击)被记录的动画。变化的发生需要他们的点击来催化,无论是转向另一个页面,打开侧边栏或模态窗口,还是在客服窗口中发送电子邮件。

不是说有反馈更好,而是如今反馈是必须的,这是个扁平化设计的世界。人们需要了解界面与装饰物之间的区别。让元素运动起来,是简单微妙的交互方式,给予用户他们所需的反馈。

它就像改变按钮背景色或让它跳动那么简单。这个类型也包含了侧边栏菜单“滑入”页面的动画,还有模态窗口放大显现的动画。

网页设计中的动画详解

二.等待动画

这个也是,同样是为了给用户提供反馈。这类动画,会在某些操作正在后台进行时呈现给用户,你可不想让他们等到崩溃。

这类动画的作用很久以前就得到了印证,就在图形化用户界面首次发明的时候。最早的方式是鼠标指针变成沙漏,还有进度条也是。Apple在某时刻采用了“旋转的沙滩排球”,而windows则呈现了文件优雅地从一个文件夹飞向另一个。这些惯例第一时间就被网页采用了,理由很充分。当用户开始疑惑正在发生什么时,他们会一直点击或点按。这是沮丧的一种表现。他们认为这样会让进度加快一点。

无论哪种方式,告诉用户正在发生的事情,哪怕通过一个简单的进度条,也能极大减轻精神负担……即使对于我们这些使用电脑很久的用户也是一样。


三.讲故事的动画

如今,用动画来讲故事已经超越了卡通。实际上,我要讲的完全不是那些动画。而是那些被设计出来与用户互动(比如向下滚动)的网站,操作引发了动画,讲述了故事。

有些普遍例子,那些页面会在你眼前将产品“装配”起来,以此展现新产品。其他则更像卡通片,有个小卡通形象跟随你到页面的每个地方。

这些动画的作用……存在争议。通常它们并没有提升可用性的意图,只是为了让用户印象深刻,为他们提供页面主题相应的环境。它们可能是在试图呈现一件产品的工艺,或是分享打造这件创造物的经历。

动画能否做到这点,取决于它们本身的质量。是否过度影响了网站的性能,或是影响了页面内容本身。如果用户在网站上找不到自己要的东西,世上所有的动画效果都救不了它。

有两个案例我的确很喜欢,它们来自深谙此道品牌:Apple和Sony。

Mac Pro的页面,致力于向下滚动时精确呈现内部构造:

同时,在Sony网站中,他们展现了多款不同设备。当然,“装配感”并没有那么强烈,各部分相互撞击,在火焰效果中成型。

四.纯装饰动画

无论好坏,有些人在网站上加入一些没有目的的动画,只是为了让人看到。这值得吗?

值得,也可以说不值得……

我会尽量避免,因为它使人分心。你想要人们的视线集中在商品信息和购买按钮上。让他们来此达成目的。如果网站没有提供特定的目标,或者确定目标时过于使人分心,他们就不会再回来了。

网页设计中的动画详解

装饰性的动画应该完全隐藏起来。在人们完成行动召唤后再展现出来。还可以包含微妙的动画,只在用户触发某个特殊操作时才展现,比如鼠标悬停在页头和页尾的某个小物件上面。

在WDD网站中,鼠标悬停在logo上会让它动起来,虽然这点尚存争议。因为logo是个链接,并非纯装饰物,但它仍然是个不错的例子。Google随便一搜,就会找到很多带有彩蛋的网站(比如跳出一只哥斯拉并且咆哮怒吼……我不是在开玩笑)。

还有很多其他例子,包括Google众所周知的彩蛋:

网页设计中的动画详解

在任何页面一路滚动到最底部,会出现一只友善的恐龙“给你拍照”。而且在有气球的页面上,画面中的气球会微妙地来回飘浮。


本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址:http://www.mcykj.com/show-19-240-1.html转载请注明出处!

  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

北京网站制作公司:常见的网页设计技巧
师通常要扮演多种角色,并且要掌握如何构建一个有效实用的网站布局知识……
网站首页设计:首页设计的基本原则
网站设计中需要注意到很多的问题,其中有一个关键问题,那就是网站首页……
网站建设论坛:常用系统及外链技巧
而且,随着网络技术的发展,建设一个论坛已经不再是什么难事。常用的网……
网站制作报价:为何差别那么多
如果忽视了自身的网站建设就等于失去了市场,而现在一些打算进行企业网……
网站建设计划书:应该如何建设网站
,确定网站规模、投入费用,进行必要的市场分析等。只有通过网站建设计……
  

ABOUT US

北京梦创义科技有限公司成立于2012年
创始人以及初创团队成员均来自各大互联网公司
目前公司拥有员工近百人  平均3年以上从业经验
核心团队成员均有10年以上互联网从业经验

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.mcykj.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设logo

Copyright 2008 ASAweb company. All rights reserved.