（小雷 2001年05月22日 16:57）
"如果人有来世，那么，一个不合格的网页设计者将在天堂的各种选择菜单中渡过来生！"
一个夸大的笑话，但在一笑之余，我们是否想到点什么？
.COM 公司的尘埃落定，互联网的归于理性，争奇斗艳的网站建设是否应该重新冷静下来，审视一下自己走过的历程，以期在沉默中的爆发，熊熊烈火中的凤凰涅槃？而本文正要针对一些大家平时织网建站的过程中很少注意到或者不甚明了的问题进行讲解，并力求做到不拾人牙惠。同时，由于网站建设是一个比较抽象的概念，因此我们将采用一些例子与图片进行阐述，以便于大家快速进行掌握。
由于水平有限，不足或不正确之处尚请指教。
一．清楚明了，快速简捷：
在进行网站的图形用户接口界面设计时，设计师们往往从图标制作开始，但如何避免千篇一律，如何清楚明了，快速地向访问者传达出正确的网站信息，让他们相信这个网站正是他们（她们）所需要的网站，是网站建设中的重中之重！
1.图标的魅力：
在我们的网页上，往往有众多的表示导航的图标，如方向不同的箭头代表"前进"或"后退"；"播放"按钮代表录音或播放一段影片剪辑；"信封"代表发送电子邮件；"打印机"图标往往表示进行打印；等等。图标的导航作用非常醒目，即使没有任何说明文字，访问者也能轻易通过其图案判断出它的含义。用图标来规划我们的网站内容是个不错的主意，尤其适用于有大量信息的门户网站与报业网站。如图一：
图一
图一中左边导航栏中的图标起到了很好的导航作用，在大量的信息呈现中显得鲜明突出，同时具有象征性的图标，对于不懂英语的访问者来说也能清楚地理解它的主要服务内容。
图标的作用虽然明显，但它的设计却难度颇大，不但要考虑到尺寸大小，与文字的紧密配合（如果有文字说明的话），更重要的还得考虑在方寸之间表现出它的象征意义。如，我们要创建一个体现西部风情的网站，方向不同的牛仔导索用来表示"前进"与"后退"是个不错的主意，简单的箭头图标就显得太苍白无力了。虽然互联网上有着大量的图标资源下载，不过如果你有这个设计的能力，还是建议你自行设计，毕竟，只有你自己才知道，什么样的内容需要什么样的象征才更为贴切。
图二
图二是另外一种形式的图标导航方式，主要适用于内容较少，用户比较固定的网站。
2.为图标或图象添加"隐形"说明：
为网页上所有的图标或图象添加"隐形"说明文字是个好习惯。它的主要功能在于两方面：一方面，"隐形"文字不会妨碍图标的整体效果，只有当访问者的鼠标指向图标时才会弹出说明文字；另一方面，在网络带宽并不优越的今天，我们还得为那些屏蔽图片，以纯文本方式上网的用户进行考虑，即使不能看见图标，但在图标处留下的说明性文字也足够让他们快速而清楚地把握我们的网站大体构架了。此外，为图标添加说明性文字还有利于用PDA个人数字助理上网用户的浏览。
它的实现方式非常简单，只需在 HTML 源代码中， IMG 标记后添加 Alt="说明性文字"就行了，由此也可见，它并不会让我们的网页文件变大多少。
3.简捷性：
什么样的用户界面才是最好的？不同的人会有不同的看法，更没有一个强制的定义，但好的用户界面，绝不是与华丽等同的。如果让我们的访问者进行选择，绝大多数会选择简单，但功能完备的用户界面，因为，对于访问者，他们的选择并不多，或者是访问我们的网站，或者就加以完全忽略，其间并没有一条中间道路，而这时，快速，易于使用正是他们的选择标准。简捷性，方是界面的生存之道。
谈到简捷性，许多朋友往往从网络速度进行考虑，这种想法很正确，但也比较片面。的确，现在的上网方式有了诸多选择，T3 , cable modem , DSL ,宽带网，等等，但即使是它们，也会让使用者在复杂的网页界面前，如 MODEM 上网者一样一筹莫展。过于复杂，难于使用的页面，跟因为网页文件太庞大完全打不开的效果是一样的。
许多网页设计者在最初进行网页设计时常常为"简捷性"感到恼火，对于他们来说，有些观点或想法，非得用一张大幅的图象或超过 100K 的流式动画来表达不可。我们也曾有过这种经历，不过当你逐渐体会到用简捷的方式来表达丰富内涵的乐趣时，这种烦恼将不再存在，而你的设计能力，无疑是更上一层楼。
曾经有过这样一个笑话：如果人有来世，那么，一个不合格的网页设计者将在天堂的选择菜单中渡过来生！夸大了一点，不过对于网页，清楚明了，快速简捷，方是致胜之道。
二．网页文字的排版艺术：
前面我们讲到网页的简捷性，而它同样适用于我们的网页文字排版技术。
谈到排版技术，我们首先得明白一点：网页浏览与书籍阅览是不同的。后者的排版技术发展到今天已有数百年的历史，各种技术都已比较成型；同时，从儿提时代认识第一个字开始我们就接受了正规的传统排版技术并时常潜移默化地受其影响，因此，对于用户来说，书本阅览持续的时间可以很久。而网页阅读就全然是另外一回事了，不断闪烁的显示器屏幕，72 线或 96 线的解析率，使得阅读一段长长的内容变得烦琐而头疼。
网页排版中解决上述问题的办法是将长文本分成若干段落，将一篇长文章分成若干章节并用多个页面进行显示等办法加以解决。但，段落如何排版才更具吸引力？一个单独的页面放上多少个段落才科学？什么时候我们应该在段落下加上到下一页的标记？
1.合理安排段落间隔：
段落的划分，本身是通过一种逻辑判断来制定的，这也就要求我们的段落间隔同样要符合这种逻辑性。合理的间隔，不是简单的"一个空行"或者"两个空行"就能决定的，而应该针对实际需要进行制定。
对于内容比较丰满的文章，段落间隔常用两个空行；对于内容较少的文章，间隔可以在两个空行与一个空行间进行选择；逻辑跳跃较大的段落间隔采用两个空行更为醒目；与前段为继承关系的段落，采用一个空行的间隔更能表达出一种延续性；对于背景为纯色的网页，两行的间距比较合适；但对于带网格状或交叉状背景的网页，大范围的空白并不适宜。如图三：
图三
图三中，大量的文本信息通过大范围的空白加以分隔，增强了文本的可读性；同时，每个段落代表着一种独立的逻辑关系，也方便了访问者对内容的清楚掌握。
2.合理分屏：
在传统的书印流程中，一个段落可能包含十来句话，但对于采用卷屏式界面的网页排版，十个句子太长，要增强它的可读性，我们可以采用长化短，一段化为若干段，一个篇幅化为若干个篇幅进行分屏显示的办法。但，什么时候进行分屏才更为合理？在一个页面上放置大量的内容固然不好，内容太少，每分一个段就强迫读者点击链接打开一个新的窗口来阅读接下来的内容也行不通。因此分屏技术的把握在网页排版中也占有重要地位。
对于一篇有吸引力的文章，访问者会卷屏阅读，但他们不会卷屏到底。两到三个卷屏已经足够，这时我们就应该在相应的段落下加上链接到"下一页"的按钮或其他图标，一方面缓解用户的视疲劳，另外一方面增添"下文会如何写"的悬念；对于放有广告的网页，增添一个刷新率同时也水到渠成。而这，正是我们常常谈到的"三卷屏原理"。
网页制作技术中，对框架结构的争论比较多，虽然它对于某些浏览器不起作用，但在网上我们还是可以找到大量这种结构的网页。为什么？无他，在于网页风格的统一性与便于浏览。统一性很好理解，无论哪个页面，都会有一些不变的网页元素在里面，并且通常起着导航的重要作用；那为什么说便于阅读呢？其实这只是一种心理作用，统一化的结构常常使用户忘却了"卷屏"的烦躁，因此，这种结构的网页并不适合我们的"三卷屏原理"。如图四：
图四
图四是我们比较熟悉的微软网站，从其源代码中你将会发现大量的框架标识（Frame）及其链接。对于此类网站，统一性与便于操作是最大的亮点。
卷屏技术中还有一种横向卷屏技术，不过这种技术有着非常大的风险。试想一下，阅读一篇文章，每一行超过当前屏幕的内容都需要你拖动卷栏条进行查看会有多么的烦！因此，这种技术常常用于图库网站，而不是其他类型的网站。因为图库跟文本相比相对独立一些，不会因为横向卷屏破坏其整体性。在现实中造成横向卷屏的现象往往是因为误操作，而不是有意识进行设计的，其中比较大的可能是在网页宽度设置时过大。
3.文字与图片的合理排版：
文字与图片如何排版才更加协调？除了合适的位置外，两者的紧凑结合也非常重要。图片应该是内容的清楚说明，虽然很重要，但不能喧宾夺主；内容虽然是文本，但也应该加以足够的着重，力求达到文本与图片的平衡协调。如图五：
图五
图五是著名的 Sapient 网站设计工作室的首页，图象与文本的完美配合，给人一种清新的感觉。大范围黑白相衬，图片虽然很大，但由于溶入背景，并不显得太醒目；白色背景上的黑色文本，突出了内容的重要性；同时，文本标题中不同大小的文字进一步加强了文本的醒目性，从而完成了文本与图片的完美结合。
三．"三点击规则"：
对于初次访问我们网站的用户，快速地传达网站信息，打消访问者的顾虑，让他们(她们)相信我们的网站正是他们所需的方是挽住用户的心的正确思维。方便的直观操作部分完成了这一功能，而其他的则需要用网站构架来完成。
网络冲浪，在内容一定的情况下，速度是关键，如果访问者不能在三个点击之内找到他们需要的信息就可能跳到其他网站去了，而这，就是我们常常谈及的"三点击规则"。
对于信息量比较大，选择比较多的网站，"三点击规则"显得不可思议，但如果在初期规划时进行严格构架，你将会发现实现这种"不可能"也是比较容易的。我们的网站定位在哪里？主要有哪些类型的用户？他们在我们的网站上更可能到哪些地方去？等等，而对这些问题的回答就可做成网站的首页；然后在首页上制作出不超过五个数目的主导航菜单（为何不超过五个？后面我们将谈到），每个主导航菜单中的子菜单将作为第三次点击的接口。这样，"三次点击规则"也轻松得以实现。
当然，我们谈到的所谓"原理"与"规则"都是死的，都只是一种建议，针对不同的情况还得进行具体处理。不过，既然是种"原理"，在大部分场合中它们还是行得通的，特别是对于提供信息服务或进行产品展示的网站，一方面我们要为各种各样的用户提供有用的信息，同时还得兼顾他们的方便查阅，"三点击规则"就显得犹为重要。
四．"五菜单原理"：
导航菜单的重要性不言而喻，它对于引导访问者找到自己需要的信息有着无可比拟的作用。但滥用导航菜单的危害性也同样严重，这时它不仅起不到该有的导航作用，相反混淆视听，让用户更加迷惑。因此导航菜单的划分不宜过多，最多五个就行了，而这正是我们谈到的"五菜单原理"。
在现实中滥用导航菜单的现象比比皆是，尤其是一些信息量比较大的网站。对于他们来说，每一个部门划分理所当然地就应该独占一个导航内容，殊不知信息与技术并不是分部门的，它们之间的互相联系直接而紧密。十几个菜单的划分，的确方便了部门管理，对于一个纯粹来寻找有用信息的用户却无丝毫好处；还有一点我们得明白，网站首页对初次来访者非常重要，但在以后就不一定了。如果他对其下的某个分区感兴趣，极可能将其添加到收藏夹中，以后就绕开了网站首页直接登录收藏夹中的分区。这样，首页"大而全"的功用就显得不太合适宜，如何在首页创建一个脉络清晰的图形与操作接口才最为重要！
如何应用"五菜单原理"？举个例子：比如我们要建个商业网站，那么在首页制作三个主导航菜单就行了——"男性"，"女性"，"小孩"；主导航菜单下是子菜单，如"女性"菜单下不妨添加"外套"，"休闲装"，"工作服"，"化妆品"，"保健用品"等等多个子菜单；当访问者进入相应的子栏目页面，这些子菜单还可以有它们自己的子菜单（也就是子子菜单），如"化妆品"子菜单中包含"洗发水"，"香水"，"口红"，"护肤品"，等等的子子菜单。由此可见，应用"五菜单原理"不是行不通的，关键在于我们如何去为用户严格定身构架自己的网站。
导航菜单制作技术中还有一个常常可以见到的问题，那就是功能划分不清。事实上，导航菜单的制作是有针对性的，一种是针对"目的"，一种是针对"任务"，前者主要提供用户"往哪里去"的导航，如"专家意见"，"客户服务"，"公司信息"，等等；后者主要为用户提供"做什么"的导航，如"应聘"，"登录"，"留言"等等。两种不同功用的导航菜单不能够交叉混用，否则，无论是对于用户的导航，还是"五菜单原理"的实现都极为困难。一般地，"任务"功能的导航菜单不纳入我们的"五菜单原理"体系。如图六：
图六
Hesketh 网站，"目的"功能导航菜单（ Expertise / Process / Proof ）与"任务"功能导航菜单（ Hire Us / Work Here / Login ）相分离，即便是初次登录该网站的用户也能方便快速地找到自己所需的东西。
五．为用户指明所处位置：
汽车行驶靠路标，而网络冲浪则需要导航条的明示。无论我们的用户深入到网站的哪个层次，我们都应为他们提供一个清晰的，准确的位置概念。
它的实现非常简单，只需为当前页面添加诸如高亮或具有特色的颜色导航标识就行了。虽然简单，但它的功效却是显著的，因此，这里也将它作为一个单独的要点单列出来以示提醒。
六．导航条的放置位置：
上下楼梯都有扶手，扶手绝不会建在靠墙的一边，这样，它才能行使"扶手"的功用；同样，导航菜单也需要合理的放置，才能真正地行使其导航作用。
导航条的放置位置没有定式，既可以在网页顶端或底部进行水平放置，也可以在左边或右边进行垂直放置，甚至还可以用 JavaScript 制作弹出窗口式的专门的导航窗口，但无论哪种放置，都得遵循"一致"原理。整个网站采用同一个导航菜单是我们的首选，用户只要使用了一次导航菜单就等于学会了整个网站的导航菜单的操作。如图七：
图七
图七网页上部的导航菜单简单明了，并且贯穿了整个网站的导航风格。
图八
图八是另外一种类型的导航风格。由于整个网页是按一种类似于"播放器"的界面制作而成，因此它的导航菜单放在了网页中部，展示与详细说明区域的下面。
七．总结：
对于网站建设，那是仁者见仁，智者见智，相信一百个人会有一百种不同的理解，但无论具体技术有多么大的差异，至少有一点是我们必须认同的，那就是：用户才是一切，为他们定身制作快速简捷，易于操作的网页，是所有网页设计者衡量一切的标准！
上面我们也谈到"三卷屏原理"，"三点击规则"，"五菜单原理"，等等，在具体的网页制作过程中它们并不是什么时候都适合，尚需合理搭配方能发挥出该有的功效。不过，正如前文所说的，虽然不是放之四海皆准的真理，但在大多数场合中，它们还是适用的。
最后，希望本文对你会有所助益。(责任编辑 Jacky school@staff.ccidnet.com)
