论文部分内容阅读
图片一直都是网页中重要的组成部分。自从嵌入图片步骤变得简单，我们可以看到很多网站都内嵌了许多图片，其中一些网站从不同角度展示了正确利用图片的好处，然而，大部分网站则不是如此。尽管对于一款设计来说，图片角度展示并没有多大的影响，但是这些图片可能会减少你销售产品的机会，除非你有一个很好的诱导用户的页面或者创造了很好的阅读流条件。图片是细节胜于原则的问题，处理图片应该是设计师们更加需要理解和掌握的能力。网页可用性专家雅各布·聂森（Jakob Niesen）和他的公司NN/g做了一项眼动研究，总结出了一篇名为《Photos as Web Content》的文章。他们的结论震惊了设计行业，也解答了许多之前研究都无法解答的问题。
处理图像的可用性指导
实际上，用户更想看到与他们想找的信息相关的图片，因此他们更青睐一个没有图片的页面而不喜欢那种充斥着无关图片，显得臃肿的页面。根据研究，在网页中使用图片的关键，是基于以下几则基本的思路：
1.尺寸，组成元素，质量，曝光率是衡量一张好图片的四大因素。用户关注图片的质量，甚至连对比度都能产生很大的影响。
2.如果一张图片令人兴奋或者让人产生兴趣，那么它就成功了。一张高效的图片包含情感、合理、品牌这三个特点，比如说在图片中，你的产品能否激发用户使用的欲望？图片展示了产品的哪些优点？是否图片符合你的品牌风格？
3.传递信息，图片能传递正确的信息给网站的读者。
4.刺激用户的反应。实际上这有点难，但是基本的想法就是图片能帮助用户做决定，以及产生对产品的购买欲望。我们在后文会提及到。
单纯的装饰性图片会潜意识地被我们大脑忽略。就像雷达一样，如果图片就像雷达上的滤波，那么大脑就会忽略他们。研究表明，使用了真人或者真实产品的 图片会自动被大脑标志为重要并能被进一步地关注。如果你有一个个人博客，大家更希望看到的是你真人头像而不是一张绘画像。人们想看到正在与他们交流的人的 样貌，因为这对信任的建立尤其重要。
图片对网站设计的重要性
如果你拥有一家公司，使用图片去描述公司员工是一个非常棒的想法。它给外界提供了一个很亲切的途径去了解这家公司的员工及生活。如果你能支付得起，花点钱请一个好的摄影师，这会为你公司的网站增色不少（切记不要走艺术照风格，尤其是那种和你的想表达内容无关的艺术照）。
此外，一些眼动研究还表明，如果产品图片中含有更多的细节，它能带来的效果就越好。是的，比如说平板电视的广告图，虽然它能起到一定作用，但是这真的够好吗？用户希望看到更多的细节，所以，请展示给他们。
网站上有很多的图片就意味着能够更吸引人？错，有的网站图片虽然很多，但是缺少重要信息，图和内容没有关联性，这样用户反而会忽略甚至厌烦网站上的图片，这样白白浪费了网站的空间，反而带来了反面影响。
比如火车站售票的官方网站，进入首页你可以看到，除了感觉这是一个难以置信的过时设计以外，你还可以清晰看到所有图片都没有吸引力，这是因为这些图片纯粹是作为填充作用。假如这些图片是和页面信息相关的，那么可能会有对用户有吸引作用。
另外一个例子来自天猫网的网站首页，我们可以看到，尽管内容较多，但是图片在网站上起到了很好的分类效果，而且与内容相关，最重要的是图片的质量也很好，颜色分布也很协调，很有整体感。这里需要补充一点，尽管图片和网页中的内容是一定程度上的相关，但是低对比度和小尺寸的图片却容易被忽视。所以这里需要一个平衡，图片质量和相关性是两个重要的指引原则。
如何引导用户
并不是所有设计师都有心理学硕士学位，所以很少人能知道人类的大脑是如何运作的。同样的眼动研究表明我们的焦点也能很容易地被图片影响和改变。当然，我们指的是高质量，以及相关的图片。在一个名为“YOU LOOK WHERE THEY LOOK”的研究中，James Breeze展示了图片如何能成为阅读流的一部分。
他们以婴儿尿布零售商网站作为例子在106位研究对象上做了一项眼动研究。在两则婴儿所对位置不同的广告图中当图中婴儿的脸是面对访客时，大部分的人会把焦点放在他的脸上，留下诸如可爱，甜美等印象。
然而，同样的一则广告，相同的文案，同一个婴儿，但是在不同的方位，结果却产生了明显改善效果。大家不仅更关注文案，而且我们还能看到，品牌以及一些更小的字（一些退款的协议。退款协议在一项买卖中相当重要，可能是其中一个卖点）都能被更多地关注。
JCDecaux和THiNK研究数年，在一项研究中得出结论，更加证实了上面的结果：在一则广告中，用户的眼球实际上可以被引导到广告的关键信息处。
因为很多广告都拥有美丽的模特，所以一般模特比广告产品更能赢得用户的焦点，用户并没有把焦点放在广告产品上，而都聚焦在模特身上，下面的研究显示这个问题可以被解决。
我们看一下Sunsilk产品广告眼动研究（见图），这个研究的结果非常清晰，最初的广告只有很少的焦点集中到产品的品牌和产品上，实际上少得只有6%。然后在广告被修改和重新测试后，尽管商品LOGO放在底部，但是还有84%以上的人更关注产品以及产品的品牌。这是一个14倍提升，在设计师看来，是非常大的区别。
图片需要带有目的性
图片不仅仅可以引导用户的关注点，还能超越文字在仅仅几秒内描述产品的很多信息。一个极其著名的例子就是Square，一个支持手机或平板刷卡的智能手机小外设。
通过上图，用户能在几秒内了解到这款产品的许多特性。他们已经知道设备之间的连接方法、产品的大小、产品和哪些设备兼容、刷卡后会有怎样的交互界面等。原本长而无聊的产品介绍让一张图片解释清楚了。这是一个经典的优秀案例。
还有，苹果公司关于MACBOOK AIR的广告是另外一个很好的例子。众所周知MACBOOK AIR很小、很薄、很轻而且做工精美。但是假如你不知道这些特性，你也可以瞬间在它的广告图中获悉这些信息。 信任是关键
如果你开了一家网上商城，时刻记住，信任是非常重要的。没有人会在他们不信任的商家那里购物，这也是所以Amazon和ebay这么受欢迎的原因， 因为他们是全球知名的品牌并且提供了不同的退款保证。此外，他们还拥有与众不同的安全特性。买家信任他们，因为他们很清楚如果卖家不遵守规矩，就会受到惩罚。如果你有一家网上商城，确保能赢得买家的信任。
这和图片有什么关系？根据派勒士·乔布拉（Paras Chopra）关于落地页转化率的研究，信任是可以通过图片建立的。
一个网上商城销售巴西和加勒比绘画作品，是一件难以置信的事情。在这个网站中，一个细小的变化让转化率从原来的8.8%提高到17.2%，95%的提升。这是如何在做到的？原来商家并没有使用画作的缩略图而使用了作品对应的画家作为商品图片。他们相信商店的原因是因为他们认为这些画家的作品质量无需质疑。通过简单的展示画家的头像，顾客们认识到他们正在从像他们自己一样的真人手上购买（画作）。
乔布拉还提及了另外一个有在线案例集网站的用户。通过将他网站中的联系图标替换成他本人图像，转化率从3.7提升到5.5，产生了45%的提升。他总结道，访客可以在第一时间察觉到哪些图片是普通图片，而降低对网站的可信度，可见互联网中真实的人像给人们建立了一个情感的枢纽。
优化是重中之重
在结束这篇文章之前，简单提及一下网站图片中一些技术问题。首先需要强调的是，优化，真的非常重要。
根据今年2月的数据显示，图片比例占了一个网页中的61.9%，平均一个页面的尺寸是1.29兆。图片大就需要花费很长的时间去下载，对页面的加载造成了影响。根据雅各布·聂森的研究，一秒的响应时间是用户认为希望接受的时间极限。
在我们上传图片到1stwebdesigner前，我们总会通过Photoshop保存成网页格式，这样可以减少图片的文件大小也能保持图片的一定质量。同样的功能，你也可是使用SMUSH.IT。它是一个 免费的在线工具，他也提供了一个Wordpess插件。在你上传图片之前执行前面任一操作，你网站的总尺寸就会减少，这意味着网页能更快地被加载，从而减少用户加载网页带来的郁闷感。
最后一个技术方面就是在图片标签中指定宽高，原因很简单。一个页面永远先加载文字，然后加载图片。因此，没有指定宽高的图片在被完全加载之 前，会被一张小缩略图标志。当图片加载时，这张缩略图就会伸展到他原有的尺寸从而打断用户可能正在阅读的文字。同时，图片在伸展过程中也会导致用户可能正 在聚焦的位置移位，这会让非常多的访客感觉无耐。
通过指定图片标签中的宽高，你就能确保这张缩略图在图片加载完成之前就能伸展到他的完全尺寸，和出现在他该有的位置。这是一个很小的细节，但是确实一个很好的体验。
然而，有人认为这是旧的技术并在在如今移动浏览器高速发展时代，这并不高效。我赞成这一点，因此你可以只在响应式页面中不指定宽高，但是不要忘记在不同的分辨率下改变图片的尺寸，你也不想一张700像素宽的图片出现在640像素宽的设备上。
结语
如果你想有一个成功的网站，尤其是你的网站能给你带来利益转化的，正确使用图片是非常重要的。在上面的例子中你已经看到，差的图片会被用户无视，但是如果你能找到合适的图片并把他们放在了合适的位置，那么他们就能给你带来惊人的效果。
（编辑：杨磊）
处理图像的可用性指导
实际上，用户更想看到与他们想找的信息相关的图片，因此他们更青睐一个没有图片的页面而不喜欢那种充斥着无关图片，显得臃肿的页面。根据研究，在网页中使用图片的关键，是基于以下几则基本的思路：
1.尺寸，组成元素，质量，曝光率是衡量一张好图片的四大因素。用户关注图片的质量，甚至连对比度都能产生很大的影响。
2.如果一张图片令人兴奋或者让人产生兴趣，那么它就成功了。一张高效的图片包含情感、合理、品牌这三个特点，比如说在图片中，你的产品能否激发用户使用的欲望？图片展示了产品的哪些优点？是否图片符合你的品牌风格？
3.传递信息，图片能传递正确的信息给网站的读者。
4.刺激用户的反应。实际上这有点难，但是基本的想法就是图片能帮助用户做决定，以及产生对产品的购买欲望。我们在后文会提及到。
单纯的装饰性图片会潜意识地被我们大脑忽略。就像雷达一样，如果图片就像雷达上的滤波，那么大脑就会忽略他们。研究表明，使用了真人或者真实产品的 图片会自动被大脑标志为重要并能被进一步地关注。如果你有一个个人博客，大家更希望看到的是你真人头像而不是一张绘画像。人们想看到正在与他们交流的人的 样貌，因为这对信任的建立尤其重要。
图片对网站设计的重要性
如果你拥有一家公司，使用图片去描述公司员工是一个非常棒的想法。它给外界提供了一个很亲切的途径去了解这家公司的员工及生活。如果你能支付得起，花点钱请一个好的摄影师，这会为你公司的网站增色不少（切记不要走艺术照风格，尤其是那种和你的想表达内容无关的艺术照）。
此外，一些眼动研究还表明，如果产品图片中含有更多的细节，它能带来的效果就越好。是的，比如说平板电视的广告图，虽然它能起到一定作用，但是这真的够好吗？用户希望看到更多的细节，所以，请展示给他们。
网站上有很多的图片就意味着能够更吸引人？错，有的网站图片虽然很多，但是缺少重要信息，图和内容没有关联性，这样用户反而会忽略甚至厌烦网站上的图片，这样白白浪费了网站的空间，反而带来了反面影响。
比如火车站售票的官方网站，进入首页你可以看到，除了感觉这是一个难以置信的过时设计以外，你还可以清晰看到所有图片都没有吸引力，这是因为这些图片纯粹是作为填充作用。假如这些图片是和页面信息相关的，那么可能会有对用户有吸引作用。
另外一个例子来自天猫网的网站首页，我们可以看到，尽管内容较多，但是图片在网站上起到了很好的分类效果，而且与内容相关，最重要的是图片的质量也很好，颜色分布也很协调，很有整体感。这里需要补充一点，尽管图片和网页中的内容是一定程度上的相关，但是低对比度和小尺寸的图片却容易被忽视。所以这里需要一个平衡，图片质量和相关性是两个重要的指引原则。
如何引导用户
并不是所有设计师都有心理学硕士学位，所以很少人能知道人类的大脑是如何运作的。同样的眼动研究表明我们的焦点也能很容易地被图片影响和改变。当然，我们指的是高质量，以及相关的图片。在一个名为“YOU LOOK WHERE THEY LOOK”的研究中，James Breeze展示了图片如何能成为阅读流的一部分。
他们以婴儿尿布零售商网站作为例子在106位研究对象上做了一项眼动研究。在两则婴儿所对位置不同的广告图中当图中婴儿的脸是面对访客时，大部分的人会把焦点放在他的脸上，留下诸如可爱，甜美等印象。
然而，同样的一则广告，相同的文案，同一个婴儿，但是在不同的方位，结果却产生了明显改善效果。大家不仅更关注文案，而且我们还能看到，品牌以及一些更小的字（一些退款的协议。退款协议在一项买卖中相当重要，可能是其中一个卖点）都能被更多地关注。
JCDecaux和THiNK研究数年，在一项研究中得出结论，更加证实了上面的结果：在一则广告中，用户的眼球实际上可以被引导到广告的关键信息处。
因为很多广告都拥有美丽的模特，所以一般模特比广告产品更能赢得用户的焦点，用户并没有把焦点放在广告产品上，而都聚焦在模特身上，下面的研究显示这个问题可以被解决。
我们看一下Sunsilk产品广告眼动研究（见图），这个研究的结果非常清晰，最初的广告只有很少的焦点集中到产品的品牌和产品上，实际上少得只有6%。然后在广告被修改和重新测试后，尽管商品LOGO放在底部，但是还有84%以上的人更关注产品以及产品的品牌。这是一个14倍提升，在设计师看来，是非常大的区别。
图片需要带有目的性
图片不仅仅可以引导用户的关注点，还能超越文字在仅仅几秒内描述产品的很多信息。一个极其著名的例子就是Square，一个支持手机或平板刷卡的智能手机小外设。
通过上图，用户能在几秒内了解到这款产品的许多特性。他们已经知道设备之间的连接方法、产品的大小、产品和哪些设备兼容、刷卡后会有怎样的交互界面等。原本长而无聊的产品介绍让一张图片解释清楚了。这是一个经典的优秀案例。
还有，苹果公司关于MACBOOK AIR的广告是另外一个很好的例子。众所周知MACBOOK AIR很小、很薄、很轻而且做工精美。但是假如你不知道这些特性，你也可以瞬间在它的广告图中获悉这些信息。 信任是关键
如果你开了一家网上商城，时刻记住，信任是非常重要的。没有人会在他们不信任的商家那里购物，这也是所以Amazon和ebay这么受欢迎的原因， 因为他们是全球知名的品牌并且提供了不同的退款保证。此外，他们还拥有与众不同的安全特性。买家信任他们，因为他们很清楚如果卖家不遵守规矩，就会受到惩罚。如果你有一家网上商城，确保能赢得买家的信任。
这和图片有什么关系？根据派勒士·乔布拉（Paras Chopra）关于落地页转化率的研究，信任是可以通过图片建立的。
一个网上商城销售巴西和加勒比绘画作品，是一件难以置信的事情。在这个网站中，一个细小的变化让转化率从原来的8.8%提高到17.2%，95%的提升。这是如何在做到的？原来商家并没有使用画作的缩略图而使用了作品对应的画家作为商品图片。他们相信商店的原因是因为他们认为这些画家的作品质量无需质疑。通过简单的展示画家的头像，顾客们认识到他们正在从像他们自己一样的真人手上购买（画作）。
乔布拉还提及了另外一个有在线案例集网站的用户。通过将他网站中的联系图标替换成他本人图像，转化率从3.7提升到5.5，产生了45%的提升。他总结道，访客可以在第一时间察觉到哪些图片是普通图片，而降低对网站的可信度，可见互联网中真实的人像给人们建立了一个情感的枢纽。
优化是重中之重
在结束这篇文章之前，简单提及一下网站图片中一些技术问题。首先需要强调的是，优化，真的非常重要。
根据今年2月的数据显示，图片比例占了一个网页中的61.9%，平均一个页面的尺寸是1.29兆。图片大就需要花费很长的时间去下载，对页面的加载造成了影响。根据雅各布·聂森的研究，一秒的响应时间是用户认为希望接受的时间极限。
在我们上传图片到1stwebdesigner前，我们总会通过Photoshop保存成网页格式，这样可以减少图片的文件大小也能保持图片的一定质量。同样的功能，你也可是使用SMUSH.IT。它是一个 免费的在线工具，他也提供了一个Wordpess插件。在你上传图片之前执行前面任一操作，你网站的总尺寸就会减少，这意味着网页能更快地被加载，从而减少用户加载网页带来的郁闷感。
最后一个技术方面就是在图片标签中指定宽高，原因很简单。一个页面永远先加载文字，然后加载图片。因此，没有指定宽高的图片在被完全加载之 前，会被一张小缩略图标志。当图片加载时，这张缩略图就会伸展到他原有的尺寸从而打断用户可能正在阅读的文字。同时，图片在伸展过程中也会导致用户可能正 在聚焦的位置移位，这会让非常多的访客感觉无耐。
通过指定图片标签中的宽高，你就能确保这张缩略图在图片加载完成之前就能伸展到他的完全尺寸，和出现在他该有的位置。这是一个很小的细节，但是确实一个很好的体验。
然而，有人认为这是旧的技术并在在如今移动浏览器高速发展时代，这并不高效。我赞成这一点，因此你可以只在响应式页面中不指定宽高，但是不要忘记在不同的分辨率下改变图片的尺寸，你也不想一张700像素宽的图片出现在640像素宽的设备上。
结语
如果你想有一个成功的网站，尤其是你的网站能给你带来利益转化的，正确使用图片是非常重要的。在上面的例子中你已经看到，差的图片会被用户无视，但是如果你能找到合适的图片并把他们放在了合适的位置，那么他们就能给你带来惊人的效果。
（编辑：杨磊）