- 设计理论 -

几招搞定图文组合

作者:刘清 原文出处:海盐社
2018-07-20

21.jpeg

在界面中图文组合大多占据界面很大的位置,在这篇文章中,我将给大家列举几个对界面中,图文组合处理方式和思考。

目录

1、图文的取舍

2、5种图文处理方式

3、总结


01 图文的取舍

通常情况下,如果我们直接将文字添加在图片之上。会遇到,各种各样的麻烦,比如说下面这张图片,直接添加文字是没有问题的。

640.jpeg

但如果,我画面中白色区域的范围扩大,就像下面这张图片一样。直接添加文字的方式,就会变得很有局限。

640-1.jpeg

那么我在他们之间,做一些处理,使文字更加清晰可见的话。那背景中的图片,就会受到一定程度的影响。

640-2.jpeg

上面的例子可能过于极端,但在我们进行界面设计的时候,你就应该考虑到,你所叠加的图像是不能够被控制的,那就意味着,一旦你决定将图片添加在文字之上,图像和文字就必定会有一个受到影响。

在这个前提的基础上,我给大家列举了几种图文组合的处理方式。

02 5种图文处理方式

1、灰度平衡

如果我们的图片是不受控制的,那么我们可不可以直接直接牺牲图片颜色,直接把图片做一个灰度处理,形成一个统一的,可控的,设计模式。

640-3.jpeg

优点:

能保证文字清晰度

统一了界面中的图片风格

缺点:

完全牺牲了图片的颜色

风格太过于个性受众群体较小

2、文字覆盖图像

文字覆盖图上不是说,将文字铺满整个图像,而是,在有文字的地方相对文字的背景做一些处理。好保证文字能够清晰可见。

640-4.jpeg

640-5.jpeg

在这里,我建议使用一个渐变蒙版仅遮住有文字的地方。这样能很好的保证了文字的识别度,也尽量做到了,不去影响图像。

使用实例:

640-6.jpeg

优点:

简单常用的解决方法

能很好保证文字的可读性

40%到0%的不透明度变化几乎是不明显的

缺点:

太深的渐变会造成画面分割

蒙版的位置不能太高(建议最多不要超出图片高度的一半)

3、蒙版覆盖图像

当画面中的图片对你来说不是那么的重要的时候,你可以选择不同的蒙版来遮盖住图像,优先保证文字标题的可读性。

下面这个例子 使用了不透明度40% 的纯黑色蒙版,当然你也可以选择其他颜色或渐变来遮盖住图像。

640-7.jpeg

其他的覆盖方式:

640-8.jpeg

使用实例:

640-9.jpeg

优点:

强烈的文字对比

能弥补图片不是很清晰的情况

更好的突出品牌色(在使用品牌色的情况下)

缺点:

只有文字成为优先级时才能使用

完全牺牲了图像,使图像成为了背景。

4、文字突出显示

前面我们也说了,要想图文都能清晰易读,关键是要提升两者的对比度。而文字突出处理的方式就像是,我们在课本上用荧光笔画笔记一样,把文字单独做出区分如下图。

640-10.jpeg

当文字内容比较短的时候,显示的效果最好。如果文字内容比较多的话,就要占具图像大部分的版面(如下图中的马蜂窝旅游App)

使用实例:

640-11.jpeg

优点:

很好的保证了,文字与图片的清晰度

强烈的对比

缺点:

文字不能太多

文字底色过于突出时,会导致太强眼,而使图像和文字断开

5、图文提炼组合

好吧~我知道看到现在上面的几种方式,都不能满足各位最求完美的设计可人儿。

那您大可尝试把文字和图片分别提炼出来,处理之后再组合。

使用实例:

640-12.jpeg

上面列举了好好住 App 和 饿了么 App ,他们分别使用了两种不同的技巧,图片组合和插画组合。这样图文的做法对文字和图片都能很好的保证显示的平衡。

优点:

文字和图片都能清晰显示

对文字和图片的可控力最大化

缺点:

耗费设计资源

总结

希望前面所提到的几种处理方式,能让您在设计时更好的对图像和文字做取舍。面对不同的情况是使用颜色叠加一个品牌色来更好的烘托品牌气氛,还是使用渐变蒙版?使用模糊效果是个不错的选择,但在安卓系统下是否适用?这些都是我们设计中应当去考虑的。

同时,如果还有其他的处理方式我没有列出,也希望大家能留言提出。

附:案例图片源文件

https://pan.baidu.com/s/1jrLScbkCarTUSxausdoiAA  密码:ig3t

22.jpeg

海盐社.jpeg

喜欢就分享
精选评论