商业网页版式构成设计

商业网页版式构成设计

---商业网页艺术设计---商业网页版式构成设计

.主要内容:1.版式构成设计的概念

2.版式构成的分类和特点

3.版式构成的排版工具和方法.学习重点:1.各类版式构成的特点2.排版工具的选用.学习难点:区域式布局、排版工具的操作

版式构成设计的概念网页界面的版式构成设计，是将文字、图像、色彩、动画、视频等网页界面的传达要素，根据特定的内容和主题，在网页所限定的范围中，运用造型元素和形式原理进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。这一过程实际上是创造性、艺术性地传达信息的过程。

版式构成的分类和特点

商业网页的版式构成大致可分为分列式布局结构区域式布局结构自由式布局结构1）分列式布局结构的特点分列式布局结构是运用最为广泛的商业网页布局结构，英特网上的门户网站和综合类网站绝大部分是这一结构。分列式布局结构一般版面呈长方形，显示效果横窄竖宽，有上下滚动条。分列式布局结构可分为：整列式、二列式、三列式、四列式、五列式、混合列式。整列式(通列)

其格式从上到下一通到底。这种版式构成通常用于商业网页的内页，显示信息内容、注册信息等页面的布局。

二列式是最常见的分列式版式构成。二列式版式构成一般是左窄右宽，也有时是右窄左宽，但非主流。三列式给人的感觉开放、大气，适用于门户类和流量大的网站。常规内容设置是：导航横排在页面上部，左右两列为功能区和附加信息区，中列为主要信息显示区和重要资料显示区。四列式会使得页面相对很拥挤，给人一种网站的信息量很大的感觉，信息储备少的站点采用这种布局结构，可以在视觉感观上调整信息量少的不足。五列式分列式布局的极限，多用于内页布局。混合列式2）区域式布局结构的特点区域式布局结构在商业网页布局中运用也很广，它通常利用颜色、线条、文字的断口或插图的变换等手段把网页平面划分为几个规则的或不规则的区域。区域式布局结构版面接近方形，一般没有滚动条或滚动条很短。区域式布局结构灵活多变，划分出来的区域大小、形式都可以自行定义，格局则变化莫测。此类版式构成比较适用于企业站点和产品单一的电子商务类站点，以及对页面要求较高、信息流通量小的专业性信息站点，不适用于门户开放式站点和信息交错紧密的站点。

3）自由式布局结构的特点自由式布局结构有静态和动态两种形式。静态布局通常把网页当作平面出版物创意设计，将信息与背景画面融为一体，没有清晰的界限区分，设计好的网页图片通常采取分割整张图片生成网页的形式去制作。此类页面设计通常精美华丽，视觉效果较好，个性化强，但不适用于信息量大的站点。动态布局通常采用流行的Flash动画作为表现形式。由于Flash强大的功能，很多国际大公司都采用了布局结构。这种排版形式变化多样，视觉冲击力强，整体效果好。Flash动画使页面体现出极强的互动感、时代感和科技感。

各类版式构成设计的开发工具

类型推荐布局排版工具分列式布局结构Dreamweaver区域式布局结构Dreamweaver自由式布局结构(静态)Photoshop+Dreamweaver自由式布局结构(动态)Flash商业网页的页面元素设计

logo设计

Banner设计

导航设计

网页文字设计

图形图像设计

网页动画设计

一个网站是由多个网页组成，一张网页又是由多个页面元素构成。网页界面包含了更多的构成要素。除了文字和图形以外，还有动画、声音和视频等多媒体元素，以及各种特殊效果及交互功能．正是由于这些区别于传统媒体的元素，使网页界面的设计要考虑更多的因素。通过本单元使学生熟悉网页界面的基础页面元素，掌握页面元素的设计要点，能综合运用各种元素设计出风格各异的网页。1．logo设计

1）Logo的含义和形式网页Logo是指网站的标志、标识。Logo是企业综合信息传递的媒介，是依据企业的构成结构、行业类别、经营理念，并充分考虑标志接触的对象和应用环境，为企业制定的标准视觉符号。它以单纯、显著、易识别的物象、图形或文字符号为直观语言，具有表达意义、情感和指令行动等作用。Logo设计将具体的事物、事件、场景和抽象的精神、理念、方向通过特殊的图形固定下来，使人们在看到Logo标志的同时，自然的产生联想，从而对企业产生认同。网页中的Logo可分为图案Logo、文字Logo、图文Logo。（1）图案Logo通过隐寓、联想、概括、

抽象等绘画表现方法表现被标识体，对其理念的表达概括而形象，容易区分、记忆，如图所示。但图案Logo往往与被标识体关联

性不够直接，浏览者容易记忆图案本身，对被标识体的关系的认知需要相对较曲折的

过程。可一旦建立联系，印象较深刻，对被标识体记忆则相对持久。所以对持久记忆要求高时应设计良好的特示图案形象。（2）文字Logo涵义明确、直接，

易于被理解，认知，对所表达的理念也具有说明的作用，如图所示。但因为文字本身的相似性易模糊受众对标识本身的记忆，从而对被标识体的长久记忆发生弱化。所以特示文字，一般作为特示图案的补充，要求选择的字体应与整体风格一致，

应尽可能做全新的区别性创作。完整的Logo设计，尤其是有中国特色的Logo设计，在国际化的要求下，一

般都应考虑至少有中英文双语的形式，要考虑中英文字的比例、搭配，还要兼顾标识或文字展开后的应用是否美观，这

一点对背景等的制作十分必要，有利于追求符号扩张的效果。（3）图文Logo是文字与图案结合，兼具文字与图案的属性，如图所示。但图文Logo易导致相关属性的影响力相对弱化。为了不同的对象取向，制作偏图案或偏文字的

Logo，会在表达时产生较大的差异。如只对印刷字体做简单修饰，或把文字变成一

种装饰造型让大家去猜。其综合功能为：能够直接将被标识体的印象，透过文字造型让读者理解；造型后的文字，较易于使观者留下深刻印象与记忆。2）Logo设计原则（1）遵循人们的认识规律，突出主题、引人注目。能够在方寸之间概括出站点的理念，保持视觉平衡、讲究线条的流畅，使整体形状美观，用反差、对比或边框等强调主题。（2）外观尺寸要根据页面的整体版面设计来确定，选择恰当字体，注意留白，给人想象空间。（3）在色彩运用上基色要相对稳定，强调色彩的形式感、记忆感和感情规律。合理使用色彩的对比关系，重视色彩的注目性。（4）形式上重视简约，以简洁的符号化的视觉艺术形象把网站的形象和理念长留于人们心中。Banner设计

1）Banner的含义和形式

网页Banner是指网页中的广告。它可分为横幅广告、通栏广告、弹出窗口广告、擎天柱广告、按钮广告、画中画广告、漂浮（滑动）广告、文字链接广告、隐藏页面广告等。（1）横幅广告是互联网广告中最基本的广告形式，尺寸是490×60像素，或233×30像素，可以使用静态图形，也可用多帧图像拼接为动画图像，如图所示。除普通GIF格式外，目前流行使用动感更强，交互性更高的Flash形式。横幅广告只需稍具视觉冲击力就能轻易吸引浏览者的视线，可谓事半功倍。既可以通过广告画面或告语向浏览者传递某种信息，更可以引导浏览者与商家进行深度接触，实现交互。（2）通栏广告通常放在网页顶部或中间等显著位置，横贯页面，如图所示。该广告形式尺寸较大，视觉冲击力强，能給网络访客留下深刻印象。特别适合活动信息发布、产品推广、庆典等。这种广告版幅较大，是当今网络媒体中深受喜爱的广告形式。贯穿页面的大面积发布空间使广告诉求得以充分发挥，从而将网络媒体较之传统媒体的优势演绎得更加彻底。其合理地嵌入页面重要位置更使其如虎添翼。一种规格相当于两条横幅的宽屏广告，广告置于整个页面的中部，可以在媒体网站的首页和频道页面刊登。宽屏广告由于被放置在网站的黄金版位上，一方面广告的含金量增加，另一方面由于中位的缘故，访客在浏览页面下端信息时势必接触广告，从而提高广告的有效曝光。广告面积大，广告信息丰富；广告创意可以任意发挥，尽现广告表现；由于宽银幕广告是上端页面与下端下页面的"桥梁"，访客在浏览整个页面时，必须先浏览广告，即广告信息可以迅速地传达到访客的视野中，这样广告的有效度大大提高。（3）弹出窗口广告是在访问者进入该页面之前，就抢先以大尺寸弹出的形式将相关广告信息推介给浏览者，使人在意外之间加以关注。首页弹出窗口广告是网页中十分流行的广告形式，它可以有力的为您做好每一种广告，加大对您的宣传力度。（4）擎天柱广告是在网页右侧或左侧竖条式广告形式，它可以形象的表现广告的宣传，是一种新型的广告形式，是利用网站页面左右两侧的竖式广告位置而设计的广告形式，如图所示。这种广告形式可以直接将客户的产品和产品特点详细的说明，并可以进行特定的数据调查、有奖活动。广告规格为120×600像素，制作表现为Flash,JavaScript或Gif,Jpg。由于广告规格较大，广告置于页左右两侧，不会产生上下段位的广告盲区，广告位置可以强烈冲击访客视觉；广告的独享和排他性，可以降低广告的干扰，同时也可以更好的传达广告信息；可以进行多方位的广告信息诉求，广告调查、有奖活动、产品测试、热点追踪等均可在此进行，并容易引起访客的注意。（5）按钮广告尺寸较小，有120×60、90×40、40×20像素等大小。由于图形尺寸小，故可以被更灵活的放置在网页的任何位置。（7）漂浮（滑动）广告是随页面浏览而上下移动的小型图像，会一直处于浏览者的视线之中。往往一个颇具悬念的诉求就会使浏览者欲罢不能，点击即进入。（8）文字广告是通过一般性的简短文字链接，直链连接到客户的广告内容页面上。广告简单明了，直接涵盖主题，对访问者而言具有较强的针对性和引导性。文字链接广告是较软性的宣传手法，以精简煽动的语句体现相关诉求，引发浏览者的好奇心理并进一步地关注。文字链接是一种对浏览者干扰最少，却很有效果的网络广告形式。一般不超过10个汉字，发布在首页、重点频道首页的推荐位置。（9）隐藏页面广告是在Banner广告的基础上发展的产物，也是为了弥补Banner广告传载信息较少、广告表现单一的不足。隐藏页面广告主要是通过鼠标掠过，从而产生动态的页面。这个页面是隐藏在特定的广告表现形式下，广告规格一般是特定广告的3-4倍，这样弥补了基本广告所不能说明的信息。由于广告信息的出现由访客鼠标控制，并具有隐蔽性的特点，所以广告具有明显的趣味性；广告主要是对基本广告形式的补充，所以起到了说明、感染的作用，并提高了访客对广告的兴趣；广告在没有动作的情况下不会出现更大的广告页面，这样不会影响访客对自己所关心的信息的接受和浏览，可以增加亲和力，并广告的针对性也较强。

（10）播放式广告是在Banner出现的广告位置上不断的变化单一广告客户的广告，在流量上进行控制。这样避免了单一Banner缺乏吸引的状况，并在视觉上使访客产生新鲜的感觉。广告动感更加明显，广告形式从单一型，向多元型转变；广告动态的感觉象电影播放，色彩丰富；广告集中，避免一条广告不能吸引访客的弊端，多条客户广告的播放状态，使广告信息更加广泛。

2）Banner设计原则（1）文字编排简洁、和谐。（2）内容醒目、美观，视觉效果好（3）广告内容的方向正确。（4）激起点击的欲望。你的广告让浏览者点击的理由是什么？点击后将能看到什么？（5）适当的留空，避开广告条的边缘。导航设计1）导航的含义和形式

导航是网页的目录，网页之间的联系和分类通过它来实现。导航应放置在页面的醒目位置，让浏览者在第一时间看到它。网页中的导航通常分为文字导航、图像导航、交替图像导航、下拉菜单导航、Flash导航。（1）文字导航是由纯文字构成，简洁、清爽，容量较小。（2）图像导航美观、大方，字体选用不受限制，但占用空间较大。（3）交替图像导航是指当站点访问者将鼠标移到图像导航上时，图像发生变化。鼠标移出图像导航时，图像又可以还原。交替图像导航实际上使用了两副图像，原始图像和鼠标经过图像。

（4）下拉菜单导航比较节省空间，可以包含很多链接。它通过Javascript控制每一个元素的可见属性实现效果，如所示。目前有很多可视化工具可以做下拉菜单导航，完全不需编写代码，只要简单的设置就可完成。（5）Flash导航体积小、表现形式多样、视觉冲击力强，如图所示。2）导航设计原则（1）导航设计合理、便捷。浏览者通过导航应方便去任何页面，并注意不要将内容藏的太深。（2）导航内文字组织清晰、明确、简洁,符合浏览者的认知心理。（3）导航条不易过多。除门户网站外，商业网页的导航不宜过多。导航过多一方面让页面显得过于沉重，一方面会过分挤占页面位置，减少信息量。（4）将导航的设计融入整个网站设计中，使浏览者通过导航加深对企业形象的认识。网页文字设计

1）文字设计的含义和形式

文字是网页界面的主体，是用以传达信息的主要元素。由于目前的网速原因，文字还是信息传达的最佳载体。单一的纯文本给人感觉单调、枯燥，但只要对它进行少许简单而又有趣的修饰，就会使页面变得生动起来。文字设计可以增强文字视觉传达效果，提高文本内容吸引力。文字构成要素设计的好坏，直接影响到版面的视觉传达效果和浏览者的兴趣。网页中的文字主要有标题、文字信息、文字链接等几种形式。（1）在网页文章的顶端，通常会有一个醒目的标题，作为文章的题目。标题不一定是一个完整的句子，尽量简单明了、引入注目，这样才能得到浏览者的青睐。通常标题应放置在醒目的位置，使用较大的字体，在版面中作点或线的编排。（2）文字信息是标题的内容展开，是传达信息的主体部分。文字信息的主体作用是图形、动画和影音等其他任何元素所不能替代的。文字信息是标题的发挥，浏览者在阅读标题之后，需要在文字信息中得到进一步解答，文字信息虽然简单，但内容必须适合标题。同时要对文字的字体、字形、大小、颜色和编排要进行精心的设置，以达到较好的浏览效果。（3）文字链接是网页中最常见的超链接，它能直观地呈现链接的相关主题信息，可方便浏览者对信息的检索，使浏览者对所包含信息一目了然。2）文字设计原则（1）网页中的文字须有一个整体基调。也就是要分清主次，把握文字总体的特征惯向，不能让各种文字自成风格，各行其是。（2）注重文字可读性，适应人们阅读习惯。（3）考虑字体的外形特征。针对不同视觉动向的文字进行有意识处理，会使平面更富有方向性与秩序美感。（4）文字的字体建议使用缺省字体。（5）注重空白的作用。版面上的空白，如字间距、行间距及其周围空白的处理，对于文字的编排也有很大的影响。图形图像设计1）图形图像的含义和形式在很多网页中，图占据着整个页面的重要位置，有的甚至占据了整个页面。浏览者常常会因为看到一幅引人注目的图像而引发兴趣去了解相关内容，图给人的视觉印象要比文字强烈得多。网页中的图形图像主要有插图和照片、背景图、标题、链接按钮等几种形式。（1）在网页中通常会放置幅面较大的插图和照片来突出网页主题。图相当直观，不需像文字那样逐步逐句地阅读，可以不受文化水下的限制，并能在瞬间给人以印象。图的渲染力很强，一幅好的图，可以使浏览者见其图即知其内容，因此图的选材通常要与主题紧密关联。（2）背景图是用作网页的背景，以图为背景来衬托主题。它可以增加层次感使网页变得生动活泼而同时突出网页的风格。

（3）用图作标题可以避免千篇一律的文字标题所给人的单调感和枯燥感。图形图像中丰富的色彩可以使标题更加鲜明，巧妙的图形组合可以使网页具有更好的视觉效果，给人以深刻印象。（4）用小图形取代文字作为链接按钮，在网页中应用非常广泛，可以使网页更为生动、美观。图形按钮具有直观、形象的特点，可以为单调的文字信息增添活力，可以更加明确地表现它所要进行的操作。2）图形图像设计原则（1）精练筒洁。在网站中放置图片一定要慎重，即要放在量需要的地方，做到少而精。（2）图像内客恰当。图像的内容必须与网页主题相符。（3）颜色协调。在网页色彩的运用上，最主要的是图形、图像的色调要与整个网页的主色调协调—致。（4）风格吻合。图形图像的意境、风格要与网页的主题内容保持氛围、情感上的一致。（5）布局合理。图像的布置至关重要。网页动画设计1）动画的含义和形式动画是网页中最吸引入的元素。网页动画是利用人的视觉暂留现象，将在特定时间里完成的动作通过一系列略有差别的画面表现出来。动画具有很强的视觉冲击力。在页面中，动画往往是第一视觉中心。因此在传达主要信息时，动画是有效的于段。动画具有调节页面的重要作用。在以静态页面为主的网站中适当加入动画，可以达到“动静相宜”的良好视觉效果。网页中的动画以Gif动画和Flash动画这两种形式为主。（1）Gif动画是由Imageready等软件制作出来的，构成动画的基本单位是帧，动画由多帧画面组成，每帧的内容不同，前后相互联系，后一帧画面是前一帧的继续。Gif格式的动画需要几幅原图，把它们依次快速翻动就形成了动画，这种动画可以控制翻动速度，如图所示的动画由4帧组成。（2）Flash动画是指Swf格式的动画，用Flash动画设计软件制作。Flash动画主要是网络应用开发的交互式矢量图形动画，目前Flash技术在网上非常流行，有些企业网站整个站点都用Flash形式来表现。2）动画设计原则（1）内容与形式相统一。内容与形式的统一包括信息载体的选择与信息内容的统一、色彩与内容的统一及字体与内容的统一等。（2）常识性信息符号的选择，可以尽量采用一般性常识视觉经验。（3）动画时间以自然界动作的规律为依据，正确地设置时间。（4）动画为网页整体服务，页面动点适度，不能为动而动。（5）保持较小的动画文件。商业网页的色彩设计

商业网页的色彩设计

色彩是自然美、生活美、艺术美的重要组成部分。色彩设计是指遵循科学与艺术的内在逻辑，对网页色彩进行富有鲜明创见性及理想化的组合，是理性与感性相结合的创造过程。色彩设计应用于网页界面设计中，给网页作品带来鲜活的生命力。它既是界面设计的语言，又是视觉信息传达的手段和方式，是网页界面设计中不可缺少的重要元素。通过本项目的实训与练习使学生熟悉色彩的基础知识，理解色彩的意象，掌握商业网页色彩设计的配制方法，能综合运用色彩设计知识构造出鲜明、独特、富有视觉冲击力的网页色彩。1．色彩三要素色彩最基本的三个原素：明度色相纯度明度是指色彩的明亮或晦暗程度。明度包括色彩本身的明暗程度或是一种色相在不同强弱光线下呈现的明暗程度。在无彩色中，明度最高的色为白色，明度最低的色为黑色。在有彩色中，任何一种纯度色都有自己的明度特征。在色相环中黄色为明度最高的色，紫色是明度最低的色，如图所示。明度的变化往往通过区分其色阶来表示，可表示为高明度、中间明度和低明度。色相是指色彩的相貌。每种颜色都具有自己特有的外观特征，诸如色相感觉的红、橙、黄、绿、蓝、紫等相貌。色彩之间的色相比较，可分为同类色、类似色、对比色与互补色。同类色是色相接近的色，色相环中相距30度左右。类似色是色相差别适中的色，色相环中相距50度。对比色与互补色是色相差别较大的色，色相环中相距90~180度左右的色。纯度是指色彩的鲜浊程度。人的视觉能辨认出有色相感的色，都具有一定程度的鲜艳度。比如绿色，当它混入白色后，虽然仍旧具有绿色相的特征，但它的鲜艳度降低了，明度提高了，成为淡绿色；当它混入黑色后，鲜艳度也降低了，明度变暗了，成为暗绿色；当混入与绿色明度相似的中性灰时，它的明度没有改变，纯度降低了，成为灰绿色。在纯度色谱中，接近纯色的色叫高纯度色，接近灰色的色叫低纯度色，处于中间状态的叫中纯度色。2．色彩的意象根据色彩的心理作用，人们常把色彩划分为冷色和暖色。不同的色相给予人们不同的冷暖感觉上的联想。色彩的冷暖感觉称为色性。红、橙、黄具有温暖感，称为暖色；蓝、紫具有寒冷感，称为冷色；绿色称为中性色。冷暖色的划分有助于运用色调的基本倾向，把握网页用色的整体效果，达到和谐、美观的目的。冷暖色对人们的心理作用不同，赋予色彩的意象也不同。（1）红色。红色是一种充满激情的色彩，像初升的太阳或燃烧的火焰，能使人产生兴奋、冲动、愤怒、热情、活力的感觉。红色容易引起注意，具有较佳的明视效果，常用来传达有活力、积极、热诚、温暖、前进等涵义的企业形象与精神，也常用来作为警告、危险、禁止、防火等标示用色。高明度的红色与灰色、黑色搭配使用，会产生激进、现代感；低明度的红色则感到冷静、沉重，凝造出古典氛围。鲜艳的红色极易吸引人们的目光，因此一般在网页设计中不会大范围的使用红色，多数情况下红色在网页中起强调和点缀作用。（2）橙色。橙色是华美、欢快的光辉色彩，是暖色中最温暖的颜色，能使人联想到金秋、丰收、果实累累，因此是一种富足、快乐而幸福的色彩。橙色明视度高，具有警戒的含义，火车头、救生衣、登山服装等都会用橙色来警视。高明度橙色的网页通常给人晴朗清新感，用黄色、黄绿色等类似色搭配，视觉效果极佳。橙色与蓝色搭配极为生动，构成了最响亮、最欢快的色彩。由于橙色非常明亮刺眼，有时会使人感到负面低俗的意象，所以在网页中运用橙色时，要注意选择搭配的色彩和表现方式，才能把橙色明亮活泼的特性发挥出来。（3）黄色。黄色是亮度最高的色彩，像阳光一样光明、灿烂，能使人具有快乐、希望、智慧、轻快的个性。黄色不仅象征照亮黑暗的智慧之光，而且象征财富和权利，它是骄傲的色彩。黄色明视度高，用来警告危险或提醒注意，因此交通标志上的黄灯、工程用的大型机器、学生用的雨衣与雨鞋等都会用黄色。黄色在门户网站和儿童网站运用极为普遍，如果用颜色来形容一个网站，搜狐网就是黄色的。黑色、蓝色或紫色的衬托可以使黄色达到力量无限扩大的强度，得到温暖愉快的积极效果。（4）绿色。绿色是介于冷暖色中间的色彩，显得和睦、宁静、健康、安全。它是草地、树木、庄稼得色彩，给人以纯净、清新与无限生机的感觉。绿色常被作为青春、和平的象征色，绿色所传达的是清爽、理想、希望、生长的意象。教育、医药、服务行业的网站，常选用绿色做基调色。黄绿色有单纯、年青、旺盛的视觉意境，在网页中通常与蓝色搭配，用于表现温暖亲切或高科技的神秘虚幻感，是儿童和年轻人比较喜欢的颜色。清绿色是一种宁静、平和的色彩，给人以凉爽清新感。青绿色与黄色、橙色等颜色搭配可爱、亲切，与蓝色、白色搭配爽朗、明快。（5）蓝色。蓝色是博大的色彩，永恒的象征，天空和大海都呈蔚蓝色。蓝色是最具凉爽，清新，专业的色彩，蓝色沉稳的特性，具有理智，准确的意象，在商业设计中，强调科技，效率的商品或企业形象，大多选用蓝色当标准色、企业色，如电脑，汽车，影印机，摄影器材等。蓝色也代表忧郁、爱情，韩国电视剧《蓝色生死恋》就是用蓝色来表述情感。蓝色和白色搭配的网页，能体现柔顺，淡雅，浪漫的气氛，象天空的色彩。高对比度的蓝色凝造出整洁、轻快感，低对比度的蓝色具有现代都市气派。（6）紫色。紫色是最消极的色彩，给人以神秘感、压迫感，通常代表尊贵、高尚。并且因对比的不同，时而富有威胁性，时而又富有鼓舞性。由于具有强烈的女性化性格，在网页设计中，紫色也受到相当的限制，除了和女性有关的商品或企业形象之外，其他类型的网页很少采用紫色为主色。女性站点通常用清澈的紫红色（粉红色），在白色背景下优美、柔和，显示出无限魅力。白色、粉红色、天蓝色的搭配是最受少女欢迎的配色方案。暗色调的紫色体现成熟感，蓝紫色则体现孤独感。（7）白色。白色具有洁白、明快、纯真、清洁的感受。白色的沉默寓意有无尽的可能性，但有时也给人一种恐惧和悲哀的感受。白色具有高级，科技的意象，是永远的流行色彩，可以和任何颜色作搭配。白色和黑色的搭配的网页很都市化，还有一种特殊的严肃感。纯白色会带给别人寒冷，严峻的感觉，所以在使用白色时，可以掺一些其它的色彩，如象牙白、米白、乳白、苹果白等。（8）黑色。黑色具有深沉、神秘、寂静、悲哀、压抑的感受。黑色给人沉默、虚空感，但有时会体现一种庄严肃穆感。黑色具有高贵、稳重、科技的意象，许多科技产品如轿车、电视音响、摄影器材，大多采用黑色。黑色庄严的意象，也常用在一些特殊场合作为空间设计，黑色是一种永远流行的色彩，适合和许多色彩作搭配。黑色在现代又被赋予Cool的含义，很多时尚站点与游戏站点都大面积的运用黑色来体现时代感。（9）灰色。灰色具有中庸、平凡、温和、谦让、中立和高雅的感觉。灰色属于中间性格，男女皆能接受。所以灰色也是永远流行的主要颜色。灰色具有柔和，高雅的意象，许多的高科技产品都采用灰色来传达高级，科技的形象。韩国网页尤其喜欢利用灰色不同层次的变化组合来搭配其它色彩，使页面色彩更为整体、协调。3．商业网页色彩设计的配制方法1）网页色彩的组成网页色彩由主颜色、副颜色、点缀色组成。主颜色是网页的主要颜色，起到在显示网页整体基调和风格的作用，通常不超过２种颜色。副颜色在网页中辅助主颜色的次要颜色，通常为１－３种颜色。点缀色在网页中用于突出、强调显示，主要用于Logo、范围较小的按钮、标签等，通常为１-2种颜色。2）主颜色的配色主颜色是整个网页的基调色，是网页色彩设计的关键颜色。配制主颜色的方法有如下几种：（1）用色彩的意象来配制主颜色。譬如要为一家果园开发网站，可以选绿色或橙色。绿色有生长、希望的意象，又是大自然色，果树都是绿色的。而橙色寓意果实累累，丰收的景象。（2）用行业色来配制主颜色。每个行业都有它自己的标准色，比如IT行业总是用蓝色来表现，而医药行业总是用绿色来表现。因此IT行业的网站主颜色可以用蓝色，医药行业的网站主颜色可以用绿色。（3）用商品色来配制主颜色。所谓“商品色”是指某些或某类商品在消费者的心目中已经形成的、固定不变的色彩形象。在长期的广告宣传作用下，某些商品的包装、色彩等外观形态已经与商品的内在特性融为一体，成为不可分离的基本特征。比如为上岛咖啡设计网页，就可以采用咖啡的褐色调子作为主颜色。（4）用浏览者的偏爱来配制主颜色。每种网页都有自己不同的受众群，不同的浏览者对色彩的喜好大相径庭。比如针对儿童的网站主颜色可采用鲜艳、活泼的粉红或粉蓝，而为白领女性服务的网页，可采用各种高级灰色作为主颜色。（5）用流行色来配制主颜色。设计流行元素的站点，可以参照本年度的流行色进行配色，使网页配色前卫、时尚。3）副颜色的配色副颜色的配色主要是主颜色与副颜色所形成的对比关系，可以有明度对比、色相对比、纯度对比、冷暖对比。（1）明度对比。明度对比是指主颜色与副颜色因明度差别而形成的色彩对比。色彩的层次、立体感、空间关系，主要靠色彩的明度对比来实现，由于明度倾向和明度对比程度不同，会形成高调、中调、低调。高明度基调情快、活泼、柔软、辉煌。色相的明度提高后，色彩的明度和色相的对比相对降低，产生了统一的感觉，整体色调明快柔和，但要注意其明度差，以造成一定的节奏感。中明度基调刚强、有力量、丰富感。明度差距小，给人以含蓄厚重的感觉，为了避免过分软弱无力，可在色相和纯度上略加变化。低调朴素、丰富、宏大，有寂寞感。单独的明度对比调和的页面它有一个很显著的缺点，画面沉闷，因此明度对比调和在很多情况下是不单独存在的，它往往需要结合其他的调和方式，作为一种辅助的调和方式存在。如果以明度对比调和作为主要调和方式的页面需要在其他的辅助色的用色上多多考虑，用辅助色打破沉闷的感觉。明度对比强时，给人的感觉是光感强，体感也强，页面的清晰度高，明度对比弱时，给人的感觉是光感弱，体感也弱，页面不清晰，不易看清楚．如果明度对比太强，则会给人生硬、空洞、简单化的感觉。（2）色相对比。色相对比是指主颜色与副颜色因色相差别而形成的色彩对比。各色相由于在色相环上的距离不同而形成不同的色相比，形成同类色、类似色、对比色、互补色。同类色配色。主颜色与副颜色是同类色的关系，总体上会给人一种安静、协调、整齐的感觉。同一色相里不同明度与纯度色彩的对比，色相感显得单纯、柔和、高稚、文静。类似色配色。主颜色与副颜色是类似色的关系，色相虽不同，但仍属接近，页面色彩和谐、统一，更蕴含变化的效果。此种配色亦可搭配白色，使画面更明亮；或以灰色搭配，让图面较柔和；或用黑色来增加厚实感。两个类似色对比调和要注意与无彩色相结合，即黑和白，这样的页面会比较干净、大众化，是门户网站用色方式的较好选择。用类似色的色相可表现出细微不同的感觉，为了避免单调，在配色时应注意选择具有明确色相的色彩组合，并合理调整其间的明度差。对比色配色。主颜色与副颜色是对比色的关系，使页面色彩感鲜明、强烈、饱满、丰富，凝造出的是一种强弱分明的氛围。影响这种配色方案效果的最大因素在于所选的颜色在整体画面中所占的比例。由于色彩感觉较强烈，可加入无彩色缓和，以增加调和与统一之感。运用对比色相间的组合，易产生生动活泼的感觉，但有时会缺少调和感，在具体配色时可根据情况利用明度和纯度的变化进行调和。互补色配色。主颜色与副颜色是互补色的关系，使页面色彩感完整、丰富、富有激情，呈现强烈的相互辉映的视觉效果，如红色与绿色、黄色与青色、橙色与紫色成对组合在一起配色时，具有很强烈的视觉冲击力。由于补色的对抗较强，在具体配色时，常常通过改变对比双方的面积比，或通过中间色过渡，或以黑、白、灰、光泽色来间隔，加强其统一的因素。两个补色对比调非常的