最佳实践!为产品带来优质体验的5个实用配图技巧 - 优设-UISDC

最佳实践!为产品带来优质体验的5个实用配图技巧

2016/12/18 7353评论区

best-practices-for-imagery-1

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

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

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

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

1-vZ7Fb2Q_4b_kd2k3ITK62g

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

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

1-lcgiNx579OVTGkBV7X5CXw

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

2、有明确的视觉焦点

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

1-bAZCmkK-N4oLhMLAq8V4NQ

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

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

1-WKlFKWfy_dxesoAt1I0hig

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

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

3、呈现真实的人物形象

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

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

1--HLatjqR9Pgy7REuW3sOtg

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

小贴士:

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

1-Dgzq1AJK4_xPKxf_axHO-w

4、避免使用低素质图片

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

1-kXI6XKO43Gzb71B63rGQGA

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

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

5、表达个性

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

1-5HP7uKwxYixIO97y5zf-KQ

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

小贴士:

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

1-vx02_01FsCK88yEUXu0a_g

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

1-UDiFuf3TTC5lOAeZyy6BbA

结语

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

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

【用户体验好文推荐】

  1. 《年度大盘点!聊聊2017年即将流行的UX设计趋势》
  2. 《文案丨到底要如何写好UI/交互稿的文案?》
  3. 《用户体验丨四个技巧帮你打造出深刻印象的友好体验》
  4. 《用户体验丨聊聊UX设计细节之“愉悦性”的陷阱》

原文地址:uxplanet
原文作者:Nick Babich
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/best-practices-for-imagery

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 设计师专访 职场 视觉设计 设计流程 用户体验设计 素材下载 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 产品设计 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里