网站的整体风格（一网站的整体风格（一）） 创意的实质就是要把网站建设创意的实质就是要把网站建设得有自己独特的风格，让人一眼就能够得有自己独特的风格，让人一眼就能够识别。识别。

猜猜下面的网站截图，分别是来自哪个网站

一、如何树立网站风格一、如何树立网站风格

？？什么是网站的风格？什么是网站的风格？

风格（风格（ stylestyle ）是抽象的）是抽象的

整个网站所采用的结构布局、色调、整个网站所采用的结构布局、色调、

文字、标志、图案等要素带给浏览者的关于该文字、标志、图案等要素带给浏览者的关于该

网站的印象。网站的印象。

整体形象整体形象：： CICI 、版面布局、浏览方式、、版面布局、浏览方式、

交互性、文字、语气、内容价值、存在意义、站点交互性、文字、语气、内容价值、存在意义、站点

名誉等。名誉等。

CICI （（ corporatecorporate identityidentity ））通过视觉（标志，色彩通过视觉（标志，色彩

，字体，标语）来统一企业的形象。，字体，标语）来统一企业的形象。

一、如何树立网站风格一、如何树立网站风格

？？风格是独特的风格是独特的，是站点与众不同的地方。，是站点与众不同的地方。

风格是有人性的风格是有人性的，通过网站的外表，内容，文，通过网站的外表，内容，文

字，交流体现。字，交流体现。

风格就是与众不同！风格就是与众不同！

如何定位网站的如何定位网站的 CICI

1.1. 设计网站的标志（设计网站的标志（ logologo ））

2.2.设计网站的宣传标语设计网站的宣传标语

3.3.设计网站的标准色彩设计网站的标准色彩

4.4.设计网站的标准颜色设计网站的标准颜色

标志、标语、色彩、字体标志、标语、色彩、字体

，是一个网站树立，是一个网站树立 CICI 形象的关键形象的关键

。。

（一）如何定位网站的（一）如何定位网站的 CICI

33 ．设计网站的标准色彩．设计网站的标准色彩

不同色彩的搭配产生不同的效果，并能影不同色彩的搭配产生不同的效果，并能影

响到访问者的情绪。响到访问者的情绪。

“ “ 标准色彩”指能体现网站形象和内涵标准色彩”指能体现网站形象和内涵

的色彩。的色彩。

一个网站的标准色彩不超过一个网站的标准色彩不超过 33 种，多种，多

用于网站的标志，标题，主菜单和主色块，给用于网站的标志，标题，主菜单和主色块，给

人以整体统一的感觉。人以整体统一的感觉。

具体运用具体运用

背景和文字注重对比

1.1. 背景与文字（注重对比）背景与文字（注重对比）

一般的网站侧重的是文字，一般的网站侧重的是文字，

所以背景可以选择纯度或者明度较低的所以背景可以选择纯度或者明度较低的

色彩，文字用较为突出的亮色。色彩，文字用较为突出的亮色。

对于要突出的部分，用明亮对于要突出的部分，用明亮

的颜色，这是，则使用比较暗的颜色。的颜色，这是，则使用比较暗的颜色。

LOGOBANNER

（做的鲜亮些）（做的鲜亮些）

22 ． ．  LOGOLOGO 和和 BANNERBANNER （做的鲜亮些（做的鲜亮些

））

LOGOLOGO 和和 BANNERBANNER 是宣传网站是宣传网站

最重要的部分之一，所以这两个部分最重要的部分之一，所以这两个部分

一定要在页面上脱颖而出。一定要在页面上脱颖而出。

LOGOLOGO 和和 BANNERBANNER 做的鲜亮一做的鲜亮一

些，也就是色彩方面跟网页的主题色些，也就是色彩方面跟网页的主题色

分离开来。有时候为了更突出，也可分离开来。有时候为了更突出，也可

以使用与主题色相反的颜色。以使用与主题色相反的颜色。

导航、小标题

使用跳跃色使用跳跃色

33 ． 导航，小标题（使用跳跃色）． 导航，小标题（使用跳跃色）

导航，小标题是网站的指路灯导航，小标题是网站的指路灯

。浏览者要在网页间跳转，要了解网。浏览者要在网页间跳转，要了解网

站的结构，网站的内容，都必须通过站的结构，网站的内容，都必须通过

导航或者页面中的一些小标题。所以导航或者页面中的一些小标题。所以

我们可以使用稍微具有跳跃性的色彩我们可以使用稍微具有跳跃性的色彩

，吸引浏览者的视线，让他们感觉网，吸引浏览者的视线，让他们感觉网

站清晰，明了，层次分明。想往哪里站清晰，明了，层次分明。想往哪里

走都不会迷失方向。走都不会迷失方向。

链接颜色

区别、独特区别、独特

44 ． 链接颜色设置（区别、独特）． 链接颜色设置（区别、独特）

因为链接区别于文字，所以链因为链接区别于文字，所以链

接的颜色不能跟文字的颜色一样。接的颜色不能跟文字的颜色一样。

独特的链接颜色，让人感觉他独特的链接颜色，让人感觉他

的独特性，自然而然好奇心必然趋使的独特性，自然而然好奇心必然趋使

他移动鼠标，点击鼠标。他移动鼠标，点击鼠标。

参考资料参考资料

1.1. 配色表配色表

http://www.tc800.com/bbs/viewthread.php?http://www.tc800.com/bbs/viewthread.php?tid=8613&extra=page%3D1tid=8613&extra=page%3D1

2.2.实用的网页配色方案实用的网页配色方案

44 ．设计网站的标准字体．设计网站的标准字体

标准字体 标准字体 ——— ——— 用于标志，标用于标志，标

题，主菜单的特有字体。题，主菜单的特有字体。

一般中文网页默认的字体是宋一般中文网页默认的字体是宋

体。只是大小有不同。体。只是大小有不同。

非默认字体只能用图片的形式非默认字体只能用图片的形式

，因为浏览者的，因为浏览者的 PCPC若未安装你的特定若未安装你的特定

字体，那他只能用默认字体来显示。字体，那他只能用默认字体来显示。

（二）如何树立网站的风格（二）如何树立网站的风格

11 ．确信风格是建立在有价值内容之上．确信风格是建立在有价值内容之上

的。的。

22 ．要清楚自己设计的站点能给人带来．要清楚自己设计的站点能给人带来

怎样的印象。怎样的印象。

让网站给人留下深刻印象的做法：让网站给人留下深刻印象的做法：

⑴ ．用一句话来描述你的站点；

⑵ ．通过色彩

⑶ ．通过画面；

⑷ ．通过有个性的人物；

⑸ ．通过网站的内涵；

⑹ ．用一种动物来比喻：

⑺ ．通过与其他网站不同的特色；

⑻ ．通过与你的站点交流合作的感受。

33 ．努力建立和加强自己的网站印象．努力建立和加强自己的网站印象

⑴ ．突出网站或企业的标志；

⑵ ．突出自己标准色彩；

文字的链接，图片的主色彩，背景色，边框等

色彩尽量使用与标准色彩一致的色彩。

⑶ ．突出自己或企业的标准字体；

关键的标题，菜单，图片里使用统一的标准字

体；

⑷ ．一条能给人留下深刻印象的标语；

⑸ ．统一的语气和人称；

⑹ ．统一的图片处理效果；

⑺ ．创造站点特有的符号或图标；

⑻ ．用自己设计的花边，线条，点；

⑼ ．展示网站的荣誉和成功作品；

⑽ ．提供真实信息。

4. 实现网站风格的一些具体方法

基本方法：基本方法：把网页内容模块化。 把网页内容模块化。

实现步骤：实现步骤：

⑴⑴. . 收集有代表性的元素收集有代表性的元素 (( 文本、徽标插图、附文本、徽标插图、附

加图形及各种动画、视频）；加图形及各种动画、视频）；

⑵⑵. . 确定各元素的大小，文本的风格（字体、大确定各元素的大小，文本的风格（字体、大

小、颜色和各种效果），要把各元素看成一个个模小、颜色和各种效果），要把各元素看成一个个模

块；块；

⑶⑶. . 根据组织信息的原则和网页的风格来决定各根据组织信息的原则和网页的风格来决定各

个模块在网页中的位置；个模块在网页中的位置；

⑷⑷. . 把各模块化的内容布置到网站的各个网页中把各模块化的内容布置到网站的各个网页中

，尽量保持一致，仅做必要的改动。，尽量保持一致，仅做必要的改动。