UI界面的配图到底啥样才有逼格(下)

上一篇文章主要介绍了如何找到合适的图片,本篇则重点介绍为了提高界面的整体统一,配图时应该考虑的4个统一性。

UI界面的配图到底啥样才有逼格(下)

一、风格统一

UI界面的配图,除了实物图外,插图也是非常重要的一环,比如运营内容的banner、固定功能瓷片入口等。无论是实物摄影图,还是插图,都有许多的风格类型,在为界面配图时,要先确定整体配图风格的统一性。

这里所说的整体不一定是整个界面,可以理解为模块,不同的模块也许承载了不同的内容类型,那配图风格也会有所不同。

配图的风格还能决定整体界面的调性,如下图所示:

UI界面的配图到底啥样才有逼格(下)

左图中,食物图片整体的风格是清新可爱的奶油色,适合用在夏天或是甜点等食物配图;右边的食物图片则以深黑背景衬托,给人强烈的高级感,适合用在高级西餐等的食物配图中。

二、视觉大小统一

视觉大小统一是指在同一比列图片中,主体的视觉大小统一。

像下图这种有明显主体的图片视觉大小比较容易掌握。(红色部分为主体)

UI界面的配图到底啥样才有逼格(下)

而像是大场景的风景图或是插图,不太容易从主体上去判定视觉大小的统一性,这时候我们可以从背景以及留白的占比进行判定,大致差不多即可,不用过于绝对。(可通过近大远小,近实远虚来判定哪里属于背景,红色部分为背景与留白)

UI界面的配图到底啥样才有逼格(下)

三、色彩搭配统一

配图色彩搭配统一主要是配合界面整体的主色,保证图片色调的一致性。

色调是指画面上颜色的整体倾向,通常可以从色相、明度、冷暖、纯度四个方面来定义图片的色调。常见的有白色调、黑色调、深色调、纯色调、浅色调等。其中比较特别的是单一色相的图片配色,如下图:

UI界面的配图到底啥样才有逼格(下)

上图中,整体配图都与主色橙黄色保持一致,统一感很强,但在现实产品中,这种情况比较少,多会用在概念性产品或是工具类产品中,某些单一的界面可能会采用这种配图方式,比如按照颜色搜索图片素材的花瓣页:

UI界面的配图到底啥样才有逼格(下)

下图中整体的插图与实物图,虽然色相有所不同,但色彩都偏向浅色调,色彩整体统一且给人简洁淡雅的感受。

UI界面的配图到底啥样才有逼格(下)

四、视觉角度统一

视觉角度统一主要针对主体明显的商品配图,人物配图(如头像)等,保持一个相对统一的角度看起来会更加舒适。

UI界面的配图到底啥样才有逼格(下)

左图中,右下角商品的角度与其他商品不一致,会有点突兀的感觉,而右图都是统一的正视图商品,整体的统一感则更好。

划重点

界面配图往往是我们经常容易忽略的地方,好的配图需要保证整体的统一性,主要包括风格统一、视觉大小统一、色彩搭配统一以及视觉角度统一。

如果大家有配图的建议或是好的图片素材网站也欢迎在互动区留言讨论。

相关阅读:

UI界面的配图到底啥样才有逼格(上)

业界动态

在没有埋点数据情况下,如何证明你的方案有效性?

2020-3-26 11:12:03

业界动态

聊聊需求管理的那些事儿

2020-3-26 11:30:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索