今天来讨论 UI 设计过程中配图的应用。正所谓设计5分钟,配图两小时,找不到好配图难倒英雄汉的事相信大多数人都亲身体验过。

所以废话不多说,下面进入正题。

配图的主要应用

在 UI 设计过程中,出现的图片频率非常高,包括广告图、背景图、内容图、头像等等。虽然设计 UI 是设计界面的交互元素,不负责广告和内容的上传等等,但是所有界面的可视元素都会影响观看者的观看体验。

比如下面这样的案例,在真实项目设计中,配图随意填充,而且使用一样的图形填完。

虽然还没上线不错,以后的内容也不是 UI 设计师负责的,但拿出这种设计稿去评审相信会有非常多的同事会有意见,觉得你设计的效果差,不负责,专业度不够等等,设计稿被反稿的几率非常大。

所以我们做个调整,把里面的配图做一次梳理,再看看效果,就会发现新的版本看起来明显舒服多了对吧。

这种操作虽然增加了我们的工作量,但不得不说,这是想要提升过稿率和让别人觉得设计师注重细节的重要表现之一,和其它职业写一份商业报告注重行文格式的意义是相同的。

真实项目中的图片也不全是 UGC 内容,还有类似引导页背景、注册登录页背景、用户页背景等等,也都是需要 UI 设计师自己查找和解决的场景。

当然,作为 UI 设计师,职业上要解决的问题不仅仅只是工作的内容,还包含我们个人作品集的设计和制作。在这个过程中,好的配图不仅是应用在我们设计的界面内部,还和我们项目展示包装密切相关,比如看看下面这些案例。

面对现实点的问题,如果你的作品和这么用图的作品摆在一起,那么基本上就 —— 输了……

图片的应用,表现看起来像是以取巧、功利的方式提升我们作品的质量,但实际上,配图应用直接反应了设计师个人的审美和趣味,也在侧面表现一个设计师的能力。

配图的渠道

知道配图的重要性,就要开始着手解决找配图的渠道和方式了。

很多新人以为,我们找配图找的就是图片 「素材」,就一定要到各种提供免费素材图片的地方找,这个思路只正确一半。

对于应用正式上线后使用的背景图、启动图等,确实是需要免费素材,保证不会侵权。而常用的免费高清图库,网上的分享已经非常多了,我就简单罗列出来,大家可以自己输入网址访问。

这些免费图库是不错,也是设计师们的福音,解决各种商业需求。但对于我们 UI 中的配图和展示来说,并不是万能的。

它们有这样的问题:

  • 访问速度慢,加载高清图所以浏览效率并不高
  • 基本只支持英文关键字搜索,对抽象内容用词难以把握
  • 质量参差不齐,大多数图片质量不符合实际要求
  • 往往自己想要的题材内容依旧搜不到

选择配图,一定要把图片是从免费图库里找出来的想法改掉,而要养成万物皆可为我所用的意识。比如我们设计下面这个案例,该怎么找图呢?

我首先会直接忽略掉前面提到的这些素材图库,而是就考虑一件事,和这个题材有关的图片,在哪里出现得最多且最好。

比如这是女性购物类的电商,要获取相关的配图,首先应该想到的,就是对应产品的品牌。比如居家用品可以去造作找,服装可以在 ZARA 里找,口红美妆等可以去 M.A.C 找等等。

定向查找,可以找到的图片和主题关联度最高,同时,品牌官网会应用的宣传摄影图、产品摄影图,质量也会远远比普通的素材图网站更优质,更符合用户群体。

当然,官网有时候也不是万能的,有些题材内容官网找的摄影图质量不一定太好,那么还有一个万金油的渠道,就是 —— 淘宝。

在今天,淘宝店家为了商品的包装盒详情页可以说是用尽混色解数,感人的是优质店铺无论在摄影质量,包装设计,平面排版上都有非常明显的提升,对于配图的取材来说是非常有利的。

比如下面我列举一些店铺案例:

无论是做填充的底图、临时做效果的 Banner、还是缩略图,在优质商家店铺内都可以找到。并且对于 APP UI 的画布来说,图片应用宽度最大也就在 750px宽 (2x即可),使用 QQ 截图就可以获取非常完整的配图素材。

而如果是需要一些透明底图的图片,同样可以使用截图的方法,再置入到软件中(PS、Sketch)使用魔棒工具将白底去除,而不是去各种找 PSD 源文件素材。

就用上面那个案例,我们将它修改成一个面向饮食类的电商页面,从淘宝中进行取图,下面是调整后的效果。

除了在淘宝取图以外,还有一些特殊的场景需要一些高大上配图来提升质感,那么能上 Behance 的同学,就可以从 Behance 摄影区中查找适合的图片素材。

Be 摄影区聚集了最多先锋视觉类摄影,不仅质量极佳,而且非常适合目前 UI 类设计的相关展示,只要基础的 UI 元素设计达标,那么立马就能产生 「追波风」 既视感。

结尾

任何来源的图片,在你的作品集、线上展示、项目DEMO、练习都可以随意使用,只要记得最终上线的产品中不包含即可,就没有版权风险。

而还有一些同学纠结与最终上线的产品图片内容和 DEMO 质量差太多了,在配图上畏首畏尾,也大可不必。在一整个项目中引导和管控图片质量也是 UX 设计师的职责之一,不过那就是另一个话题了,先学会配图的使用方法相比之下更为重要。

欢迎关注作者的微信公众号:「超人的电话亭」

点赞 55
收藏 107
继续阅读相关文章

发表评论 已发布 4

还可以输入 800 个字
 
 
载入中....
4 收藏