识图有道！网页设计师选图指南

生动的图象常常能在瞬间就吸引我们的注意并触发我们的感情。因此,无论在哪种类型的网站中，图象都是一个十分重要的组成部分。好的图片不仅能给用户留下良好的第一印象，还能使用户在第一时间了解网站的类型和特点，从而在赢得用户信任的过程中发挥巨大作用。

如果运用恰当的话，图片无疑是向网站用户传递信息的最佳手段之一。但是,使用错误的照片却会大大降低用户体验。那么网页设计师应该如何去选择正确的图片呢?

网页设计中的图片选择

网页设计涉及到许多方面：内容，色彩，字体，布局及其他细节，其中图片的优劣直接影响到整个网站的易用性和用户体验，应给予足够重视。

作为一个网站设计人员，深刻理解和熟练运用图片的能力应该是设计能力中的重要一环，这篇文章旨在提供一些有效的建议，以帮助设计师在面对大量可供选择的图片时迅速做出正确的决定。

大图为何有效？

用户浏览网站的心理基础是经验与期待。用户开始浏览一个网页时，视线的起点一般是屏幕左上角。当然，不同的文化中的用户也可能会有不同的浏览习惯。然而，如果网页中有一张很大的图片时，用户的注意力会立即被图片吸引，他们会被“拖离”惯常的阅读倾向。

作为网页内容的图片

如果我说图片也算是网站的内容之一，你大概不会否认，但具体到真实的设计中，你真的把它当成一个重要的设计元素了吗?你是否只是把图片作为辅助/装饰性项目?你认真地从不同角度考虑过一张图片的适用性吗？在使用图片之前，你对它们是否做过一番分析?你是否考虑过用户对图片的认知模式和图片可能给用户带来的反应?你是否考虑过，你选择的图片传递了什么有效信息，又对用户的使用体验有何帮助?在处理网页设计中的图片时，这些只是你需要考虑的问题中的一小部分。

记住，图片绝不应该仅仅用于“扮靓”网页。

我见过很多设计师，他们使用图片的方式就是在网页中放一张漂亮照片，然后添加一些标签或“立即行动”之类的口号即算大功告成。在很多设计案例中，设计师都没有对选取的照片评估，而是跟着流行趋势走，什么流行就用什么。现在我们就来讨论一下在使用图片之前如何评估它。

选择完美的图片

在选择一张照片之前得先考察几个关键因素。想必你之前也曾听说过如下这些与图片有关的核心概念：质量，大小，构图及画面。质量主要指的是图片的解析度，大小指图片是否合乎设计所要求的尺寸，构图是图片是否吸引人的关键因素，画面则决定着图片内容是否合适。

如果你选择的图片在这个几个核心标准上都没问题，你才可以进一步考察其它的方面。

我们的大脑处理图像信息的速度比处理文本信息要快60，000倍。（迈克•帕金森）

它是否实用?

挑选一张图片首先要考虑它是否有可用性。拿一张图片来填充网页中的空白或让网页看起来漂亮些并没有错，但至少你应该考虑一下你选择的图片与网页的整体风格是否匹配。那些有用的，有益的，能激发情感的图片是你应该特别注意的对象。实用的图片应该能

•对我们理解事物有所帮助,

•能教我们如何使用一样东西

•能明白地展示事情是如何运作的。

下面这张Square网站使用的图片就是一个很好的例子

 

一望即知这张照片拍的非常专业（注意照片中的手和指甲）。更重要的是它十分直观地传达了产品的用途及便捷性。总之，这是一张实用性，教育性与指导性兼具的好图片。
另一个例子是Pencil网站。与上一张图片一样，这张图片同样精准地描述了产品的用途（电子绘图笔）以及它的使用方法（结合iPad应用）。

 

 

Woodster网站的图片同样很好地呈现了产品的功能。显然，这款产品是用于提升Mac电脑的性能的，它同时也有便捷的USB插口可供利用。想象一下,如果图片中没有体现出产品用途（ iMac）,效果会有何不同。这样一来，它的实用性还会与网站采用的那张图片一样好吗？

 

 

Grovemade则出色地在一张背景图片里便展示了自己的全套产品。观看者立刻就能明白他们是一家致力于木制办公设备生产的供应商。这张图片不仅很实用，而且情绪感染力也非常强。我们稍后会详细谈谈图片的效果和传情达意的问题。

 

 

如果仔细考察一下我所列举的例子，你会发现所有的图片都非常直观且目的明晰，它们非常成功地传达了要传递的信息。你不用花什么心思便能清楚地了解图片中产品/服务/网站的功能。这也正是一切实用性很强的图片的精华所在。
它是否高效?
一张高效的图片能鼓动人们开始行动，它可以将信息清晰无误地传递出去，从而对观看者的行为方式施加影响。明确一点说，优秀的，高效的产品图片应该能激发起观看者的购买欲。在上面所列举的一些示例图片中，画面中的产品看起来非常值得购买，因此这些图片无疑是非常高效的。当一张图片能促使我们的行为发生改变时，你便可以认定它是一张高效图片。

请看Mobility网站图片中展示的这些炫酷惹眼的橙红色耳机，难道你不想立刻将它们据为己有吗 ？
 

 

苹果公司一向以将完美主义贯彻到底而著称。苹果公司的iPhone官网界面全是玲珑秀美的产品大图，令访客忍不住怦然心动，纷纷解囊。

 

另一个采用高效图片的例子来自tsptr网站。图片中的男士目光向下，好像那里有什么东西等待着他。答案是Yes！。

Tsptr

 

而Mapquest网站的这幅图片不仅极富感情色彩，而且巧妙地操纵了观看者的视线，把他们的目光引向图片左侧的移动应用下载链接。

 

POCO网站的主页大图充满温馨气氛而又引人遐思。观看者会有一种印象，就是图片看起来有些不合常理。这一点，加上色彩，光影和构图的综合运用，观看者的好奇心很容易被勾起来，他们会忍不住看一下这个网站究竟是做什么的。
Pocopeople

 

Colossal官网的大图则告诉人们他们的服务内容（提供巨幅手绘墙体广告和壁画）和服务方式(留意画面右侧工作中的那个男人)。这张图片的有趣之处在于画面左侧那些过往的行人。他们所看到的场景似乎让他们非常激动，这在无形之中也让浏览页面的观众也成了其中一员，因此这张图片整体效果也更为强烈。

 

 

它是否动人?

一张动人的图片能够自然地触发观看者的情感反应。无论图片只是漂亮，迷人，还是它用特别的手法鼓动我们的情绪，无论它是有趣，搞笑，还是精美复杂，一张图片不管采用什么方式，只要它能调动起我们的情绪，它便远远胜过那些不能打动我们的所谓大作。

frogdesign网站展示的这张图片主题是FEMA(联邦应急管理署)与灾害应对管理。网站大图配合以精简的宣传语，令整幅图片不仅高效，而且扣人心弦。它的叙事性非常强，生动地展现出了灾难的可怖，观众很容易被打动，因为画面中的场景令他们想到自身的安危。 

 

Breath网站的大图则给人以沉静之感。配合以得体的宣传语和精心安排的构图，观看者似乎也能感觉到画面中那位女士自然惬意的呼吸。你是否留意到画面下面的标签inhale(吸气)? 

 

Shaun Groves网站的主图让人更加了解Shaun Groves本人的动人故事。它传递出幸福，信任，希望和友谊，观看者会被画面吸引，进而想去了解他的事业。

 

除了兼具实用性和高效性的特点之外，Relay Foods网站同样在他们的服务宣传图片之中注入了感情。主图左侧和右侧的女士显然从她们的工作中获得了极大的乐趣，Relay Foods是一家致力于有机食品生产的机构，图中女孩的面部表情与它的品牌内涵也非常协调。

表情的力量

一般认为人类有七种（或八种）基本情绪: 
1. 欢乐、2. 悲哀、3. 蔑视、4. 恐惧、5. 厌恶、6. 惊讶、7. 愤怒

这些基本情绪是超越文化的，并且可以通过面部表情或身体动作被传达出来。如果你要在网页中使用人像图片，你可以根据自己想要唤起的观众的情感反应来决定使用这些情绪中的哪一种。

近距离的面部特写可以迅速引起观看者的注意并触发他们的情绪反应，因此面部特写图片可以说一种十分有用的设计手段。 

当我们看到一张面孔时，我们会本能地感受到某种情绪或与之产生情绪上的共鸣。

在前面的案例中我们已经看到了一些人像素材，这里我们再深入探讨一下。

在Build Fire网站的图片中，尽管画面中的女士没有对产品发表任何评论，她却赋予产品某种特性，并有效地吸引了用户的注意力。如果图中出现的不是一个美丽女士而只是一部手机的话，整幅图片就不会取得这样的效果。
 
 

 

如果你想在网页中使用竖向的人像照片，我向你致敬！因为我也曾在自己的网站中尝试过这种方式。但是请小心!因为表情上细小的改变也可能导致你传达的信息产生很大的误差。在这一点上，丹尼尔在展示自己时便做的非常好。他的面部表情给人以自信，冷静和踏实的感觉。 

一个微笑是发自内心还是装模作样，人们轻易就能辨别出来。

 

 

每个人都知道当年纽约世贸中心发生的悲惨事故。9/11 Tribute Center这个网站就是为那些曾亲历此次灾难的人而设立的。照片中的这位男子直视观看者的视线，他在提示着那场惊心动魄的事件，在邀请访客参与到他的故事之中。

注意：这张图片中并没有出现任何挑衅或对抗性的元素，更显示出设计者细腻的心思。

 

 

另一个凭借面部特写传达信息的极好范例来自Conservation网站。画面中的卡约伯部族勇士传递出权威，勇气与尊严的印象。

 

 

正如Susan Weinschenk所说,对于慈善募捐网站来说，没有什么比一张面部特写照片更能打动人的了。拯救儿童网站选择的这张特写照片，近乎完美地传达出了该组织的主旨与精神。你注意到画面中那个儿童的视线与捐款按钮之间的联系了吗?

 

 

这样用图片，你就错了

尽管我们已经举了这么多图片选取和使用的优秀例子，其实它们很容易被误用和滥用。因此我要再列举一些例子来说明如何避免使用这些错误的方式来安排图片。

无关的图片：下面这张图来自一家提供“私人订制”服装的公司，但他们使用的却是一张无关图片（彩色的丝线），这样的一张图片不能传达给访客正确的信息，相反，还会给他们造成错误的第一印象。不能说这张图片毫无意义，但它表达的方式过于隐晦了。

好一点的解决方案是使用一种纯色或一张团体照做背景。此外,网站宣传语中的“数字产品”事实上是无法在该公司定制的。
 

 

再看这一张，一个提供团队协作软件的开发商使用了一张愁容满面的女士的照片做网站大图。这可能会造成这样的印象,即她在担心自己网站所宣传的这款软件的质量。一个更好的解决方案是显示产品截图或显示一个乐观的女人正在使用他们的产品。

 

 

模糊效果的照片充当背景：在这里这张图片仅仅是用作装饰，没有传达关于此网站的任何信息，因此也就没有任何真正的效果。我建议你尽量避免使用模糊效果的照片做背景，如果你想传递更多信息的话。

 

下图又是一个使用无关图片的例子。尽管宣传语中的“手工制作”和“工作坊”能与照片扯上那么一点关系，但该网站的真正功能却完全被忽视了。事实上这个名为Brand Bat的网站致力于为客户提供品牌创意方案，而一张与这个目的毫无关系的木工工具的照片则有可能让他们失去很多宝贵机会。

图片选择失误：当你看到这张照片，你首先想到的是什么？两个能帮助你的线上业务大获成功的咖啡馆侍应生，对吗？真实情况是他们来自一家专业网站设计机构！我想他们网站的图片中至少应该让某个对他们的产品感到满意的客户露个面吧！另外，这张图片很可能是一张你应该避免使用的“素材类图片”。

 

素材类图片——他们几乎从来没有传达正确的信息。看下图，这个戴眼镜,竖起大拇指的可爱小孩是谁呢？他是一个PHP编程开发者吗？我不太相信。 

 

再看接下来的这张图，Nationwide网站使用这张图可以说完全是个错误。首先，这张图片与网站内容几乎没有关联，图片中的这位女子似乎是在咬手指（我们都知道这可能是心理障碍的一个征兆），她手中所持的平板看起来也模糊不清。这张照片给人以焦虑，紧张和压力过大的印象，我不认为Nationwide网站真的想把这样的信息带给自己的网站用户。

小结

本文讲的是如何在网页中使用大图的策略，但除此之外，在网页中使用图片还有很多种手段和方法。请尽量在设计开始之前就给予图片足够的重视。

别吝惜花在图片上的钱：一个专业而优秀的摄影师能为你的网站带来无限商机

无论你擅长的是哪种类型的设计，你都应该时刻想着将来能从你的设计中受益的那些人。而且说到底,让设计获得成功的唯一方法是对人类的行为和心态有透彻的了解，这一点自然也适用于图片的选择。