网站设计的基础

网站设计的基础

1.了解客户的需求

网页设计是一个感性思考与理性分析相结合的复杂过程。它的方向取决于设

计的任务，它的实现依赖于网页的制作。

网页特点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重

要途径，因此必须明确设计站点的目的和用户的需求，以消费者为中心，根据市

场的状况、企业自身的情况等进行综合分析，从而做出切实可行的设计计划。

总体设计方案要主题明确。在目标明确的基础上，完成网站的构思创意。对网站

的整体风格和特色做出定位，规划网站的组织结构。

一件完美、完整的网站设计作品，是设计师与客户不断进行沟通而设计出来

的结果。

网站开始构思的时候需要充分的了解客户的需求，要达到什么目的、效果。

因此前期的投入是很有必要的，以便准确、完善地满足客户预期的要求。

产品种类、特性以及所针对的人群的特点如年龄、性别等，这些都是设计师

们需要了解的方面。与此同时，经验丰富的设计师们有必要再做一些适当的引导。

设计师们所面对的客户群里，文化背景、性格类型等的差异体现了各种各样的审

美情趣。有些客户对于建立站点的目的并不是很明确，设计师就需要做一些推广

建议。具体表现为：是建立信息门户网站还是企业网站？或是前期作为企业网站

出现、后期逐渐发展演变为信息门户网站？以什么样的内容服务形式出现？主要

针对的客户群体是什么？在设计形式方面，有的客户要求自己的企业网站具有信

息门户网站形式的框架，有的客户则希望自己的网站颜色单一，以上这些要求就

需要设计师们静下心来，站在客户的角度耐心解释，共同探讨，以达到网站最终

想要达到的目的和效果。

了解市场规律，具有丰富的营销、策划经验，通晓互联网，再加上高尚的职

业道德观念，这些都是一个网页设计师所应该必备的。

2.网站的项目规划

一个成功的网页设计作品是艺术与技术的结合和统一，以主题鲜明、形势与

内容保持一致、把握整体风格为设计原则。艺术是设计手段，而不是最终目的。

规范的网站策划大致具有如下几个方面：

（1）网站的目标。

（2）网站的主题。

（3）网站的内容。

（4）:网站的风格。

（5）网站的标准。

网站的性质不同，设计要求也不同。例如：门户网站，注意页面的分割、信

息结构的合理、页面与图片的优化、界面的亲和等问题；企业网站重在突出企业

形象、产品热点，要求设计样式、图片质量相对较高。

网站的主题要求小而精，有针对性，尽量向专业靠近；题材尽量要新颖，不

要随处可见，这样才能吸引用户一看再看；网站名称要有特色，方便记忆，要考

虑到为以后网站的形象和宣传做推广。

下面推出8条目前网站应该体现的内容，根据不同的需求和建站目的，内容

也会增加或减少。在建设网站之初，一定要进行细致的网站规划，这样才能达到

预期的效果。

1.建设网站前的市场分析

（1）相关行业的市场是怎样的，市场有什么样的特点，是否能够在互联网

上开展公司业务。

（2）市场主要竞争者分析，竞争对手上网情况及其网站规划、功能作用。

（3）公司自身条件分析、公司概况、市场优势，可以利用网站提升那些竞

争力，建设网站的能力（费用、技术、人力等）。

2.建设网站的目的及功能定位

（1）要建立网站，是为了宣传产品，进行电子商务，还是建立行业行网站。

（2）整合公司资源，确定网站功能，根据公司的需要和计划，确定网站的

功能，是产品宣传行、网上营销型、客户服务型或电子商务型。

（3）根据网站功能，确定网站应达到的目的作用，了解企业内部网的建设

情况和网站的可扩展性。

3.网站技术解决方案

根据网站的功能确定网站技术解决方案

（1）采用自建服务器还是租用虚拟主机

（2）选择操作系统，用Unix、Linux还是Window2000/NT，分析投入成本、

功能、开发、稳定性和安全性等。

（3）采用系统性的解决方案（如IBM、HP）等公司提供的企业上网方案、

电子商务解决方案，还是自己开发。

（4）相关程序开发，如网页程序ASP、JSP、CGI、数据库程序等。

4.网站内容规划

（1）根据网站的目的和功能规划网站内容，一般企业网站应包括：公司简

介、产品介绍、服务内容、价格信息、联系方式、网上订单等基本内容。

（2）电子商务类网站要提供会员注册、详细的商品服务信息、信息搜索查

询、订单确认、付款、个人信息保密措施、相关帮助等。

（3）如果网站栏目比较多，网站内容是网站吸引浏览者最重要的因素，所

以网站内容的设计很重要。

5．网页设计

（1）网页美术设计一般要与企业整体形象保持一致，要符合CI规范。要注

意网页色彩、图片的应用及版面规划，保持网页的整体一致性。

（2）在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、

网络速度、阅读习惯等。

（3）制定网页改版计划，以便以后作调整。

6.网站维护

（1）服务器及相关软硬件维护，对可能出现的问题进行评估，制定响应时

间。

（2）数据库维护，有效的利用数据是网站维护的重要内容，因此数据库的

维护要受到重视。

（3）内容的更新、调整等。

（4）制定相关网站维护的规定，将网站维护制度化、规范化。

7.网站测试

网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容

有：

（1）服务器稳定性、安全性。

（2）程序及数据库测试。

（3）网页兼容性测试，如浏览器、显示器等。

（4）根据需要的其他测试。

8.网站发布与推广

（1）网站测试后进行发布的公关、广告活动。

（2）搜索引擎登记等。

3．网页设计的框架

网页设计发展的初期，设计师们发现无法完全保证自己设计内容能完全不变

的展现在网页中。许多著名网站的制作重点都倾向于对可操作性、功能性的把握。

现在，网页设计制作的技术已不断地发展成熟，这种顾虑几乎没有了。为了把自

己的创作思维更好的还原展现出来，可以设想“网页”为一张“白纸”，这样在

创作构思的时候，就更容易释放自己的灵感，任意挥洒自己的设计才思。

如果说网页是网站构成的基本元素，那么网页的框架结构无疑就是网页的骨

骼。

框架的版面结构是为了能够让浏览者更清楚、便捷地理解网站所要传达的信

息内容，由此所进行的巧妙、规律的排列方式。

网页版面布局以导航栏位置为界，大致可分为：上下结构式、左右结构式、

上左右结构式、上左中右结构式、综合结构式、无规则结构式。

上下结构式

上下结构式是一种上下框架结构式，通常上方为导航条，或者动态的企业形象、广告区

域。下方为正文、内容部分。此类结构在内容较少的企业网站或者个人网站较常出现。有时

只在首页使用，二级页面另换相应结构。

左右结构式

左右结构式又称二分栏式。清晰的分列两旁的框架结构。一般左侧为导航条，

右侧是正文。

由于网站内容较少，因此多数网站都采用上下结构式和左右结构式为框架，

展示区域添加大的图片作为公司形象、新产品的展示，以提升公司的整体形象。

上左右结构式

上左右结构式是大中型企业较喜欢的框架式。通常上方为主要的菜单导航

条，左侧为点击出现的细分栏目导航条，下方为较主要栏目及小广告等，右侧为

内容区域。

随着网站内容的逐渐增多、框架结构的逐渐细分，上左右结构式也更多地

应用于跨类别的各类网站。

上左中右结构式

上左中右结构式又称三分栏式，是大型企业、电子商务、政府网站、教育机

构较喜欢的框架式。同上左右框架式稍有区别的是中间部分为内容区域，右侧为

网站较重要的内容导航区域，或是登陆、搜索区域、小广告等。

综合结构式

综合结构式网站较复杂，特点是功能模块多，信息分类详细，因此根据需要

采用区域版面结构较合适。如有些著名网站，第一页很可能采用的是上下结构式，

而 第二页根据内容的需要改为上左右结构式，有可能根据区域的需要划分为多

种框架结构。又有的在同一页面或纵深页面里，可以拆分出几个不同的框架结构

类型，都是为合理配合信息内容的需要，有针对性地进行排版设计。较常见的是

信息储量大的门户网站，框架中的结构变化，使该网站风格有别于其他网站。

不规则结构式

不规则结构式有别于上面的框架结构式。相对来说，页面的信息量少，通常一张形象、

广告图片下来，重在渲染这个网站的气氛。类似封面类型，有点击进入下页的入口。无规则

框架式风格较随意自由，凸出网站个性意图，能给浏览者带来强烈的视觉冲击，以致于以产

品宣传为目的的企业和个人网站的爱好者，都热衷于此种框架式。

少见的结构式

通常使用这类结构式的网站有两种情况，一是放置更多的信息栏目和内容的网站；二是

追求个性的企业、组织或者个人的网站

4.网页设计的布局概念

网页布局在多数情况下是在顶部放置重要的信息，如公司名称、广告条、标志及导航条，

或将导航条放置于左侧右侧是正文等，这样的布局结构清晰、易于使用。当然也可根据网站

性质的需要，尝试这些网页布局的变化方式，如左右两栏式布局，一半是正文，另一半是形

象的图片、导航；或正文不等式两栏布局，通过背景色区分，分别放置图片和文字等。当然

在网站设计中要多多吸取一些优秀网站的精髓。

页面尺寸

网页页面尺寸与显示器的大小及分辨率有关，目前有两种常用的尺寸：一是

分辨率在800*600的情况下，页面的显示尺寸为778像素*435像素；二是分辨

率在1024*768的情况下，页面的显示尺寸为1003像素*600像素。以上的尺寸

主要是考虑到了滚动条及浏览器的工具栏，可以看出分辨率越高，页面的显示尺

寸就越大。

浏览器的工具栏影响着页面的显示尺寸。最好恢复默认的浏览器工具栏，这

样与网页最终设计的作品差别不会太大。

第一屏

所谓的第一屏，是指一个网站页面在不拖动滚动条的情况下，在屏幕上能够

看到的部分。一般来说，800*600的屏幕显示模式下，在IE安装后默认的状态

内能看到的部分为778*435，通常考虑多数人的习惯，以这个大小为基准。在网

页设计过程中，向下拖动页面是惟一给给网页增加内容的方法。页面长度原则上

不超过三屏。这并不意味将整个页面分割开，而孤立的进行每一屏的设计。图像

和文字的延续性可以使浏览者看到完整统一的视觉感受，保持页面风格的整体

感。除了著名经典的信息门户网站外，通常企业网站都是用一屏左右。除非站点

内容的特殊能够吸引人拖动到下一屏，否则除影响速度外还真是有点画蛇添足

了。

但是有时第一屏可能会小于上面所说的435像素，基于这点，那种横放的导航条要优先

于纵向的导航栏考虑。原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵

向的就难说了，因为窗口一般是不会受浏览器设置影响的，而纵向的不确定性要大得多。

整体造型

造型就是创造出来的物体给人的整体形象。网页的整体形象，应该是图形与

文本的结合。通常网页形状的组合造型有：圆形、矩形、三角形、菱形，S形等

圆形代表圆满柔和、团结安全等，时尚站点喜欢以圆形为页面整体造型；矩形代表中

规中矩、平衡和谐的视觉感受，许多政府网页及部分企业网页采用以矩形为整体造型；三角

形代表力量、权威、牢固均衡等，较大型的商业站点常采用三角形为页面的整体造型；菱形

代表平衡和谐、个性公平，企业站点常采用以菱形为页面的整体造型；也有不少网站采用多

种形状结合，以某个形状的构图为主，辅以其他形状结合而成。

页头

在习惯术语中，页头又可称之为页眉，页头的作用是定义页面的主题。一般站点的名

称多数都是显示在页头里，通常展示标志及其网站的标题、旗帜广告。页头也是整个页面设

计的重要部分。

文本

文本是整个网站信息内容的重要展示部分。在页面中多是以行或块出现，通常相对于

导航条区域，有自己的文字区域位置。在整个页面视觉节奏上，形成疏密反差的对比美感。

页脚

页头和页脚能使整个网页更完整。页头是在页面顶部位置，放置站点主题，而页脚放

置副导航菜单标题、制作者或者公司信息、版权信息。

图片

所谓图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，最理想的效果

是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。图片和文本

是丰富网页的两大构成元素。图片为点缀增加文本的可读性、趣味性，文本为阐述信息内容。

多媒体

网站要吸引浏览者注意，页面的内容可以用三维动画、Flash等技术来表现，让声音、

动画、视频等其他媒体更多的出现在人们的视野里，丰富网页多层次的视听效果，更贴近生

活。由于网络带宽的客观限制，在使用多媒体的形式表现网页的内容时，应考虑客户端的传

输速度。

5． 网页设计的主要视觉元素

导航样式

导航栏其实就是一组超链接。典型的导航栏有一些指向站点的主页和主要网

页的超链接，帮助访问者快速的返回主页和调用网站的工具。在每一网页上设置

导航栏是十分必要的。导航栏是网页站点超链接的主线。这种超链接使站点的结

构清晰、连接简单、查找方便，导航栏可以是按钮或者文本超链接，使访问者可

以既快速又容易地转向站点的主要网页。导航栏对整个网站内容有提纲的作用。

站点的浏览导航必须要设计得简洁、易用。常见的方法是整个网站网页的顶

部或者左侧放置一个菜单条。由于导航对于可用性和内容查找来说非常关键，因

此要尽可能标准化主导航。

导航的位置结构细分为左文右导航栏、左导航栏右文。此外，导航栏中可以自定义代

码，有时载入会很慢，放在右边会在文章载入之后载入，不会影响文章的阅读。

网站标志

网站标志（logo）是一个站点的特色和内涵，其图形的设计创意来自网站的

名称和内容。一般会出现在站点的每一网页上，是网站给人的第一印象。Logo

的作用很多，最重要的就是表达网站的理念、便于人们识别，被广泛用于站点的

链接、宣传等，类似企业的商标。

logo一般通过图案、文字的组合，达到对被标识体的展示说明、沟通交流，

从而提升访问者的浏览兴趣，增强网站印象的目的。

网站logo的设计与其他标志图案的设计原则是一样的，根据站点的定位和发展方向突

出主题。视觉效果要强，容易识别，辨认和记忆，引人注目。

文字的排版

文字和图片是网页的两大构成元素，文字排列的好坏直接影响网页的视觉传达效果。

网页上的文字一般体现在以下几个方面：网站或网页标题、网页正文、文字导航栏、

版权说明等相关信息、图像中的文字、装饰用的文字等。

通常一套网页结构中最多出现3种文字。一种用作标题，一种用于导航按钮和小图标

和小图标，另外一种则用作正文。

图像

网页中图像的造型是网页设计中最重要的视觉要素。从视觉规律上看，人们对图像的

兴趣远远大于对文字的兴趣。在页面的构图中，应该加强对主题图像的表现及其形式的表达，

注重图像与背景、形体空间与视觉空间的处理。网页主要内容形象应该成为画面的主要图像，

其他图形设计元素作辅助作用。

图像、图表和插图在页面上起着重要的形象装饰作用，丰富了版面的趣味性。

图形也是传达信息手段的重要手段之一。

背景

背景也很重要，好的页面背景可以给予浏览者以心情的放松和吸引。所以网页设计师

们要注意页面背景的设计，背景设计的好坏，也可影响你的作品。

导航

导航是网页必不可少的一部分。它有动态导航条和静态导航条。动态导航条可以渲染页

面的气氛。

广告banner

广告在页面中是商家都注重的方面。好的广告可以增加商家的收益。