不仅仅是漂亮：图片如何增强用户体验

Source: SmashingMagazine
Author: Nick Babich

常言道：“一图胜千言。”人类是高度视觉动物，我们几乎能立马处理视觉信息。我们所接收到的以及大脑所转换的信息中90%来自于视觉。图片是抓住用户注意力和区分产品的有效手段。单张图片能比一个精心制作的文本块传达更多。此外，图片能跨越语言障碍而文本却不能。

图片不仅仅是装饰。它能创造用户体验也能打破用户体验。本文将介绍很多有用的原则和最好的实例以助于您成功的将图片整合进设计中去。

只用相关的图片

每张图片都有一个故事。正如写作一样，在开始写作之前你最好知道要讲述什么。引人注目的图像具有独特的能力能激励和吸引用户，但不是所有的图片都能改善用户体验。一些图片仅仅只会占用空间，更有甚者，会令用户困惑。任何设计中最危险的元素之一是图片传达了错误的信息。

和主题无关的图片常会引起困惑

用户对视觉图片的反应比文本快，因此请确保您的内容与支持的视觉图片匹配。您应该选择和产品目标有很强关系的图片，并且确保和内容相关。

图片不应该创造视觉噪音

“更多即更好”的原则不适用于图片。网站或者应用的目的不应该是展示图片，相反的，您选择的图片要展示产品的目的。在设计中使用有限数量的视觉效果——那些能真正抓住用户注意力的视觉效果。

使用无失真高品质的图片

确保图片的尺寸能在所有平台里展示。图片不应出现像素化，因此请务必针对特定比率和设备测试适当的分辨率尺寸。以原始长宽比呈现照片和图形，不要将图片缩放超过100%。您不会想您产品中的图片看起来歪斜，太大或者太小。

左侧：降级图片。右侧：正确的分辨率

响应式网站或者手机应用经常挣扎着选用合适的图片分辨率以匹配各种用户设备。显然，仅用一种图片适配所有分辨率的屏幕和设备是不够的。然而，像素级的图片又太多，每次都剪裁图片工作量太大，特别是你有特别多图片的时候。

因此，我们该如何自动选择最优的响应式图片尺寸？有望的是，有在线工具能管理整个文件夹的图像的多个尺寸。Cloudinary就是能生成交互式响应式图片断点的工具。这个工具使用了高级算法能为每张上传的图片生成最匹配的断点；在逐个图像的基础上分析图片以找到最佳断点，而不是生成所有可能分辨率的图片。

*Cloudinary是一项用来批量剪裁，调整图片大小的云服务 *

图像聚焦设计不适用每个页面

用美观的图片得到用户的注意力确实有价值，但是会使其他元素更难看见或者更难使用。

在设计中将过多的注意力放在图片上可能会造成视觉过度，严重干扰用户从内容中分心。你能从SoundCloud这个app中看到这个效果：图片吸引了所有的注意力你几乎无法注意到这两个按钮。

在SoundCloud的首页中，屏幕按钮被图像遮蔽

以图像为中心的设计在有些情况下是合适的（例如：苹果首页），绝大多数的网站和apps应该遵循一个平衡的方法——在界面中使用的图片应该支持产品，而不是掩盖其他重要内容或者遮蔽功能。

使用多个介质

插图和摄影图像能用在相同的产品中。

• 摄影是展示特定实体和故事的理想选择。例如：如果我们需要显示不只是花，而是特定的玫瑰：
  

  
  用摄影表征某个特定的实体

• 插图表示概念和隐喻是有效的，摄影图片则会比较疏远
  

  
  当不需要总的特异性时，插图能传达近似的概念以帮助理解

有一个焦点

图像是传达信息的视觉沟通工具。清晰的焦点能一目了然地传达概念，而缺乏焦点使得图像无意义。

当焦点被遮挡时，图像的图标质量会丧失：

否：焦点缺失使得图片无意义。

不要让用户寻找图像的意义，确保以令人难忘的方式传达清晰的概念。

是：清晰的焦点一目了然地传达概念

减少在图片中的分心物，聚焦于有意义的元素。

显示真实的人

人类是使用户参与的非常有效的方式。当我们看见其它人的脸时，它让我们觉得我们实际上是与他们有连接，而不仅仅是使用产品。可是，很多企业网站都因过度使用不诚实的摄像去制造所谓的信任而臭名昭著。

否：不真实的图像给用户带来了浅浅的虚伪感

可用性测试表明纯装饰照片很少能为设计增加价值，经常损害用户体验而不是增强用户体验。用户通常会忽略这样的图片，甚至会令用户感到沮丧。

一个简单的经验法则是使用匹配你的网站或者app特性的高品质人像图片。图片应该真实的表现你的产品，公司或者文化。

显示真实的地球人图片，确保他们匹配你产品的特性。

小贴士

• 避免使用人群战术，相反的，使用有单个主题的图像。
• 争取代表真实故事的图片。拍摄人们做有趣事情的图像。如果你有产品，考虑拍人们正和你的产品发生交互的图像。

将图像和设计混合

当在你的设计中使用图像时，问问自己你所采用的图像是否符合你的网站或者app的美学标准。Squarespace的主页是关注图像的一个很好的例子。它优雅，干净，使用大量的留白和巨大的全屏图像创造了一个大胆的设计以抓住了人们的注意力。

选择适合我们创造的体验主题的图片很重要

改进你的电子商务设计

产品图片销售该项目。用户经常依靠产品图片来评估产品及其功能。不论你的产品是手机还是玩具，产品摄影图是任何电子商务网站最重要的元素。最终，你的产品对访客越有吸引力，他们从你那购买产品就越感到自信，你的转化率就会越高。

图像应该用于获得产品的感受。

使产品图像美观一个好的图像为你做所有的辛勤工作：它抓住用户的注意力，使你的产品具有区分度。然而，良好的产品摄影需要努力。可以考虑阅读这篇文章 “Improve Your E-Commerce Design With Brilliant Product Photos” 学习如何拍出高品质的产品摄影图。

让产品卖它们自己。 考虑如下Gorilla Pod 的例子：照片证明了产品的优点。

14-preview-opt.png

在首屏上显示主图像。不要让用户滚动屏幕才能看见产品的主图像。主要的产品图像应锚定在显著位置，以便交易你的优先的产品。

为了使图像更有效率，你要使图片尽量的大。那么，当你已经最大化了你的图像的大小，您需要集成放大产品的特定细节的能力。这对于服装等产品尤其重要，用户对这些产品的细节更关注。放大的图像还需要保持高质量。

否：放大视图强制用户查看特定部位

是：允许用户根据自己的喜好放大控制权（缩放的深度和区域都由用户控制）。

传达个性和触发用户情感

图像可以传达产品或服务的本质，但它也可以传达惊喜和喜悦。和传达信息的能力一样，图像也有使人愉悦的能力。如果您的产品已经有令人满意的客户体验，为您的产品增添愉悦有助于创建与用户的情感联系。情感强大的图像是确保用户继续深入了解您的体验的一个因素。

图像能够唤起观众的情绪反应。一个幽默可以减轻负担，你的用户可能会喜欢它

情感大脑受照片和插图，特别是人的照片和插图以及故事的影响。谈到插图，甚至那些不会至始至终整合绘制风格的网站和app也可以用卡通插图达到这些目的。例如，插图可用于指令，教程和空白状态。

选择醒目的图像，捕捉注意力和表达个人相关性

现实生活场景：如何为着陆页选择图像

着陆页本质上是您的商店橱窗，在大多数情况下，你只有一个机会给用户留下深刻的印象。谈到着陆页时，您希望访问者在您的网页上只完成一个任务：转化。优良的着陆页具建立在稳固的用户体验之上，图像在建立这种体验中起重要作用。当用户来到您的网页时，他们会有一些反应：无论是积极还是消极，在很大程度上，都是由他们所看到的决定。

遵循如下建议“显示，不要告诉”。以及：

1. 选择适合您信息的图像。
   选择可以简单解释产品或服务概念的图片很重要。这并不意味着图像需要说明一切——单独看到的图像可能甚至看起来意义不明，但当它连接到页面上的一切时逻辑上应该合适。它应该在视觉上强化您尝试提供给访客的消息。

2. 在正确的位置展示图像
   如果图像支持高优先级目标，它应该有更多的视觉强调。相反，与次要目标相关的图像应该具有较少的强调。最重要的图像应该锚定在显着的位置（例如：在首屏上）和显著的焦点上。

3. 选择能捕捉注意的醒目视觉
   专注于选择您可以找到的最引人注目的图像。正如Steven Snell 所提及的 “一个生动，醒目的形象将持续在用户的心中。文本可能被读取和遗忘，但强烈的图像将被记住。”

4. 使用情感强大的图像
   您的图像应该有情感的说服力 - 有情感的影响并强化你想创造的感觉。毕竟，当涉及决策时，情绪经常会覆盖逻辑。

以下是Intercom的登录页面示例，这项服务可让您更有效地与客户沟通。登陆页需要一个相当复杂的想法，并使其易于理解产品如何工作，以及为什么它可能是有益的。

Intercom使用插图来比较旧的工作方式，而不是一个简单的方法。

结论

考虑图像的可用性是很重要的。您设计中的所有视觉传达为用户留下累积印象。令人信服的图像具有独特的启发能力，吸引您的受众群体提供有用的信息。花时间在应用程式或网站中加入每一张图片，能强化用户体验。

推荐阅读

Deciding When Graphics Will Help (And When They Won’t)，Jared M. Spool
How To Use Photos To Sell More Online, James Chudley
Image-Focused Design: Is Bigger Better?, Kathryn Whitenton