5个实用配图技巧,为产品带来优质体验

图片不仅仅是装饰,更是强大的设计工具,可以帮你进行视觉传达,让你的产品脱颖而出。


图片不仅仅是装饰,更是强大的设计工具,可以帮你进行视觉传达,让你的产品脱颖而出。

5个实用配图技巧,为产品带来优质体验

俗话说一图胜千言,在这个读图远胜过读文字的时代,图片的视觉化属性更值得挖掘。用户只需要几秒钟就能快速对APP和网站进行评估,而优秀的设计师也清楚如何借助视觉呈现复杂的故事。在这其中,图片起到了极其重要的作用,是视觉表达的关键组成部分。

然而在为APP和网页进行设计的过程中,视觉内容的选取并不是一件轻松的任务。今天所探讨的配图最佳实践将会告诉你如何选取配图,将它们成功地融入到设计当中。

1、使用和上下文相关的配图

·如果你所选取的图片和你的网站/APP 的主旨、核心内容不匹配,用户更多会为之分心:

5个实用配图技巧,为产品带来优质体验

和网站内容没有明确关联性的图片,只是纯粹的浪费空间。

在最坏的情况下,这种配图甚至会给用户以错误的印象,甚至让用户感到震惊:

5个实用配图技巧,为产品带来优质体验

小贴士:使用与品牌关系密切的图片确保视觉的可预测性。

2、有明确的视觉焦点

在选取图片的时候,应当注意选取有明确视觉焦点的,尽量避免让用户去找焦点,这样才能给用户传达足够清晰的概念和信息。

5个实用配图技巧,为产品带来优质体验

  • 左图:当视觉焦点被遮挡的时候,图像最具有标志性的部分就没了。
  • 右图:清晰的视觉焦点让用户更轻松理解设计师要传达的概念。

尝试在你的设计当中使用数量有限的视觉焦点来吸引用户注意力,太多了就不存在焦点了。

5个实用配图技巧,为产品带来优质体验

苹果公司的首页通常使用巨大的产品图来作为配图,尽量为用户提供最有用最有效的信息。

小贴士:尽量降低用户分心的机率,专注于最有意义最有效的元素。

3、呈现真实的人物形象

人物形象是提升用户参与感的一种元素。真实的人物形象更能够传递情绪和感情,和用户产生到情感联系,而不仅仅是推销产品。

然而,许多网站仅仅只是使用纯装饰性的照片,它们很少能够提升设计的价值,甚至会影响到用户体验。这些照片甚至会成为视觉噪音,所导致的结果就是,用户常常会忽视它们甚至会因为这种体验而感到沮丧。使用带有真实人物形象的图片的时候,应该尽量使用品质足够高的,并且挑选和网站、APP能够匹配的照片。

5个实用配图技巧,为产品带来优质体验

  • 左图:纯粹的装饰性的照片;
  • 右图:经过定制的图片能够展示出客服团队的形象。

小贴士:

  • 尽量避免使用群像,照片应该尽量传递出单一、直接的主题。
  • 尽量使用代表真实故事的图片。拍摄让你觉得有趣的人的故事和照片。如果涉及到具体产品,可以考虑使用图片呈现用户和你的产品交互的细节。
  • 如果想使用比图片更加个性化的展现方式,请使用插画。插画更能激发用户的想象力,更能激发用户产品之间的情感。

5个实用配图技巧,为产品带来优质体验

4、避免使用低素质图片

高分辨率的图片大势所趋,不论是手机还是电脑,屏幕分辨率正在不断提升,如果图片本身的素质过低,在如今的屏幕上还能看到像素,那个体验就太过于尴尬了。

5个实用配图技巧,为产品带来优质体验

  • 左图:低像素的图片;
  • 右图:正常分辨率的图片。

小贴士:针对特定的设备和特定的分辨率来定制图片的分辨率,确保图片的尺寸能够兼容不同的屏幕,跨平台。

5、表达个性

APP通常是为了特定功能而生的,但是APP仅仅保证可用性是不够的。APP应当能够有趣而人性化,为用户带来乐趣,用人性化和情感化的设计吸引用户。为APP添加令人愉悦的细节,不仅仅是让它更加富有人情味,还应当让它更加独特而有意思。优秀的APP通常不仅仅是好用,而且充满个性。

5个实用配图技巧,为产品带来优质体验

图片是传达个性、吸引用户的强大工具。

小贴士:

(1)使用图片和插画来进行说明,制作教程,完善UI里的空状态。即使是风格并不突出的APP,也同样可以借助卡通插画来达成这些目的。

5个实用配图技巧,为产品带来优质体验

(2)考虑在你的APP当中使用更富有创意、抓人眼球的效果。

5个实用配图技巧,为产品带来优质体验

结语

从可用性的角度来思考图片的使用,看起来有点奇怪,但是这些案例和最佳实践很好的证明了图片的可用性是多么重要,是多么需要技巧。

图片不仅仅是装饰,更是强大的设计工具,可以帮你进行视觉传达,让你的产品脱颖而出。

 

原文作者:Nick Babich

原文地址:uxplanet

译者:@陈子木

译文地址:http://www.uisdc.com/best-practices-for-imagery

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

(0)
CatherineCatherine
上一篇 2017-05-12 19:30
下一篇 2017-05-12 21:42

相关推荐

  • 交互设计测试评估

    - END-作者  Rachel Xu欢迎将文章分享至朋友圈,拒绝转载~VUI进化论达尔文老爷爷说,你的语音交互设计该进化了~长按指纹 > 识别图中二维码 > 添加关注不关注,怎么进化~

    2018-04-18
  • 提高移动端表单可用性的7个设计原则

    用户在填写表格的时候可能会犹豫不决,所以你应该让这个过程变得尽可能容易,这篇文章中的7个设计原则可以显著提高表格的可用性。

    2017-05-18
  • 你的网站用户体验为什么比竞争对手差

    网站SEO优化用户体验,又是用户体验!总是有一些站长弄不明白他的网站到底哪里做的不好,明明也做了蛮多的网站优化工作,但是与竞争对手的网站相比的时候,优化数据始终差一截。总是有窗口自动弹出不管是广告窗口,还是在线咨询窗口,如果不是用户主动点开,就自动频繁的弹出来,用户关掉一遍两遍,还是弹出来,那么这种设置明显是在撵用户离开你的网站。存在死链或错误链接第一种情况是用户通过搜索目标关键词找到你的网站,想点击进入却发现是无法打开的;第二种情况是...

    2018-02-16
  • 用户体验分享-儿童玩具上的用户体验与交互设计

    大约在同一时间,我成为了一位父亲,我刚进入用户体验世界,试图找出如何使我的产品,够了吧,可以理解的、 易于使用,并且直观。我是一个巨大的玩具迷,还是玩,他们之前到达了我的儿子,但他在房子里意味着更多的玩具和更多的机会来观察他与他的玩具在他的生活非常首个月的交互。看着他让我想起了关于如何普遍经验和界面设计是在我们的生活从一开始,从这些经验,我们能学到多少 — — 尤其是如果我们打算建立一种可以理解的产品。

    2015-01-03
  • 实践分析产品第一天

    【分析思路】 首先要明确,产品是面向用户的,当分析一个产品的时候,我们要先以用户的角色按照设计师的引导整体走一遍,也就是遍历每一个操作,每个设计师都会有一条设计主线,把杂乱无章的功能点根据用户的期望及…

    交互设计 2015-08-25
  • 十二条动效体验原则

    如果你想要了解更多背景信息,建议先阅读我的前一篇译文《动效的基本常识》,其中介绍了动画与动效的差异、即时与非即时的定义、动效提升可用性的四种方式(可预期、连续性、表述性、关联性)、以及理论、手段、属性与值之间的关系。

    2017-04-28
  • 百度地图新版的界面升级传递出了哪些信号?

    春节将至,手机上的应用商店也开启了集中更新的模式。前几天打开百度地图时,“为你而变”的闪屏广告预示了百度地图的更新信息,当时以为只是简单地版本升级,然而昨天更新之后发现,这次升级可不那么简单,百度地图在界面设计上的改变甚是明显。

    2017-05-28
  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 在处理 CRO 与用户体验设计时常会犯的四项错误

    转换率优化(Conversion Rate Optimation, CRO)逐渐受到越来越多的关注。资本雄厚的公司通过增长黑客团队与持续优化作后盾,也影响越来越多人搭上 CRO 的风潮。整体来说,重视对网站效果的测试是一件好事。转换率(Conversion Rate)= 欲望(Desire)─ 障碍(Friction)

    2017-05-17
  • 为熟练用户设计:如何设计才能帮助用户提高使用效率?

    本文作者将从导航和首页的信息排布、操作时间和快捷键三个方面展开,在通讯产品、办公软件等这类被大量使用场景的产品中,该如何设计才能帮助用户提高使用效率?

    2017-05-19