1.3 网站设计概述

互联网的各种应用，都是基于网站进行的。而网站又是由各种网页组成，必须通过网页传递其信息。因此，用户在设计和创建网页之前，还需要先来了解以下网站的设计概述，包括网站的整体策划、网页的设计任务等内容。

1.3.1 网站整体策划

网站的整体策划是一个系统工程，是在建设网站之前进行的必要工作。

1. 市场调查

市场调查提供了网站策划的依据。在市场分析过程中，需要先进行3个方面的调查，即用户需求调查、竞争对手情况调查，以及企业自身情况的调查。

2. 市场分析

市场分析是将市场调查的结果转换为数据，并根据数据对网站的功能进行定位的过程。

3. 制订网站技术方案

在建设网站时，会有多种技术供用户选择，包括服务器的相关技术（NT Server/Linux）、数据库技术（ACCESS/My Sql/SQL Server）、前台技术（XHTML+CSS/Flash/AIR），以及后台技术（ASP/ASP.Net/PHP/JSP）等。

4. 规划网站内容

在制订网站技术方案之后，即可整理收集的网站资源，并对资源进行分类整理、划分栏目等。

网站的栏目划分，标准应尽量符合大多数人理解的习惯。例如，一个典型的企业网站栏目，通常包括企业的简介、新闻、产品，用户的反馈，以及联系方式等。产品栏目还可以再划分子栏目。

5. 前台设计

前台设计包括所有面向用户的平面设计工作，例如，网站的整体布局设计、风格设计、色彩搭配，以及UI设计等。

6. 后台开发

后台开发包括设计数据库和数据表，以及规划后台程序所需要的功能范围等。

7. 网站测试

在发布网站之前需要对网站进行的各种严密测试，包括前台页面的有效性、后台程序的稳定性、数据库的可靠性，以及整体网站各链接的有效性等。

8. 网站发布

在制订网站的测试计划后，即可制订网站发布的计划，包括选择域名、网站数据存储的方式等。

9. 网站推广

除了网站的规划和制作外，推广网站也是一项重要的工作，例如，登记各种搜索引擎、发布各种广告、公关活动等。

10. 网站维护

维护是一项长期的工作，包括对服务器的软件、硬件维护，数据库的维护，网站内容的更新等。多数网站还会定期地改版，保持用户的新鲜感。

1.3.2 网页设计任务

在设计网页时，需要首先了解网页设计的任务，以及网页设计的最终目的。

网页设计是艺术创造与技术开发的结合体。其任务是吸引用户，为用户创造良好的体验，在此基础上为网页的所有者提供收益。任何网页设计的行为，都是围绕这一最终目的进行的。

在设计网页时，可将网页根据网页的内容，即网页为用户提供的服务类型分为3类。并根据网页的类型设计网页的风格。

1. 资讯类网站

资讯类站点通常是比较大型的门户网站。这类网站需要为用户提供海量的信息，在用户阅读这些信息时寻找商机。

在设计这类站点时，需要在信息显示与版面简洁等方面找到平衡点，做到既以用户阅读信息的便捷性为核心，又要保持页面的整齐和美观，防止大量的信息造成用户视觉疲劳。

在设计文本时，可着力对文本进行分色处理，将各种标题、导航、内容按照不同的颜色区分。同时要对信息合理地分类，帮助用户以最快的速度找到需要的信息。

以美国最大的在线购物网站亚马逊的首页为例。其在设计中，使用了较为传统的国字型布局。

其网站的3类导航使用了3种字体颜色，在同一板块内的导航标题使用橙色粗体，而导航内容则使用普通的蓝色字体。在刺激用户感官的同时避免视觉疲劳。

在亚马逊首页中，每一条详细信息都保证有一张预览图片，防止大段乏味的文字使用户厌烦。

2. 艺术资讯类网站

艺术资讯类站点通常是中小型的网站，例如一些大型公司、高校、企业的网站等。互联网中的大多数网站都属于这一类型。

这类网站在设计上要求较高，既需要展示大量的信息，又需要突出公司、高校和企业的形象，还需要注重用户的体验。

设计这类网站时，尤其需要注意图像与文字的平衡，背景图像的选用，以及整体网站色调的搭配等。

在这类网站的首页不应放置过多的信息。清晰有效的分类远比铺满屏幕的产品资料更容易吸引客户的注意力。

以著名的软件和硬件生产商苹果为例，其首页设计上以追求简洁为主，以简明的导航条和大片的留白，给用户较大的想象空间。

苹果公司在网站设计上非常有心得，其擅长使用简单的圆角矩形栏目和渐变的背景色使网站显得非常大气，对一些细节的把握非常到位。

3. 艺术资讯类网站

艺术类站点通常体现在一些小型的企业或工作室设计中。这类网站向用户提供的信息内容较少，因此设计者可以将较多的精力放在网站的界面设计中。

上图为俄罗斯设计师foxie的个人主页，通过大幅的留白以及简明的色彩，模拟了一个书架。并以书架上的书本和相框作为导航条。

其在设计中发布的信息并不多，因此整站以Flash制作而成，大量使用动画技术，通过绚丽的色彩展示个性。

1.3.3 网页设计实现

在了解了设计的目的后，即可着手进行设计。网页设计是平面设计的一个分支，因此在设计网页时，有一定的平面设计基础可以帮助设计者更好更快地把握设计的精髓。

1. 设计结构图

首先，应规划网站中栏目的数量及内容，策划网站需要发布哪些东西。

然后，应根据规划的内容绘制网页的结构草图，这一部分既可以在纸上进行，也可以在计算机上通过画图板、inDesign，或者其他更专业的软件进行。

结构草图不需要太精美，只需要表现出网站的布局即可。（关于布局，请参考本章之前的内容。）

2. 设计界面

在纸上或电脑上绘制好网页的结构图之后，即可根据网站的基本风格，在计算机上使用Illistrator或CorelDraw等矢量图形软件，或Photoshop、Fireworks等位图处理软件，绘制网页的Logo、按钮和图标。

Logo、按钮、图标等都是网页界面设计的重要组成部分。设计这些内容时需要注意整体界面的风格一致性。包括从色调到图形的应用、圆角矩形与普通矩形的分布等。

其中，设计Logo时，可使用一些抽象的几何图形进行旋转、拼接，或将各种字母和文字进行抽象变化（见下图）。例如，倾斜、切去直角、用线条切割、连接笔画、反色等。

按钮的设计较为复杂。常见的按钮主要可分为圆角矩形、普通矩形、梯形、圆形，以及不规则图形等。

在网页中，水平方向导航菜单的按钮设计比较随意，可以使用各种形状（见下图）。而垂直方向的导航菜单则多使用矩形或圆角矩形，以使各按钮贴得更加紧密，给用户以协调的感觉。

图标是界面中非常重要的组成部分，可以起到画龙点睛的作用。在绘制图标时，需要注意图标必须和其代表的内容有明显的联系。

例如，多数网站的首页图标，都会绘制一栋房子，而多数网站的联系方式图标，都是电话、信纸等通信的方式，这样的图标会使用户一眼看出其作用（见下图）。

而如果使用过于抽象的图标，则容易被用户误解，或影响用户使用网站的功能。

3. 设计字体

字体是组成网页的最主要元素之一。合理分配的字体可以使网站更加美观，也更便于用户阅读。

在设计网页的字体时，应先对网页进行分类处理。

对于多数浏览器和操作系统而言，汉字是非常复杂的文字，多数中文字体都是无法在所有字号下正常清晰显示的。

以宋体字为例，10px以下的宋体通常会被显示为一个黑点（在手持设备上这点尤为突出）。而20px大小的宋体，则会出现明显的锯齿，笔画粗细不匀。

即使是微软设计的号称最清晰的中文字体微软雅黑，也无法在所有的分辨率及字号下清晰地显示。

经过详细的测试，中文字体在12px、14px、16px（最多不超过18px）的字号下，显示得最为清晰美观。

因此，多数网站都应使用12px大小的字体作为标准字体，而将14px的字体作为标题字体。在设计网页时，尽量少用18px以上的字体（输出为图像的文本除外）。

在字体的选择上，网站的文本是给用户阅读的。越是大量的文本，越不应该使用过于花哨的字体。

如针对的用户主要以使用Windows XP系统和纯平显示器为主，则应使用宋体或新宋体等作为主要字体。如果用户是以使用Vista系统和液晶显示器为主，则应使用微软雅黑字体，以获得更佳的体验。

4. 制作网页概念图

在设计完成网页的各种界面元素后，即可根据这些界面元素，使用Photoshop或Fireworks等图像处理软件制作网页的概念图。

网页概念图的分辨率应照顾到用户的显示器分辨率。针对国内用户的显示器设置，大多数用户使用的都是17in甚至更大的显示器，分辨率大多为1024×768以上。去除浏览器的垂直滚动条后，页面的宽度应为1003px。高度则尽量不应超过屏幕高度的5倍到10倍（即620×5=3100px到6200px之间）。

概念图的作用主要包括两个方面。一方面，设计者可以为用户或网站的投资者在网页制作之前先提供一份网页的预览，然后根据用户或投资者的意见，对网页的结构进行调整和改良。

另一方面，设计者可以根据概念图制作切片网页，然后再根据切片快速为网站布局，提高网页制作的效率（参见下图）。

5. 切片的优化

切片的优化是十分必要的。优化后的切片，可以减小用户在访问网页时消耗的时间，同时提高网页制作时的效率。

对于早期以调制解调器用户为主的国内网络而言，需要尽量避免大面积的图像，防止这些图像在未下载完成时网页出现空白。通常的做法是通过切片工具将图像切为多块，实现分块下载。

然而随着网络传输速度的发展，用户用于下载各种网页图像的时间已经大为缩短，请求下载图像的时间已超过了下载图像本身的时间。下载1张100kB的图像，消耗的时间要比下载10张10kB的图像更少。

因此，多数网站都开始着手将各种小图像合并为大的图像，以减少用户请求下载的时间，提高网页的访问速度。

6. 编写网页代码

在Photoshop或Fireworks中设计完成网页的概念图，并制作切片网页后，最终还是需要输出为XHTML+CSS的代码。

网页技术的发展，使网页的制作越来越像一个系统的软件工程。从基础的XHTML结构到CSS样式表的编写，再到JavaScript交互脚本的开发，是网页制作的收尾工程。

7. 优化页面

在设计完成网页后，还需要对网页进行优化，提高页面访问速度，以及页面的适应性。

设计者应按照Web标准编写各种网页的代码，并对代码进行规范化测试。通过W3C的官方网站验证代码的准确性。

同时，还应根据当前主流的各种浏览器（IE9、IE10、IE11，以及FireFox、Safari、Opera、Chrome等）和各种分辨率的显示设备测试兼容性，编写CSS Hack和JavaScript检测脚本，以保证网页在各种浏览器中都可正常显示。