Flash动画在网页上对用户体验所产生的不利影响

在其他大型网站视觉规范中都会有动画这方面的限制，因此我把这条也单独列一项到视觉规范里。其实这条规范貌似不太引人注意，而我们实际工作中对这样的限制也基本是忽略无视，不过动画对于丰富网页表现形式的同时也有它的弊端，一旦被误用和滥用有时会产生严重的后果。

以前我所在的公司发生过这样一件事，网站首页一向都非常正常，访问速度也一直比较快，忽然一天上午，所有人打开公司的首页，发现浏览器都死掉了，无论是ie还是其他浏览器，打开任务管理器查看，cpu占用率是100%，再让外面的人访问，出现同样的问题，技术总监一时束手无策，也看不出是什么技术问题。我倒是看到那天的首页比平时多了两条效果极眩的对联广告，也随浏览器死掉停在了效果最眩的那一刻，找到做对联广告的那位美术部同事，本地打开动画文件，再打开任务管理器，竟惊人的发现cpu占用率flash那项峰值去到了80%多，还是在美工cpu性能比较好的机器上测试的，这样的动画去到网站首页，还是要对联成双的出现，浏览器当然要处理不过来挂掉了。这次的经验教训还是非常深刻，自从这次以后，我都要求做动画的同事做好动画后，Ctrl+Alt+Del自检，CPU占用率峰值在50%、60%以上的就基本不能通过了。

平时大家做动画尤其是要挂网上的，关注得最多的无非是体积大小而已，都知道体积大，等待下载的时间长会影响用户体验，但动画体积大还未到严重影响用户体验的地步，而且还可以用下载进度条来优化，而CPU的占用率高的话，令到浏览者电脑假死，就算动画做得再眩，体积优化得再小，对用户的打击却是致命的。偏偏对于这个问题，很多动画制作的同志们都忽视了。在网易的页面上依然会偶尔碰到极耗资源的flash动画出现，估计很大部分是来源于客户直接给过来的广告……前不久就给我逮到了一个，还害我浏览器假死了5秒，如下图所示页面右列三国风云的flash广告，下载至本地测试cpu占用率峰值达到70%多。

造成flash动画cpu占用率高通常于几个方面：有透明度的变换，特别是png透明图比如有些复杂光线或者有些发光效果只能用外部软件做好，存成透明png图导入flash进行伸缩或移动操作；多节点的矢量图变换动画，有个误区就是以为矢量图变换不耗资源，都尽量转变成矢量，实际结果是多节点的矢量图运动和变化极耗资源，但尽量转化成矢量图是没错的，可以尽可能缩减flash体积；还有一些计算比较复杂的flash编程实现的动作，如大量使用一些循环函数onEnterFrame、setInterval等。这些都极耗资源，应当尽量回避。另外优化动画mc结构、将复杂耗资源的动画在时间轴上分开、减少位图使用、尽量调用相同的背景或元件都能明显使flash动画体积减少和cpu占用率高的风险降低，解决了这两个问题，flash动画的用户体验就算是成功一半了，剩下的就是创意和视觉效果问题。

至于在网页上一屏内动画数量的限制，大型网站都会有所规定，一般是不超过2个，但在网易的页面上，这点实际上做得并不好，究其原因可能比较迁就了广告的要求。如下图所示一个网易新闻最终页头屏flash广告达到了6个之多。

 

这里说的一屏是指浏览器一次所能浏览的区域，因为对于CPU来说，在屏幕上能显示到的flash会处理，而显示不到的则不会处理，一屏内显示的flash动画的CPU占用是一个叠加的效果，如刚才那头屏6个广告的页面，假设每个flash动画占用10%CPU，那叠加的效果就是60%，大大增加了处理的风险。再有从视觉角度考虑，一屏内6处动画闪动，也实在让人视觉疲劳，广告的效果其实也并不好。如果实在要加那么多flash广告，可以分散至各屏摆放。

另外一点是如果页面已经有视频等极占CPU资源的产品时，不适宜再有任何的flash动画。前不久奥运视频报道，sohu就是因为在视频页还设置了一个极耗资源的flash弹出广告，极度影响用户体验而备受责骂。

 

链接该在原窗口打开还是新窗口打开

我觉得是很重要的一个问题，如果一个网站所有的页面都在原窗口打开，肯定会造成网友阅读信息的不方便，必定会频繁进行返回操作；如果一个网站所有的页面都是以新窗口打开，那会造成网友要不时关闭不必要的窗口，同样会造成阅读信息的不方便。因此制定一个链接打开方式的规范对于网友来说是必要的，有利于提高用户体验、有利于阅读并更好的获取信息。所以我把这项也写到规范当中。

其实这也是一个非常有争议的问题，网上也有不少这方面的讨论，国外普遍的观点是用户需要能控制与其互动的界面，替用户做决定是错误的，强制用户去打开新窗口也是错误的，因此国外一般网站都会在原窗口打开新链接。而国内由于网民思维和浏览的习惯不一样，大多数会是新窗口打开链接。Google原本都是原窗口打开链接，进入中国后中文版一开始的时候也是原窗口打开链接，后来是改成了新窗口，正是因为Google发现了中国人浏览习惯的差异。而最近比较热的开心网则是另外一个比较失败的例子，里边所有的链接都是原窗口打开，以致于我在浏览一个好友的好友名单时，链接过去了另外别人的空间，浏览了一遍，发觉还想回去那好友的好友名单那里浏览其他人的空间，而不得不去点n次返回。国人的浏览习惯就是这样，不会右键新窗口打开一个链接，又或者是按住shift去点一个链接。所以我们的网页要去迁就国人的浏览习惯。

但这并不是说就可以无休止的使用新窗口打开链接了，很多网页就是这样，页头那里加个base taget=blank就全然不管了，做网页的很方便，但有时累了用户。一些有分页的页面，如果全部是新窗口打开，那会是一件很恐怖的事情，网易的股票有些页面有类似的情况。而同级的频道或子频道间的跳转，因为有具体的导航可以很方便跳转，也应该设为原窗口打开。

 

出错页面的设置

其他大型网站规范都有出错页面设置这项，显得这项还是非常重要的，而网易这方面做得不好。

有个统计表明，在搜索引擎大行其道的今天，一个网站约40%的流量都是搜索引擎带来的，而在搜索引擎搜索到的网页，不可避免的有些陈旧或者是已经访问不了，设置出错页面来加以引导用户去浏览相关内容，会带来额外的流量。另外一些功能性页面可能会程序出错或者由于网络的原因而出错了，那出错页面会引导用户完成相关的操作。

出错页面的设置不仅可以在使用性和功能性方面提升用户体验，还能提高网站满意度和品牌形象。

原文：http://www.ued163.com/?p=188