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

简介:

本节书摘来自异步社区《渐进增强——跨平台用户体验设计》一书中的第1章,第1.3节,作者 【美】Aaron Gustafson,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.3 技术实现和用户体验

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

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

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

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


20cbc93ba2c26b8b1cac631b4426319f4c78757d

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

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

一个教训
我曾经帮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%的预算。哪种方案更好,我相信任何人都会算这笔账。采用渐进增强的方案可能在项目开始之前需要多花一些时间去思考,但是会给后来的设计开发节省大量的时间。

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

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

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

相关文章
|
前端开发 API
css:网页引入字体@font-face以及动态加载字体
css:网页引入字体@font-face以及动态加载字体
278 0
css:网页引入字体@font-face以及动态加载字体
|
移动开发 Dart 前端开发
【技术干货】移动端跨平台技术发展
移动端跨平台技术一直在寻求研发效率动态性与性能体验间的平衡,本文归纳总结Hybrid技术、React Native技术、Flutter、小程序的技术演进与未来趋势。
2221 0
Axure实战18:创建一个PRD产品需求文档生成器
Axure实战18:创建一个PRD产品需求文档生成器
806 0
Axure实战18:创建一个PRD产品需求文档生成器
|
2月前
|
存储
pnpm修改默认存储位置
pnpm修改默认存储位置
230 0
|
11月前
|
数据可视化 JavaScript Android开发
低代码引擎 LowCodeEngine 茁壮成长的一年
低代码引擎 LowCodeEngine 茁壮成长的一年
1538 0
|
7月前
|
小程序 前端开发
uniapp+node.js(express框架)获取微信小程序的openid
uniapp+node.js(express框架)获取微信小程序的openid
141 0
|
12月前
|
数据采集 人工智能 自然语言处理
如何将最新的数据集成到 ChatGPT 智能对话中?
在金融领域,基础知识、公告数据、公开财报数据等是非常重要的数据来源。通过将这些数据集成到智能对话中,可以大大提高智能对话的准确性和可靠性。 其中,基础知识数据是指股票、基金、理财等投资产品的基本信息,如名称、代码、类型、净值等等。公告数据包括公司公告、重要新闻、财务数据等等。公开财报数据包括公司年报、季报等等。
|
移动开发 IDE JavaScript
基于优酷业务特色的跨平台技术 | GaiaX 开源解读
GaiaX 跨端模板引擎,是在阿里优酷、淘票票、大麦内广泛使用的 Native 动态化方案,其核心优势是性能、稳定和易用。本系列文章《GaiaX 开源解读》,将带大家看看过去三年GaiaX的发展过程。 GaiaX 开源地址:https://github.com/alibaba/GaiaX
445 0
基于优酷业务特色的跨平台技术 | GaiaX 开源解读
|
域名解析 网络安全 数据安全/隐私保护
vuepress2.0踩坑记录
当我们设置一个默认自定义首页,然后开启左侧菜单栏时,此时首页也会出现左侧菜单栏
517 0
vuepress2.0踩坑记录
|
前端开发 容器
N 种仅仅使用 HTML/CSS 实现各类进度条的方式 (下)
N 种仅仅使用 HTML/CSS 实现各类进度条的方式 (下)
488 0
N 种仅仅使用 HTML/CSS 实现各类进度条的方式 (下)