不仅要漂亮：看图像如何引导用户体验！.docVIP

不仅要漂亮：看图像如何引导用户体验！ 　　俗话说得好，“一图胜千言”。图片不仅要漂亮，还要够意思！ 　　 　　俗话说得好，“一图胜千言”，人类是高度视觉化的动物，能瞬间处理视觉传达的信息，研究表明我们的大脑能感知和捕获的90%的信息都是视觉信息。图片可以迅速吸引用户的注意力，并让用户迅速从众多商品中认出你的商品。此外，图像还可以跨越语言障碍，但是单纯的文字却做不到。 　　图像不应该仅仅用于装饰，他们有能力创造或打破用户的体验。在这篇文章中，我们将介绍一些有用的原则和最佳实践，帮助您将图像融入到您的设计中。 　　只使用相关的图像 　　每张图像都有它的故事。就像写作一样，在开始之前你要知道自己想表达什么才是极好的。引人入胜的图像有激发用户吸引力的独特功能，但不是所有的图像都能达到这种体验，那些不合时宜的图像仅仅起到了占位的作用，而更糟糕的是它们会混淆视听，在设计中最危险的就是使用了传达错误信息的图像。 　　 　　不能表达主题的图片往往让用户困惑 　　用户对图像的反应速度要远比文字快得多，所以务必确保你的内容和图像是高度匹配的。只选择和使用与你的产品目标强相关的图像，并确保上下文是有关联的。 　　减少图像中的视觉干扰 　　“越多越好”的原则不适用于图像。你的网站或者app不是用来展示图像的，反之，图像可以用来表现产品。在设计中只使用能抓住用户注意力的图片，不求最多，只求最好。 　　使用高质量不失真的图像 　　确保你要使用的图像在跨平台显示时的尺寸是合适的。确保图像不会失真，所以一定要对不同分辨率的设备进行反复测试。展示图片或图形其原有的比例，不要将其比例放大超过100%。没有人想看到自己的图像或艺术品看上去是变形的，要么太小，要么太大。 　　 　　左图：失真的图像；右图：正确的分辨率 　　在进行响应式网页和手机应用设计的时候，常常会在为选择什么图像能最好的适配不同的用户设备上产生争议。很显然，能适配所有屏幕和设备的的图像是稀缺货，然而，对不同像素的图像的需求却太多，一次性剪裁所有尺寸图像的工作量是巨大的，特别是如果你有大量的图像，整个人几乎是崩溃的。 　　那么，怎么才能自动适配所有尺寸的图像呢？还好我们都是这个时代的幸运儿，一些在线工具可以帮助你处理不同尺寸的图像。Cloudinary就是一个能够帮助你生成响应式图片的在线工具。此工具使用先进的算法，将上传的图像生成最匹配的图像断点，以方便为每个上传的图像生成最佳匹配断点，在图像基础上进行分析从而找出匹配的断点，而不是创建所有可能的图像分辨率。（关于图像断点的概念请自行度娘或谷哥，嫌弃脸） 　　 　　Cloudinary就是一个批量剪裁、调整图像尺寸的在线工具 　　图像聚焦要适度 　　能够吸引用户注意力的美观的图片当然有其价值，但它的代价是有可能牺牲用户对其他元素的关注和使用。 　　如果在图像上用力过猛，往往会产生视觉过度，这样会严重影响用户对内容的注意。以SoundCloud’s（如下图app）为例，用户将所有注意力都集中在了界面的图像上，几乎忽略了下面的两个按钮。 　　 　　Soundcloud的主界面上的背景图的吸引力已经超过了下面的按钮 　　虽然图像聚焦的设计在多数设计中是合适的（以苹果官网主页面为例），应用程序和网站在设计时，应该遵循一个平衡的法则-向用户展示的图像要能表达产品理念，但不能喧宾夺主，掩盖其主要功能。 　　使用多种介质 　　插画和照片可以同时被运用在同一个产品里。 　　照片是用来展示一个实体或者描述一个故事很好的元素。例如，我们不需要展示各种各样的花，只需要展示一朵玫瑰花。 　　 　　对于特定实体，使用照片展示 插画在表达概念和隐喻的时候尤为有效，这是照片望尘莫及的。　　 　　当总的特性不需要表达的时候，用插画来传达一个近似的内容以帮助理解是极好的。 　　只有一个焦点 　　图像是信息传达的视觉交流工具，焦点明确的图像只需一瞥就能领会其意思，反之则不然。 　　当图像的视觉焦点变得模糊不清时，它的价值也就消失了: 　　 　　Don’t：视觉焦点较弱的图像能表达的意义也相对较弱 　　不要试图让你的用户从你的图像中寻找含义，要确保将清晰地概念通过显著的方式传达给对方。 　　 　　Do：焦点明确的图像只需一瞥就能领会其意义 　　尽量减少图像上干扰表达图像意义的元素。 　　展示真实的人像 　　人像是吸引用户注意力的一个有效的方法，当我们看到其他人的面孔时，我们会感觉自己跟他们是相关联的，而不是单纯的在使用一个产品。然而许多公司的网站为了“建立信任”，雇佣模特，拍摄并使用过度虚假的照片，这往往适得其反。 　　 　　Don’t：不真实的图像，给用户用户一种肤浅的、虚假的感觉。 　　可用性测试结果显示：纯粹的装饰照片很难给产品带来任何价值，反而会对用户体验造成伤害。用户通常忽略