0 引子

World Wide Web往往简称WWW，在汉语中有很多不同的翻译法，如：国际互联网、万维网、因特网等。 应该说，WWW网页设计的最佳助手是WWW本身。在因特网上，有很多有关网页设计的指导的网站，其中既有针对一般用户而设计的指导，也有旨在为从事教育和培训的人员设计的网页指导，还有为学生学习网页制作提供指导或帮助的网站。总的来说，关于网页设计的指导是通用的，各类网页设计人员都可以从中受到启迪和帮助。

因特网上学习材料的设计和任何其他计算机辅助学习材料的界面设计之间关键性的问题都是一致的，同时，设计运用其他媒体时的经验仍然是有鉴戒价值的。当然，我们也应该充分认识到因特网和其他计算机辅助学习材料之间的区别。

1 因特网和其他计算机辅助学习材料的区别

因特网和其他计算机辅助学习材料之间的一个最大区别是因特网的用户可以自由选择一个浏览器来浏览网页上的内容信息，而且链接的速度变化很大，网页下载快慢不一。网页的设计者往往很难预料用户所使用的计算机和浏览器的类型，也无法得知用户是通过怎样的电讯方式和本网站连接的。网页设计者必须做出一系列的选择，比如，是否确定面向最低配置的计算机用户——一个速度很慢的调制解调器连接、一台老式计算机和一个简单的文字浏览器。这些选择当然会限制网页的长度和复杂程度，但是这样确定下来的设计原则是很务实的，而且对于特定的用户群体，如，喜欢在纯文本状态下工作的人、或者一些在自己家里工作的特殊用户。在另一个方面，网页设计者可能把自己的网页定位在那些配置很高的计算机用户，快速的电讯链接和较高版本的浏览器。读者一定留意到因特网上有很多网页提示网友最好用某种版本的软件来浏览，其他软件很显然不会达到设计者的最佳效果的。

多数网页设计者采取折中的态度，尽量设计制作适合大多数网上浏览人员的网页。同时，设计者也有必要让网上浏览者很快明白自己网页的特点，是单纯文本形式还是有其他比较特殊的形式，比如，包含表格、图片、动画、甚至录像等多种媒体，这样，用户在到达该网页时，就会对可能较慢的下载速度和时间耽搁心理上有所准备。

在一般计算机辅助学习材料里，设计人员往往允许用户在规定的时间里从一个部分浏览到另一个部分，而且用户往往可以实现这样的翻页。但是，网上用户的情况则比较复杂。如果连接的速度相对比较快，下载网页的速度也会很快，这样，在网上浏览时会很快地从一个链接浏览到另一个链接；同样，如果连接的速度相对比较慢，下载一个网站的网页可能需要较长的时间，有时甚至由于链接超时而无法下载。设计网页时必须考虑到这些因素。

一般来说，用户在浏览网页上的内容时，如果发现重要的有价值的内容信息，常常会将其下载以后打印出来阅读，或者将其中有些文件下载在自己的计算机上阅读或打印。因此，设计人员在设计制作网页时必须考虑下列问题：
- 网页是否为用户打印出来在纸上阅读而设计？
- 网页是否为用户在计算机上阅读而设计？
- 两者兼而有之？
- 网页是否为用户下载以后在当地的局域网上运行而设计？

关于网页方面的实验研究资料还并不是很丰富，上面列举的这些网址上提供的指导大多数是设计者们维护这些网站的心得体会和经验总结，当然，也有一些实验比较。我们需要在设计时灵活运用，具体问题具体分析。由于网络技术每天都在突飞猛进的发展，制作网页时，注意参考一些最新的网站是很必要的。

2 基本原则

任何其他计算机辅助学习材料界面设计的基本原则在设计网页时仍然是适用的。例如：
- 连贯一致的表现手法；
- 清楚明了的结构框架（在用户需要的位置提供标题、提示字幕、指示语等）；
- 友好清晰的界面显示（信息不是过分密集）；
- 准确丰富的内容信息；
- 美观宜人的视觉感受（激发用户的学习兴趣）。

研究界面设计的目的是为用户提供一系列清晰友好、简洁明了、内容丰富的界面。在制作完成自己的网页后最好先利用不同的计算机系统、不同的浏览器对其进行测试然后再向因特网发布，以确保更多的用户能浏览到网页的最佳效果。

3 页面长度

一个网页的长度一般以显示其全部内容的屏幕数目的多少来确定。如果简单地在因特网上浏览一番，读者就会发现，网页的大小长短不一，有的只有几行字，而有的则需要滚动多个屏幕，点击很多链接才能全部浏览完其上的内容。简单地说，一个最基本的原则就是，网页“不宜过长”。究竟多长为“长”呢？这是一个很难回答的问题，必须具体问题具体分析。图5 和图6 分别显示了一个含有很多页信息的网页和用户在任何一刻所能看到的部分与全部网页内容的对比。

图5 网页长度

图6 网页长度的比较


太长的网页会对用户使用时产生诸多的不便。用户经过不停地滚动之后，往往容易失去方向，对于自己在网页的什么位置感到困惑不解，又很难找到刚才浏览过的某个有趣的话题或信息。一般来说，较长的网页是为那些比较有经验的用户，或者是那些对于该网页专业内容比较了解、又有很强的动机去浏览其上的内容信息的用户设计制作的（克拉克，1996）。事实上，普通的学员更多地是新手而不是熟练的计算机或网络用户。

通常，计算机辅助学习材料里滚动的功能不宜太多使用。但是，在设计网页时滚动又往往是很难避免的，否则就只能将大量的内容分割成小块，分别在不同的网页上显示出来。那样，用户又不得不在网页之间来回跳跃，不得不忍受下载时可能造成的时间耽搁。另外，在不同的网页之间浏览往往很容易分散用户的注意力，造成用户对整个网页的内容结构混淆不清，也容易使用户很快丧失学习和浏览的兴趣。

解决这个问题的唯一方法是在长网页和多屏幕之间做出妥协。网页一般最多一次性地不超过3~4屏的内容，此时，滚动的难度适中，也不容易造成用户的混淆。但是，还需要注意，用户如果需要将网页上的内容打印出来，长的网页比很多不同的网页上的内容要容易得多，用户不必翻阅很多网页就能将一个网页上的全部内容打印出来。如果用户既需要打印辅导材料，又需要相互之间共同讨论其内容，也许，两种版式的网页都是必要的。

在具体的网页上，可以利用下列手段来帮助用户浏览其内容：
- 用户可以点击主菜单上的链接直接浏览其连接的内容，还可以随时返回主菜单或继续滚动浏览剩余的部分；
- 利用大小标题不停地给用户以提示；
- 利用各种手段突出显示重要信息。
需要注意的是，这些手段本身并不能够完全克服太长网页的弊病，如果缺乏返回最初链接的功能，如返回页首，有时甚至会适得其反。突然的一个链接将用户带到文件的中央而不提供返回的选择无异于故意造成用户的混淆，用户一定会失去对自己所在位置的把握。

滚动不仅局限于纵向，也可以是横向的，比如，网页可以比屏幕或浏览器窗口宽。从计算机以外的其他媒体辅助学习材料的实践经验告诉我们，应该尽量避免使用横向滚动。一方面，习惯上很少使用横向滚动，另一方面，横向滚动很容易将网页上的信息打乱，用户很难看到网页内容的全貌，而不得不左右挪动滚动条或点击滚动扭。图7显示了这种横向滚动的问题。如果网页设计者希望用户将其网页上的内容打印出来阅读，最好将众多内容设计在一个网页上或者专门准备一个可以下载的文件供用户下载之后阅读。

图7 横向滚动的效果

4 网站结构

一个网站上所有网页间的结构必须连贯一致、简洁明了，并能充分激发用户的浏览热情才能真正吸引用户，而不至于使其丧失兴趣，对网站上的内容产生混淆。很多网站除了一系列的链接之外，很少告诉用户自己网站的框架结构，致使用户在其网上已经浏览了很长时间还不清楚该网站究竟有多么深奥莫测。有时甚至通过链接已经完全离开了该网站，跳跃到了另一个新的网站，用户还全然不晓。这样，用户有时不得不通过利用浏览器里的前进或后退功能来返回自己浏览过的内容，除此之外别无他法，特别是有些网站上往往含有很多死胡同，用户一旦抵达这个地方便只有一再点击后退键才能慢慢找到自己刚才浏览过的地方。

网站的结构一般分布与下列两个极端之间：
- 窄而深（图8）
- 宽而浅（图9）

图8显示了一种窄而深的网站结构。这种网站横向比较窄，每一个网页只连接有限的其他几个网页。这种网站虽然给用户提供的选择少了一些，但是在局部范围内造成用户混淆的可能性也相对少了很多。如果网站的内容需要层次分明，信息的深度又要求较高，窄而深的网站可能更加合适一些，只是用户可能需要浏览几个层次的内容之后才能到达自己真正想要到的地方。在窄而深的网站上漫游，从一个层次到另一个层次，一般比较直截了当，只有一、二个选项，但是，对整个网站而言，经过多个层次步骤的漫游浏览后，用户也是很容易迷失方向的。当然，有很多办法可以减少这种问题的出现，例如，提供返回主页的链接等。

很多网站的主页上往往列举很长很长的菜单选项，这就是比较典型的宽而浅的网站。这种网站结构相对比较简单，用户可以随意跳跃到任何一个网页，然后再返回主页，可以在主页和任意网页链接之间来回漫游，而不会在该网
主页

以下各级网页

图8 窄而深的网站

图9 宽而浅的网站
站上迷失方向。值得注意的是，并不是所有学科都适合于这种多选项的菜单形式，另外，这种形式本身要求用户必须在众多的选项中做出自己的选择。有时，网站上很有必要为用户多设计一些二级菜单选项，这样，用户不必滚动整个主菜单就可以发现适合自己的内容。

上述网站结构都有各自的利和弊，最佳的网站应该说是介于这两种极端之间的。实践经验和研究结果证明，设计制作网页时最有效的选择莫过于最大限度地发挥这两种网站各自的优点。很多网站设计的指导都推荐以下几个原则：
- 每个网页上最多提供5~7个选项；
- 浏览任何内容最多不超过3个层次或步骤；
- 每个网页上都提供退出的按扭；
- 任何地方都可以一步返回主页；
- 每个网页上都有清楚简洁的提示以帮助用户的浏览。

网站上的学习材料应该有机地组织在一起，以便每个网页上的学习内容都能够：
- 激发用户学习该网页内容的动力；
- 既有助于帮助用户理解当前网页上的内容又有助于他们理解和掌握整个网站上的内容信息；
- 充分发挥用户的学习自主性和能动性。

5 网页结构

就象其他媒体辅助学习材料一样，一个网站上具体网页的结构往往与这个网站的整体风格保持一致。例如，一本书里的任何一页都需要与其他部分相关联，否则，该页内容就可以说是多余的。因特网与其他媒体的一个最大区别在于，别的网站可能会设计一个与本网站上某一页的链接，这样，用户从别的网站到达本网站时可能不一定是本站的主页。用户可能对本站的结构毫无了解，并不知道本站上其他内容的存在，甚至没有注意到自己已经离开了最初的网站。由此看来，网页的结构必须非常清楚、一目了然。
- 网页标题必须清楚地表明与其他网页的关系；
- 返回主页的功能；
- 有助于用户理解其内容的网页层次结构（语言简单流畅、内容段落分明、标题和副标题层次清楚）；
- 网页内部浏览路径明确。

文本文件仍然是WWW网页设计的一个重要组成部分，因此，有关文本文件的设计指导原则在设计制作WWW网页时也是适用的。需要考虑的主要内容有以下几点：
- 用户在计算机屏幕上阅读文字的速度比在纸上阅读慢20~30%；
- 文字行一般来说应该比较短（8~10个字）；
- 文字应该以意群为单位来显示（一次一个完整的概念）；
- 文字应该左对齐；
- 文字排版时应该上下格配合使用；
- 辅导材料里信息内容交叉参考有助于提高用户使用所设计的各种功能。

图10 WWW网页页面设置

图10显示了页面设置的一些关键因素，包括：
- 网页标题 说明该网页的重点内容和与其他网页的关系；
- 段落层次 运用小标题和简短的文字将信息分成小的模块，语言力求简洁明了；
- 媒体使用 在可能的情况下，运用文字以外的其他媒体，如，图片、动画等，来帮助用户理解网页上的文字信息；
- 导航提示 导航提示必须简单友好，易于识别，符合标准；网页一般都应该提供返回主页和页首的功能。

6 框架结构

利用框架结构可以将网页分成几个不同的区域，现在常用的网络浏览器，如Internet Explorer 和 Netscape Navigator，都是支持框架结构的。使用框架结构的一个明显好处是，在用户浏览网页内容时可以保持界面整体效果的一致性。图11显示了一个基于框架的网页，其中有三个不同的区域。用户在浏览该网页上的内容时，这三个区域框架是保持不变的，而且页首的标题或标语以及左栏的菜单选项一直留在用户的计算机界面上。只有右边较大的区域里的内容是随着用户在该网站上的浏览而变换的。

图11 框架结构

框架结构的缺点在于有时它会造成网站结构的复杂化。每个区域的内容都可以与其他网页相链接，这样，非但不是一整个可以滚动阅读的网页，反而在一个界面里出现了多个需要滚动阅读的窗口。图12显示了一个比较复杂的框架结构，其中有四个可以滚动的小窗口，每个窗口里的内容又都与其他网页相链接。前面曾提到过，用户在单个需要滚动的窗口里就已经很容易迷失方向，可想而知，界面上同时有多个可以滚动的窗口时，用户的感觉会是什么样的。

图12 复杂的框架结构

网页的框架结构可以显示与普通网页里相同的内容信息，如，文字、图片、颜色、动画等。框架结构可以极大地增强网站的交互性和趣味性，是提高界面 / 网页设计质量的一个强大的设计手段，它可以把网页从接近于传统的纸张文本逐渐地转变为更加生动活泼的计算机界面。

需要注意的是，并不是所有的浏览器都支持框架结构的显示，这样，为了让此类计算机用户也能浏览自己网站上的内容，就有必要同时设计另一个版本，以便这部分用户也能从中获益。同时，设计时还需要考虑到这样一个事实：因特网上在几个框架里下载不同的文件比在单个窗口里下载同样大小的单个文件要慢得多。这样，就有必要权衡框架结构可能带来的益处和下载速度之慢之间的矛盾。如果网页里含有图片、动画或录像等占用很大空间的文件时尤其值得慎重考虑。

7 图片

网页上图片的运用可以增强用户的学习兴趣，激发他们浏览该网页的动机。遗憾的是，图片会增大网页的文件数据量，从而导致下载速度慢，尤其是对那些使用较慢速度的调制解调器的用户来说，更是如此。设计网页时，设计人员必须牢记的一个事实是，肯定会有不少用户使用简单的文字浏览器，而不支持图片，这样含有图片的网页在他们的浏览器上必然会出现许多的空白。另外，浏览WWW网页的人中可能会有一些人患有视觉障碍或其他影响正常阅读的障碍，只能依靠某些仪器设备来为他们阅读网页上的文字。这样，网页上的图片也会被视而不见。解决的办法是，在运用图片的同时，运用文字加以说明，以替代简单文字浏览器上无法正常显示的图片。因特网上有很多这样的网页，设计时可以参考。一个典型的问题是，很多网页设计者只是简单地用“这是一张图片”来为不能正常显示时替代图片。如果图片的作用仅限于此，那又何必要用它呢？设计者应该简单解释这些图片。

其他计算机辅助学习材料里图片运用的原则在设计网页时也是通用的。主要的原则（参见第5章）有：
- 尽量保持图象与背景之间较大的反差；
- 图象必须与所学材料紧密结合起来；
- 跟文字内容相关的图象有助于学习和理解该文字材料；
- 图象有助于学生理解和回忆所学信息；
- 学生必须经一再鼓励才可能努力挖掘较复杂的图象里的内涵；
- 图象应该与其描绘的文字排列在一起；
- 学生喜欢占屏幕四分之一到一半的图象显示，但是往往比较容易记住那些需要点击下载的图片；
- 单个屏幕上最多可以显示3个代表性图象。

所有这些原则都必须与具体的WWW网页结构特点联系起来考虑，因为具体网页的文件大小与下载该网页的速度有着密不可分的关系。使用太多图象的网页，由于下载时间很长，很容易使用户变得不耐烦，从而失去学习浏览的动力，也容易打断学习的节奏和步骤。为了帮助学习，重要的一点是将图象与文字有机地结合起来，有效地把图象融入文字中间，最大限度的发挥图象的作用。

常用的图象有两种文件类型：GIF形式和JPEG形式，多种浏览器都支持这两种类型的图象。GIF形式和JPEG形式的图象各有利弊。
- JPEG – 相片性质的图象，很容易被压缩出较小的文件，减少下载过程所用的时间，但是经压缩时，图象的质量会明显降低；
- GIF – 线条画，色彩很浓，压缩时图象的质量不易降低。
网页上使用图象的根本问题一直是图象文件的大小问题，而且图象文件的大小跟显示时图象本身的大小并不一定是统一的。很多网站上关于图象的运用的指导和建议都强调这一点。一个明智的办法是，在向WWW网发布网页之前，最好先在不同的机器上利用不同的电讯连接方式对网页进行测试运行，如果有任何问题都会很快暴露出来的，也有利于设计者及时修正。

8 动画

有些浏览器支持动画或动态显示，主要有两种显示动画的方式：服务器驱使和用户调取。
- 服务器驱使：服务器向用户计算机浏览器发出信息，浏览器保持连接；
- 用户调取：服务器向用户计算机浏览器发出提示，指导用户完成第二个步骤，比如，继续寻找连接另一个网页。
这两种方式都可以在一定程度上自动地显示动画或者一些动态的链接，而不用用户自己去开始这些动作。这样，信息就可以自动更新，图象也能以动态的形式显示出来。同样，需要考虑的是，很多用户的计算机浏览器是不一定支持动画的。

网页上使用动画的的益处有：
- 可以显示两种不同状态之间的动态变化，用户可以很容易地看到变化的过程，而不是简单地看到变化前的状态和变化后的状态；
- 这种状态变化是随时间进行的；
- 可以增加显示的趣味性；
- 可以吸引用户注意力。

9 菜单、链接和浏览帮助

WWW网页上的链接和浏览提示与帮助是很重要的，它们可以为用户浏览网页时提供一个清楚易懂的结构提示，提供的链接必须有助于用户理解网页结构。象设计任何超文本文件一样，设计者必须要尽量避免使用户产生混淆不清的可能。

设计菜单和链接时的主要考虑因素有：
- 永远提供返回主页的链接；
- 如果文件较长（超过两个屏幕），提供返回页首的链接；
- 主页上介绍网站的结构和主要内容；
- 设计较长的网页（超过两个屏幕）时，在页首提供小标题的链接；
- “下一页”、“后退”、“返回”等链接要求用户明白这些链接将要去的地方，否则最好说明，如：“下一页到颜色第4页”、“退回到颜色第2页”、“返回颜色主页”；
- 链接扭所用的语言应该简单易懂，而且要有意义。

设计超文本文件的一个误区是滥用链接功能，以至用户根本无法预计网站上各个网页之间的关系究竟如何，几个来回之后，用户马上就会失去继续浏览的愿望。错综复杂的链接关系是绝对不可取的，每个连接都必须指向明确。图13显示了一个毫无章法的链接设计。

图13 杂乱的超文本链接

10 小结

以下这些网页设计原则都是参考WWW网上人们对设计制作网页的指导和建议，结合其他计算机辅助学习材料的经验汇编而成，读者在实际设计制作过程中可以参考使用。
- 利用不同的计算机和浏览器测试、检查网页显示是否合适；
- 说明网站的结构特点、文件大小、浏览器要求等，以便用户对可能的时间耽搁心理上有所准备；
- 容许用户在网页学习材料各元素之间浏览时可能造成的时间耽搁；
- 连贯一致的表现手法；
- 清楚明了的结构框架（在用户需要的位置提供标题、提示字幕、指示语等）；
- 友好清晰的界面显示（信息不是过分密集）；
- 准确丰富的内容信息；
- 美观宜人的视觉感受（激发用户的学习兴趣）；
- 网页设计的目标是清楚的框架结构、友好的页面显示和丰富的内容信息；
- 网页长度不宜超过3~4个屏幕；
- 翻页的次数越少越好；
- 避免使用水平滚动；
- 如果用户需要打印网页上的内容，最好将不同的网页上的内容设计成另一个版本（一个大的网页），或者提供一个可以下载的文件；
- 网页要求结构连贯、简单大方、激发兴趣；
- 每个网页上最多提供5~7个选项；
- 浏览任何内容最多不超过3个层次或步骤；
- 每个网页上都提供退出的按扭；
- 任何地方都可以一步返回主页；
- 每个网页上都有清楚简洁的提示以帮助用户的浏览。
- 连贯一致地使用框架结构易于帮助用户浏览网站上的内容；
- 框架结构也可能增加显示的复杂性；
- 框架结构下载速度相对较慢；
- 利用图象时，最好同时提供文字说明，以防不能正确显示时，用户的计算机屏幕上出现空白；
- 图象会大幅度增加网页文件的大小，从而影响下载速度；
- 链接和浏览提示都有利于是网页结构清晰化；
- 永远提供返回主页的链接；
- 如果文件较长（超过两个屏幕），提供返回页首的链接；
- 主页上介绍网站的结构和主要内容；
- 设计较长的网页（超过两个屏幕）时，在页首提供小标题的链接；
- “下一页”、“后退”、“返回”等链接要求用户明白这些链接将要去的地方，否则最好说明，如：“下一页到颜色第4页”、“退回到颜色第2页”、“返回颜色主页”；
- 链接扭所用的语言应该简单易懂，而且要有意义。
- 超文本链接不宜滥用；
- 动画可以帮助显示状态随时间进行的变化；
- 动画可以增加显示的趣味性；
- 动画可以吸引用户注意力。
- 尽量保持图象与背景之间较大的反差；
- 图象必须与所学材料材料紧密结合起来；
- 跟文字内容相关的图象有助于学习和理解该文字材料；
- 图象有助于学生理解和回忆所学信息；
- 学生必须经一再鼓励才可能努力挖掘较复杂的图象里的内涵；
- 图象应该与其描绘的文字排列在一起；
- 学生喜欢占屏幕四分之一到一半的图象显示，但是往往比较容易记住那些需要点击下载的图片；
- 单个屏幕上最多可以显示3个代表性图象。
- 用户在计算机屏幕上阅读文字的速度比在纸上阅读慢20~30%；
- 文字行一般来说应该比较短（8~10个字）；
- 文字应该以意群为单位来显示（一次一个完整的概念）；
- 文字应该左对齐；
- 文字排版时应该上下格配合使用；
- 辅导材料里信息内容交叉参考有助于提高用户使用所设计的各种功能。