作者：Linn Vizard。作者授权早读课发表，转载请联系作者。
公众号：UX设计小站（ID:ux-com）
欢迎投稿到早读课，投稿邮箱：[email protected]
当我们谈及可用性的时候，我们首先想到的往往不是图片。作为用户体验设计师，我们要确保信息架构可靠，导航流程可用，用户行为号召（Call to Action）和标签清晰可见，然后再用图片作为补充。有多少次，我们在线框图甚至是原型中用带个叉的占位符来表示图片。
![]()
线框图中常用的占位符。这样做的问题是我们不能充分考虑到这里会用到什么图片，最终的效果怎样。 图片来源：Flickr
不言而喻，图片在网站或数字产品的用户体验方面有重要的作用。一般的商业摄影图片让人觉得俗不可耐，仓促放上去的图片不走心也会让用户觉得反感。现在的用户其实非常善于选择性“忽视”任何看着像广告的图片，“广告盲点”会让这些线上广告变成毫无用处的图片。
什么是可以用的照片？什么是好的图片体验？这是一个需要我们去探索的问题，也会随着网络和技术的发展不断变化，比如响应式Web。一般来说：
“最好的图片能够和用户清晰的沟通并与品牌价值保持一致，唤起用户的情感共鸣，然后按照设计意图影响他们的决定和行为”
——James Chudley
![]()
Samsonsite网站用导航图片向用户说明导航类别
Jared Spool把图片分为3种类型：导航图片、内容图片和装饰图片。第一类的导航图片可以为网站的信息架构、导航流程提供支持，帮助用户进行下一步操作。内容图片可以为用户提供文案不能描述的额外信息，Airbnb据说凭借为用户提供将要入住的寓所的精美图片就增加了一倍的收入。第三类图片就是不包含主要信息的装饰性图片。这三类图片需要有节制的使用，因为这些图片往往会毁了美好的用户体验。
这里有8个可以提高图片可用性并提升产品用户体验的建议或提示，供参考。
即使在进行UX设计的时候不会采用最终的图片，养成一个使用定向图片或原始内容的习惯也是很有帮助的。Adobe Stock可以让你方便的在Creative Cloud设计稿中预览带水印的图片，这是一个在设计时简单快速导入图片的方法。事先考虑类似的选择并提供图像的方向对提高产品最终的用户体验将有很大的帮助。
![]()
产品设计的基本布局要避免突兀不适的中断，还要选择和设计布局或格式相符的图片。虽然很简单，但是确保图片拥有正确的比例也可以提高图片的可用性。被拉伸的图片往往会分散用户的注意力。
在图片上加文字对于可用性来说是一个挑战。为了保证文字的可读性，我们需要利用它们之间的对比度来评估一下文字和背景图片之间的对比关系。一般来讲，在有大量留白的最小图片（minimal image）上添加文字效果最好。
![]()
Othr.com 使用大面积留白的产品图片让他们网站的风格更具美感，同时也提高了文字的可读性。这些描述性文字和言之有物的图片组合在一起产生了不错的购物体验。
行为心理学研究表明我们会下意识的去看照片中的眼睛在看什么，这也可以用在我们的设计中——用在标题和一些 CTA（Call to Action）控件上。我们会情不自禁的注视图片中的人正在看的地方，甚至是动物在盯着看的地方。
![]()
Chemistry.com 利用我们通过看别人眼睛去看他们注意什么的兴趣把用户的注意力集中到注册表单。注册数是这个页面核心的转化率，这样就可以把用户的注意力引导到注册区域。
版权声明：早读课文章均来自作者投稿或者授权文章，部分文章为转载均尽量注明作者和来源，文章版权归作者所有，若涉及版权问题，请添加momo微信：qqj5211314，感谢。
微信ID：zaoduke
长按左侧二维码关注
