网络媒体被称为“第四媒体”，在近几年来日益成为眼球关注的焦点，并成为企业、学校、个人传播信息的重要窗口，设计一个好的网站无论对信息的传播者和信息的受众多非常重要，特别是近几年来远程教育不断兴起，如何建立一个教育效果好，低成本管理的教育网站就显得及其重要。本文根据若干年的设计经验就网站设计方法作一些探讨。
当计划开展一个网站项目时，多花一些时间做详细的规划书是重要的。规划书的成败往往也就决定了这个网站设计的成功与否。实践证明，一份系统完整详细的规划书将给你在开发网站过程中带来一系列的好处：
² 对目标和任务以及客户需求给予明确的书面定义；
² 能够控制项目开发中的细节；
² 能够保证控制整个项目的时间进度；
² 能够保证各个部门人员的任务分配和协调执行；
² 能够预期项目开发中发生的困难和潜在问题；
² 能够保证项目各个模块之间的顺利对接；
² 能够保证资金的利用率，控制开发成本；
假设一个网站设计项目的时间长度等于10份的话，一般科学的做法是，一个项目的规划部分占到整个项目时间长度的7份，开发时间占2份，测试时间占1份。当然这个数字不是定律，具体情况具体对待。
网站设计第一阶段的任务----制定网站规划书。以下提供了一个粗略的设计模型，仅作为设计人员的参考。
n 目标和任务
1. 用户需求调查
确定网站的目标是哪类层次的用户，如大学生和高中生、小学生，其知识结构，操作行为等均表现不同。从伦理学、技术、心理学等角度进行用户调查。一般需要了解用户的使用习惯、用户的浏览器使用环境和操作平台、需要了解技术对用户的影响和作用等等，这对于设计一个优秀的网站至关重要。
2. 视觉效果设计
网站是教育机构的电子化形象门户，需要在网络中树立自己的易识别性，该项任务主要负责网页交互界面的风格处理，向用户传达一种鲜明的讯息，促使用户能够迅速地辨认、理解和记忆。
3. 界面设计
界面设计的任务是完成交互界面要素设计。例如图形，文字，色彩，字体，交互方式、导航系统以及众多设计要素的布局等等。
4. 交互设计
该项任务在于定义用户以什么样的方式使用网站功能，开发便于用户完成任务的程序。例如，下拉菜单式、弹出菜单式、滑动式、滚动式、键盘控制式、鼠标点击式、屏幕触摸式等等方式。
5. 功能详细说明书
开发项目计划书时，需要根据用户的要求详细描述网站的功能，这工作将直接影响到程序开发人员对未来项目的展开和功能的对接。
n 信息表现形式
1. 信息设计
确定网站的内容，强调文本、图片、色彩、动画、声音等信息元素的设计处理、布局和表达方式。信息设计的任务在于优化设计，便于用户理解信息。例如采用文字，动态文字，口头陈述、图表、图像、声音、照片、动画、录像、电视、电影等多种模式。
2. 导航设计
一个良好的导航设计便于用户明确在网站结构中的位置，用户不至于在网络中迷失方向。
3. 信息结构
信息结构往往容易被设计师所遗忘，设计信息结构的任务在于便于用户访问网站内容的信息空间关系，这种空间关系处理恰当，有利于用户快速查找信息。例如，可以为用户提供多种不同得信息搜索索引。
另外，计划书还必须分析项目开发人力、开发周期、工程预算、信息更新、维护费用、以及在开发过程中可能遇到的技术问题或者其他困难。
网站设计第二阶段的任务----执行规划书。
这一阶段需要将设计与技术实现相结合，将视觉设计和HTML（Hypertext Markup Language）语言、ASP（Active server page）等程序代码相结合，将采用文字、图表、图像、声音、照片、动画等排版到版面中。
网站技术在客户端和服务端经历了若干阶段。在客户端经历了三个发展阶段。第一代表现为静态的HTML，包括文字、图像等；第二代表现为CSS（cascading style sheet）、Java Applets、ActiveX等；第三代技术表现为DHTML、XML等。在服务端也同时经历了三个发展阶段。第一代表现为静态的HTML，包括文字、图像等；第二代表现为此CGI(common gateway interface)、服务器端脚本等；第三代技术表现为ASP、COM(Componet object model)、DCOM等。一般在网站设计项目，界面设计人员完成前台的设计工作，即客户端的视觉设计和一般程序设计；后台，即服务端应用程序和数据库由各自的专业人员来处理，最后实现前台和后台的顺利对接。
网站设计第三阶段的任务----测试。
当每一个阶段工作完成后，测试是一个不可忽略的重要阶段。用户绝对不会对一个充满问题（Bug,计算机程序术语,意为程序错误）的网站感到满意。网页需要在不同的计算机运行平台环境下、在用户常用的不同浏览器环境下、在不同的显示器分辨率的环境下进行测试。最后，还需要多人对整体的项目进行测试。
网站设计第四阶段的任务----网站的维护和更新。
网站的信息是一个动态的交换过程，时常需要更新数据和信息，同时还要担负着修复被破坏的数据的任务。尽管这项工作一般由客户来自行执行，但设计师仍然应该提供相应的指导和方法。
总之，教育网站的设计和开发是教育人士、工程技术人员和艺术设计人员共同努力的结果，是艺术和科学的集中体现。
界面设计
一个优秀的网站界面，既要有艺术观赏性，又要体现其功能实用性，信息传达的准确性。设计师在设计网站时需要把握好以下几个特性：功能系统性、形式统一性、信息完整性和易读性、操作方便性、维护简易性。网站页面的设计和布局不同于传统的纸上作业，他往往和网络技术密切相关，并且受到相应技术的限制。例如，在印刷设计作业时，文字的行距和字距的调整几乎是无限的，但是在网站设计时调整起来就要困难得多；在两种作业环境下如何选择文字也存在很大的差异。以下是个人设计过程中的一些体会以供探讨。
操作系统
进行网站设计时，考虑用户的操作系统是必要的。例如，在WINDOWS操作系统下，不严格的HTML语法可以在IE(Internet Explorer)浏览器里能够正确地解码(Decoding)，在网景公司的Navigator浏览器种就不能正确地解码。在UNIX系统下，一个细小的语法错误或者中文文件名都会导致严重的后果。所以，在编写网站的时候，最安全的做法是严格按照W3C（World Wide Web Consortium：3W协会，主要任务是为网络制定技术标准）的标准编写。这样基本可以保证网页能够在不同的操作系统环境下正确地显示。
界面
印刷媒体设计师面临的是以厘米或者英寸为计量单位的纸张或者其他载体。但是，网页设计师面临的是一种全新的计量单位—像素(pixel)。13英寸显示器的大小是640*480像素；14英寸显示器的大小是800*600像素；17英寸显示器的大小是1024*768像素；现在虽然部分用户使用17英寸的显示屏，但大多数用户依然使用14英寸的显示屏。所以设计师在考虑设计网页时，必须考虑大多数用户的利益，设计的网页既能够在800*600像素的显示屏上正确显示，同时又能在1024*768像素的显示屏上显示。
市场上浏览器种类多达几百种，中国用户通常使用微软的Internet Explorer或者网景公司的Navigator。设计页面的时候需要考虑浏览器显示区的大小和设计的网页尺寸基本相同，这样就可以避免浏览器的下方出现拖拉条，因为这会给用户在操作上带来相当大的麻烦。以Internet Explorer为例，当分辨率设定在800 * 600像素时, 其显示区域的大小为785*485像素；当分辨率设定在1024 x 768像素时，其显示区域的大小为1004*620像素。以Navigator为例，当分辨率设定在800 * 600像素时, 其显示区域的大小为788*478像素；当分辨率设定在1024 x 768像素时，其显示区域的大小为1009*610像素。为满足17英寸和14英寸的显示器用户，通常以800 * 600像素分辨率为标准。同时考虑到页面内容周围会有一个边距产生，所以一般使用设计页面的大小为750*470像素来适应14 VGA 显示器和17 VGA 显示器。
文字
文字设计具有很大的灵活性，既可以直接在屏幕输出，也可以作为图形输出。作为图形输出可以表现出丰富的形态和特定的象形语义。
网页文字的显示方式和排版方式都与传统印刷有着明显的区别。印刷排版是一种物理排版方式，可以将图形和文本放置在任何地方。网页排版则属于逻辑排版方式，必须依赖于某种语言来实现屏幕排版，如HTML、XML语言。我们熟悉的纸上文字依赖于活字印刷技术或打印技术，边缘一般比较平滑，阅读起来比较舒服。然而，网页文字依赖于电子屏幕输出技术，显示的文字边缘成锯齿状，这样在电子屏幕上的样子就不怎么雅观，一般来说，文字笔划的圆弧越不规则，锯齿特征就越明显。例如，点阵在水平和垂直方向或者45度方向排列的文字，锯齿特征会明显减弱，其他方向排列的锯齿特征比较明显。因此，在选择网页字体时，要尽可能去发现那些笔划贴近水平或者垂直方向的文字，或者文字的圆弧笔划要尽可能地靠近45度角的方向。在英文字母里面，Verdana, Geneva, Arial, sans-serif字体是比较理想的网页字体，中文的显示字体则比较有限，黑体字在网页上的视觉表现比较好。同时需要指出的是，网页字体要极力避免使用斜体，因为在屏幕上显示的字体边缘带锯齿状，极难识别，在小字体的时候，尤其明显。斜体会给阅读带来很大的困难。文字笔划的粗细程度也影响着文字的易读程度，一般细字体的易读性要好得多。
文字的大小也直接影响着文字的易读程度。以英文字体为例，文字的大小等于12pix的时候，网页显示比较理想，中文则在文字等于14pix的时候比较理想。字距和行距的调整没有印刷文字那么容易，调整起来要费一些周折。对字距的调整可以在html文本里不断增加 来获得接近预期的效果；对行距的调整就没有那么简单，有一种CSS（Cascading Style Sheet）标准语言里提供了LINE-HEIGHT参数，通过调整这个参数的百分比，以调整行间距离。每行文字数量一般控制在8-10个词左右，这样可以保证文字的可读性。如果行文过长的话，用户很难找到下一行的开头，可读性大大降低。
使用图形标题的时候，最好使用Alt 属性，以避免某些浏览器不显示图形标题而丢失信息。因此，往往一个好的网站常常设计成纯文字版本和图文混合版本。当然这样会增加公司的预算，最好的方法是充分利用HTML语言的相关属性。
色彩
显示器的色彩保真度取决于显示器的gamma值，它直接影响到色彩的显示品质。gamma值是一种行业技术指标。例如，MAC机的gamma值为1.8，并可以自行调节；PC机的gamma值一般为2.2，不能自行调节。
图形
设计网页不得不考虑页面的数据量。图形几乎占有的网页的全部数据量。如果一屏的文字和图形的数据量超过100k的话，你就要考虑图形的选择问题了，因为这么大的数据流量下载需要花费用户很长的时间，用户等待下载图形的耐心往往十分有限。如果真的造成这样的不愉快，那你设计的努力也将付诸东流了。要解决这样的问题，首先我们要了解技术对图像格式的支持。通常适合网络传输的图像格式有以下几种：GIF、JPEG、PNG、PIC。
GIF格式使用 8位(2的8次方，即256种颜色)颜色，并在保留锐化细节（如艺术线条、徽标或带文字的插图）的同时，有效地压缩实色区域。还可以使用 GIF 格式创建动画图像。大多数浏览器都支持GIF格式。GIF格式使用LZW压缩，它是无损耗的压缩方法。但是，因为GIF文件只有256种颜色，所以将原24位图像优化为8位GIF会导致颜色信息丢失。
PNG-24 格式支持 24 位颜色。和 JPEG 格式一样，PNG-24 可保留照片中存在的亮度和色相的显著和细微变化。和 GIF 和 PNG-8 格式一样，PNG-24 可保留锐化细节，如艺术线条、徽标或包含文字的插图中的细节。
JPEG 格式支持24位颜色，并保留照片和其它连续色调图像中存在的亮度和色相的显著和细微变化。大多数浏览器都支持 JPEG。JPEG 通过有选择地减少数据来压缩文件大小。因为它会弃用数据，所以JPEG 压缩称为损耗压缩。较高品质设置导致弃用的数据较少，但是 JPEG 压缩方法会降低图像中细节的清晰度，尤其是包含文字或矢量图形的图像。
PNG文件使用比GIF更高级的无损耗压缩方案，并且可以比同一图像的GIF文件小 10-30%，这具体取决于图像的颜色图案。因为不是所有的浏览器都支持 PNG，所以在图像必须可由尽可能多的Web用户访问时，建议避免使用此格式。PNG格式有两种类型：PNG-8和 PNG-24。同一图像的 PNG-24 文件常比JPEG文件大。该格式除了支持背景透明度和背景杂边外，PNG-24 格式还支持多色阶透明度。多色阶透明度允许保留多达256个色阶的透明度，可以平滑地将图像边缘与任何背景色混合。但是，不是所有的浏览器都支持多色阶透明度。
PICT格式作为在应用程序之间传递图像的中间文件格式，广泛应用于 Mac OS 图形和页面版面应用程序中。PICT格式支持具有单个alpha通道的RGB图像和不带alpha通道的索引颜色、灰度和位图模式的图像。PICT 格式在压缩包含大面积纯色区域的图像时特别有效。对于包含大面积黑色和白色区域的alpha通道，这种压缩效果相当惊人。
路径导航
导航元素（包括图像和文字）是用户交互动作的开关，要和非导航元素区别开来，以便于用户能快速地发现可导航目标，为用户提供一个网站的导航地图是一个不错的主意。同时，网站通过无数页面实现互连，用户很容易迷失方向，所以页面互连的层级关系要尽可能减少，这样可以避免用户在网海中迷失方向。一个好的导航系统不仅表现在信息的组织方式上，同时也表现在网页的设计排版上和技术的实现上。
结论
总之，网站设计是一个复杂而具有挑战性的工作，需要设计师采用系统的方法来规划网站的每一个细节，需要设计师综合的知识、技巧和设计能力。在现代信息快速发展的时代，教育网站作为教育新的方式之一，正显现出他的无穷魅力。
|
