gentoo.org 重新设计：一个再生的站点

HOUSCOUS

Daniel Robbins ([email protected])
总裁／CEO，Gentoo Technologies，Inc.


您是否曾在某个清晨醒来，突然意识到自己开发的那个很酷的小网站实际上并不那么棒？如果是这样，别担心，很多人都是这样。在这个系列中，Daniel Robbins 将与您共享他用 XML、XSLT 和 Python 等技术重新设计 www.gentoo.org 网站的经验。在这个过程中，您会发现一些用于重新设计您下一个网站的极佳方法。在本部分中，Daniel 从整体上为其网站创建了一副新面孔。
现在的站点
到目前为止，www.gentoo.org 已显现出重大改进。上一篇文章中，我用 XML 和 XSLT 设计了一种新的文档系统，所以，所有站点文档看起来都很棒，并可满足访问者的需求。然而，站点的整体外观并没有改变；那是因为：我实际上并没有触及用户最初访问我们的站点时所看到的 HTML。我们的主页看起来仍然一样。

那么，现在该是改头换面的时候了。正如我在上一篇文章中所提到的，我们的主页正变得过于拥挤，以至于没有空间用于扩展。您可以看到，我将很多内容放入了该页中：

原来的 www.gentoo.org 站点



我无法继续向主页中放置一些重要链接和段落 — 没有地方可放。但我们很幸运，Web 上的“地产”是完全免费的。

那么，为了解决这个问题，我将把我们唯一的一个主页（index.html）拆分成几个由主题确定类别的页面（index-about.html、index-download.html 等），然后创建一个菜单系统，该系统将允许用户轻易地从一个类别页面移至另一个。用户访问 http://www.gentoo.org 时所装入的缺省页面将是“About Gentoo Linux”类别页面。这是个极佳的选择，因为它提供了有关该项目的一般信息，而该信息将引起初访者的兴趣。

站点目标
现在，我将概括这个新的“类别页面”系统的目标，以及您可以应用到您自己的项目一些常规设计目标。然后，我们将看一下类别页面重新设计是如何满足这些目标的。

模块性
新的类别页面系统需要是模块化的。这到底意味着什么？那么，目前我们已经在头脑中有了“About Gentoo Linux”和“Download/Install”类别，但是，以后我可能还会需要添加“About the Team”或“Support”类别。具有可以在以后轻易添加新类别的能力要求在设计阶段就安排好布局。我必须确保有空间用于导航菜单上的附加类别链接，并且页面的布局必须是通用的，以便用来显示很多不同类型的信息。这样，如果几个月后我再一次发现有不如意之处，那么，添加新类别将相对简单，而无需完全重新设计该站点。

还有一步对模块化设计也非常重要 — 使用 XML 和 XSLT 将显示与内容分开。如果您阅读了本系列的第 2 篇，那么您至少熟悉这种类型的设计。一旦创建了正确的 XSL 模板，我只需提供正确的 XML 就生成任意多的类别页面。与 HTML 不同，我的 XML 不包含与显示相关的信息；它完全是内容。我们将在本系列的第四部分（也是最后一部分）中看看这些类别页面的 XML／XSLT 实现。

通用样式指南
新的类别布局在视觉上吸引人也是很重要的。请记住，当用户输入 http://www.gentoo.org 时，“About Gentoo Linux”类别页面将首先出现，因此，我希望这是个吸引人的页面。现在，“吸引人”一词对不同的人的含义也不同，但是，本文演示了几个很好的通用指南，我正在新类别页面的设计过程中使用这些指南，它们也应该适用于几乎任何网站。

矩形外观
对于一般的页面布局来说，简单即是最好。如果要组织一些复杂的信息，为什么不使用一个主表来将页面拆分成不同的区域呢？这还可以帮助确保页面的不同部分对齐，从而构成一个整齐、吸引人的设计。例如，这种特殊类型的页面布局通常不是很吸引人：

不太理想的页面布局



然而，如果使用一个公共主网格来显示同一信息，站点就开始看起来整齐了许多：

对齐到网格后，事物变得不那么混乱



并且请记住：布局越简单，就可以在不干扰访问者的情况下向页面中填入更多信息。

文本与背景颜色
下一步，我们要选择颜色。我不得不承认：我恰巧发现在深蓝色背景中显示鲜绿色文本十分吸引人。但是让我们正视它 — 不管它们看起来多奇异和漂亮，对于 Web 上的文本区域，深色背景是糟糕选择。人们希望在浅色背景中看到深色文本，而且我个人也认为我们应该提供用户所希望的颜色。

好，我应该澄清我的立场了。在深色背景上使用浅色文本对于显示段落信息来说是糟糕的选择，但是对于菜单栏或者一小簇链接来说的确十分吸引人和有效。换句话说，反色文本可能十分显眼，但确与您的主文本内容区的传统颜色方案相配；以后您就会感谢我。这还有助于确保将您的站点页面打印到纸上后也很漂亮。

对比
除了深色文本／浅色背景事项之外，网站设计中没有很多严格的规则。例如，如果您喜欢深颜色，那么将页面顶部做成深蓝色就很棒。现在，请听清楚我说的话：如果将 整个页面做成深蓝色，那就糟糕了。如果将页面的一部分（更适合于页面中没有很多文本的部分）做成深蓝色，您可能实际上在做一件很棒的事，因为深蓝色将与白色文本区形成极佳的对比，并给您的新站点增加了一些额外戏剧性。事实上，页面中很大一部分可以包含饱和色或深颜色；再次说明，只需确保用传统方式显示主文本内容即可。

有效布局
我还想确保网页既不过于拥挤也不过于分散。我想我们中的所有人都会面临这个挑战；我们中有些人喜欢向页面中填入过多信息，以至于页面变得让人无法理解，而另一些人喜欢在页面上包含很多大的页边距和无用的空白区，以至于用户必须滚动几页才能找到所需信息。对于新的类别页面，我想使用最小页边距 — 我想，只需使内容可读即可。只有在内容变得过于拥挤时我才会使用空白区域。毕竟，使用这些类别页面就是为了解决空间问题，只要不影响可读性，那么在尽量小的空间集中放置尽量多的信息是最好的。

高密度信息还有另一个优势：用户不太需要滚动页面就可以找到所需信息。这使用户阅读页面时获得极大方便。（如果您不相信，可以设计几个模型页面然后自己查看。）

内容取代艺术
在设计该站点布局时，我很快认识到，重新设计网页应该是以可读和合理的方式显示内容（对访问者有用的实际信息）的很好时机，而不仅仅是另一个时机，即创造一种艺术效果或显示大量 — 哦 — 公司标识。这并不是说不允许有艺术效果，但如果为了创造这种效果而影响到内容的显示，那就不是为访问者着想。

有时，回过头来认识到访问我们站点的人们主要是寻找信息而不是荒谬地寻找 Web 设计新方法是一个很好的主意。如果这是您所努力克服的毛病，别担心：我也禁不住专注于考虑艺术方面的东西，而忽视了所有其它更重要的东西。

结果
既然我们已经讨论了一些重新设计目标，让我们看一下新的 gentoo.org 类别页面。这是您在访问 http://www.gentoo.org 时所看到的欢迎页面：

新的 www.gentoo.org 主页



我必须承认我确实对这个重新设计感到高兴，并且我确实喜欢这个新站点的样子。请注意我是如何使用表来将页面分成四个区域的：左上部的徽标区、黑色菜单区、灰色信息栏区和白色主内容区。还要注意，这四个区域的整洁对齐使这个设计简单而吸引人。

现在看看颜色。如我前面所讲，我是极深色网站的狂热爱好者。然而，因为极深色站点难看，我达成了妥协：只在顶部区域使用深颜色，只在菜单区徽标和浮动“Gentoo Linux Features”框使用反色文本。因为这些页面部分不用于显示大量文本，所以这不会干扰我的访问者。相反，它们实际上成为主（白色）文本内容区的一个极佳陪衬。这是“Download/Install”类别页面的一个快照：

www.gentoo.org download/install 页面



另一件只得指出的事是：您可能已经注意到蓝色的“飞碟”和红色的“gentoo”徽标都取自我以前的站点。我决定将这些图形集成到新设计中，以便那些常客对新的 index.html 主页感到熟悉。然而，在包括主页在内的所有其它页面中，我都省略了“飞碟”，以便在屏幕上显示更多信息。在每页中都保留了红色“gentoo”徽标，因为它可以使白色内容区在视觉上更吸引人，并吸引人们对类别标题的注意。

导航菜单与标题
您可以看到，当前页面的名称在导航菜单中以鲜绿色突出显示，这是级联样式表（或 CSS）的功劳，并且在主内容区中红色“gentoo”徽标下立即重复当前页面名称。虽然开始我觉得这没有必要，但我发现只以绿色突出显示当前页面的导航菜单项并不足以为用户提供足够的信息来告诉他们当前位于哪个页面。

尽管新站点看起来很整洁，但我正在向该页面中填入许多信息。这样做的一个好处是：在大多数显示分辨率下，访问者只需下滚就可以看完主文本。然而，所有超链接都应该是立即可见和可以访问的，这就要求用户不作垂直滚动。这使得站点从整体上更便于导航 — 实用性的一次重大胜利。

迷失在 Xara 中
只观看这个站点并不能告诉您重新设计的过程是什么样的。实际上，我从重新设计一开始就犯下一些重大逻辑错误。我最大的错误是一开始就启动 Xara，试图为类别页面设计新外观。

我曾经在 Xara 中浪费了许多时间，几乎只考虑视觉上的花哨设计，而不是页面布局。这样做的结果是，本末倒置并最终创建了大约 20 幅设计原型，但最终不得不丢掉。最后，这些原型对我来说毫无用处，因为他们不能处理如何显示内容的问题。

最终，我重新找回感觉，退出 Xara，启动文本编辑器，然后写下将出现在页面中的原始文本。编写完内容之后，我设计了一个通用页面布局，将该文本显示给用户 — 还没有设计颜色方案和视觉效果。那时（并且只在那时），我才返回到 Xara 并完成站点的新外观，开发出了颜色方案并改进了我们的徽标。这一次，图形设计过程很顺利也相对较快，因为我已有一个框架（文本和布局）来指引我的工作。如果没有这个结构，我可能要花上我的余生来对付 Xara，并为新站点设计出上千个假想设计可能性。

当您重新设计站点时，请记住：首先是内容，其次是布局，而图形修饰则是第三位。若采用这种方法，您将最终节约许多时间。

以用户为中心的 IRC
我确实在设计过程中犯了几个错误，但是我还做了几件正确的事，其中的一件是允许 Gentoo Linux 开发人员在我的设计过程中对我的工作进行评论并给出意见。您可能会在我第一篇文章中回忆起，我的行动计划将开发人员作为我的最重要观众，因此很明显，让现有的开发人员参与设计是一项明智之举。

要做到这点很简单。我只需象以往那样，让一台 IRC 客户机持续运行并连入我们的 IRC 频道即可（请参阅参考资料），然后每当我有重大进展，我都会生成一个当前站点的 .png 快照，并将其张贴到我们的 Web 服务器。然后，频道中的每个人都可以实时地查看，并对我的工作提出意见。

这些开发人员就好比我的晴雨表，让我知道哪些设计和颜色是最受欢迎的，哪些布局样式最佳。如果站点设计变得过于拥挤或复杂，就会有人告诉我，然后我就相应地调整 HTML。当类别页面设计即将完成时，我就开始创建 HTML／图像的 tar 压缩文件，以便开发人员可以尝试代码并作必要改正。这样，IRC 频道就允许以一种真正以用户为中心的方式开发 HTML。最后一点（但并非不重要），Gentoo Linux 开发人员确实帮助我调试了 HTML 代码，以便可以在各种现代浏览器中以优化方式显示它们。

下一篇
好，现在就到这。请在我的下一篇文章中和我一起最终将整个站点转变成完全模块化的、基于 XML／XSLT 的系统。那应该会使您兴奋，并为您带来一个查看许多有趣的幕后 XML 开发细节的机会。

参考资料

请访问 http://www.gentoo.org，以查看新站点或搜寻有关 Gentoo Linux 的更多信息。
阅读这个有关 Gentoo.org 站点重新设计系列中的第一篇和第二篇文章。
访问“万维网联盟”（或 W3C）中的 CSS 页面来了解有关级联样式表（CSS）的更多信息。
查看 Xara X 主页 Xara.com — Xara X 是一个极佳的 Windows 下的向量绘图软件包。它几乎没有一点多余功能，却有惊人的速度，建议您使用该软件。
在 http://www.xslt.com 上了解有关 XSLT 的更多信息。
戏剧性、浪漫、悬念。您在 “Handbook of User-Centred Design”中不会找到这些内容。然而，您将找到实现以用户为中心的设计思想的极佳指南。请阅读前几章，然后小睡一会儿。
醒来以后，请查看 Sablotron，这是一个优秀且快速的 XSLT 处理器，可以从 Ginger Alliance 获得。
您可以在 libxslt 包中发现一个更好且更快速的、名为“xsltproc”的 XSLT 处理器。在进行编译之前，libxslt 要求首先安装 libxml2。
Blender 是一个优秀且免费的 3D 图像程序，可在多种平台上使用。
为使开发人员参与设计过程，我如往常一样，使 IRC 客户机持续运行并连入我的 IRC 频道。然后每当我有重大进展，我都会生成一个当前站点的 .png 快照，并将其张贴到我们的 Web 服务器，这样，频道中的每个人都可以实时地查看，并对我的工作提出意见。
IBM 的 易用性站点提供创新、以用户为中心的设计、事迹、技术以及其它资源来帮助改进用户使用您的产品和服务的整体经验。
IBM 开设了以用户为中心的设计的培训课程 — 在 这里查找更多信息。


关于作者
Daniel Robbins 居住在美国新墨西哥州的阿尔布开克，他是 Gentoo Technologies，Inc. 的总裁兼 CEO、Gentoo Linux（用于 PC 的高级 Linux）的创始人，以及 Portage 系统（Linux 的下一代移植系统）的创始人。他是 Macmillan 出版的几本书 Caldera OpenLinux Unleashed、SuSE Linux Unleashed 和 Samba Unleashed 的投稿人。Daniel 自小学二年级起就与计算机结下不解之缘，那时他首先接触的是 Logo 程序语言，并沉溺于 Pac-Man 游戏中。这也许就是他至今仍担任 SONY Electronic Publishing/Psygnosis 的“首席图形设计师”的原因所在。Daniel 喜欢与妻子 Mary 和他们的女儿 Hadassah 一起共渡时光。


  
[code:1][/code:1][img][/img]

coolove

看照片相当年轻阿，牛     

HOUSCOUS

想想也是, Linux才几年啊, 搞这个的当然比较年轻了。好象还挺帅的哦，等Kuye来了让他给这三个家伙排个名吧，估计他会这么排：Daniel Robbins, Bill Gates,  Linus Torvalds 。      

Kuye

[quote:105ccbf5e0="coolove"]看照片相当年轻阿，牛     [/quote]
呵呵，你要是见过他老婆就不会那么高兴了
[quote:105ccbf5e0="HOUSCOUS"]想想也是, Linux才几年啊, 搞这个的当然比较年轻了。好象还挺帅的哦，等Kuye来了让他给这三个家伙排个名吧，估计他会这么排：Daniel Robbins, Bill Gates,  Linus Torvalds 。      [/quote]
猜错！

是 Bill Gates、Jean-Louis Gassée 最后才是 Daniel Robbins。。。

Linus 嘛。。。。一脚揣开。。。不理他  
----------------------------------、
btw: 这两张帖子是谁置顶的啊？除非是非常重要技术性帖子最好自己取消掉置顶，OK ?!  
(我一天到晚想着该给置顶帖减减肥了。。。)

coolove

[quote:b6b3c5937e="Kuye"]
呵呵，你要是见过他老婆就不会那么高兴了
[/quote]

你有他老婆的照片阿，贴出来看看     

Kuye

[quote:274a6f6d41="coolove"]你有他老婆的照片阿，贴出来看看     [/quote]
以前在 IBM 的网站上看过。。。很胖。。。感觉比 Daniel Robbins 胖了一倍。。。

找不到了。。。

coolove

可惜     

HOUSCOUS

是俺自己置顶的，不好意思。

Kuye

[quote:22d4e0dacc="HOUSCOUS"]是俺自己置顶的，不好意思。 [/quote]
!-_-......如果有下次.... 嘿嘿....

我也觉得很奇怪，为什么公社允许游客发帖，还可以置顶。。。#_^

HOUSCOUS

什么叫游客啊？俺可是荣誉社员啊。

Kuye

修改一下：。。。荣誉社员。。。。  
-----------
我是指游客也可以发帖，而且还可以将自己的帖子置顶。

游客尚且如此，光荣的“荣誉社员”自然更加没问题啦  

HOUSCOUS

游客可以吗？我只知道以前游客是可以发贴的，但不能置顶。但我昨天试的时候，却不能以游客的身份发帖了，不知道为什么。

HOUSCOUS

我恢复最初的头像了，Kuye也把那个小小丑拿掉了，嗯，版面干净了许多。Kuye你找给我的那个头像，我用了一两帖，觉得不好看，就放弃了。

Kuye

嗯。。。的确游客不能置顶。。。发帖还可以吧？(我没真发，但是可以进入发新帖页面)
-------------------
同意！简单就是美！

coolove

荣誉可以置顶阿，我怎么没发现，没机会试了