不仅要漂亮:看图像如何引导用户体验!

俗话说得好,“一图胜千言”。图片不仅要漂亮,还要够意思!


俗话说得好,“一图胜千言”。图片不仅要漂亮,还要够意思!

不仅要漂亮:看图像如何引导用户体验!

俗话说得好,“一图胜千言”,人类是高度视觉化的动物,能瞬间处理视觉传达的信息,研究表明我们的大脑能感知和捕获的90%的信息都是视觉信息。图片可以迅速吸引用户的注意力,并让用户迅速从众多商品中认出你的商品。此外,图像还可以跨越语言障碍,但是单纯的文字却做不到。

图像不应该仅仅用于装饰,他们有能力创造或打破用户的体验。在这篇文章中,我们将介绍一些有用的原则和最佳实践,帮助您将图像融入到您的设计中。

只使用相关的图像

每张图像都有它的故事。就像写作一样,在开始之前你要知道自己想表达什么才是极好的。引人入胜的图像有激发用户吸引力的独特功能,但不是所有的图像都能达到这种体验,那些不合时宜的图像仅仅起到了占位的作用,而更糟糕的是它们会混淆视听,在设计中最危险的就是使用了传达错误信息的图像。

不仅要漂亮:看图像如何引导用户体验!

不能表达主题的图片往往让用户困惑

用户对图像的反应速度要远比文字快得多,所以务必确保你的内容和图像是高度匹配的。只选择和使用与你的产品目标强相关的图像,并确保上下文是有关联的。

减少图像中的视觉干扰

“越多越好”的原则不适用于图像。你的网站或者app不是用来展示图像的,反之,图像可以用来表现产品。在设计中只使用能抓住用户注意力的图片,不求最多,只求最好。

使用高质量不失真的图像

确保你要使用的图像在跨平台显示时的尺寸是合适的。确保图像不会失真,所以一定要对不同分辨率的设备进行反复测试。展示图片或图形其原有的比例,不要将其比例放大超过100%。没有人想看到自己的图像或艺术品看上去是变形的,要么太小,要么太大。

不仅要漂亮:看图像如何引导用户体验!

左图:失真的图像;右图:正确的分辨率

在进行响应式网页和手机应用设计的时候,常常会在为选择什么图像能最好的适配不同的用户设备上产生争议。很显然,能适配所有屏幕和设备的的图像是稀缺货,然而,对不同像素的图像的需求却太多,一次性剪裁所有尺寸图像的工作量是巨大的,特别是如果你有大量的图像,整个人几乎是崩溃的。

那么,怎么才能自动适配所有尺寸的图像呢?还好我们都是这个时代的幸运儿,一些在线工具可以帮助你处理不同尺寸的图像。Cloudinary就是一个能够帮助你生成响应式图片的在线工具。此工具使用先进的算法,将上传的图像生成最匹配的图像断点,以方便为每个上传的图像生成最佳匹配断点,在图像基础上进行分析从而找出匹配的断点,而不是创建所有可能的图像分辨率。(关于图像断点的概念请自行度娘或谷哥,嫌弃脸)

不仅要漂亮:看图像如何引导用户体验!

Cloudinary就是一个批量剪裁、调整图像尺寸的在线工具

图像聚焦要适度

能够吸引用户注意力的美观的图片当然有其价值,但它的代价是有可能牺牲用户对其他元素的关注和使用。

如果在图像上用力过猛,往往会产生视觉过度,这样会严重影响用户对内容的注意。以SoundCloud’s(如下图app)为例,用户将所有注意力都集中在了界面的图像上,几乎忽略了下面的两个按钮。

不仅要漂亮:看图像如何引导用户体验!

Soundcloud的主界面上的背景图的吸引力已经超过了下面的按钮

虽然图像聚焦的设计在多数设计中是合适的(以苹果官网主页面为例),应用程序和网站在设计时,应该遵循一个平衡的法则-向用户展示的图像要能表达产品理念,但不能喧宾夺主,掩盖其主要功能。

使用多种介质

插画和照片可以同时被运用在同一个产品里。

照片是用来展示一个实体或者描述一个故事很好的元素。例如,我们不需要展示各种各样的花,只需要展示一朵玫瑰花。

不仅要漂亮:看图像如何引导用户体验!

对于特定实体,使用照片展示

  • 插画在表达概念和隐喻的时候尤为有效,这是照片望尘莫及的。

不仅要漂亮:看图像如何引导用户体验!

当总的特性不需要表达的时候,用插画来传达一个近似的内容以帮助理解是极好的。

只有一个焦点

图像是信息传达的视觉交流工具,焦点明确的图像只需一瞥就能领会其意思,反之则不然。

当图像的视觉焦点变得模糊不清时,它的价值也就消失了:

不仅要漂亮:看图像如何引导用户体验!

Don’t:视觉焦点较弱的图像能表达的意义也相对较弱

不要试图让你的用户从你的图像中寻找含义,要确保将清晰地概念通过显著的方式传达给对方。

不仅要漂亮:看图像如何引导用户体验!

Do:焦点明确的图像只需一瞥就能领会其意义

尽量减少图像上干扰表达图像意义的元素。

展示真实的人像

人像是吸引用户注意力的一个有效的方法,当我们看到其他人的面孔时,我们会感觉自己跟他们是相关联的,而不是单纯的在使用一个产品。然而许多公司的网站为了“建立信任”,雇佣模特,拍摄并使用过度虚假的照片,这往往适得其反。

不仅要漂亮:看图像如何引导用户体验!

Don’t:不真实的图像,给用户用户一种肤浅的、虚假的感觉。

可用性测试结果显示:纯粹的装饰照片很难给产品带来任何价值,反而会对用户体验造成伤害。用户通常忽略这样的图像,甚至这些图像可能会让你的用户感到沮丧。

一个非常简单的经验法则是使用与自己产品或者网站文字相匹配的高质量的人像照片。你使用的图像应该能真实的反应出你的产品、公司或企业文化

不仅要漂亮:看图像如何引导用户体验!

Do:展示真实的,实实在在的人,并确保这些人像与你的产品是高度匹配的。

建议:

  1. 避免使用拥挤的人群,尽量选择只有一个人物焦点的图像
  2. 尽量使用真实的故事情景,如果你已经有了一个实体产品,那么让你的用户与你的产品产生交互是极好的。

将图像与设计融合

在你的设计即将采用一张图像之前,请先问问自己,这张图像是不是与你的产品或者网站审美相匹配。Squarespace(一个网站)就是一个在网站首页以图像为焦点的很好的例子。它简洁又干净,使用了大面积的白色背景,图像占据整个屏幕,即大胆,又抓人眼球。

不仅要漂亮:看图像如何引导用户体验!

选择一张含有符合产品要创造的用户体验理念的图像是非常重要的。

改进你的电子商务产品

产品的图像可以用来销售产品。用户往往依靠产品图像来评估产品及其特性。无论你的产品是耳机或是玩具,产品照片是任何电子商务网站的最重要的元素。最终,越是能吸引你的访客的产品,他们对你购买的东西就越有信心,你的转化率也就越高。

不仅要漂亮:看图像如何引导用户体验!

图片是让用户对产品产生感觉的

请把产品图片整的漂亮点。一张好的图片可以让你省去很多工作:好的照片能迅速获取用户的注意,并且让用户辨识你的产品。但是,好的照片需要时间处理。

让产品自我销售。以下面的GORILLA POD 为例,这张照片充分展示了产品的优势。

不仅要漂亮:看图像如何引导用户体验!

优先显示最主要的图片。不要试图让用户通过滚动浏览来获取产品最关键的信息。主要产品形象应该展示在最突出的位置,以此展示你最想让用户获取的信息。

越大的图像冲击力越大,尽你可能的放大你的图片!当图像太大不能在界面正常显示的时候,你需要具有整合放大图像具体细节的能力,弄清哪些细节是用户最关心的尤为重要。切记放大的图像仍然需要保证是高质量的。

不仅要漂亮:看图像如何引导用户体验!

Don’t:让用户看到放大的图片的某个特殊的部位

不仅要漂亮:看图像如何引导用户体验!

Do:让用户对图片放大缩小有自己的控制权(这其中包括包括了深度和范围)

表达个性的同时,激发用户的情感

图像可以传达一个产品或服务的精髓,与此同时它还可以制造惊喜和喜悦。图像可以尽可能多的传达信息。如果你已经有了一个满意的客户体验,添加一些欢乐的风格有助于激发用户和产品之间的情感。情感强大的图像是确保你的用户还愿意继续深入了解产品体验的重要因素。

不仅要漂亮:看图像如何引导用户体验!

图像能够唤起浏览者的情绪反应。幽默可以减轻认知负担,用户可能因此而爱上它。

大脑情绪受到照片和插画的影响,尤其是人像和有故事情节的图像。说道插图,即使是网站或应用程序不能纳入整体绘画风格,仍然可以通过漫画手法达到目的。例如,插图可以用于说明用法、教程或者空状态.

不仅要漂亮:看图像如何引导用户体验!

选择一张能够吸引用户注意,并能引人入胜的图片

现实生活场景:如何为着陆页选择一张能达到目的的图像

从本质上讲,着陆页就是展示商品的橱窗,在大多数情况下,着陆页也是商家给用户留下印象的唯一机会。当用户来到着陆页,你希望用户能在你的页面上操作:从而提高转化率。好的着陆页能创造稳固的用户体验,而图像是创建用户体验的重要角色。当用户来到着陆页的时候的,多多少少会有不同的反应,无论是积极的还是消极的,很大程度上取决于他们所看到的。

请遵循如下建议“做而不说”:

(1)选择的图片需要符合你的产品目标

选择一张能清晰阐述产品概念或服务理念的图片尤为重要。这并不意味着图片需要表述所有信息,单独看一张图片的时候可能不是很清晰,但是当它同界面上其它元素组合在一起的时候,就会变得条理清晰,请在视觉上强调你试图传递给来访者的信息。

(2)将图片展示在正确的位置

如果当前图像需要强调一个高优先级的目标,就应该通过视觉加以强调;相反,次要目标不应该过度突出。最重要的图像应该放在最显眼的位置上(i.e.重点突出的是顶部的文件夹),成为界面上的最主要的视觉焦点。

(3)使用最直接能抓住用户眼球的图像

尽你所能的使用最引人入胜的图像,就像Steven Snell说过的:“一张栩栩如生的图像能够让人记忆犹新,文字可能被人忘记,但是视觉冲击力强的图像却能在人心中留下深深的烙印。”

(4)选择情感丰富的图像

通过图像本身具有的情感,加上设计师情感化设计的衬托,让图像试图从情感上说服用户。表忘了,往往情感能够在用户作出决策之前改变其想法(冲动是魔鬼,对卜?!)。

举一个陆页的栗子,如下图:该服务可以帮助用户高效的与他们的客户进行交流。该着陆页通过一个相当复杂的概念告诉用户该网站提供何种服务,以及用户可以从中获取的好处。

不仅要漂亮:看图像如何引导用户体验!

通过两张插画将旧的的工作模式和简单的工作模式作对比

总结

在设计中考虑图像在可用性方面的影响是非常必要的,设计中的视觉传达往往能给用户留下了深刻的印象。引人入胜的图像有激发和吸引用户注意,并提供有用信息的独特能力。宁可多花些时间,也要确保所使用的图像成为你的应用或网站的体验加分项。

原文地址

 

译者:猪滴

来源:微信公众号【INUX】

本文由 @INUX 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24453/

(0)
CatherineCatherine
上一篇 2017-05-08 17:48
下一篇 2017-05-08 19:57

相关推荐

  • UX设计师如何进行面试?

    面试,分两种:一种被人面,一种面别人。作为设计师我们肯定都被面过,当然也有高阶设计师面过别人。“如果被人面,你要展示哪些能力素质才能得到面试官的认可?”;“如果面别人,你要关注哪些信息才能找到合适的设计师人才?”到两个问题,答案其实可以是一个,理清思路不论是对求职的设计师,还是对负责招人的设计师都能有所帮助。最近看了一些设计师求职、面试相关的文章,结合我的经验重新做了整理,分享给大家。

    2016-05-30
  • Axure RP入门第五篇——全局变量实现不同窗口加载

    产品经理入门:Axure RP入门第五篇——全局变量实现不同窗口加载

    2018-03-04
  • 4种障碍设计方法,改善产品用户体验

    “如果你所设计的障碍是有助于整体的互动,而非阻碍,那么它就是有帮助的。”——Sangeet Choudary“如果你所设计的障碍是有助于整体的互动,而非阻碍,那么它就是有帮助的。”

    2017-08-04
  • 如何入手书写产品体验报告

    体验产品是PM工作中经常做的事情,企业也常留一些这样的实习作业给面试者,是因为产品体验报告一定程度上直观的反映了面试者的专业水平。求职过程中,如果能提交一份专业的体验报告,将大大提升简历通过率,获得面…

    2015-03-05
  • 【笔记干货】UCAN2017用户体验设计论坛

    作者: 阮小阮     忙忙碌碌一天这么晚还没睡是因为我在给大家编辑UCAN的干货哇~ 虽然我平常很懒,可我们真的只推干货哇~ 希望大家都能获取一些知识一些思考 互联网这么快,拥有平衡的能力真的很重要~!   董本…

    交互专题 2017-08-07
  • 抽丝剥茧做设计:结构化思维初体验

    我们面对熟悉的问题能迎刃而解,陌生的问题却无从下手。原因是什么?其实是大脑对熟悉问题有已存在的解决结构,而对陌生问题,需要抽丝剥茧重新建立。结构化思维带你快刀斩乱麻,只需四步,建立清晰结构,完美解决未知问题。结构化思维是指一个人在面对工作任务或者难题时能从多个侧面进行思考,深刻分析导致问题出现的原因,系统制定行动方案,并采取恰当的手段使工作高效地开展,取得高绩效。(引自百度百科)

    2017-04-28
  • 优化App的设计:防止用户错误,并建立良好的错误信息

    “错误”时有发生。在App与生活中都会发生。有时是因为我们犯了错误,有时是系统错误。无论错误原因是什么,它们——还有解决方式——对用户体验影响深远。但它往往不被重视,草草处理错误、组织混乱的错误信息会使用户沮丧,最终抛弃你的应用。相反,处理得当的错误提示,能把失败变为惊喜。在本文中,我们会讨论如何优化app的设计,来尽力防止用户错误,并建立良好的错误信息。

    2017-05-13
  • 喊话优酷:求别再强奸用户体验了好吗

    之前,我给大家做过腾讯视频、爱奇艺视频国际版与国内版的应用对比,可以说,有着谷歌商店的规范,这些国内的视频软件巨头,几乎看不见广告。不管是视频开头那丧心病狂,长达120秒,两分钟的广告,还是应用内Banner处各种穿插的广告,都没有了。看视频没有广告,点开就看,这种感觉可以说是相当nice的。但是!谷歌商店里却没有优酷视频!emmm...颇有种老奸巨猾的既视感。所以,优酷用户不想忍受广告,好想只能开会员,破财消灾...但是!开了会员,也...

    2018-03-21
  • 【新鲜译文】iPhone X人机界面规范

    译者:阿呜(UXRen翻译组成员)   iPhone X的超大尺寸、高分辨率以及它的全面屏给我们带来了以前从未有过的沉浸式体验和丰富的内容展现。   1、屏幕尺寸 iPhoneX竖屏时的屏幕宽度与iPhone6、iPhone7和iPh…

    2017-09-14
  • 交互干货必收 | App界面交互设计规范

    在上篇《APP界面设计风格》确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!

    2017-06-04