俗话说，一图胜千言。不管这是真是假，图画都是页面中重要的组成部分。自从嵌入图画过程变得简略，咱们能够看到许多网站都内嵌了许多图画，其间一些网站从不相同视点展现了正确运用图画的长处，可是，大多数网站则不是如此。虽然这关于一款规划来说，并不是多大的影响，可是这些图画能够会削减你出售产品的时机，除非你有一个极好的诱导用户的页面或许发明了极好的阅览流条件。图画是细节胜于准则的疑问，处置图画应该是规划师们愈加需求晓得和把握的才能。
页面可用性专家Jakob Niesen和他的公司NN/g做了一项眼动研讨，总结出了一篇名为《Photos as Web Content》的文章。他们的定论震动了规划职业，也回答了许多之前研讨都无法回答的疑问。
页面规划可用性辅导-处置图画
实际上，用户更想看到与他们想找的信息有关的图画，因而他们更喜爱一个没有图画的页面而不喜欢那种充满着无关图画，显得臃肿的页面。依据研讨，在页面中运用图画的要害，是依据以下几则根本的思路：
图画根本要素：尺度，组成元素，质量，曝光率是衡量一张好图画的四大要素。用户重视图画的质量，甚至连对比度都能发生很大的影响。
功率：假设一张图画令人兴奋或许让人发生爱好，那么它就成功了。一张高效的图画包括几个特色：
情感：图画中，你的产品能让激起用户运用的愿望？
合理：图画展现了产品的长处？
品牌：图画契合你的品牌个性？
传递信息： 图画能传递正确的信息给网站的读者。
影响用户的反响：实际上这有点难，可是根本的主意即是图画能协助用户做决议，以及发生对产品的采购愿望。咱们在后文会提及到。
单纯的装饰性图画会潜意识地被咱们大脑疏忽。就像雷达相同，假设图画就像雷达上的滤波，那么大脑就会疏忽他们。研讨标明，运用了真人或许实在产品的图画会主动被大脑象征为重要并能被进一步地重视。假设你有一个自个博客，咱们更期望看到的是你真人头像而不是一张绘画像。咱们想看到正在与他们沟通的人的样貌，由于这对信赖的树立特别重要。
假设你具有一家公司，运用图画去描绘公司职工是一个十分棒的主意。它给外界供给了一个很亲热的路径去晓得这家公司的职工及日子。假设你能支付得起，花点钱请一个好的摄影师，这会为你公司的网站增色不少。（牢记不要走艺术照个性，特别是那种和你的想表达内容无关的艺术照）
此外，一些眼动研讨还标明，假设产品图画中含有更多的细节，它能带来的作用就越好。是的，比如说平板电视的广告图，虽然它能起到必定作用，可是这真的够好吗？用户期望看到更多的细节，所以，请展现给他们。
质量和有关性：
下面我会给你展现几个不相同研讨的成果。你会看到一些网站象征了热区，赤色的区域标明遭到用户重视的，而蓝色的区域标明被用户疏忽的。
在ADELPHIAS网站做的眼动仪研讨
除了看到这是一个难以置信的过期规划以外，你能够明晰看到一切图画都没有热区散布。这是由于这些图画纯粹是作为填充作用。假设这些图画是和页面信息有关的，那么热区能够会有必定的改动。这个比如足以展现了他们是多么地糟蹋图画空间。
别的一个比如来自纽约杂志网站的餐厅页面的眼动研讨。咱们能够看到，虽然图画人物是国际闻名的厨师，图画的质量也很重要。虽然图画和页面中的内容是必定程度上的有关，可是低对比度和小尺度的图画却简略被忽视。所以这儿需求一个平衡，图画质量和有关性是两个重要的指引准则。
纽约杂志网站上做的眼动研讨
上图摘自Jakob Nielsen 和 Kara Pernice在几年前写过一篇名为《Images as Obstacles》的文章，谢谢你们巨大的作业。
引导用户
并不是一切规划师都有心理学硕士学位，所以很少人能晓得人类的大脑是怎么运作的。相同的眼动研讨标明咱们的焦点也能很简略地被图画影响和改动。当然，咱们指的是高质量，以及有关的图画。在一个名为“YOU LOOK WHERE THEY LOOK”的研讨中，James Breeze展现了图画怎么能成为阅览流的一部分。
他们以婴儿尿布零售商网站作为比如在106位研讨目标上做了一项眼动研讨。接下来你能够看到2张图画。当图中婴儿的脸是面临访客时，大多数的人会把焦点放在他的脸上，留下比如心爱，香甜等形象。
婴儿尿布零售商网站图票作用研讨
可是，相同的一则广告，相同的案牍，同一个婴儿，可是在不相同的方位，成果却发生了显着改进作用。咱们不只更重视案牍，而且咱们还能看到，品牌以及一些更小的字（一些退款的协议。退款协议在一项生意中适当重要，能够是其间一个卖点）都能被更多地重视。
这张图展现了图画能形成多大的作用影响
JCDecaux和THiNK研讨数年，在一项研讨中得出定论,愈加证明了上面的成果：在一则广告中，用户的眼球实际上能够被引导到广告的要害信息处。
由于许多广告都具有秀丽的模特，所以通常模特比广告产品更能赢得用户的焦点，用户并没有把焦点放在广告产品上，而都聚集在模特身上，下面的研讨显现这个疑问能够被处理。
Sunsilk产品广告眼动研讨
这个研讨的成果十分明晰，开始的广告（左面），只要很少的焦点会集到产品的品牌和产品上，实际上少得只要6%。然后在广告被修正和从头测验后（右图），虽然产品LOGO放在底部，可是还有84%以上的人更重视产品以及产品的品牌。这是一个14倍提高，在我看在，是十分大的差异。
图画需求带有意图
图画不只仅能够引导用户的重视点，还能逾越文字在只是几秒内描绘产品的许多信息。一个极端闻名的比如即是Square，一个撑持手机或平板刷卡的智能手机小外设。
经过上图，用户能在几秒内晓得到这款产品的许多特性。他们现已晓得设备之间的衔接办法、产品的巨细、产品和哪些设备兼容、刷卡后会有怎么的交互界面等。本来长而无聊的产品介绍让一张图画解说明白了。这是一个经典的，好极的比如。
还有，苹果公司关于MACBOOK AIR的广告是别的一个极好的比如。众所周知MAC AIR很小，很轻而且做工精巧。可是假设你不晓得这些特性，你也能够刹那间鄙人图中得悉这些信息。
Macbook Air简略高效的广告图
信赖是要害
假设你开了一家网上商城，时刻记住，信赖是十分重要的。没有人会在他们不信赖的商家那里购物，这也是所以amazon和ebay这么受期待的缘由，由于他们是全球闻名的品牌而且供给了不相同的退款保证，此外，他们还具有与众不相同的安全特性。买家信赖他们，由于他们很明白假设卖家不恪守规则，就会遭到赏罚。假设你有一家网上商城，保证能赢得买家的信赖。
这和图画有什么关系？依据Paras Chopra关于落地页转化率的研讨，信赖是能够经过图画树立的。
一个网上商城出售巴西和加勒比绘画著作，是一件难以置信的工作。在这个网站中，一个细微的改动让转化率从本来的8.8%提高到17.2%，95%的提高。这是怎么在做到的？本来商家并没有运用画作的缩略图而运用了著作对应的画家作为产品图画。他们信任商铺的缘由是由于他们以为这些画家的著作质量无需质疑。经过简略的展现画家的头像，顾客们认识到他们正在从像他们自个相同的真人手上采购（画作）
Chopra还提及了别的一个有在线事例集网站的用户。经过将他网站中的联络图标替换成他自己图画，转化率从3.7提高到5.5，发生了45%的提高。他总结道，访客能够在第一时刻察觉到哪些图画是一般图画，而下降对网站的可信度，可见互联网中实在的人像给咱们树立了一个情感的纽带。
优化
在完毕这篇文章之前,我还想简略提及一下网站图画中一些技能疑问。首要我想着重的是，优化，真的十分重要。
依据本年2月的数据显现，图画份额占了一个页面中的61.9%，均匀一个页面的尺度是1.29兆。图画大就需求花费很长的时刻去下载，对页面的加载形成了影响。依据JAKOB NIELSEN的研讨，一秒的呼应时刻是用户以为期望承受的时刻极限。
2013年2月15数据:页面均匀巨细
在咱们上载图画到1stwebdesigner前，咱们总会经过PHOTOSHOP保存成页面格局，这样能够削减图画的文件巨细也能坚持图画的必定质量。相同的功用，你也可是运用SMUSH.IT。它是一个 免费的在线东西，他也供给了一个WORDPESS插件。在你上载图画之前履行前面任一操作，你网站的总尺度就会削减，这意味着页面能更快地被加载，然后削减用户加载页面带来的抑郁感。
宽高
我想说的最终一个技能方面即是在图画标签中指定宽高，缘由很简略。一个页面永久先加载文字，然后加载图画。因而，没有指定宽高的图画在被彻底加载之前，会被一张小缩略图象征。当图画加载时，这张缩略图就会扩展到他原有的尺度然后打断用户能够正在阅览的文字。一起，图画在扩展过程中也会致运用户能够正在聚集的方位移位，这会让十分多的访客感受无耐。
经过指定图画标签中的宽高，你就能保证这张缩略图在图画加载完结之前就能扩展到他的彻底尺度，和呈现在他该有的方位。这是一个很小的细节，可是的确一个极好的体会。
可是，有人以为这是旧的技能并在在如今移动浏览器高速开展年代，这并不高效。我拥护这一点，因而你能够只在呼应式页面中不指定宽高，可是不要忘记在不相同的分辨率下改动图画的尺度，你也不想一张700像素宽的图画呈现在640像素宽的设备上。
结语：
假设你想有一个成功的网站，特别是你的网站能给你带来利益转化的，正确运用图画是十分重要的。在上面的比如中你现已看到，差的图画会被用户无视，可是假设你能找到适宜的图画并把他们放在了适宜的方位，那么他们就能给你带来惊人的作用。
原文来历：1stwebdesigner
原文标题：How to Use Images Successfully – Web Design Usability Guide
原文地址：http://www.1stwebdesigner.com/design/images-on-web-design-usability-guide/
本译文仅用于学习和沟通意图。非商业转发请注明译者、出处，并保存文章在译言的完好连接。如翻译不妥，期待提出您的定见。
- 上一篇: 在设计中如何把握高保真的度
- 下一篇: 利用抽出滤镜快速抠图
康经理