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

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

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

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

相关文章
|
9月前
|
算法 测试技术 数据安全/隐私保护
规则引擎算法的魅力:文档管理软件的灵活性与可扩展性
数字时代已经来了,文档管理软件已经成了企业和组织的宠儿。它们不仅能够帮你打理一大堆文档和信息,还能让你的工作效率飙升,减少犯错的机会,而且信息查找和分享也变得飞快。但是,随着各种各样的需求一直在不停地增长和变化,这些软件也要不停地充电升级,以满足用户们的新愿望。规则引擎算法在这方面可是大有作为,尤其是在让软件更灵活、更能扩展方面,它功不可没。接下来就让我们来看看规则引擎算法在文档管理软件中有哪些作用——
194 1
|
Linux 开发工具 Windows
改善编程体验: IdeaVimExtension介绍
# 改善编程体验: IdeaVimExtension介绍 ## 动机 Intellij IDEA是个非常优秀的开发环境,提供了相当好用的快捷键,让用户有机会脱离鼠标来使用IDE. 另外官方还提供了IdeaVim插件,熟悉vim的用户可以使用几乎与vim相同的方式操作IDEA的编辑器来编写代码.
4546 0
|
1月前
|
机器学习/深度学习 搜索推荐 Android开发
在安卓应用开发中,构建高效的用户界面是至关重要的一环
【6月更文挑战第10天】本文是关于构建高效安卓用户界面的指南,分为设计原则和技巧两部分。设计原则包括一致性、简洁性和可访问性,强调遵循安卓系统规范、保持界面简洁及考虑不同用户需求。技巧方面,建议合理布局、优化图标和图片、使用动画效果、提供个性化设置以及优化性能。随着技术发展,开发者需关注AI和机器学习,以创新应用体验,适应用户需求变化。
35 0
|
2月前
|
测试技术 开发工具 Android开发
安卓应用开发:打造高效用户界面的关键步骤
【5月更文挑战第27天】本文将探讨在安卓应用开发中如何通过关键步骤打造高效且用户友好的界面。我们将分析UI设计的基本原则,探究Material Design指南,并讨论如何利用Android Studio中的设计工具来优化布局和提高性能。此外,文章还将涉及如何进行有效的测试以确保应用界面既美观又实用。
|
2月前
|
搜索推荐 UED
产品服务的用户体验特性
产品服务的用户体验特性
54 5
|
11月前
|
搜索推荐 SEO 智能硬件
无障碍Web设计与开发的重要性
无障碍Web设计与开发的重要性
137 0
|
视频直播 CDN
一对一视频app开发的前景如何,存在哪些优点
一对一视频app开发要从功能和技术两方面进行考虑,实现流畅稳定功能的同时,实现系统更好的性能。只有同时优化功能和性能两方面,才能提高用户留存率。
想学习UI设计,但是审美能力很差怎么办?
最近很多学员问我,说自己审美能力差,还能不能学习UI设计。针对这个问题我就来和大家一起探讨一下,如何提升自己的审美能力。 其实审美,并不是天生就有的,审美全是后天培养的,不管是设计,还是其他的一些事情,对于美与丑,都是后天的学习与指导产生的,也就是说这都是从小就开始养成的,从小就开始培养的,就跟小时候大人教我们那些事物是好的,那些事物是坏的,是一样的道理。
1021 0
|
编解码 移动开发 Android开发
[译]移动开发中用 1x 视觉稿设计的好处
本文讲的是[译]移动开发中用 1x 视觉稿设计的好处,那我就开门见山了:我确信你们很多人都已经知道 1x 设计的好处了。但是呢,言语和风声总不会那么一致。在移动设备上,到底是使用 1x 设计稿更好,还是 2x 设计稿,一直没有达成共识。
1427 0