网页的设计可用性指导如何成功地使用图片.pdfVIP

网页设计可用性指导-如何成功地使用图片 译者 ：no rno r 俗话说 ，一图胜千言。无论 是真是假 ，图片都是网页中重要的组成部分。自从嵌入 图片步骤变得简单 ，我们可以看到很多网站都内嵌了许多图片 ，其中一些 网站从不同角度展示了正 确利用图片的好处 ，然而 ，大部分网站则不是如此。尽管 对于一款设计来说 ，并不是多大的影响 ，但是 些图片可能会减少你销售产品的 机会 ，除非你有一个很好的诱导用户的页面或者创造了很 好的阅读流条件。图片是细节胜于原则的问题 ，处理图片应该是设计师们更加需要理解和掌握的 能力。 网页可用性专家Jako b Niesen和他的公司NN/g做了一项眼动研究 ，总结出了一篇名为 《Phot os as Web Co nt ent 》的文章。他们的结论震惊了设计行业 ，也解答了许多之前研究都无法解答的问题。 网页设计可用性指导-处理图像 实际上 ，用户更想看到与他们想找的信息相关的图片 ，因此他们更青睐一个没有图片的页面而不喜 欢那种充斥着无关图片 ，显得臃肿的页面。根据研究 ，在网页中使用图片的关键 ，是基于以下几则 基本的思路 ： 图片基本因素 ：尺寸 ，组成元素 ，质量 ，曝光率是衡量一张好图片的四大因素。用户关注图片的 质量 ，甚至连对比度都能产生很大的影响。 效率 ：如果一张图片令人兴奋或者让人产生兴趣 ，那么它就成功了。一张高效的图片包含几个 特点 ： 1. 情感 ：图片中 ，你的产品能让激发用户使用的欲望 ？ 2. 合理 ：图片展示了产品的优点 ？ 3. 品牌 ：图片符合你的品牌风格 ？ 传递信息 ： 图片能传递正确的信息给网站的读者。 刺激用户的反应 ：实际上 有点难 ，但是基本的想法就是图片能帮助用户做决定 ，以及产生对产 品的购买欲望。我们在后文会提及到。 单纯的装饰性图片会潜意识地被我们大脑忽略。就像雷达一样 ，如果图片就像雷达上的滤波 ，那么 大脑就会忽略他们。研究表明 ，使用了真人或者真实产品的 图片会自动被大脑标志为重要并能被进 一步地关注。如果你有一个个人博客 ，大家更希望看到的是你真人头像而不是一张绘画像。人们想 看到正在与他们交流的人的 样貌 ，因为 对信任的建立尤其重要。 如果你拥有一家公司 ，使用图片去描述公司员工是一个非常棒的想法。它给外界提供了一个很亲切 的途径去了解 家公司的员工及生活。如果你能支付得起 ，花点钱请一个好的摄影师 ， 会为你公 司的网站增色不少。 （切记不要走艺术照风格 ，尤其是那种和你的想表达内容无关的艺术照 ） 此外 ，一些眼动研究还表明 ，如果产品图片中含有更多的细节 ，它能带来的效果就越好。是的 ，比 如说平板电视的广告图 ，虽然它能起到一定作用 ，但是 真的够好吗 ？用户希望看到更多的细节 ， 所以 ，请展示给他们。 质量和相关性 ： 下面我会给你展示几个不同研究的结果。你会看到一些网站标志了热区 ，红色的区域表示受到用户 关注的 ，而蓝色的区域表示被用户忽略的。 在A DELPHIA S网站做的眼动仪研究 除了看到 是一个难以置信的过时设计以外 ，你可以清晰看到所有图片都没有热区分布。 是因为 些图片纯粹是作为填充作用。假如 些图片是和页面信息相关的 ，那么热区可能会有一定的变化 。 个例子足以展示了他们是多么地浪费图片空间。 另外一个例子来自纽约杂志网站的餐厅页面的眼动研究。我们可以看到 ，尽管图片人物是世界出名 的厨师 ，图片的质量也很重要。尽管图片和网页中的内容是一定程度上的相关 ，但是低对比度和小 尺寸的图片却容易被忽视。所以 里需要一个平衡 ，图片质量和相关性是两个重要的指引原则。 纽约杂志网站上做的眼动研究 上图摘自Jako b Nie sen 和 Kara Pernice在几年前写过一篇名为 《Images as O bst ac es》的文章 ， 感谢你们伟大的工作。 引导用户 并不是所有设计师都有心理学硕士学位 ，所以很少人能知道人类的大脑是如何运作的。同样的眼动 研究表明我们的焦点也能很容易地被图片影响和改变。当然 ，我们指的是高质量 ，以及相关的图片 。在一个名为“YO U LO O K W HERE T HEY LO O K”的研究中 ，James Breeze展示了图片如何能成 为阅读流的一部分。 他们以婴儿尿布零售商网站作为例子在106位研究对象上做了一项眼动研究。接下来你可以看到2张 图片。当图中婴儿的脸是面对访客时 ，大部分的人会把焦点放在他的脸上 ，留下