令人愉悦的动效几乎已经成为如今网页设计的标准配置了,融入动效的互动细节让现代网页同以往的设计在根本上区别开来。动效不仅可以表现状态,引导多用户的关注点,帮助用于预测互动的结果,甚至影响多用户的行为。
在逐步的探索和发展过程中,动效在网页和 WordPress APP 中的运用方法与技巧已经逐步成熟,形成了一套相对系统的模式。今天的文章我们通过一系列例项,来展示一下动效是如何改善整个多用户体验的。
载入动效
动效常用的一个地方就是进度条。载入进度条的载入动效会改变多用户对于时间的感知,通过转移注意力的方式让多用户等待感降低。
简单的载入动效其实比复杂的更好。额外的东西,比如声音效果就没有存在的必要了。多用户在有趣的动效上投注了越多的注意力,就越容易忽略等待的过程。
即使载入时间很短,有趣的动效依然能让这点时间变得好玩。
进度动效
动效还可以用来展示互动或者操作的进度。下面的这个载入进度条就是这类动效的代表:
介面框架
介面框架会将介面载入之后的大概样式给展示出来,介面框架会让多用户产生内容一瞬间就载入好了的错觉。这种动效可以应用在绝大多数的网页和 WordPress APP 当中,它会明显强化多用户的参与感。
视觉反馈
将介面反馈视觉化地呈现给多用户是非常实用的. 良好的互动设计需要视觉反馈来支撑,传达互动完成后的结果,让互动可用、可见、可预期。网站介面中哪些元素可互动如果是不可知的、互动的结果也不可预期,混乱就不可避免了。周密的互动设计可以帮助多用户理解,将这种混乱降到低。
悬停动效
桌面端互动主要还是借助触控板和滑鼠,游标悬停特效很大程度是为这种情况而存在的,同时,它也是常见的动效之一。
当多用户不知道某个控制组件怎用的时候,会很直觉地将游标移动到上面去,这个时候,悬停特效能够很好的吸引他们的目光。
移动端由于互动方式的差异,几乎没法使用悬停动效。无论是按钮还是输入框,当您点选萤幕的时候就已经触发控制组件了,只能在随后呈现结果,而无法像悬停动效一样预览。
长滚动页面
不得不说,屏的设计一直是网页设计的焦点所在,设计师将注意力集中在这个充满价值的区域是有道理的。但是页面余下的部分同样很重要,事实上,有个说法是 “正常媒体页面上百分之 66% 的多用户注意力都在屏之下”,因此结合了动效的长滚动页面同样非常有用。
动效让滚动式的互动充满了趣味。
动画能够让长滚动页面所承载的故事更加鲜活有意思,相比于炫酷的动效,微妙的动效给人的感觉更加到位。您可以将您的网站设计成可滚动的 “区块”,每个区块中呈现不同的内容,下面的案例就是这么做的:
结语
动效拓展了介面的视觉维度,它连线互动,让介面的功能和效果都更加圆融。