A List Apart 经典文章中译：Web设计之道（下）

关注

翻译最新推荐文章于 2026-10-18 09:51:32 发布 5.1k 阅读 AI 写同款· GEO 优化 ›

这是 A List Apart 经典技术随笔 A Dao of Web Design 的第二部分，在第一部分的基础上，在字体，字号，布局，配色几个方面，讲述了如何实现弹性的，可适应性的 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 部分选用了什么字号，标题都按比例改变，同样，字号也可以缩小，但需要小心，有时候，字号可能小到无法阅读。

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

布局

边界，页宽，缩进都是一些可以提升可访问性的设计因素。浏览器窗口可以改变尺寸，并导致页面尺寸的改变，不同的 Web 设备（Web TV, 高分辨率显示器，PDA）拥有不同的最小与最大窗口尺寸，和固定字体尺寸一样，页面布局也会带来可访问性问题。

和字体一样，布局也可以使用百分比实现适应性设计，边界可以使用其容器尺寸的某个百分比。在 CSS 中使用百分比宽度布局会自动实现适应性设计，随着浏览器窗口的拉宽与收窄，页面的各个部分自动适应以维持相同的比例，从而整体页面也自动适应，用户可以自己选择一个他们认为合适的窗口尺寸。

边界，文字缩进以及其它布局方因素也可以基于它们所包含的文字的尺寸，可以使用 em 单位，比如：

p {margin – left: 1.5em}

这意味着段落的边界宽度将是它里面的文字的高度的1.5倍。因此，当我们调整文字的尺寸，边界也会随着改变。

颜色

Web 是一个比印刷要色彩丰富得多的媒体，色彩对 Web 来说非常便宜。色彩具有装饰性，可以建立视觉表征，可以带来现实意义（比如吸引注意力），然而色彩也会为可访问性带来问题。

你是否知道在很多国家（或许全部），红绿色盲的人不可以申请飞行执照？因为警告信息通常都是按红色危险绿色安全的形式表现的。很遗憾，警告信息没有使用可适应性色彩搭配。

你的网页是否同样将一些用户挡在外面？这可不怎么样，因为不远的将来，多数浏览器将允许用户使用自定义 Style Sheet 调整页面的配色，，这些自定义 CSS 将覆盖你设计的 CSS。如何避免这些问题？不要使用 HTML 标签，使用 CSS，同时不要依赖同一种配色含义。

改变之途

“合抱之木，生於毫末；九層之臺，起於累土；千里之行，始於足下。”
《道德经》第64章（上）

思想与行为的改变并不容易，“下德不失德”。但我渐渐明白很多我认为理所当然的东西都需要重新考虑，过去我所读，所见，所闻，所谈皆需反思。Web 作为一个新媒体已经到了突破印刷媒体的时候，并非放弃那些智慧与经验，而是找到自己的使命。

Web 最强大的力量，一直以来被视为局限与缺点，然而 Web 的天性是弹性，我们作为开发者与设计者，需要拥抱这种弹性，实现一个自适的，容易访问的 Web，这些努力从释放我们的控制欲开始。

译后记

A List Apart 是被所有 Web 设计者尊为圣典的一份杂志，John Allsopp 的 “A Dao of Web Design” 是被该杂志推荐阅读的一篇 Web 设计随笔，已被译为多种文字发表，然而并未见中文版。既然《道德经》来自中国，就没有理由让国内的众多 Web 设计者去啃并不怎么好懂的英文原文。当然，还是老话，这是技术随笔，并不是可以传世的人文作品，翻译也就只求信，而惘顾雅与达了。这是本文的第二部分，请参阅第一部分。