Gentoo Logo

声明: 本文的原始版本最初发表于IBM developerWorks,现在所有权归属Westtech Information Services。本文档是原始文档的更新版本,包含了Gentoo Linux文档团队所做的很多改进。
现在无人积极维护本文档。


gentoo.org重新设计,第3部分: 一个重生的站点

内容:

1.  新的主页

目前的站点

到目前为止,www.gentoo.org已显现出重大改进。 上一篇文章中,我用XML和XSLT设计了一种新的文档系统,所以,所有站点文档看起来都很棒,并可满足访问者的需求。然而,站点的整体外观并没有改变;那是因为:我实际上并没有触及用户最初访问我们的站点时所看到的HTML。我们的主页看起来仍然一样。

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

我无法继续向主页中放置一些重要链接和段落──没有地方可放。但我们很幸运,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”类别页面将首先出现,因此,我希望这是个吸引人的页面。现在,“吸引人”一词对不同的人的含义也不同,但是,本文演示了几个很好的通用指南,我正在新类别页面的设计过程中使用这些指南,它们也应该适用于几乎任何网站。

矩形外观

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


图示 1.1: 不太理想的页面布局

Fig. 1

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


图示 1.2: 对齐到网格后,事物变得不那么混乱

Fig. 2

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

文本与背景颜色

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

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

对比

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

有效布局

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

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

内容取代艺术

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

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

结果

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


图示 1.3: 新的www.gentoo.org主页

Fig. 3

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

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


图示 1.4: www.gentoo.org download/install页面

Fig. 4

另一件只得指出的事是:您可能已经注意到蓝色的“飞碟”和红色的“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开发细节的机会。

2.  参考资料

  • 请参阅使用XML,XSLT和Python等技术重新设计www.gentoo.org网站系列文章的其他部分:
    • 第1部分中,Daniel向读者演示了如何创建以用户为中心的行动计划,并介绍了pytext,这是一种嵌入式Python解释器(2001年3月)。
    • 第2部分中,Daniel将展示新的文档系统以及建立一个CVS-log邮件日志列表(2001年3月)。
    • 第4部分中,Daniel完成了到XML/XSLT的转换,修复了Netscape 4.x浏览器的访问bug,还为网站添加了自动生成的XML Changelog(2001年8月)。
  • 访问“万维网联盟”(或W3C)中的CSS页面来了解有关级联样式表(CSS)的更多信息。
  • 请查看Xara X的主页Xara.com──Xara X是一款极佳的Windows下的向量绘图软件包。它几乎没有一点多余功能,却有惊人的速度,建议您使用该软件。
  • http://www.xslt.com上可以学到关于XSLT的更多知识。
  • 当您清醒过来,不妨看看Sablotron,这是一个又快又好的XSLT处理器,可以从Gingerall获得。


打印

更新于2013年 1月 27日

总结: 您是否曾在某个清晨醒来,突然意识到自己开发的那个很酷的小网站实际上并不那么棒?如果是这样,别担心,很多人都是这样。在这个系列中,Daniel Robbins将与您共享他用XML、XSLT和Python等技术重新设计www.gentoo.org网站的经验。在这个过程中,您会发现一些用于重新设计 您下一个网站的极佳方法。在本部分中,Daniel从整体上为其网站创建了一副新面孔。

Daniel Robbins
作者

IBM developerWorks
译者

Zhou Mi
编辑

Donate to support our development efforts.

Copyright 2001-2014 Gentoo Foundation, Inc. Questions, Comments? Contact us.