提升界面B格 图文设计的10个技巧

很多的设计师选择创造一个简约清爽的界面来展现风格。而想营造这种感觉,最常用的手段就是通过图文结合的设计方式来呈现效果。不过想让图文更协调,达到满意的程度可并不容易,稍有不慎就会出现画虎不成反类犬的尴尬情况。笔者这里就通过10个具体的图例来说一说使用图文结合达成目标效果的10个技巧。

1.文本与图片达成强对比

首先,文本必须具备高可读性。文本作为前景,而图片作为背景,两者之间的对照感一定要明显。如果图片是深色,那么字体最好使用浅色。如果图片使用浅色,那么字体最好使用深色。

为图片配上文字,往往是为了更好的解释说明,增强对照感,让用户浏览时能够更好的结合两者,阅读出想要表达的信息。

2.让文本与图像成为一体

这种方法可以让文本和图像更好的融合。先决条件有二:1.图片要像McLaren那样简单,便于后期处理 2.图片中本身就带有文本,比如说Toast网站的这张背景图片。

3.文字摆放位置,符合图片的视觉流

文本不能阻碍图片的主要视觉元素。因此,在文本排版时,要根据图片的视觉流而定。文本一定不能挡住图片的关键部位,比如说一张脸、一款产品。

图2这款设计比较具有代表性,将文字放在了人物视线所到之处,很巧妙。

4.图片模糊化,突出文字

这可能是最简单的技法,只需要用PS把背景加一个几像素到十几像素不等的模糊即可,但就是如此文本就能从背景中脱颖而出。而Wallmob(图2)的网站更加巧妙,背景模糊处理,产品和文本却没有,打造了有效的视觉焦点。

5.制作文本框

当图片的色彩过多,深浅差异不一时,用诸如文本框、色块、几何图形等将文本包裹起来,这样文本就能凸显出来。文本框的颜色要和文本有所对照。文本框最好是透明的,这样用户隐隐约约也能看到背景全图。

6.将文字融入背景中

这是个非常精妙的技法。大部分时间,文本都做为前景而存在。背景一般色彩简单、主要为烘托前景而存在。但有时候,巧妙的设计,让文字看起来像是背景的一部分。这种方法能让平面作品看起来有一定的深度。

7.字体超大尺寸

如果拿不准,那么最稳妥的做法就是使用全背景图片加大字体。有视觉冲击力的同时更能有效的打造视觉焦点。如图上,主题信息展示简单,粗暴。

8.添加文本色

如图1将文字与背景色达成统一,如图2将文字与背景色形成对比。

9.偏色背景

为图像增添偏色效果,然后再将文字覆盖于上,这样文本就得以凸显。覆盖色的透明度要把握好,如果透明度过高,那么文本不可读,过低,图像看不清。而且最好选用和品牌相关的颜色。

10.不做修饰

不做修饰不做说不做任何设计,而是采用最简单的设计。背景突出主题,在主题旁配上文字,简简单单,但反而有一种清新的感觉。

以上的十种技巧在使用时注意把握好背景图的选择以及想要表达的主题,尤其在色彩上需要小心选择。

推荐阅读:

10个让人身临其境的404页面

HTML5在线学习网站推荐

八年创作:大圣归来原画手稿

著名网站的颜色搭配方法


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值