浅谈网页设计用图

黄英琼

摘要：图形图像是网页中的一个非常重要的构成要素，它除了承载着其自身的功能外，还扮演着网页与浏览者之间传递信息的角色。本文在网页设计中图形图像的表现形式、其在网页设计中的作用、在网页设计中的使用原则及其处理方法进行了分析，以期能为图片在网页设计中得到更好的利用提供借鉴，设计出更精美的界面，引起浏览者更大的兴趣。

关键词：网页设计；图形图像；处理方法

现今社会是一个崭新的信息时代，而Internet作为信息社会的典型代表，它代表着一种全新的信息交流方式。Internet是由成千上万的网站组成，而每个网站都由诸多的网页构成，因此网页是构成Internet的基本元素。而一个网页的构成要素包括文字、图形图像、色彩、版式等。一个好的网页以为版式为中心，图形图像处于不可或缺的地位，如下图所示：

由于图片给人的视觉冲击要比文字大85%，因此在视觉顺序上，图片往往能首先吸引人们的注意力，而图片的引入也能大大美化网页。可以说，要使网页在纯文本基础上变得更有趣味，最为简捷省力的办法就是使用图片，几乎所有的网页都用到了图片。善用图片，可以生动、形象、直观地表达网页的主题，增强网页的宣传力，号召力和感染力，吸引浏览者的注意，引起浏览者的兴趣。网页能图文并茂地向用户提供信息，成倍地加大了它所提供的信息量。对一条信息来说，图片对浏览者吸引也远远超过单纯的文字。在网页设计中如何使用图形图像，本文将从以下几点来进行讨论：

一、网页中图形图像的表现形式

1.网站标志（LOGO）

网站标志（LOGO）是网站的一部分，它具有象征和识别功能，是网站形象和文化的浓缩，代表着网站的特性。一个设计杰出的、符合网站理念的标志，会增加网站的信赖感和权威感，在社会大众的心目中，它就是一个网站的代表。网站开标志（LOGO）是与其它网站链接及让其它网站链接的标志和门户，而标志（LOGO）图形化的形式比文形式的LOGO链接更能吸引人们的注意。图形标志是一种简洁但不简单的图形符号，具有以小见大、以少胜多、以一当十的特点。在现代社会生活中，经过精心设计而具有高度实用性和艺术性的图形标志，以其特有的功能和新颖别致的艺术效果，感染和影响着人们，指导人们的认知和选择。

2.背景插图

网页的背景插图可以把浏览器变成一个真实的环境，使用图形作为网站的背景是最能展现网站主题特色的地方，可以增加层次感，能够强化整个网页的结构效果，可与网页主题图像形成对比或共鸣，从而突出主题形象，彰显网页的风格。当然网站背景作为网页设计的主要组成元素，在设计时要注重形成网站特有的气势，使其能有机的整合到网站的整体设计中，而不可孤立展现。

3.主图

网页主图是指网页中表达主题、突出主题的较大幅面的图形图像，它可以说是网页的形象区，是整个页面的视觉中心。在网页中采用一幅好的主图，可以使浏览者见其图即知其内容，它具有直观性强的特点，不需要像文字那样去逐字逐句地阅读，可以不受文化水平的限制，并能在瞬间给浏览者以深刻印象。

4.超级链接

在网页设计中，将超级链接设计成图形图像的形式，不但能使网页链接样式变得丰富多彩，还可以使网页更为美观，彰显页面风格。在网页中采用标志性符号，可以减弱语言的障碍。图形化的链接按钮更直观形象，可以为单调的文字信息增添活力，可以更加明确地表现它所要进行的操作。

二、网页设计中图形图像的作用

1.强化表现

在进行网页设计时，正确地选择图形图像不但可以更好的突出网站的主题，而且还可以对网站内容起到解释说明的作用。同时，图形图像跟文字艺术是有区别的，它可以借助视觉上的形与色把内心的情感真实的表现出来，并通过形象的视觉效果促使浏览者产生更多的联想，从而进一步深化和衬托出网站主题。因此在很多的设计中，经常会把图片当做一种强而有力的表现元素。

2.美化页面

在网页设计中，如果仅有文字的排版，会让浏览者感觉到单调乏味。为了提高浏览者的阅读欲望，吸引他们的好奇心，在进行网页设计的时候，必须要保证整个网页版面设计中图片的所占比率大约为百分之三十左右。把文字和图片有效结合起来，可以促使网页看起来更具美感。

3.传达信息

图形图像本身就是一种信息，它参与到深层的语义之中，人们对任务回忆的时候，对图片、文字等信息的记忆和理解是不相同的，相对来说，人们更喜欢记忆图片信息，这是因为图形图像所表现的信息量非常大，它可以非常直观地表达所要表达的内容。所以在网页设计中使用图形图像可以更高效地将信息传达给浏览者，从而达到设计目的。

4.提高趣味性

提高趣味性主要是在表现的形式上来增强阅读的趣味性。尤其是当网页存在大量文字信息的情况下插入图片，可以起到刺激人体大脑的作用，进一步吸引浏览者的关注力，促使他们可以因其强烈的好奇心而继续阅读下去，最终达到传播信息的本质目的。

三、网页设计中图形图像使用的原则

即便是一个内容主导的网站，也需要图形图像来润色，因此设计网站时，都需要寻找一些优秀图片，良好图片的运用能成就一个优秀的网站。人都是视觉动物，在浏览网页时，对于图像都有一种渴望，因此添加图片非常重要。而且，一定是要合适的、相关的图片。在网页设计中使用图形图像时需要注意的基本原则有以下几点：

1. 风格吻合

网页设计中采用的图形图像在风格上要与网页的主题内容保持氛围、情感上的一致。笔者多年教学中看到，初学网页设计的同学往往会犯这种错误，看到漂亮图片就往自己的网页里使用。如果所用图的内容与网页的主题不相符，就会干扰浏览者的注意力。

2. 精练简洁

在一个网页中如果所采用图形图像的数量过多，那么图片所占的空间就会过大，这样会影响网页的下载速度从而影响网站的点击率。因此网页中采用的图形图像一定要做到少而精。

3. 颜色协调

颜色协调指所采用的图形图像与文字及整个页面的主色调协调一致。众多图片的色彩应融于主色调这个整体中去，使整个网页的色调趋向统一，不给人杂乱堆砌之感。

4.对比强烈

网页设计中使用图片时要牢牢记住可用性至上的原则！网页中使用的图片必须与整体相协调，并且与文字产生对比。干读文字会让浏览者觉得很乏味。要想产生鲜明的上下对比效果，就要学会观察；图片比较亮，那么文字可以使用较深的颜色，反之亦然。

5.采用质量好的图片

一张画面精致清晰的图片让浏览者感觉很舒服，更能表现网页的细节，千万不要用过于模糊的图片。如果找不到好的质量的图片，可有自己拍摄，实在还有困难，那么换个思路，建议采用字体设计、布局新颖、极简主义等风格，然后不带图像，宁缺毋滥。

6.大图受欢迎

图像越大，视觉冲击力也越大。在网页设计中应用大图或超大图片，是网页未来的设计和发展的主要方向，使用大图可以给网站带来强烈的视觉冲击效果。当然为了不使图片影响网页的下载速度，必然要对大图进行切片处理才行。

四、网页设计中图形图像的处理方法

在网页设计中图形图像的使用除了符合网站的主题，要有创新的构思和强烈的个性外。图片的位置、面积、数量、形式、方向等直接关系到网页的视觉传达，在使用时应考虑图片在整体编辑计划中的作用，以达到和谐整齐。那么在网页设计中怎样处理图片才能达到较好效果，本文将从以下几点进行说明：

1.图像的面积

大图像能更好地表现细节，容易形成视觉焦点，感染力强，传达的感情更为强烈，更容易吸引浏览者的注意。小图像显得简洁精致，有点缀和呼应作用。大小对比强烈，给人跳跃感；大小对比减弱，则页面稳定、安静。图像在网页中占据的面积大小能直接显示其重要程度。

在网页设计时，应首先确定主要形象与次要形象，把重要的能吸引注意力的图片放大，从属的图缩片小，形成主次分明的层次格局。

2.图像的位置

在网页中上下左右及对角线的四个角都是视觉的焦点，处理好图像与这些位置的关系能使网页表现出丰富的效果。

3.图像的外形

在网页设计中，通常可以将图片处理成不同形状，而不同形状的图片给人的感觉也是不同的，如方形的稳定、严肃，三角形的锐利，圆形或曲线外形的柔软、亲切，退底图及一些不规则或带边框图像的活泼，都能产生强烈的装饰感。比如：

（1）方形图

用直线边框来规范，这是一种最常见形状。方形图使图像内容更突出且将主题形象与环境共融，可以完整地传达主题思想，有利于气氛的渲染，富有情节感、直接感和亲和力，但有时也显得平淡、呆板。

（2）菱形图

用直线边框规范，使图像整体表现为菱形，它让人感觉打破常规，具有很强烈的个性和立体感。

（3）圆形图

圆形图是指利用曲线边框将图像进行规范和限制。圆形图给人以充实、柔和、圆满的感觉，给浏览者以流畅、随意、自由的感受。

（4）三角形

图像用直线边框规范，使图像在网页呈现三角形显示。它给浏览者动感，使网页生动、灵活。

（5）退底图

在网页设计中，有时会根据设计内容所需将图片精选部分沿边缘裁剪，而保留轮廓分明的图形，这样显得更灵活自如。配置退底图的页面，可以表现得轻松活泼、动态十足且富于个性，而且图文结合自然，给人以亲和感；为了避免可能造成凌乱和不整体的感觉，也可以用加线、线框、色块或方形图的方法，使版面取得平衡和稳定。

（6）出血图

出血图在网页中表现为：图形图像充满了整个版面、无边框、有向外扩张、自由舒展的感觉。因其不受边框限制，便于情感与动感的发挥，所以一般在需要传达抒情或运动信息的页面上采用出血图。出血图能拉近浏览者距离，有亲近感，使情感与动感更能得到发挥。

4.图像的虚实

在网页设计时利用图像的虚实对比能够使网页产生空间感，实的物体感觉近，虚的物体感觉远。想让图像虚化很简单，一个就是对图像进行模糊处理，另一个则是对图像色彩进行处理，如降低纯度、采用单色效果等手法。

5.图像的合成

在网页设计中使用合成图是很常用的手段。图像合成通常是指将几幅图片利用图像处理技术合成为一个图像，合成图传达的信息更为丰富，更能集中地体现设计者的创意。如将不同风景、建筑、人物合成为一个图像，采用统一的色彩和处理手法，这样能体现出一种特有的风格。

6. 图像的组合

在设计网页时，为了能传达更多信息，我们通常也对图像进行组合，即把多幅图片以不同方式摆放，形成一个图像组。图像的重要程度可以因面积、摆放位置的不同而有所不同。图像组合的方式有块状和散点两种：块状组合方式有强烈的整体和严谨感，并富于理性和秩序美；散点组合方式则可以形成明快自由的感觉。

7. 图像的局部与特写

在网页设计中使用图像时往往还要注意图像的整体与局部特写。局部的图像相对与整体而言更能让视线集中，有一种点到为止、意犹未尽的感觉。特写就是将局部图像加以放大，用特殊手法作重点表现。特写能让图像具有独特的艺术魅力，使浏览者对图像产生瞬间的凝视，引发浏览者的兴趣点。

五、结束语

网页设计中图形图像的使用对于强化网页的视觉效果起到非常重要的作用，只有充分了解图形图像在网页中的表现形式、使用原则及其重要作用，并结合具体切实可行的处理方法，才能让图形图像在网页中发挥更好的作用，达到美观实用的目的。

参考文献：

[1]刘心美.网站效果图设计.机械工业出版社，2012年4月

[2]韩广良.Photoshop网站UI设计全程揭秘.清华大学出版社，2015年2月