企业网站
电子商务
搜索引擎
机构类网站
教育类网站
生活资讯类
娱乐类网站
供求信息类
其他应用
第
章
网站设计与网页配色
第 19 章 网站设计与网页配色
983
19.1 企 业 网 站
在互联网上有成百上千的不同信息类型的网站，企业网站作为众多类型网站中的一种，具有更多与传统媒体
不同的特征和特性。企业可以通过自己的网站向世界宣传自己，发布本企业的信息，宣传企业文化、经营理念，加
强与客户的联系等。那么如何将企业网站与网页设计得合理、美观、实用呢？下面通过几个实例介绍企业网站
设计与网页配色中通常用到的方法和技巧。
实例 547
汽车销售
光盘位置：光盘\MR\1 9\54 7
初级
趣味指数：
实例说明
汽车销售行业网站是一种服务性网站。为了更好地引导消费者查询汽车行情、了解汽车产品，其风格应以
其品牌形象为主要风格诉求点，以突出其企业文化、特质以及产品信息。一汽大众作为东北首屈一指的重工业
龙头企业，其网站在结构上阅读性强，在色彩上注目性高，在制作技术上，合理地运用 Flash 技术将整个企业的
企业文化与经营理念烘托得淋漓尽致，如图 19.1 所示。
图 19.1 一汽大众网站实例
关键技术
图片与文字的关系。一个网站的好坏取决于很多因素，文字与图片是网站构成的基础。文字与图片的摆放
位置、大小、色彩等都影响着整个网站设计的成败。文字与图片的关系可以考虑两种情况：一种是文字印在图
片上的，除了保证文字在图片上容易辨认之外，还应认真推敲图片的内容、视觉特征、构图及色调，从而选择
合适的位置安排文字，使文字画面形成统一的整体而不破坏图片的视觉效果；另一种情况在图片较多的情况下，
要进行合理的图文排版。将数张图片整齐有序地进行排列，具有鲜明的理性感；如果将图片分散性进行组合，
就会给人自由、明快、不拘谨、版面轻松愉快的感觉。一汽大众网站采用图片理性化的处理方式，突出了其企
业的理性风格。
ASP.NET 开发实战 1200 例（第 II 卷）
984
设计过程
（1）确定网站的整体风格
随着人们生活水平的提高，拥有汽车不再是可望而不可即的事情，汽车销售业也因此竞争更加激烈。通过
上网人们可以直接了解到最新的汽车行情和产品。汽车销售业内人士为了更好地展示企业的品牌形象，推销自
己的汽车产品，大多数企业都以事实、价值为基础；以形象塑造为主，来制作大气、稳定、可靠、诚信、页面
整洁干净、图文清晰、企业文化味浓风格的网站，从而起到建立客户忠诚度、增加客户价值的作用，并且拓展、
建立、保持并强化了客户关系。一汽大众网站很值得学习。
（2）确定页面的框架结构
企业类网站宣传其形象的同时，大部分也在介绍其产品，为了使广
大浏览者阅读更舒适，在页面的骨架设计
上通常采用具有引导性强、结构明晰等特点的构架形式，分栏式结构被大多数设计师所运用。读者不妨也来试试。
注意：不是所有的企业网站都可以运用分栏式结构设计，它并不是“教条式”的。应该根据网站的信息内
容、相关网站资料等采用不同的结构设计。
（3）网页色彩的运用
企业网站通常会选择明亮的色彩，如蓝色、白色等，使网站看起来大气，从而提高企业的诚信度。企业网
站的色彩应主要从体现企业文化的角度进行设计，另外，企业标准色也是确立其网页主体色的形式之一。
秘笈心法
心法领悟 547：汽车销售网站吸引人的地方。
汽车销售网站注重于企业形象、品牌形象、主打产品形象的确立，建议汽车网站以简单、导航清晰、Flash
制作明快、品牌标识鲜明等特点来吸引消费者的眼球。
实例 548
医药连锁
光盘位置：光盘\MR\ 1 9\ 54 8
初级
趣味指数：
实例说明
医药类网站是企业网站中的一种，这类网站通
常运用简洁的结构、高清晰度的插图；纯净、光亮
的蓝色或者绿色等烘托专业、诚信、干净、环保的
整体网站风格。例如，美信 USA 国际连锁网站就是
运用蓝色为网站的主体色，体现出了医药行业的行
业特点，如图 19.2 所示。
关键技术
单一颜色的配色技巧。在色彩的运用过程中，
用一种色彩是比较保险的一种配色方式。这里是指
先选定一种色彩，然后调整透明度或者饱和度（说
得通俗些就是将色彩变淡或者加深），产生新的色
彩，用于网页之中。这样的页面看起来色彩统一，
有层次感。使用统一的颜色，可以形成网站的整体风格。
注意：在运用一种颜色进行配色时，对于色彩的落差、层次的把握是这种色彩表达中能体现其成功与失败
的决定因素。
图 19.2 美信 USA 国际连锁网站实例
第 19 章 网站设计与网页配色
985
设计过程
（1）确定网站的整体风格
由于医药类网站是一种专业性质很强的网站，这就要求该类网站要符合企业本身的行业特点。首先应该诚
信，让浏览此类网站的消费群体认可；再就是整个页面整体感觉干净、环保、专业性强，才能使整个网站有医
药的气息，从而取得消费者的认可。例如，美信 USA 国际连锁网站既体现出其鲜明的企业形象，又对整体网站
氛围得以全面诠释。
（2）确定页面的框架结构
规律框架结构与无规律框架结构相结合越来越多地被设计师运用到网站设计当中，它不但能够适应信息相
对较多的网站，还可以使网站的整个页面看起来更加灵活。简洁清晰的页面构架方式更加实用，再配上可以表
达主
题内容的插图和合理的色彩搭配，将网站的整体氛围表现了出来。美信 USA 国际连锁网站的框架结构简单、
明快、引导性强，不失为一个好网站。
（3）网页色彩的运用
通过对行业特性的了解，在设计医药类网站时，通常运用的颜色是纯净、明亮的颜色，蓝色与绿色就经常
被用于医药类网站。它们的应用范围很广，蓝色代表诚信、稳重，让人产生可信赖的感觉。绿色代表生命。冷
色的蓝还可以表现一种清爽明快的感觉。再结合本实例关键技术当中讲到的“一种色彩”的表现形式，从而形
成统一的、有层次感、干净、环
保、专业、诚信的网站整体风格。
秘笈心法
心法领悟 548：在医药网站配色中多运用绿色。
绿色与人类息息相关，是永恒的欣欣向荣的自然之色，代表了生命与希望，也充满了青春活力。绿色象征
着和平与安全、发展与生机、舒适与安宁、松驰与休息，有缓解眼晴疲劳的作用。所以建议在医药网站配色中
多运用绿色。
实例 549
硬件产品
光盘位置：光盘\MR\ 1 9\ 54 9
初级
趣味指数：
实例说明
硬件产品网站在设计时都是以延续其企业理念与品
牌形象作为依据来寻找设计的切入点。在设计风格上注
重稳重、诚信、大气、理性、简洁明快。例如，联想电
脑网站在设计上符合其行业特点，运用大量精致的产品
广告图片来宣传自己的产品，充分地突出了其风格特点，
是具有代表性的大型企业网站之一，如图 19.3 所示。
关键技术
蓝色的运用。蓝色的应用范围很广，在下面的实例
当中也会讲到。蓝色应用在电脑产品网站设计中，可使
浏览者产生“可信”的心理。蓝色能够让人产生平静、
科技、理智、速度、诚信的心理感受。冷色的蓝还可以
表现一种清爽明快的感觉。明度和纯度低的蓝色则可以表现一种稳重、理性的情感诉求。蓝色可以用于很多
类型的网站，如知识、计算机、企业、政府、科技等。
注意：在建立不同类型的网站时，要用适合表达其网站特点的色彩设计。
图 19.3 联想网站实例
ASP.NET 开发实战 1200 例（第 II 卷）
986
设计过程
（1）确定网站的整体风格
硬件产品类网站在确立网站的整体风格时，要充分考虑其企业的经营理念和品牌形象。仔细阅读企
业提供的资料及行业说明，以企业产品信息种类的多样化、行业特点的可信度等来体现整体风格。例如，联想
电脑网站的整体风格就是以稳重、诚信、大气、理性、简洁为主。
（2）确定页面的框架结构
页面的构架是为了更好地安排内容，在设计时要区别它的主次。硬件产品属于高科技产品，产品种类多，
这就要求框架设计一定要具有很好的灵活性、可视性和可操作性，这样整个网站看起来才不会死板。例如，联
想电脑网站在框架结构设计上就没有采用华丽的装饰，简单明了的三分栏结构形式，就足以适应其信息内容
又
体现了其整体风格。
（3）网页色彩的运用
在硬件产品的网站中，消费群体容易受环境、文化、传统、色彩喜好的影响。在运用网站的主体色调时多
采用明亮的色调，如蓝色、白色等，使整个网站显得大气，提高企业的可信度。另外，企业标准色影响着其色
彩运用的定位。例如，联想电脑网站就是以企业标准色蓝色为主体色调，让人感到明快，减少了对人的视觉感
官刺激，适合其行业特点。
秘笈心法
心法领悟 549：建议计算机硬件网站多用对比色调。
计算机硬件产业基本上是发展最快的产业之一，在硬件网站设计中一定需要体现欣欣向荣、健康向上、不
断进取的产业现象。计算机硬件网站由于其行业特质需要使用现代感强烈，吸引年轻人的网站设计风格，很多
时候需要强烈对比的黑白双色造就冷酷、新技感强烈的版面设计。
实例 550
软件产品
光盘位置：光盘\MR\ 1 9\ 55 0
中级
趣味指数：
实例说明
以介绍软件为主的企业网站很多，它们创建网站的目
的是为了发布自己企业的信息、产品信息，增强各企业之
间的联系或是提高自身企业的品牌形象等，其设计风格大
都是以诚信、庄重、灵活、大气为主。例如，SUN 软件
网站就是一个很好的实例，如图 19.4 所示。
关键技术
细节设计在网站设计中的重要性。一个网页设计看起
来有没有“深度”、饱满不饱满，在很大程度上取决于细
节设计。如果设计者把特定类型网站的行业特点表达出
来，必须要强调一些细节。页面上的每一部分内容的放置
位置、大小、颜色等都需要仔细的思考，精雕细刻，细致
到每一行字。当然，这必须符合网站的整体风格。多几个
字少几个字，页面效果就会不一样。在 细节设计上处理得
到位，才能将网站的整体风格更好地表达出来。
注意：在处理细节时，要充分考虑网站的整体风格。
图 19.4 SUN 软件网站实例
- 1
- 2
前往页