《渐进增强——跨平台用户体验设计》一1.3 技术实现和用户体验

1.3 技术实现和用户体验

早期的Web技术更新得非常快。比方说,HTML的标准还未统一,微软和Netscape两家公司争相往HTML里面添加新的元素和行为,以证明自家技术比对方更厉害。后来又有了Java applets[6]、RealMedia、Shockwave、Flash和其他的私有技术,我们的网页变得很复杂,同时用户需要安装很多插件来支持这些技术。

各家标准和技术的不统一导致了“优雅降级”概念的诞生。所谓优雅降级,指的是在用户的浏览器不能完全支持某项功能的时候,为用户提供一个在可接受范围内的浏览体验,并且告诉用户如果要提升体验的话,应该如何获取所需的技术支持。举例来说,我们在开发的时候使用了某种技术,如果用户的浏览器不支持此技术,我们会判断这些浏览器,然后给他们如下提示。

请使用IE浏览器以获得最佳访问效果。
请使用Netscape浏览器以保证页面浏览正常。
此网站需要Flash支持,请安装Adobe Flash Player。
优雅降级虽然给出了这些必要的提示,但是这种差异化的体验,还是让一些用户感觉自己被忽视了。

还有一种做法更方便,不用测试任何浏览器兼容问题,在用户访问网站时,根据用户代理字符串(User Agent)判断,如果用户使用的是老旧的浏览器,那么就把他们引导到一个专门让他们下载新浏览器的页面(图1-3)[7],这样用户当然就不会发现网站的兼容性问题了。

让用户看到一些内容,然后告诉他需要更新浏览器才能获得更好的体验;亦或直接告诉用户,下载新的浏览器吧,否则你什么都看不到——这两种方法哪种好呢?

我已经有点选择恐惧症了,这种瘸子里面拔将军的问题,在我看来,就是五十步笑百步。

一个教训
我曾经帮WikiHow公司做过一个Chrome浏览器应用[8]。当时Chrome的“网上应用商店”还是一个新鲜事物。我们的客户希望这个Web APP可以做一些酷炫的CSS3动画,用一些高大上的Web字体,搞一个Web SQL本地数据库,要提供离线支持等。总之,客户说要用到很多“HTML5”的新属性,还要做成一个单页面APP。由于只需要兼容Chrome,所以我们觉得技术难度不大,一口答应了下来。当我们设计开发的时候,采用了优雅降级的方法,屏蔽了一切通过非Webkit内核浏览器访问的可能。

谁知,隔了一年之后,这个客户又回来了,告诉我们,让这个APP兼容Firefox和IE9浏览器吧。你们可以猜到,这时我们的心里几乎是崩溃的。

因为这个APP完全是为Webkit内核浏览器量身定制的,所以改造起来有一点麻烦。如果说仅仅是改写一些CSS代码以兼容Firefox和IE,添加一些DOM(文档结构模型)节点,改写一些Javascript的API的话,这些都容易。但是,WebSQL数据库不支持Firefox和IE浏览器,这是硬伤啊。我们表示必须放弃使用WebSQL,另寻数据库的解决方案。

如你所知,WebSQL几乎已经被W3C(万维网联盟,负责制定绝大多数的Web标准)放弃了,现在只有Webkit内核的浏览器在提供支持。Firefox和IE浏览器看样子永远也不会支持这种技术了。而IndexedDB现在的兼容情况也不是很乐观。思来想去,最终,我们选择了使用localStorage来代替数据库存储,好处是,我们可以少重构一些代码。另外我们发现,APP的运行速度可以提升不少。

项目重构下来,花费的预算和时间差不多是去年一开始做这个项目的40%。我后来做了一个估算,虽然我并不能准确地模拟一个项目计划,但是按照以往的经验来说,如果一年前我们采用渐进增强的策略,这次项目重构的预算绝对低于40%。另外,项目的稳定性、代码的健壮性肯定会更好,因为如果按照渐进增强的开发方案,则此次重构是不需要改写JavaScript代码部分的。

在和项目中的其他设计师沟通之后,我发现,40%这个数字可能还是低了。我想起一个有关Google地图的一个传说。那时Google地图项目刚启动,团队的任务是建立一个个的地图模块,他们使用AJAX拉取一个个的地图文件,当发现这些地图中的JavaScript的兼容性有问题时,重新改写这些代码的工作量已经非常大了。Google的工程师为了避免今后发生类似情况,在重构代码时使用了渐进增强的思想去指导整个流程——这个传说我忘记是谁告诉我的了,虽然细节不可尽信,但是事件本身却发人深省。

上面关于Chrome APP的故事是一个反面的例子。还记得一开始我分享的那个例子吗?之前我曾经说,我们的团队曾经兼容了1400个浏览器,只增加了客户15%的预算。而在刚才这个反面的例子里,我们只兼容了两个浏览器,却增加了客户40%的预算。哪种方案更好,我相信任何人都会算这笔账。采用渐进增强的方案可能在项目开始之前需要多花一些时间去思考,但是会给后来的设计开发节省大量的时间。

在处理浏览器兼容方面,尤其是现在,我们要面对如此多的浏览器、移动设备,与其使用优雅降级的方案,使用渐进增强的方案会节省大量的资源,从而在单位时间内产出更多的价值。在效率方面,优雅降级在渐进增强面前就是个毫无战斗力的渣渣,注定要被吊打。

好吧,说了这么多,怎么做才能实现渐进增强呢?

渐进增强,简单说,就是创造连续的用户体验。

时间: 2024-08-04 04:17:43

《渐进增强——跨平台用户体验设计》一1.3 技术实现和用户体验的相关文章

《渐进增强——跨平台用户体验设计》一第1章 为体验而设计1.1 优秀的代码,麻烦的设备

第1章 为体验而设计 渐进增强--跨平台用户体验设计"总有些人干过这种事,在网页顶部或底部搞一个小黄条,写上'请使用XX浏览器(如IE6)访问本网站以获得最佳访问效果'.要我说,这种人到底是多么想回到过去啊,回到Web诞生之前吗?那样你就不可能在别的电脑.别的文字处理器,或者别的网络来访问你这个不想让别人看的网站啦!" --Tim Berners Lee 互联网中,唯一不变的就是变化.四下观望,永远都有新的设计风格,新的语言.框架.工具.新的上网设备在博人眼球.乱花渐欲迷人眼,城头变幻

《渐进增强——跨平台用户体验设计》一1.9 渐进增强的设计思想

1.9 渐进增强的设计思想 渐进增强是一种设计思想.运用这种设计思想进行设计实践,会让每个设计师和开发者节省大量的时间和成本.这种设计思想帮助你了解你所面对的真实用户和设备环境,让他们获得最适合的用户体验,从而体现出Web与生俱来的适应性. 渐进增强是一种无间断,连续的设计思想,不是为了某些设备而特殊优化,而是面向不同类型的设备,累加地提供用户体验的提升.在接下来的章节中,你会学习到如何把这种思想应用到Web设计的实践当中. [1] 作者的分析代码详见https://perma.cc/4EAE-

《渐进增强——跨平台用户体验设计》一1.6 适应未知的设备

1.6 适应未知的设备 然而,还是有人认为,设计思想这东西看不见摸不着,扯那些没用的是在浪费时间.在Web设计师Tim Kadlec的博文"我们的设计并没有真正理解Web"的后面,有个读者的留言是这么说的[15]: "说得好听,但是不接地气.你得算一下捕捉用户的成本.如果一些用户根本不是你的目标用户,不能为你带来任何收益,那么,干嘛为他们进行优化?根据这种设计思想,本质上你是要为所有用户的体验负责,无形中会大量增加开发成本.但是,恕我打个比方--我们都知道成衣的尺码分大中小号

《渐进增强——跨平台用户体验设计》一1.8 分层次设计

1.8 分层次设计 渐进增强是一种设计的思考方式,关于这种思考方式,我经常拿M&M豆来打比方(图1-5).我特别喜欢吃M&M豆,所以我们想一下,是不是所有的M&M豆最里面都有一颗花生啊?M&M豆为什么要在最里面包含一颗花生,而不是别的什么东西呢?我猜,因为花生是一种普遍都能接受的食品,除了少数过敏者,很少有人不喜欢吃花生.所以,花生是M&M豆的核心,正如一个网页的内容是网页的核心.广告啊.导航啊,这些都是次要的,大家来到你的网页是来看内容的,别的都不重要. 发明M&

《渐进增强——跨平台用户体验设计》一1.5 向后兼容,向前适应

1.5 向后兼容,向前适应 中学时代,我经常用MS-DOS系统上的Word文字编辑软件写作业.这是个特别专业的软件,因为打开它就只能写字,别的什么都干不了[11].那时的Word软件没有太多的编辑选项,却也能满足大部分的需要,对于我来说,足够用了. 然而,当时我写的作业,用现在的Word软件已经打不开了.二十多年过去,这个软件已经不再支持MS-DOS版本的DOC文件. 有人说,都20多年过去了,你还惦记那些中学写的作业啊--我不是这个意思.我相信除了我之外,很多人都用过MS-DOS下的Word软

《渐进增强——跨平台用户体验设计》一1.7 提升Web的可访问性

1.7 提升Web的可访问性 Tim关于Web的看法是:任何Web页面,我们都可以把它看成一个文档.同样内容的文档,我们只需要保留一份就够了.不论用户通过何种浏览器或设备访问,内容是唯一的,不同的只是呈现形式.这样做的好处显而易见--Web世界是由"超媒体"[17]联系起来的庞大网络,我在一个页面中添加了一个超链接,却不能预料到用户是通过什么设备访问并点击的这个链接.如果文档是唯一的,那么入口链接也一定是唯一的.我只需要添加一个链接,用户无论从任何设备点击它,都能获得最佳的访问体验.

《渐进增强——跨平台用户体验设计》一1.4 你满足不了所有的人

1.4 你满足不了所有的人 在今天的Web环境中,按照PSD文件的像素去还原一个网页,然后在任何设备上都展示成一个模样的时代已经过去了.我们要考虑的因素越来越多. 在技术实现方面,屏幕尺寸.像素密度.CPU运算速度.内存大小.传感器的支持程度.功能差异.不同接口,乃至不同的操作系统.同一操作系统的不同版本.不同的浏览器,同一浏览器的不同版本.插件.插件版本.网速.网络延迟.防火墙.用户自己设置的代理.路由器,以及日新月异的技术发展,让我们的Web环境愈发复杂起来. 技术实现方面之外,我们还要考虑

用户体验设计实例:腾讯微博混乱的用户体验

在经过几年的长跑之后,微博突然一下子火起来了,开始全民微博,所有的网站都纷纷推出微博服务,这和当年博客的火爆情况类似.于是腾讯又准备开展"后来居上"策略,推出了腾讯微博,不过实际过程中腾讯微博却非常混乱无序: 发展战略混乱: 其实早在2007年腾讯就推出了微博产品:滔滔,那时正值国外的微博始祖twitter和国内民间微博的火爆时期,腾讯赶紧跟进,不过发展了两三年不愠不火,成效不大,于是腾讯不得不逐渐搁置此项目,现在沦落到成为QQ空间心情的一个辅助工具.而在去年下半年新浪微博推出并迅速火

《渐进增强——跨平台用户体验设计》一1.2 早期的Web是什么样

1.2 早期的Web是什么样 最初,我们的电脑是没有图形界面的[3],我们看到的,只是黑色屏幕上的一行行绿色的命令行和文字[4](图1-1),上网的用户个个看起来都和程序员没什么区别. 命令行模式的浏览器仅支持一些基本的文本格式,如缩进.对齐等,但是在1990年,Web上传输的内容基本都是些文本和用于发表的内容,所以这样的内容渲染程度也是能够满足人们的需要的. 我是从1990年开始上网的,本来一直用着这种命令行模式的浏览器,用着用着,我发现情况有了一些变化.1993年,美国国家超级计算应用中心(