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

相关推荐

  • Axure RP 8 入门手册 – 第1章(上)

    第一篇基础第1章准备工作与注意事项第1节下载安装Axure RP8第2节原型相关的文件类型第3节文件自动备份与找回第4节功能区域的视图设置前言【网络稿】2015年夏天,经济形势日趋恶劣,小楼所在的公司业务规模大幅缩减,无奈之下,公司决定各部门进行裁员。小楼断然决定主动申请辞职。2015年8月17日,AxureRP8.0Beta版首次发布的日子,小楼提着收拾好的杂物袋,站在公司的门外,看着公司的LOGO墙,旁边是一年前来到公司的大学生苏苏...

    2018-03-29
  • 2018年用户体验趋势(二)

    2017年,我们见证了很多。在与全世界的189489位设计师策划并分享了1926条链接后,我们从行业内的所写、所说和所想中,预见了几个趋势。以下就是2018年用户体验的预期。#4每个界面都是一个故事设计世界中的讲故事和写作从未如此现实过。随着客户的体验旅程越来越碎片化,我们要确保在不同渠道中讲述连贯的品牌故事,并且这些故事清晰、有趣、富有人性。有段时间,大概是几年前,我们听说过显微术语。但是到了2017年,业内人士发现,不仅要重视在设计...

    2018-03-02
  • 移动界面动效设计的全方位科普指南

    读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。

    2017-05-13
  • 5分钟交互设计指南系列:对话框

    框 (dialogs) 是叠加在应用主视图上的弹出 (pop-up) 视图,一般会要求用户作出反应。对话框可以分为模态对话框 (modal dialogs) 和非模态对话框 (modeless dialogs)。

    2017-10-31
  • 案例:交互设计七大定律分享

    一费茨定律(Fitts' Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. Fitts)博士,在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的,时间是1954年;该定律被用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(...

    2018-02-28
  • 如何设计网页正文

    设计跟随内容,这是一个大家经常听到的词。用户访问网站的目的主要是为了查看内容,因而内容是否吸引人至关重要。而如何让我们的网页内容能够被用户所吸引,一份好的网页正文设计不可或缺。

    2017-04-28
  • 学交互设计,怎样选择到适合自己的学校?

    欢迎关注弗斯特国际艺术教育出国留学选择学校,哪些会成为你的考虑因素?学校名气超大,排名都是top级?明星校友超多,都是艺术大佬?学校位置超好,正居于市中心?校园环境超美,好似旅游学习?不得不说这些会成为许多学生和家长,在选择目标院校时经常考虑的一些因素。排名、明星校友、地理位置,可以作为参考依据。BUT!这些不能是最终的决定因素,最重要的还是自己对专业的最终追求。交 互 设 计 详 解交互设计又称互动设计,英文名称为Interactio...

    2018-04-03
  • 产品经理和交互设计师两个职位到底是什么关系啊?

    产品经理不一定要从交互设计师开始做起的,产品经理其实对之前做什么职位要求并不严格,因为它更看重一个综合能力,例如做开发的如果做了产品经理,在代码层就会比较有优势,在做产品的时候这一部分可能就会把握的…

    交互设计WiKi 2015-01-25
  • 2017年视觉设计的六大趋势

    我们在去年的趋势基础上进行筛选提炼,在历时两周的最终定义阶段之后,整合出一份2017年的设计趋势分析报告,希望能给各位从事并热爱设计的同学们带来一些启发和帮助。

    2017-05-09
  • 图片优化的那些工具

    图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、 image…

    2014-11-06