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 入门手册 – 第6章(四)

    第9节检视功能-元件交互冰炫:小楼老师,我能跟你请教个问题吗?小楼:哇!看头像是很高冷的美女呀。冰炫:老师!你嘴好甜哦!你这样我会不好意思的!小楼:嘿嘿!你有什么问题呀?冰炫:哦……差点被你给夸得忘记问了!今天我在网上买饮料时候,看到网站上的选择饮料分类,选择的时候只能选中一种,被选中的分类标签会改变颜色,其它的恢复默认颜色。感觉有些像你刚才给Alice.讲的单选按钮组的效果。(图6-58)(图6-58)小楼:嗯,这个也是组的效果,但不...

    2018-04-23
  • 三跨362分考取北邮交互设计,复习经验分享

    2018北京邮电大学交互设计- 连庆欣大家好,我是18年考上北邮艺术专硕的学姐,初试总分362分。回忆过去复习的日子,仿佛刚刚就在眼前。我本科是信息管理与信息系统专业,从一所二本学校三跨考研北邮艺术专硕。我是8月底9月初左右着手开始准备考研的,前后大约准备了4个多月。当时刚刚开始准备复习的时候,也思考了好一段时间,由于自己是跨考的,手绘能力实在太弱,找了好几个学校了解,都是比较偏重手绘能力的,直到我看到了北邮,找了它相关的真题,发现对手...

    2018-05-01
  • axure 折叠菜单

    第一步:拖拽三个”动态面板“空间到制作区,分别命名为MB1、MB2、MB3,属性width:200,height:130。 每个动态面板都设置两个状态,分别为State1、State2。 打开MB1面板的State1状态,在里面添加一个名称为section1…

    2015-01-12
  • 交互设计的进展及未来趋势

    作者:Terry Cao   2015-5-7 10:05am    发表于DESIGN & DEV      译者:小媛 作为一种无形的设计,交互设计一直以来都是UX中最难的。以往,用户会被简单的交互吸引,如一个意料不到的动画。但现在的动画效果已…

    2015-10-16
  • Reading Your User | 设计心理学书籍推荐

    研究大众的心理学对于设计是很有帮助的。用户在围绕着你的产品所进行的一系列行为举止背后的动机是什么,与之互动时进行过哪些心理活动,外部的哪些因素能够成功影响用户的决策……这些都能够设计师完成更好的设计。

    2017-05-20
  • 网易资深高手:交互设计师必备的9种能力(上篇)

    网易UEDC – 杨杰 : 有好多交互新人或尚未跨进交互设计大门的同学,会经常问的一个问题:交互设计师需要具备怎样的技能和能力?

    2017-12-03
  • 从单线走向双线,第三代用户体验即将到来?

    双十一在即,加之今年的新零售狂潮,零售业从线上到线下可以说纷纷摩拳擦掌。京东天猫剑指双十一已是老生常谈,值得注意的是,今年的双十一迎来了更多样化的全民购物盛事,比如飞凡推出的“2017飞凡狂逛节”。据了解,与京东天猫等电商大促有所区别的是,“2017飞凡狂逛节”重点是线下逛,与众多剁手党网上拼杀对比,着实令人耳目一新。新零售改革加速,用户体验核心发生质变可喜的是,我们看到零售业巨头和创业者们都在深挖线下。比如今年爆红的无人便利店和无人货...

    2018-02-03
  • D1-交互设计入门

    一阶段:1.交互设计基本原则2.平台特性及其设计规范3.做交互设计的方法,工具4.掌握交互设计的基本流程二阶段:1.特定控件设计,2.特定界面设计3.独立常用功能设计三阶段:1.多项功能设计2.方法研究,总结3.竞品和优秀产品分析4.最新的系统和产品分析5.了解前段技术四阶段:1.产品架构2.设计趋势3.产品发展趋势Windows 用户体验交互设计规范http://www.uxguide.net/wiki/windows:HomeiPh...

    微信热点 2018-04-07
  • 如何建立真诚的用户界面

    给用户控制权并展现产品界面的“诚意”,才能维持和用户之前的信任感。

    2017-04-28
  • 一组能切实提高转化率的网站着陆页设计

    网页设计 师目前在设计界是一个最为尴尬的存在,一方面他们被视为和GEEK党混在代码堆里不懂审美的怪咖,另一方面他们又苦于网页中被局限的自由而无法在创意上得到最大延伸,设计师本人无法给自己准确定位。

    2017-06-02