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

1.5 向后兼容,向前适应

中学时代,我经常用MS-DOS系统上的Word文字编辑软件写作业。这是个特别专业的软件,因为打开它就只能写字,别的什么都干不了[11]。那时的Word软件没有太多的编辑选项,却也能满足大部分的需要,对于我来说,足够用了。

然而,当时我写的作业,用现在的Word软件已经打不开了。二十多年过去,这个软件已经不再支持MS-DOS版本的DOC文件。

有人说,都20多年过去了,你还惦记那些中学写的作业啊——我不是这个意思。我相信除了我之外,很多人都用过MS-DOS下的Word软件。如果说我们把文章写在纸上,可以保留上百年都不是问题,结果因为Word软件的版本更新,早年我们写下的文字,20年之后我们用同样的软件却再也看不到了。对于我们这些用户来说,这是多么尴尬的一件事情。

不光是Word,很多软件也干过类似的事情。这种情况,被称为破坏性的升级体验。就好像你好好玩着一个游戏,攒了大量经验和钱,通过努力,角色等级不知高到哪里去了。突然,游戏官方发声明说,众位玩家朋友,咱们现在在内测,游戏马上进入公测阶段,之前的数据不好意思就删档了啊。这种破坏性的升级体验在Web领域也出现过不少。比方说Angular.js这个前端框架吧,如果我们之前使用的是1.0版本,想升级到2.0版本的话,就必须重写大量的代码,因为2.0版本对老版本的代码几乎完全不兼容。

这就意味着,如果你想访问早先创建的内容,你必须维护一个可以兼容早先内容的软件环境。

Tim Berners Lee设计万维网之初意识到了这个问题。为了避免类似的情况发生,他设计了一种通用的、可扩展的描述性语言作为Web的规范,即HTML。这种对未来的兼容性,在HTML2.0的版本说明中是这么描述的[12]:

“为了保证不同版本HTML之间的兼容,用户浏览器中包含的HTML解析器里面会包含一个HTML2.0的超集,使用户访问的代码能够被HTML2.0标准所解释。如果一个HTML标签未被HTML2.0声明的话,这个标签会被自动忽略掉。同理,如果一个HTML标签的某个属性未被声明的话,这个属性也会被忽略掉。”

这就是说,浏览器会自动忽略它不认识的HTML标签和属性。这种容错处理的方式是HTML语言乃至后来的CSS的核心思想之一[13]。

HTML和CSS这两种语言都被设计为“向前兼容”。这样设计的好处在于,你今天使用这两种语言写下的文档,无论再过多少年你都可以正常浏览。HTML和CSS通过忽略它们所不认识的标签或属性来保持自身的可扩展性。每一代HTML和CSS通过新增标签或属性来发展自身,而这些新增的标签或属性并不会在旧版本浏览器上报错。

甚至,你可以在20世纪90年代的Lynx浏览器上访问最新的使用HTML5技术开发的网页。你也不必担心如果你在网页中使用了过多CSS3属性,IE6会不会崩溃。理解了这种Web天生的容错处理手段,你就会很容易理解渐进增强。渐进增强正是合理利用了这种Web的容错特性,让Web设计的可用性大大提高了。

技术服务于内容
我们知道,设备和浏览器的碎片化,以及用户使用环境和交互习惯的多样化,使得我们不得不考虑页面的可用性问题,即为不同的设备设计差异化的体验。Brad Frost——这位Web设计师将此形容为“支持程度与优化设计之间的平衡”。

“除非你有预知未来的能力,否则你不可能为未来的每一款浏览器去单独优化你的Web设计。所以我们应该寻找一种通用方法来解决问题。

而所谓的通用方法,也并非要强制让所有浏览器显示一致。话说那些只能支持WAP网络的手机,要想达到iOS或Android手机那样的渲染程度,也没什么可能性。但是,我们可以多了解一些我们要支持的设备,体会不同平台设备对交互方式的支持程度。这样,在满足最先进平台的优化设计的同时,也保留对老旧平兼容设计,也不是不可能的。[14]”

如上所言,优化设计需要考虑到不同设备的交互支持性。在此前提下,我们需要注意,内容是Web页面的核心。我们希望所有的用户都能在自己的设备上看到根据自己机器的交互特性所优化过的内容。首先,我们要保证在比较落后的设备上能够正常访问核心内容,然后在比较先进的设备上利用设备性能来逐步增加用户的交互体验——这就是渐进增强思想的核心。

渐进增强无关浏览器、设备和任何技术手段,它是一种让用户脱离设备制约,从而极大提升Web可用性的方法。渐进增强为用户提供的是差异化的体验,它并不在意你使用的是最先进的设备还是快淘汰的浏览器。设备和技术都只是形式。渐进增强的思想让网页回归了它要传达的内容本身,无论技术如何发展,都是为内容穿上了一层层更优雅的外衣,无论用户用什么设备访问,我们都能让它看到本质的内容,而外衣在不同的设备下,会呈现得略有不同。

设备的更迭和技术的发展就像开来开走的列车,赶得上这趟,未必追得上那趟。而运用渐进增强的思想去改造你的Web,会让你对用户关心的内容更加注意,而不容易被新技术迷惑,做出一些买椟还珠的事情。

时间: 2024-12-02 20:37:44

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

《渐进增强——跨平台用户体验设计》一第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.3 技术实现和用户体验

1.3 技术实现和用户体验 早期的Web技术更新得非常快.比方说,HTML的标准还未统一,微软和Netscape两家公司争相往HTML里面添加新的元素和行为,以证明自家技术比对方更厉害.后来又有了Java applets[6].RealMedia.Shockwave.Flash和其他的私有技术,我们的网页变得很复杂,同时用户需要安装很多插件来支持这些技术. 各家标准和技术的不统一导致了"优雅降级"概念的诞生.所谓优雅降级,指的是在用户的浏览器不能完全支持某项功能的时候,为用户提供一个在

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

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

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

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

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

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

渐进增强的 Web 体验(Progressive Web AMP)

本文讲的是渐进增强的 Web 体验(Progressive Web AMP), 如果你最近几个月一直关注着 Web 开发社区,可能你对渐进增强的 Web 应用(Progressive Web App 简称 PWA)已有所了解.它是应用体验能与原生应用媲美的 Web 应用的统称:不依赖网络连接,易安装,支持视网膜屏幕,支持无边距图像,支持登录和个性化,快速且流畅的应用体验,支持推送通并且有一个好看的界面. 一些 Google 的渐进式 Web 应用示例. 虽然新的 Service Worker A