化动画效果于无形,是动画效果的最高境界。
动效UI无疑已成大势所趋。但很多设计师对动画效果本身过于关注,反而忽视了UI设计的核心是完善细节和功能以取悦用户。2013年,Pasquale D’Silva接受《Web Directions South》访谈,对此有个很不错的建议。建议如下:
动效越不易察觉越好
别让用户能明显地意识到“这是个动画效果呀”。
这正是我们Campaign Monitor's邮箱的幕后团队铭记并践行的原则:加动画的目的是提高性能,润物细无声地给予用户恰到好处的反馈体验。
做了一年邮箱,我切实体会了做网页动画(区别于原生应用)的纷繁复杂,远不止是调速,定距,塑形或者设置平滑值。同一个动画效果在不同的设备和浏览器显示得不一样,有的甚至就不能正常显示。我们不得不创造更好的用户体验环境以迎合平台间的差异性。举例来说,苹果为27英寸的iMac设计了许多漂亮又实用的交互动画,但最终都没有投入生产,就是考虑到部分用户会无法忍受这些动效在其他设备上变得生涩卡顿。
动画效果和交互原型在概念和设计阶段的方案五花八门,但只有最实用和最高性能的才能投入生产。我们这些人的工作就是筛选出哪个最实用,进一步改进直至无可挑剔。一切的一切都是为了改善用户体验。以下展示了筛选历程:
如何出现下拉界面
用户点击“下拉”按钮,界面以按钮为起点淡入。那么显然这个界面链接自这个按钮。
如何折叠工具条
向下折叠其它栏目,就可以展示本栏目相关标题和内容了。在指针经过时给予轻微的延迟效果,同时让该区域的UI标志颜色淡化,这能很直观地告诉用户这块“图”可操作。
按钮呈现的状态
等待总令人抓狂。用户等待接收邮件文档时,我们可以做个恰如其分动画效果表示后台是在忙活着的。当然它实质上不能改变收件所花的时间,但确实能让等待不那么难熬。
添加或复制界面
用户要添加或复制某界面时,一个新的空间迅速从画面中央淡入视野。非常直观。
删除界面
当你的邮箱里有太多相似或近乎重复的内容,这个动画效果就要派上用场了。向上滑动要删的内容的界面,它就可以消失了。
界面控制器
用户的鼠标悬停在界面上时,该界面就会显示一些控制器。这些控制器从这个界面产生,用户很容易明白对其的操作是对这个界面的改动。
我知道这些动效还有改进空间——内行一眼就可以看出。但为迁就某些设备,我们不能把动画效果做得太过精致。这很遗憾。不过我们落实了“以人为本”的理念,这点无可挑剔。
当下动画效果掺和进了越来越多的领域——聊天、写作、交互设计——但这并不意味着你也要给啥都加上动效。像我前面说的,我们团队如果真做到完美,上文的那些动画效果,你用邮箱的时候压根就没发现。
化动画效果于无形,是动画效果的最高境界。