幽灵学院 - 菜鸟起航从这里开始!

幽灵学院 - 中国最权威的网络安全门户网站!

当前位置: > 站长 > 网页设计 >

网页设计可用性指导

译者:nornor 俗话说,一图胜千言。无论这是真是假,图片都是网页中重要的组成部分。自从嵌入图片步骤变得简单,我们可以看到很多网站都内嵌了许多图片,其中一


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

  译者:nornor 俗话说,一图胜千言。无论这是真是假,图片都是网页中重要的组成部分。自从嵌入图片步骤变得简单,我们可以看到很多网站都内嵌了许多图片,其中一些 网站从不同角度展示了正确利用图片的好处,然而,大部分网站则不是如此。尽管这对于一款设计来说,并不是多大的影响,但是这些图片可能会减少你销售产品的 机会,除非你有一个很好的诱导用户的页面或者创造了很好的阅读流条件。图片是细节胜于原则的问题,处理图片应该是设计师们更加需要理解和掌握的能力。

  网页可用性专家Jakob Niesen和他的公司NN/g做了一项眼动研究,总结出了一篇名为《Photos as Web Content》的文章。他们的结论震惊了设计行业,也解答了许多之前研究都无法解答的问题。


用户青睐资讯相关的图片

  网页设计可用性指导-处理图像

  实际上,用户更想看到与他们想找的信息相关的图片,因此他们更青睐一个没有图片的页面而不喜欢那种充斥着无关图片,显得臃肿的页面。根据研究,在网页中使用图片的关键,是基于以下几则基本的思路:

  图片基本因素:尺寸,组成元素,质量,曝光率是衡量一张好图片的四大因素。用户关注图片的质量,甚至连对比度都能产生很大的影响。

  效率:如果一张图片令人兴奋或者让人产生兴趣,那么它就成功了。一张高效的图片包含几个特点:

  情感:图片中,你的产品能让激发用户使用的欲望?

  合理:图片展示了产品的优点?

  品牌:图片符合你的品牌风格?

  传递信息: 图片能传递正确的信息给网站的读者。

  刺激用户的反应:实际上这有点难,但是基本的想法就是图片能帮助用户做决定,以及产生对产品的购买欲望。我们在后文会提及到。

  单纯的装饰性图片会潜意识地被我们大脑忽略。就像雷达一样,如果图片就像雷达上的滤波,那么大脑就会忽略他们。研究表明,使用了真人或者真实产品的 图片会自动被大脑标志为重要并能被进一步地关注。如果你有一个个人博客,大家更希望看到的是你真人头像而不是一张绘画像。人们想看到正在与他们交流的人的 样貌,因为这对信任的建立尤其重要。

  如果你拥有一家公司,使用图片去描述公司员工是一个非常棒的想法。它给外界提供了一个很亲切的途径去了解这家公司的员工及生活。如果你能支付得起,花点钱请一个好的摄影师,这会为你公司的网站增色不少。(切记不要走艺术照风格,尤其是那种和你的想表达内容无关的艺术照)

  此外,一些眼动研究还表明,如果产品图片中含有更多的细节,它能带来的效果就越好。是的,比如说平板电视的广告图,虽然它能起到一定作用,但是这真的够好吗?用户希望看到更多的细节,所以,请展示给他们。

  质量和相关性:

  下面我会给你展示几个不同研究的结果。你会看到一些网站标志了热区,红色的区域表示受到用户关注的,而蓝色的区域表示被用户忽略的。


在ADELPHIAS网站做的眼动仪研究

  在ADELPHIAS网站做的眼动仪研究

  除了看到这是一个难以置信的过时设计以外,你可以清晰看到所有图片都没有热区分布。这是因为这些图片纯粹是作为填充作用。假如这些图片是和页面信息相关的,那么热区可能会有一定的变化。这个例子足以展示了他们是多么地浪费图片空间。

  另外一个例子来自纽约杂志网站的餐厅页面的眼动研究。我们可以看到,尽管图片人物是世界出名的厨师,图片的质量也很重要。尽管图片和网页中的内容是一定程度上的相关,但是低对比度和小尺寸的图片却容易被忽视。所以这里需要一个平衡,图片质量和相关性是两个重要的指引原则。


纽约杂志网站上做的眼动研究

  纽约杂志网站上做的眼动研究

  上图摘自Jakob Nielsen 和 Kara Pernice在几年前写过一篇名为《Images as Obstacles》的文章,感谢你们伟大的工作。

  引导用户

  并不是所有设计师都有心理学硕士学位,所以很少人能知道人类的大脑是如何运作的。同样的眼动研究表明我们的焦点也能很容易地被图片影响和改变。当然,我们指的是高质量,以及相关的图片。在一个名为“YOU LOOK WHERE THEY LOOK”的研究中,James Breeze展示了图片如何能成为阅读流的一部分。

  他们以婴儿尿布零售商网站作为例子在106位研究对象上做了一项眼动研究。接下来你可以看到2张图片。当图中婴儿的脸是面对访客时,大部分的人会把焦点放在他的脸上,留下诸如可爱,甜美等印象。


婴儿尿布零售商网站研究

  婴儿尿布零售商网站图票效果研究

  然而,同样的一则广告,相同的文案,同一个婴儿,但是在不同的方位,结果却产生了明显改善效果。大家不仅更关注文案,而且我们还能看到,品牌以及一些更小的字(一些退款的协议。退款协议在一项买卖中相当重要,可能是其中一个卖点)都能被更多地关注。


婴儿尿布零售商网站研究

  这张图展示了图片能造成多大的效果影响

  JCDecaux和THiNK研究数年,在一项研究中得出结论,更加证实了上面的结果:在一则广告中,用户的眼球实际上可以被引导到广告的关键信息处。

  因为很多广告都拥有美丽的模特,所以一般模特比广告产品更能赢得用户的焦点,用户并没有把焦点放在广告产品上,而都聚焦在模特身上,下面的研究显示这个问题可以被解决。


Sunsilk产品眼动研究

  Sunsilk产品广告眼动研究

(责任编辑:幽灵学院)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名: 验证码: 点击我更换图片
栏目列表
推荐内容
1700055555@qq.com 工作日:9:00-21:00
周 六:9:00-18:00
  扫一扫关注幽灵学院