鹿晗橙光游戏霸道总裁:浅谈网络课程的页面设计

浅谈网络课程的页面设计 

张爽  刘家勋drew0521@163.com

辽宁师范大学计算机与信息技术学院  大连  116029

【摘要】网络课程的页面设计应按照课程分析、创意设计、制作、试用测试、修改评价等几个阶段进行,具体的设计内容包括主页的设计,页面形式要素的设计、色彩和动画视频等的设计。在文中，笔者结合制作《现代教育技术》网络课程的实践，对这几方面内容的设计做了分析探讨，最后结合自己的经验，提出了几点页面设计中需要注意的问题。

【关键词】网络课程  页面设计

 利用网络进行教学是教育发展的一个方向。网络教学的效果如何，与网络课程的设计与制作有关。所谓网络课程，是通过网络表现的某门学科的教学内容及实施的教学活动的总和。表现形式上就是由一页页的网页按照一定的顺序和结果组成的。网页既是网络课程的组成部分，也是网络课程的呈现形式，所有的教学信息和资源都是通过页面呈现在学习者面前的。因此，网络课程页面设计的质量如何，直接影响到网络课程的质量。下面就结合我们开发制作的《现代教育技术》网络课程谈谈网络课程的页面设计。

一、 网络课程页面设计的一般过程

页面的设计师一个系统有序的过程，一般包括课程分析、创意设计、制作、试用测试、修改评价等五个阶段。设计流程图如下：

课程分析

                           评 价 修 改

    在该过程中，课程分析是为其它的各项工作奠定了基础，包括内容分析、学习者分析、媒体类型分析等教学设计工作。在我们开发的网络课程中，我们首先明确将它定位在为广大师范院校教育专业学生和中小学教师继续教育培训服务。分析学习者的特征、学习内容和学习中要用到的媒体，保证了网络课程的科学性和教学性。这项工作主要由学科专家和教师来完成。创意设计是在课程分析的基础上，对网页设计进行总体把握，包括了对课程的整体风格、代表形象的设计与策划，要体现出网络课程的风格。然后将创意的思想通过具体制作表现出来。制作后的产品要经过不断的测试，试用修改，不断完善，最后才能完成页面的设计。

二、网络课程的页面设计的特点和要求

网络课程的页面设计不同于其它的娱乐性质、休闲性质的网站，有其自身的特点和要求。

（1） 主次分明、重点难点突出

网络课程的页面往往包含了大量的信息和学习资源。如果不分主次，很可能使学习者在学习时抓不住重点，学习效果不好。因此，就要求在页面设计时要有主有次，对于那些重点难点部分，要加以强调，突出显示；而对于那些次要内容，要与重点内容加以区别对待，合理安排。

（2）功能齐全、操作方便

网络课程的主要目的是促进学生自主学习。学生利用网络课程进行协商学习或自主学习，师生之间交互很少。这就要求网络课程的功能齐全、操作方便才行。因此，在页面的设计过程中要体现出这样的原则。

（3）导航清楚，方便理解

网络课程的信息量一般很大，学生在独立学习过程中，很容易迷航。因此要求在页面设计时，要设计明确的导航，让学生对自己所处位置一目了然。根据元认知理论，在设计导航时，要突出主干导航，一般不超过三条；体现出多渠道访问，在易产生迷航的地方设计帮助说明文字，方便学生理解。在我们开发的网络课程中，每个页面左侧都放置一个导航菜单，方便定位，使学生不易产生迷航。

（4）均衡一致，适度灵活

网络课程的页面设计要力求结构均衡、布局合理，保持整个网络课程的风格一致。一致性即要求网络课程的各个页面的功能区和构成要素在布局位置、功能作用和颜色搭配方面具有相对稳定的一致模式。在我们开发的网络课程中，课程学习部分五个模块风格一致，这样学习者在学习时，不易产生误操作，而且不会破坏整体的风格。但也并非要求一成不变，有时做适当的修改，提高页面的生动性。

（5）简洁明快、层次清晰

在页面设计时，要力求页面简洁、生动，层次清晰。不要以为复杂的页面能打动人。“简单就是美”，因此在设计页面时，只要能将意思表达清楚即可，最重要的是简洁、清晰，让人看起来舒服。

三、 网络课程页面设计的具体内容

1. 主页的设计

主页是学习者进入网络课程学习的第一个窗口，学习者对网络课程的第一印象来自于主页。根据心理学中“首因效应”理论，第一印象对人的认知有强烈的影响，这种印象直接影响人们对此事物其它特性的认识和评价。因此，主页的设计非常关键。这也是本文把主页的设计作为网络课程页面设计的一项内容单独列出来的原因。

首先，主页的设计要考虑到网络课程的学习者。通过对学习者的分析，了解学习者的特征，选择符合他们特征的页面风格。

其次，主页设计时要明确主题。主页是网络课程的一个“纲”，是内容的概括和摘要。要让学习者浏览完主页后，对课程的内容和特点有所了解和把握。

最后，要尽可能缩短下载时间。主页上包含很多图像，如网站标志、一些象征性的图片等。这些图片会导致下载时间延长。一般来说，主页下载时间不应超过30秒。图片要尽可能小，页顶图像最好保持在10KB以下。同时也要注意主页的颜色搭配和谐，构图均衡、适当。

在我们开发的网络课程中，由于学习者是在校的大学生或在职教师，他们的逻辑思维能力都非常强，因此要求主页的风格简洁、明快、主题突出即可。页面以蓝色为基调，页顶是横排的矩形，代表了现代教育技术的媒体特性。在主页的中间偏右位置是课程的标题，下面横着排列九个图标，明确表明该课程的九项功能。这样简单明了，一目了然。让学习者看后，对于该课程的内容、重点难点做到心中有数。

2.页面形式要素设计

（1） 文字

网络课程的页面多以文字为核心，靠文字传递完整的教学信息。文字的设计包括文字的风格、大小、颜色等。文字的风格就是字体，在网页中，我们常用的字体有宋体、黑体、仿宋和楷体等。应尽量避免使用特殊字体，以免用户端的浏览器不支持。若需要用一种字体来体现页面的风格，可以将其制作成较小的图像文件插入页面中适当的位置。而且一个页面中的字体不要超过三种，否则显得杂乱，没有主题。

关于字体的大小，为了突显主题，标题字号可以选的大些。正文字号一般默认为12pt（磅），在浏览器中显示比较粗糙，现在较流行的时小中文字体，大小为9 pt。同时，要注意段落间距，网页默认行间距是单倍间距，对于9 pt的字体段落，行间距为1.5倍视觉效果最佳。关于字体颜色的设计，在下面的色彩设计中介绍。

在我们开发的网络课程中，正文字体选为宋体，大小9 pt。标题用特殊字体做成小图片插到网页中，行间距为1.5倍间距。整体排版规范、整齐。

（2）图形图像

页面中的图形图像主要包括：图形、图片、照片、图表等处文字以外的配合教学思想表达的一切有形的部分。是一种极具表现力的形式。适合表现主观性的、意向性的、情绪性的无法用文字表达的内容。

在使用图形图像时有以下几方面要特别注意：

首先，图片的格式：

当前的网页中经常使用的图片格式有三种：GIF、JPEG、PNG。每种形式都有其自身的特点。GIF图形文件采用无损压缩技术，文件经压缩后不失真。而且可以存储透明色、建立动画等。适用于按钮、标题图片、线条、图标动画等。JPEG可以在不减少图像中所使用的颜色数量的情况下对图像进行压缩。由于该格式比较能容忍失真，如图片、艺术复制品、事物或风景等都比较适合于用JPEG来表现。PNG采取比GIF更有效的非失真压缩技术，通常比GIF和JPEG文件大，不支持动画。

其次，图像和文字的配合：

图像可以弥补文字的不足，但是不能完全代替文字。因此，在页面设计时，必须注意将图像所载的重要信息或链接到其它页面的指示用文字再重申一遍。这样才能满足学习者的需要。

最后，图形图像的处理：

在网页中的图形图像一般采用矩形、圆形等规则图形做外边框，显得比较呆板。为了提高页面的生动性，可以采用平面设计中常用的构图方法，巧妙的将图片进行分解，精心设计外框，利用喷枪工具随意涂抹等，削弱图片规整外形的刻板。

在我们开发的网络课程中，图片格式一般都选择JPEG格式，大小控制在10KB—20KB之间，对于太大的图片，我们可以利用Firework软件进行切片处理，将图片打碎，可以提高下载速度。所有页面设计中用到的图片都经过了一定的处理，使其与页面内容融为一体，达到了很好的对文字进行补充的作用。

（3） 色彩

页面色彩设计是网页设计的一项重要内容。贯穿于整个页面设计的过程之中。是调节浏览者视觉心理，引起人们注意的主要手段。恰当使用颜色，不仅可以增强网络课程的艺术性，而且可以吸引学生的注意力。

色彩的选择主要包括对文字、超链接、页面背景颜色等的确定。

文字的颜色，一般选择和背景色对比较大的颜色，背景多选用淡雅、柔和的颜色，这样教学内容就可以非常醒目的呈现在学习者眼前。导航区的颜色，要与教学信息呈现区的颜色有所不同，便于学习者区分。超链接的颜色，要与其它字体颜色加以区别（一般是红色或蓝色）。也可以根据实际需要设置超链接在不同状态下文字的颜色。

在色彩搭配时，要尽量将颜色控制在三种以内，并选择一种作为主色调；背景和文字颜色对比尽量要大，要有足够的对比度来使网页易于阅读，不要选用花纹复杂的图案做背景，以便突出主要内容；要针对网络课程服务对象的特点，选择不同的颜色。如儿童喜欢对比强烈、个性鲜明的纯颜色，生活在草原上的人喜欢红色等等。

在我们开发的网络课程中，背景颜色选为白色（#FFFFFF），字体颜色设为深蓝色（#004080），左侧导航菜单以蓝色为背景（#b7dcfd），整体上是蓝色和白色相衬，易于学习者阅读，让人看起来舒服，也比较适合该网络课程学习对象的特点。

（4） 动画和视频

在我们浏览的大多数网站中，几乎有90%以上的页面中都使用了动画（主要是GIF和Flash）。网上视频随着流媒体技术的兴起而发展起来，现在网上流行的VOD就是这一类，对者计算机网络的发展，网上视频的应用将会越来越广泛。

动、光、色是影响视觉的最活跃的三大因素，其中动的影响最大。在页面中增加动的因素，可以突破被屏幕的二维空间限制而表现三维空间的结构和形态，可以强化记忆，而且可以深化趣味空间，让学生轻松愉快的学习。将图标和按钮处理为动态效果，如跳动、闪动、抖动等，再加上精美的造型是网页设计中常见的动感设计。这样可以使他们成为网页中浓缩的精“点”。

在对网页做动画处理时，要注意：一是页面中动态和静态的部分要有密切关系；二是动态变化不能过多，否则会削弱动态效果，分散学习者的注意力。

四、页面布局

页面布局设计是通过文字图像的空间组合，表达和谐与美。版面就是在浏览器中看到的完整的一个页面。下面就介绍几种常见的布局格式。

（1）拐角型，又称为“T”型结构。就是指页面顶部为横条网站标志和广告条,下方左面为主菜单,右面显示内容的布局.是网页设计中的最广泛的一种布局方式.这种布局的优点是页面结构清晰,主次分明。因为人的注意力主要集中在右下角，所以这些有用的信息能为学习者最大可能性获取。缺点是规矩呆板,如果细节色彩上不注意,很容易让人“看之无味”.

（2）“国”字型，也称为“同”字型或“口”字型。这种结构是网页中用的最多的一种结构，是综合性网站中常用的版式。即页面上下一般有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。这种布局方式的优点是页面充满，内容丰富，信息量大，缺点就是页面拥挤，不够灵活。

（3）“三”型布局。这种布局多用于国外的网站，在国内用的不多。特点就是页面上横向2条色块，将页面整体分割为4部分，色块中大多放广告条。

（4）封面型，又称为POP布局。POP引自广告术语。指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。这种类型基本上出现在一些网站首页，常用于一些时尚站点。优点是显而易见，漂亮吸引人；缺点是速度较慢。

（5）对称对比布局。采取左右或者上下对称的布局,一般用于风格比较强的站点.优点是视觉冲击力强,缺点是将两部分有机结合比较困难.

这些只是目前网页中常见的几种布局方式，在实际应用中可以根据需要作适当修改。现在比较方便的一种方式是利用表格来规划。在我们开发的网络课程中，是依据表格来布局的。基本结构类似于“T”型结构，顶部为网站的LOGO，LOGO下方是网站的总导航栏，下面左侧是导航菜单，右侧为教学内容展示区，底部是网站的版权信息等。可以是学习者将注意力主要放在右侧内容部分。结构清晰，主次分明。所以建议大家在设计页面时不妨尝试一下用表格来规划。

五、 页面设计时需注意的问题

结合我们开发的《现代教育技术》网络课程的实践，我认为在进行网络课程的页面设计时，有以下几个问题需注意：

（1）主页内容力求朴实简单

现在，有很多学习者是利用调制解调器来上网的，这样他们的上网速度就受到了限制。因此，在主页中的图像要力求简朴，图像越大，下载速度越慢，时间越长。主页上的颜色最好不要超过64种，页顶图像最好保持在10KB左右。如果主页图片国大，可以利用Firework软件进行切片处理。一般将下载时间控制在10—15秒钟为好，时间过长人们就会没有耐心。

（2）页面内容要易读

页面是以内容为主的，不必过分追求复杂的表现形式。我们应合理规划文字与背景颜色的搭配方案，不要使背景颜色冲淡文字的视觉效果，也不应该是用过多过杂的颜色，让学习者看起来很吃力。而且不要频繁使用变化字体，这样让人看起来很不舒服。

（3）尽量使用相对超级链接

在制作图像或文本链接时，要使用相对路径。这样做网页的移植性强，例如把一组源文件移到另一个地方时，相对路径名仍然有效，不需要重新修改链接的目标地址。另外要保证链接直观有效，以便让学习者快速找到他们想要的内容。因此我们在每一页的顶部位置都放有相同的导航条，使学习者直观地从每一页上可以访问到网站的任何部分。

（4）不宜用太多的动画和静态图片

在设计页面时，要确定是否一定要使用GIF动画或Flash插件，如果可以不用尽量不用，选择静态图片来替代。另外，如果学习者所用浏览器的版本不是IE5.0或Netscape5.0，还要下载Flash插件，很不方便。同时也不要使用横跨屏幕的图像，要避免学习者滚动屏幕。此外，还要确保所用的动画和图片与网页内容有关，与内容融为一体。

（5）要注意浏览器和分辨率的兼容性

由于不同的浏览器和分辨率对于网页的显示效果不同，因此在设计网页时要尽量在不同的浏览器下设计和调试。对于屏幕的分辨率，我们在开发网络课程时，标准的分辨率为800*600。为了实现不同分辨率下页面不发生变形，在我们设计的页面，将规划页面的表格宽度设为768像素，居中。以后再嵌套的表格相对于网页的宽度就固定下来了，永远不会超出800*600的屏幕。即使是用别的分辨率来观看，网页也不会发生变形。

以上，仅就本人在网络课程的制作实践中的几点体会来谈网络课程页面设计的一些基本内容。其实网络课程的页面设计既是一门科学也是一门艺术。是一个复杂的系统工程，在实际的设计中要全面、系统、总体地对网页中的各个组成要素进行综合考虑。但总体上要遵循“主次分明、重点突出、风格一致、搭配和谐”等原则，将科学性与艺术性结合起来，获得最佳的感官效果，同时也使学习者获得最佳的学习效果。

【参考文献】

[1]许思贵. 浅谈教学网页设计. 曲靖师范学院学报[J]2003(3):59-60

[2]谢舒潇　叶长茂. 浅谈网络课程的页面设计. 高等理科教育[J]2004(1):101-102,104

[3]薄芙丽　滕兰芝等. 平面设计的新概念——教学网页设计.电化教育研究[J]2002（3）：54-55

[4]房国栋  姜丽. 浅论教育网站主页的设计. 中山大学学报论丛[J]2002（5）：169-170

[5]徐金云.网页设计中的常见问题及解决办法.青岛科技大学学报[J]2003（9）：134-135

[6]陈次白 丁晟春 颜端武著.网页设计与制作[M]南京.东南大学出版社2002.12：30-33，35-39，43