做好这5点基本要求 才能算一个合格的HTML5动画

恰年 网页设计 2017-12-14 22:31:10 195
摘要:随着CSS3和HTML5建站技术的发展,动效在网页设计中的作用越来越显著。与静态界面相比,动态的转变更符合人们的认知体系,可以有效降低用户认知负载。这是因为,在网站界面使用动画效果能让元素的变化、界面的转变、层次结构之间的关系更加清晰自然。从某种程度上来说,动效还是用户交互的基础。

随着CSS3和HTML5建站技术的发展,动效在网页设计中的作用越来越显著。与静态界面相比,动态的转变更符合人们的认知体系,可以有效降低用户认知负载。这是因为,在网站界面使用动画效果能让元素的变化、界面的转变、层次结构之间的关系更加清晰自然。从某种程度上来说,动效还是用户交互的基础。那么,什么样的动效才是有效的呢?小飞浏览了不少网站,总结出了5个核心准则,现在一起来看一下吧。

  1、自然流畅

  一个好的动画效果应该是自然流畅的。在很多糟糕的网站设计中,我们可以看到页面或元素的状态改变都很生硬、突兀,这会让用户产生困惑:为什么某某元素突然出现或消失?任何事物都存在一个转变的过程,人们早已在自然界、生活中形成了这样的认知规律。所以当网站的页面有两个或多个状态,需要使用动画效果做过渡时,一定要保证它的自然流畅,让用户明白所以然。下图就是一个比较好的示例,当用户在列表中选取一个项目点击查看时,小卡片会展开为大卡片,展示众多细节,这种动效是有规则可循的。

  

undefined

 

  2、层次分明

  一个高效的动效应该是层次分明的。层次分明的动效一方面能够清晰展示页面状态的变化,另一方面能够有效抓住用户的注意力,决定着用户的关注持续时间。以下图为例,圆形的悬浮按钮处设置了动效,它会扩展为带有3个按钮的头部导航元素,导航界面与原先的界面有很鲜明的层次分割。虽然初次浏览的用户难以预测到这一转变的发生,但是这种形式的动画能够很好地保持用户的注意力,引导用户进行下一步的交互。

  

undefined

 

  3、关联性

  网站页面上动画效果大多都涉及到前后元素或状态之间的变化。虽然我们在前面也强调了不同元素和状态之间的层次分明,但是,光有层次感可不行,动画效果也要有逻辑感,能呈现出一定的关联性,让用户清楚界面变化的过程。下面以两个栗子给大家实际展示一下什么是动效的关联性。

  在第一个栗子中,新出现的界面与动效触发点较远,这让整个界面看上去有断层的感觉,用户在浏览起来时也没有那么顺畅;

  

undefined

 

  在第二个栗子中,新出现的界面就是从触发点延伸出去的,这种形式的动效在关联性上就做的很好。

  

undefined

 

  4、快速精准

  如果说网站中的动画效果只能有一个准则的话,那一定就是动效的快速精准。当我们在网站中设计转场动画时,动效的速度绝对是一个需要重点考虑的因素。它既不能太慢,浪费访客的时间,也不能太快,让访客觉得难以理解。下面是一个反面教材,动画效果的速度太慢了,这种不必要的延迟会加长用户的等待时间,让用户觉得烦躁。

  

undefined

 

  这还有一个正面的栗子。当元素在不同状态中切换时,动效的速度是恰当的,足够快速精准,也足够让用户理解。小飞建议,为了兼顾动效的效率、用户理解的顺畅,动效应该在触动后的0.1s内开始,在300ms内结束,这算是一个最佳的状态。不过这条准则也不是固定不变的,你可以根据自己网站动画效果的实际状况进行调整。

  

undefined

 

  5、简单清晰

  动画效果还应该简单清晰。如果用户界面上存在许多动态或交互的元素,用户的注意力会分散,不知道究竟应该点击哪一个。这在一定程度上会引起用户的混乱。

  所以,动效应避免一次呈现过多效果,尤其当动效同时存在多重、复杂的变化的时候。少即是多的原则对于动效同样也成立。如果某个动效的简化能够让整个UI更加清晰直观,一定要去进行修改。还有,当动效中同时包含形状、大小和位移变化的时候,一定要保持移动路径的清晰,让状态变化更清晰。


版权声明

本文仅代表作者观点,不代表本站立场。

本文系作者授权本站发表,未经许可,不得转载。

相关推荐
优能自媒体系统采用独家首创的广告赞助模式,不仅适合于个人自媒体的广告投放,更加适合于团队自媒体人集体创作。仅需999元即可享受终生授权!远非市面上其他模板网站所能比拟。优能自媒体用过才说好!
优能cms 刚刚 优能广告
作为设计师,利用设计工具化可以帮助我们节省因重复设计产生的工作时间,实现从设计支撑到设计驱动的价值转化。让我们更专注于用户体验和对产品的创新,并且把自己带到更高的视野,经过全链路实践,提高自身专业影响力和核心竞争力,从而完成设计新时代的进阶之路。
恰年 2017-12-30 815 组件化设计 
  虽然有很多优秀网站可以借鉴,但是设计一个出色的网页并不是一件容易的事。尤其对于专业从事网站设计的设计师来说,更是如此,在日复一日不间断的网站设计面前,不仅已经审美疲劳而且已经创意枯竭。可是由于现在网站都做的很漂亮,用户的审美也变的挑剔起来,如何做出富有新意且让用户满意的网站,是一个不小的挑战。
恰年 2017-12-30 726 网站设计 
看看这些体育俱乐部网站的设计理念获得灵感!这些体育俱乐部网站可以应用于任何体育相关的网站,从足球,篮球,健身,瑜伽等等。
恰年 2017-12-25 926 网页设计 
作为一名优秀的设计狗,要是没有十个八个设计素材网站,或者哪个素材网站的会员,都不好意思说自己是从事设计行业的。
恰年 2017-12-24 872 网站设计 
在各种UI表单当中,错误信息的呈现形式常常存在一些潜在问题,有些产品甚至直接忽略了报错信息。报错信息的设计不当有很多不同的呈现形式,不过大多数都表现为在错误的时候提醒,或者包含有误导性的信息。
恰年 2017-12-23 693 UI报错信息 
文章排行
  • 日榜
  • 月榜