Web 设计之道

最新推荐文章于 2024-11-01 15:32:36 发布

LHHfp2013

最新推荐文章于 2024-11-01 15:32:36 发布

阅读量168

点赞数

文章标签：操作系统

原文链接：http://www.cnblogs.com/h-hello/articles/1726964.html

版权

道之于90年代恰如禅之于70年代。事无巨细，皆可受之道，或推之道。Web 设计之事，虽小技，然而通览道德经，我们仍然会发现其中包含深刻的道理。道是哲学，象佛，是一种生活与处世的方式，来自古老的《道德经》，这部拥有81个章节的晦涩经文涵盖了人类的经验，但它始终讲述一个主题，和谐。

过去几年，或好或坏，我的生活与 Style Sheet 有关，我为之编写软件，教程与指南；回答了数不清的问题，通过新闻组或电子邮件；通过 The Web Standards Project 推而广之。慢慢的，我对 Web 设计有了完全不同的理解，并看到设计与道之间的关联。

我所看见的是一种紧张关系，在现实的 Web 与理想的 Web 之间；在现有的媒体，印刷媒体与 Web 之间。而现在正是需要对二者进行一次梳理的时间，也是让 Web 放手走自己的路的时间。

守旧的新媒体？

“上德不德，是以有德。下德不失德，是以無德。”
《道德经》第38章

你是否见过早期的电视节目，它们是讲解式的画面，那时的电视被贴切地称为“有画面的广播”。很多电视节目是借用热门广播节目的形式。而现在随处可见的晚间访谈，或新闻，仍然带着早期电视节目的旧媒体的影子。

早期的音乐电视也是这样，乐队仅仅是在镜头前模拟自己表演时的样子。

但一个新媒体从旧媒体发展起来，它对旧媒体的某些借鉴可以理解，但不能全盘借鉴，否则对新媒体是一种限制，所谓“下德不失德”。时过境迁，新媒体将拥有自己的形式，而将那些不合理的东西丢弃。

如果你曾看过早期的的电视剧，它们也是这样，广播剧需要有人讲解听众所看不到的画面，早期的电视剧也经常有人讲解，讲解那些观众自己能看到的东西，这就是旧媒体演变成新媒体时容易出现的问题。

Web 是新媒体，尽管它来自印刷，印刷的技巧，设计及惯例对 Web 影响巨大。然而 Web 和印刷过于肖似，那些“杀手级网站”常常是那些对 Web 的野性加以驯服，让页面中规中矩就象它们也是纸张一样的网站，也就是桌面印刷版的 Web。这种风尚很自然，“下德不失德”，但我们需要前进，让 Web 成为它自己的媒体，我们需要抛弃印刷媒体的“德”，让 Web 拥有自己的天性。

我们并不是说要抛弃几百年来的印刷，与几千年来的书写的智慧。但我们需要明白这些东西哪些是对 Web 有利的，那些仅仅是束缚 Web 的 “德”。

不要主宰你的网页

圣人“... 萬物作而不辭，生而不有，為而不恃”
《道德经》第2章

抽时间到那些 Web 设计新闻组或邮件列表看一下，你会发现被一遍一遍说了很多次的话，问了很多遍的问题，比如，“我该如何让我的网页在所有平台都上去一致？”，“如何让我的字体在 Mac 和 Windows 上一模一样？”，或者“如何控制用户的浏览器？”，控制一词的出现频率非常高。

所有这些的背后，是这样一种信念，设计者是控制者（想想像素师（pixel mechanic）这个称呼的意味）。设计者希望驾御用户的意识，希望用他们的视觉经验驾御用户的选择（比如使用固定的字号）。设计者不考虑因逻辑分辨率不同而导致的平台差别（如 Mac 的 72dpi 与 Windows 的 96dpi），他们无所不知，他们不能容忍在不同浏览器上有哪怕一个像素的差别。

当然这有些夸张，但基本事实。一个最好的例子是，当 Web 开发者们明白 CSS 并非 Web 上的桌面印刷工具时所表现出的失望。如果你是 Mac 用户，你会发现有很多非常大的网站为了防止页面字体模糊而拒绝使用 CSS，他们很可能使用 px 作为字体尺寸，而这种选择所隐含的思想就是“设计者也是主宰者”。

这种思想的根由在哪里？我觉得来自印刷。对印刷而言，设计者就是上帝，印刷是一个基于 WYSIWYG （所见即所得）的庞大行业，而众多 Web 设计者也扎根于此并对这个行业的“德”深信不疑。作为 Web 设计者，我们需要对此重新思考，放弃控制欲，并寻求与网页之间的全新关系。

为什么要这样？

“人生之柔弱，其死堅強。万物草木生之柔脆，其死枯槁。故堅強者死之徒，柔弱者生之徒。”
《道德经》第76章

不能控制网页看似一种局限，或缺陷，而来自 WYSIWYG 世界的我们初期都有这种想法，我承认最初我也这样想。但如今我不再认为那是一种局限，而是新媒体的力量所在。

事实上，我们对纸张媒体的控制才是真正的局限。想想看，我们能固定文字的尺寸，或者说，文字大小不可改变，或者，你可以说，纸张的尺寸也在控制中。

然而这未必是好事，尤其对读者。如果某个读者视力不好，你的那些固定的小字体不借助放大镜就很难看清；如果读者身处一个局促的空间，比如火车或飞机，那些宽幅的报纸就太大了，而针对这些问题，用户几乎无能为力。

我们在印刷中获得的控制力事实上是一种缺陷，不应再继承到 Web 设计中。我们知道，Web 没有这样的局限，因此应基于弹性而设计，爱这之前我们需要“萬物作而不辭”。

可适应性就是可访问性

“上善若水，水善利萬物，又不爭。處眾人之所惡，故幾於道。”
《道德经》第8章

有人认为道是宿命，浅读会觉得人应当无为，静待事情的降临而被动反应。我认为，我们不应为久远的目标预设将来，相反，应该有适应力，而不是胶柱鼓瑟。

“見小曰明，守柔曰強。用其光，復歸其明，無遺身殃，是謂習常。”
《道德经》第52章

我迄今所谈到的所谓弹性即“适应性”。前面所言总结起来就是：让你的网页具有适应性。让你的网页具有可访问性，不拘何种浏览器，何种平台亦或何种屏幕。这意味着在任何屏幕尺寸，任何屏幕颜色数下，网页都合法可用（同时还要记住，人们可能会打印这些网页，或者使用读屏软件以及盲文浏览器进行访问）。这意味着网页要适应它的访问者，它的访问者可能视力不佳，希望使用比较大的字体。

设计适应性网页就是设计可访问性网页，而这是 Web 设计中远未实现的目标，也是 W3C 的一个重要思想，对 Web 设计来说，这是一个迫切的使命，将来的网页也许要求实现通用访问。

这听上去不太可能，通用访问，在当今并不灵光的浏览器面前，在各种可以访问 Web 的不成熟的移动设备面前，只是一种理想。但我们仍有很多东西可以努力，并为今后适应性网页设计打好基础。

解决之道

“名亦既有，天將知止。知止不殆。譬道在天下，猶川谷與江海。”
《道德经》第32章

如何实现自适应性设计并提高可访问性？我们要从多个方面做通盘考虑，然后针对这些考量给出解决步骤。首先，想一下你的网页是做何之用，而不是看上去如何。让你的设计跟随你所提供的服务，而不是外观。让形式跟从功能，而不是设计。

这种思想的基石是区隔内容与展示，这种说法你或许多次听过，然而这可能是你所能走出的最重要的一步。举个简单的例子，某个网页上有一段斜体字，为什么要斜体？可能为了强调，或是引述，或者是在英语中使用了一个外文词，在传统印刷中，形式跟从功能。而 Web 出版的优势是我们可以将纸张上含糊的东西明确地表达出来，如果斜体的目的是强调，为什么要使用 实现而不是非 PC 平台的浏览器也能认识的 ？

从大范围来说，不用将 HTML 用作展示，不要使用 ， 以及 ，使用那些恰当的 HTML 标签，如果找不到恰当的标签，使用 CSS 类。使用 CSS 进行展示，我们要向前看，而不是墨守陈规。

如果你合理地运用了 Style Sheet，并让它引导，而不是控制你的网页外观，同时，你并没有依赖 Style Sheet 表达信息，那么你的网页就能在任何浏览器正常工作，不管是过去的，还是将来的。那些不支持 Style Sheet 的浏览器将输出简单的内容部分。事实上，我们最担心的是那些对 Style Sheet 支持有 BUG 的浏览器，今天，这是一个问题，不久前还没有这么严重。现在，你可以限制你的 CSS 只使用其中被各种浏览器都完美支持的部分，对于那些不能很好支持的部分，可以使用那些展示型的 HTML 标签。作者曾为此写过一些文章。

在实践中，当 CSS 设计可能影响网页的可访问性时，你应当有所为有所不为。不管怎样，不要依赖任何 CSS，绝对单位，如 px 以及 pt 都应当避免，对色彩的使用也要谨慎，而且永远不要依赖它们。

字体

一般来说，Windows, Mac 以及其它操作系统都只安装了有限的字体，而它们之间共同的字体更少。目前的很多浏览器，以后会有更多，它们已经可以允许用户自己选择显示字体。使用 CSS，你可以指定尽可能多的字体，同样，不要依赖它们，不管这种字体是多么普遍。

更重要的仍然是字号，你需要知道，同样的字体，同样的字号，在 Mac 系统上看上去要比 Windows 系统小。因为 Mac 的逻辑分辨率是 72dpi 而 Windows 是 96dpi。这很重要，首先，让文字在 Mac 上和 Windows 上显示一模一样是不可能的，不过，如果你遵从的是适应性设计，这将不会成为问题。

如果你还操心你的网页最终看上去是否正好如何，说明你仍没以适应性设计思想思考问题。一个最主要的可访问性问题是字号，我们这些视力正常的人可能不相信世界上有很大比例的人无法在印刷媒体上阅读 14pt 以下的字体，更不要说显示器，显示器的分辨率更低。

这是否意味着 14pt 是最小的字号？非也，有的人的视力还要差，那到底用哪个字号？答案是，不要使用 pt，让用户自己选择阅读字体大小，px 也一样，因为逻辑分辨率的差别，一个平台上的 px 和另一个平台的 px 是不一样大的。

对于标题等位置，你仍可以使用大一些的字体。CSS 提供了多种方式设置字体尺寸，你可以按某个对象的父对象的百分比设置字体尺寸，比如，标题位于网页的 BODY 内，如果你没有设置 BODY 的字体尺寸，系统会取用户自己指定的字体尺寸，有时候，我们有所不为也可以帮助提升可访问性。

你可能会说，文字看上去太大，但你可以在浏览器中把它缩小，而你的用户可以选择放大或者缩小，依据他们的口味或需求。我们可以对标题进行强调，比如，将一级标题的字号加大30%，二级标题加大25%，这样，不管你的页面 BODY 部分选用了什么字号，标题都按比例改变，同样，字号也可以缩小，但需要小心，有时候，字号可能小到无法阅读。

以上我们所做的仅仅是避免使用绝对尺寸字体已经为可访问性带来很多帮助。