“看不见”的动画效果

   化动画效果于无形,是动画效果的最高境界。

  动效UI无疑已成大势所趋。但很多设计师对动画效果本身过于关注,反而忽视了UI设计的核心是完善细节和功能以取悦用户。2013年,Pasquale D’Silva接受《Web Directions South》访谈,对此有个很不错的建议。建议如下:

  动效越不易察觉越好

  别让用户能明显地意识到“这是个动画效果呀”。

  这正是我们Campaign Monitor's邮箱的幕后团队铭记并践行的原则:加动画的目的是提高性能,润物细无声地给予用户恰到好处的反馈体验。

  做了一年邮箱,我切实体会了做网页动画(区别于原生应用)的纷繁复杂,远不止是调速,定距,塑形或者设置平滑值。同一个动画效果在不同的设备和浏览器显示得不一样,有的甚至就不能正常显示。我们不得不创造更好的用户体验环境以迎合平台间的差异性。举例来说,苹果为27英寸的iMac设计了许多漂亮又实用的交互动画,但最终都没有投入生产,就是考虑到部分用户会无法忍受这些动效在其他设备上变得生涩卡顿。

  动画效果和交互原型在概念和设计阶段的方案五花八门,但只有最实用和最高性能的才能投入生产。我们这些人的工作就是筛选出哪个最实用,进一步改进直至无可挑剔。一切的一切都是为了改善用户体验。以下展示了筛选历程:

  如何出现下拉界面

  用户点击“下拉”按钮,界面以按钮为起点淡入。那么显然这个界面链接自这个按钮。


  如何折叠工具条

  向下折叠其它栏目,就可以展示本栏目相关标题和内容了。在指针经过时给予轻微的延迟效果,同时让该区域的UI标志颜色淡化,这能很直观地告诉用户这块“图”可操作。


  按钮呈现的状态

  等待总令人抓狂。用户等待接收邮件文档时,我们可以做个恰如其分动画效果表示后台是在忙活着的。当然它实质上不能改变收件所花的时间,但确实能让等待不那么难熬。


  添加或复制界面

  用户要添加或复制某界面时,一个新的空间迅速从画面中央淡入视野。非常直观。


  删除界面

  当你的邮箱里有太多相似或近乎重复的内容,这个动画效果就要派上用场了。向上滑动要删的内容的界面,它就可以消失了。


  界面控制器

  用户的鼠标悬停在界面上时,该界面就会显示一些控制器。这些控制器从这个界面产生,用户很容易明白对其的操作是对这个界面的改动。


  我知道这些动效还有改进空间——内行一眼就可以看出。但为迁就某些设备,我们不能把动画效果做得太过精致。这很遗憾。不过我们落实了“以人为本”的理念,这点无可挑剔。

  当下动画效果掺和进了越来越多的领域——聊天、写作、交互设计——但这并不意味着你也要给啥都加上动效。像我前面说的,我们团队如果真做到完美,上文的那些动画效果,你用邮箱的时候压根就没发现。

  化动画效果于无形,是动画效果的最高境界。

时间: 2024-11-30 18:33:13

“看不见”的动画效果的相关文章

一看就喜欢的loading动画效果Android分析实现_Android

还是比较有新意,复杂度也不是非常高,所以就花时间整理一下,我们先一起看下原gif图效果: 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到进度条,似乎是融合进入: 5.叶子不能超出最左边的弧角: 7.叶子飘出时的角度不是一致,走的曲线的振幅也有差别,否则太有规律性,缺乏美感: 总的看起来,需要注意和麻烦的地方主要是以上几点,当然还有一些细节问题,比如最左边是圆弧等等: 那接下来我

微信自定义菜单看不见效果

问题描述 我post菜单过去返回结果是{"errcode":0,"errmsg":"ok"}已经正确了为什么看不见效果呢取消重新关注试过很多次了24小时已经过了还是没有效果 解决方案 解决方案二:你发的json没问题吧..只要成功,重新关注就应该能看到效果的啊..解决方案三:引用1楼fudongrifdr的回复: 你发的json没问题吧..只要成功,重新关注就应该能看到效果的啊.. ss="{"button":[{&

那么明显,为什么用户看不见?

一个操作后,页面弹出一个对话框告知用户操作成功,反馈够明显了吧?用户说:"啊?怎么没反应?" 一个为了用户操作便捷而设计的常用操作入口,简约的视觉与背景区别开来.可用户还是一次次冗余操作,问及则说:"啊?我没注意到啊!原来这个可以直接写说说的?!" 一个新功能上线,网站主页导航上新增了一个模块,改版够大了吧?用户说:"啊?我没看出有什么变化啊." 每次听到这样的话,设计师们就会抓狂:到底为什么啊?设计得这么明显,为什么用户看不见?? 要找到答案,

如此明显为什么用户看不见?

  一个操作后,页面弹出一个对话框告知用户操作成功,反馈够明显了吧?用户说:"啊?怎么没反应?" 一个为了用户操作便捷而设计的常用操作入口,简约的视觉与背景区别开来.可用户还是一次次冗余操作,问及则说:"啊?我没注意到啊!原来这个可以直接写说说的?!" 一个新功能上线,网站主页导航上新增了一个模块,改版够大了吧?用户说:"啊?我没看出有什么变化啊." 每次听到这样的话,设计师们就会抓狂:到底为什么啊?设计得这么明显,为什么用户看不见?? 要找到答

动画效果-android 一个旋转动画的效果,未完全展示

问题描述 android 一个旋转动画的效果,未完全展示 ndroid,我对一个按钮button做点击事件,点击button后将一张图片旋转90度,但是频繁点击的过程中,总会有几次图片没有旋转到90度,或者压根就没有旋转. 我在旋转动画的监听onAnimationEnd()方法里面,输出了debug,代码确实执行到这里了,为什么执行动画后,页面效果看不见. 请有经验和知道状况的朋友,指导下,谢谢 解决方案 最好用属性动画做,如果是需要完整执行每个点击响应就每次都起个线程post到ui进程来做动画

Android自定义View仿微博运动积分动画效果_Android

自定义View一直是自己的短板,趁着公司项目不紧张的时候,多加强这方面的练习.这一系列文章主要记录自己在自定义View的学习过程中的心得与体会. 刷微博的时候,发现微博运动界面,运动积分的显示有一个很好看的动画效果.OK,就从这个开始我的自定义view之路! 看一下最后的效果图: 分数颜色,分数大小,外圆的颜色,圆弧的颜色都支持自己设置,整体还是和微博那个挺像的.一起看看自定义View是怎样一步一步实现的: 1.自定义view的属性: 在res/values/ 下建立一个attrs.xml ,

网页设计分析:那么明显 为什么用户看不见?

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 作为用研,我们经常在可用性测试时听到用户说:"啊?我没注意啊!" 一个操作后,页面弹出一个对话框告知用户操作成功,反馈够明显了吧?用户说:"啊?怎么没反应?" 一个为了用户操作便捷而设计的常用操作入口,简约的视觉与背景区别开来.可用户还是一次次冗余操作,问及则说:"啊?我没注意到啊!原来这个可

Android自定义View仿微博运动积分动画效果

自定义View一直是自己的短板,趁着公司项目不紧张的时候,多加强这方面的练习.这一系列文章主要记录自己在自定义View的学习过程中的心得与体会. 刷微博的时候,发现微博运动界面,运动积分的显示有一个很好看的动画效果.OK,就从这个开始我的自定义view之路! 看一下最后的效果图: 分数颜色,分数大小,外圆的颜色,圆弧的颜色都支持自己设置,整体还是和微博那个挺像的.一起看看自定义View是怎样一步一步实现的: 1.自定义view的属性: 在res/values/ 下建立一个attrs.xml ,

在Fireworks中制作淡入淡出动画效果

淡出|淡入 淡入淡出动画效果 用fireworks做的淡入淡出效果,有人说看PNG格式看不出真正的步骤,所以在此补上这样一篇教程. 对象的淡入淡出效果是firewoks可以创建的普通效果之一,对两个链接对象进行插帧的时候,其中一个对象的不透明度设置为0%,一个对象的不透明度设置为100%,就可以获得淡入淡出效果. 制作步骤: 一.首先新建一个文件,画一个圆,在FILL面板中设置edge:feather:10,设feather的目的是在运动过程中边缘不至于太生硬,影响效果.点中圆,按F8键,选择t