Accessibility
动画可以丰富我们的内容,也可能适得其反。
之前章节用过的例子,使用动画显示内容。假如该内容区域的初始状态是不可见的,这时候就需要注意它是否会正确显示。因为老版本的浏览器对 CSS 动画的兼容性不是很好,同样地,JavaScript 在老版本的浏览器上的运行效果也不是一直都不会出错的。我们可以使用像 Modernizr 这样的工具来规避潜在的问题。
在设计中,我们使用动画来传达我们想要表达的意义和意图。当你在设计动画时,一定要把浏览器的兼容性考虑进去。因为有的人可能正在使用屏幕阅读器或者浏览器有不同的设置,这些都有可能导致你的动画无法正常工作。但是无论动画是否正常工作,都要确保重要信息不会丢失。
好比,自动播放的动画可能会分散用户的注意,带来不好的用户体验。当你想用动画去吸引用户的注意时,试着限制一下动画发生的位置和时机。这意味着可能需要限制动画播放的时间,或确保用户在关注其他内容之前已经停止动画。
Give control
越来越多的用户使用手机来访问网页。在手机上,即没有光标,也没有悬停状态。所以我们需要围绕这个来设计动画。我经常用到的解决方案是:检测 tap 并向目标添加一个 ‘class’,然后,将 或 添加到 和 状态。
Confusion
有时候网站背离了设计的初衷,它试图让所有的东西都动起来。这样不仅会混淆网站的信息,还会让人感到困惑。特别是 UI,当向页面元素添加动画时,请确保动画被触发的方式是显而易见的。因为用户没有时间去解读复杂的设计以及移动方式,所以请尽可能的清晰。
太多的动画,或是错误的动画,都会降低用户体验。
当苹果公司推出新的操作系统 iOS7 时,它支持更多的动作和动画。其中一些的用户体验并不好,有些人喜欢在车上用手机阅读,如果有过多的动画会让人觉得更容易晕车。
我们会生病是进化产生的副作用。为什么一晕车就会呕吐呢?当身体产生不良反应时,交感神经就会兴奋,想通过调节其他器官反应来应付环境变化、维持内环境的相对稳定。于是,肠胃就受到刺激,引发呕吐。
随着可穿戴技术的发展和开发,这可能会成为一个更大的问题。在设计浮动大的动画时,一定要考虑人们是否适应各种形态的运动类型。
是了解这方面内容的一个很好网站。
Accessibility is for everyone’s benefit
可访问性不只是为使用屏幕阅读器或浏览我们内容的用户准备的。我们难免会有分心的时候。我们应该知道人们如何使用我们的产品来确保我们的动画不会适得其反。