2.2 网页图片选择

在浏览网页中，用户对访问速度是比较敏感的，用户等待网页打开时间最长约为10s，如果放置太多的动画、视频等多媒体元素，会延迟网页的加载速度。而全图片或全文字的网页也不利于浏览体验。因此设置恰当的图片可以增加页面美感，不仅能让浏览者身心愉悦，同时能准确传达页面的信息，可以说图文并茂是网页设计的关键。

2.2.1 图片素材的收集

1．从主题出发选图片

网站主题对于搜索引擎优化是非常重要的。搜索引擎蜘蛛爬取网站页面时，会通过关键词来判断网站的主题，主题清晰的网站有利于缩短检索时间，增加搜索引擎对网站的信任度。

目前的网络中，网站的主题非常广泛，以百度的网站主题分类为例，常见的网站主题有音乐影视、娱乐休闲、游戏、网络服务与应用、博客、网址导航、数码及手机、教学及考试、医疗保健、女性时尚、房产家居、旅游、小说等。每个主题都有各自的特征，如医疗类网站多以红十字为标志，白色为主色调；娱乐休闲类网站风格时尚；网络服务类网站风格严谨。

2．从品质出发选图片

一张适宜并质量高的图片对页面来说无疑是加分的。图片质量一般分为高清、模糊、低像素等，如图2-4所示。

左图：像素和分辨率高，能看清图片的细节内容，适合做各种图片效果设计，为首选素材。

中图：呈现效果模糊，可作为衬托、背景图片，为慎选素材。

右图：像素和分辨率低，应用时要保持原始尺寸或缩小尺寸，为不建议选择的素材。

3．从视觉引导选图片

有表现力和内涵的图片有助于激发设计灵感。这种图片一般都具有一定的引导作用，如动态走势引导、色彩引导等。

（1）走势对视觉的引导作用

设计师要具有把握图片动态走势的能力，如图2-5所示。

左图：在主体物视线的前方，有大量空白，形成向前的动态走势，图片具有想象空间。

中图：在主体物视线的前方，无空白，动态走势引导方向不明确，图片内涵表达不清楚。

右图：主体物被切割，无引导方向，图片没有内涵，杜绝采用。

（2）色彩对视觉的引导作用

颜色同样对视觉有显著的引导作用。通过调整颜色来改变版面的外观，如纯度高的颜色使页面更亮眼，颜色的差异化能突出页面不同区域的内容，如图2-6所示。

左图：彩色图构图饱满、色彩丰富，可用的处理手法多，风格多样化，较为常用。

中图：具有某种单一颜色倾向的彩色图片，体现一定的氛围、格调，如棕色有旧时代的氛围。

右图：黑白图的格调凝重而纯粹，要注意黑白过渡色（灰色）的变化层次。

（3）时代对视觉的引导作用

图片的选择要符合内容所描述的时代特征，要充分挖掘时代的特色，图2-7所示为唐朝、清朝及现代服饰。

左图：唐朝女子服饰的特点是浪漫多姿，给人一种俏丽优雅的感觉。

中图：清朝女子服饰的特点是色彩绚丽醒目，款式别致，体现东方女性的含蓄优雅。

右图：现代服饰设计风格更多样化。

4．从设计细节出发选图片

图片的选择除考虑上述因素外，还要注重图片的相互搭配。下面以网上商城商品展示栏为例。首先给出不合理的图片搭配，如图2-8所示。

分析搭配别扭的原因如下。

错误一：第2张图明显与其他3张图不属于一个商品类型，导致图片主题不一致。

错误二：第2张图、第4张图与其他两张图的背景颜色不一样，导致图片颜色不一致。

错误三：第4张图比其他3张图大，导致图片大小不一致。

错误四：以绿色线为基准，第1张图与其他3张图位置发生偏移，导致图片视角不一致。

正确搭配图片，要注重图片之间尺寸、角度、色彩、风格等方面的协调性。下面给出合理的图片搭配，如图2-9所示。

2.2.2 图片的处理

在根据网页主题收集图片后，可利用抠图等方法进行处理，截取精华、去除糟粕、修复瑕疵、增添特效。以图2-10为例，常用的图片处理手段如图2-11到图2-15所示。

2.2.3 图片的调整

图片摆放的位置、大小等，会对读者的阅读造成一定的影响。

1．图片的位置变化

图片的位置直接关系到版面的布局。

（1）单张图片的摆放

当版面中只有一张图片时，其位置决定着版面效果。

1）居中摆放。这种摆放适用于追求平衡性和规范性的画面，体现稳重感。摆放时要注意左右、上下的距离要对称，如图2-16和图2-17所示。

2）边角摆放。图片摆放在某个边角位置，能使版式更加生动，如图2-18所示。

3）占据半个版面。图片占版面的一半，分为左右、上下两种分割方式，如图2-19所示。

（2）多张图片的摆放

当版面中有多张图片时，要根据版面布局来摆放图片。

1）中心摆放。这种摆放方式使图片排列整齐，富于条理，如图2-20所示。

2）边角摆放。要展示主体形象，就要弱化其他部分。借助九宫格或三等分线将多张图片错落摆放，把主要的图片放在三等分线的交界处，使版面更具延展性，如图2-21所示。

3）占据半个版面。这种摆放一般是文字占半版，图片组合占另一半版，整个版面清晰有条理，如图2-22所示。

2．图片的尺寸变化

（1）放大和缩小

视觉效果良好的页面表现在其主体形象突出。如何将主体形象与其他部分区分开，是设计师的工作要点。

在页面中将需要突出的部分进行放大是一个不错的方法，次要的部分可缩小，再按主次排列图片。例如，一张主图配几张小图，通过大图和小图的相互搭配，提升版面的视觉冲击力。这种手法在电子商务网站中很常见，如图2-23所示。

（2）推近和拉远

如果图片尺寸不发生变化，通过两张有推近和拉远效果的图片的对比，可以给人带来图片尺寸大小有别的视觉效果，如图2-24所示。

3．图片与文字的组合

（1）标题性文字与图片的组合

当图片中有标题性文字时，要先判断标题文字与图片的主从关系。要突出标题文字时，可将标题文字放在版面的重要位置，放大字号，甚至可以遮挡图片，如图2-25所示；要突出图片时，可将标题文字放在图片的留白处，且标题文字的颜色要与图片相反，如图2-26所示。

（2）说明性文字与图片的组合

图片与说明性文字搭配时，要注意图片与相关的说明文字距离近一些，与无关的说明文字距离远一些，如图2-27所示。