我们今天来讨论设计简洁干净UI的规则：了解在图像上叠加文本的方法；使文本弹出和不弹出；只使用好的字体；像艺术家一样窃取。

一:了解在图像上叠加文本的方法

如果你的目标是成为一名优秀的设计师，那您必须学习如何以吸引人的方式，将文本放在图像上。这是每一个优秀的设计师都应该做好的事情，当然，这也是很多初级设计师都会遇到的问题！

方法1：直接将文本应用与图像

什么？这也叫一种方法？不得不说，这是最基本也是最有效的方法之一，这也是为什么我把它放在第一条的原因。

确实有点难以阅读

在使用此方法需要主意的问题：

图像和文本有一定的明暗对比度，一般情况下，图像应该是整体暗色调的，文字以白色为主;

在多种屏幕尺寸下，都保证文字都可读性；

我曾经在很多项目里面都使用了这个方法去添加文字，它也能够给观这呈现一个很酷都画面，但在实际使用过程中，也要控制使用量。

方法2:覆盖整个图像

将文本放在图像上最简单的方法就是直接覆盖图像。如果原始图像颜色不够深，则可以用半透明但黑色覆盖整个图像。

如果你看到这个原图的色调，你会发现原始图像太亮并且对比度太高，使得文本难以辨认。但是覆盖一个黑色的半透明图层，那就不存在这个问题了。

此方法也可以适用于缩略图或小图像。

尽管黑色覆盖层是最简单和最通用的方法，有时候使用彩色覆盖层，也会得到意想不到的效果。

方法3:文本框

这个方法更简单，也会更可靠。使用一个温和透明的黑色矩形，在上面添加白色的文字。如果叠加层不够透明，不管下面是什么图像，都可以保证文字的清晰可读。

当然也可以使用一些颜色，只是在选择色彩时候要有依据。

方法4:模糊图像

当我们把底层图像模糊处理之后，上面当文本清晰度令人惊讶。

Snapguide中的大量模糊叠加。请注意，模糊区域也变暗。

苹果从iOS 7开始的背景变得模糊不清，ie浏览器也使用它起到了很大的作用。

还可以直接在照片的非聚焦区域作为模糊图层部分，这对图像和版式布局的切合度要求更高。

我们要保证文本始终位于模糊之上，这样，你就可以很清晰的阅读文字部分了。

方法5:底图褪色

把底层图像的某部分巧妙的淡化为深色，然后在其上面放置白色文字。这是一个巧妙的办法，在很多网站都有应用这个方法。

对于上面的图像，你可能会觉得就是直接在图像上放置了白色的文字，其实不然，你仔细看，你会发现其实是一个由0%不透明度到20%不透明度渐变的矩形框。

这个操作非常的微妙，在不影响整体美观但前提下，确保了易读性。

二:使文本弹出和不弹出

这里的弹出和不弹出指的是文本的吸引度，也就是如何让我们想要让观者看到的部分突出，其它部分层级降低。

文本的表现在很多地方都以对比的形式来呈现。只要你接触过设计，你就一定知道如何来控制文本的层级：

尺寸对比（更大或更小尺寸）

颜色对比（明度对比最为显眼）

文字字重（粗字体和纤细字体）

字间距（通过距离来区分块）

当然还有一些其它的，如文本斜体、边距、下划线等等。

我们想要突出或者降低某个部分视觉层级，往往不是通过某一种样式来达到的，都是多种样式的组合表现。

图片中页脚部分的文字体积小、对比度低、字体重量就显得不那么大。

Blu Homes是一个设计的无可挑剔的网站，它有一些很棒的标题，但强调的字体是小写的。如果此处用大写字体，则过分强调看起来过于强烈。

三:只使用好的字体

在设计过程中，字体的选择有时候足以影响到整个画面的效果，而我们的策略就是，找到好的字体，只使用它们。

四:像艺术家一样窃取

其实对如何使该元素看起来更好知之甚少。但是幸运的是，这意味着我们总能看到其他人如何做到这一点，并且从最佳状态中挑选出来。

但是如何去选呢？以下是我在为客户设计的时候发现的最有用的资源：

1、Dribbble

这个一个仅限邀请的“为设计师展示和讲述”的网站，你可以在这里找到几乎所有东西的好例子。

2、Pttrns

下面是一个移动应用截图的目录。关于Pttrns的好处是整个网站布局统一，这使得它每一个页面都处理的非常好，无论是登录页面，用户配置文件，搜索结果等。

我坚信每个艺术家都应该成为一只鹦鹉，直到他们懂得如何去模仿的。然后去寻找自己的风格，发明新的设计趋势。在此之前，让我们像盗贼一样去“窃取”好的创意。