ui设计师做什么 打造出色 UI 的 7 个法则(下)

这篇文章让你在不必去上艺术学校的课程情况下，可以设计出简洁优美的UI。这是《打造出色UI 的7 个法则》的下篇，点击这里阅读上篇。

这七个法则是（本文讨论4-7）：

1.光线要由上往下（见第一部分）

2.黑白优先（见第一部分）

3.空白的面积加倍（见第一部分）

4.处理好图片上的文字

5.突出与淡化文本

6.只用优秀字体

7.像艺术家一样偷师

4：处理好图片上的文字

能够完美的处理好图片上的文字的方式很有限，下面提供五个比较好的方法

和一个超级屌的方法。

如果你想成为一个优秀的UI 设计者，你就必须学会如何将文字和谐地融入图片。这个细节体现出了一个优秀的UI 设计师和一个糟糕的UI 设计师之间的区别，相信在读完这一部分之后，你将会有很大的提高！

方法0：直接将文字嵌入图片

在决定是否将这一方法加入这部分的时候，我犹豫了。不过将文字直接嵌入从技术上来说是可以的，而且看起来也不错。

使用这个方法的时候需要注意几个地方：

1.图片看起来应该偏暗，并且没有许多对比明显的边界，以免与文字混杂。

2.文字必须是白色——虽然说只要对比明显就行，但是你会发现很难找到对比明显并

且简洁美观的方案了，严格来说，只能只用这种。

3.必须从不同的屏幕大小进行测试，以保证各种情况下都清晰易读。

如果确定满足以上所有条件的话，就可以使用这个方法了。

我从没有在任何专业的项目上使用这种方法，因为要用好这个方法需要很好地控制。所以说，这个方法做出好的效果是可以的——但一定要小心使用。

方法1：在图片上覆盖一层灰色

在整张图片上覆盖一层灰色——也许是最简单的处理方法了。就是说如果原始图片不够黑，你可以将一张半透明的灰色图片覆盖在原始图片上。

这就是一个例子，在一张很时髦的图片上盖上一层灰色。

如果你使用火狐获得原始图片，就会发现原始图片太亮了，而且有许多对比明显的边界，不能插入文字。但是覆盖一层半透明灰色图之后，再插入文字就完全没问题了！

这种方法同样适用于小图片和缩略图。

覆盖一层灰色是最简单而且最流行的方法，当然，你也可以试试用别的颜色。

方法2：将文字放在有背景色的框里

这个方法非常简单，而且又非常实用。首先做一个适度透明的黑色矩形，然后在里面加上白色的文字。如果文字底不透明度适当的话，你可以将这个矩形字块添加到任何图片上，易读性都很高。

也可以将其加到别的底色中——但是，一定要判断好。

方法3：模糊图片

这个方法碉堡了——将文字下的图片一部分进行模糊处理。

IOS7中也是用了模糊的方法，Vista 系统中也用模糊处理的很好。

对于图片的焦点之外的地方也可以模糊处理，但是要注意——这个效果并不是动态的，如果图片有变动，一定要确保文字处在图片模糊的地方，像下面这样。

下面就是一个反例。我的意思是，读一下下面的小标题试试……

方法4：底部褪色

当图片下方趋于褪色或者变暗的时候可以使用这个方法，在底部直接加上白色的文字。这个方法很有才，不知道在Medium 之前是谁先使用的，我第一次发现这个方法就是在Medium。

简单一看，上面的Medium 陈列柜只是将白色的文字放在图片上，但我要说——没有这么简单！这里有个很巧妙的处理，从中间到底部有一个过渡，中间黑色的不透明度是0%，而最底部的不透明度是20%。

这个地方很难发现，但是毫无疑问提高了阅读性。

同时我也发现，Medium 的缩略图陈列柜使用文字阴影来增强文字的易读

性。这个效果可以作用于 Medium 全站，所有在图片上的文字易读性都

得到了加强。

等等，为什么要在底部进行暗处理呢？这个问题可以用建议一来回答——光照要从上到下。这样就和我们眼睛看到的大多数景象一样，底部看起来要暗一些。不自然界的事情背道而驰。更加高级的方法：将模糊和底部变暗结合在一起——底部模糊。

超级屌的方法：纱幕

Elastica 的博客标题在一个动态图片上，为什么总是能保证可读性呢？而且这个图片：

1.没有做特别的暗处理；

2.又有很多对比明显的边界。

的确，很难理解为什么文本这么易读，看一下吧：

答案是：纱幕。

纱幕是一种摄影器材，能够使光线变得柔和。现在，这也是一种可视化技术，可以让覆盖在上面的文字变得柔和。

如果我们使用浏览器将网页缩小，就能发现其中的原理。

在标题“145,000 Salesforce Users Come out to Celebrate…”下方有一个半透明的方框。在蓝色的背景下，比在图片背景下更容易发现这点。

这可能是处理图片上的文字最巧妙的方法了，虽然我在别的地方没有见过这种方法（也有可能是因为它太隐蔽了，不容易发现）。总之记下来吧，你永远都不知道什么时候会用得上。

5：突出与淡化文本

突出文字中最重要的就是将文字设计的漂亮而且大小合适——比如，加亮，

字号加大。

我想，做一个优秀的UI 中，最难的部分就是文本样式了——原因不是对方案的不熟悉，如果你从小学毕业，那么你就会用所有突出与淡化文本的方式了：

?字号（大或者小）

?颜色（强烈或者柔和的对比度；亮色总能吸引眼球）

?字体粗细

?大小写（大写，小写，或者标题形式，首字母大写）

?斜体

?字符间距

?字符边框（原则上说这并不是文本本身的特点，但是这个方法可以用来吸引注意力，所以也加到了这个列表中）

还有一些方法可以用来吸引注意力，不过除非是特殊情况，否则不建议使用。

?下划线。下划线在今天已经成了超链接的代表，非要强行让它来代表别的东西的话，很不值。

?文本的背景色。并不流行，但是37signals网站曾经将它作为一种链接的样式。

?删除线。滚开！你这种90年代的怪物！

从我的个人经验来说，当我找不到一种样式适合某一文本的情况下，通常都不是因为我没有尝试大写或者加深颜色之类的东西——而是因为最好的解决方案往往是一种矛盾的结合体，所以放开想象力去尝试不同的方案吧。

突出和淡化

所有的文本样式都可以分成两组：

?提升文本可视度的样式：加大字号，加粗，大写，等等。

?降低文本可视度的样式：缩小字号，降低对比度，线条更细，等等。

为了迎合多数设计师的喜好，这里我们就把这两种样式叫做突出和淡化。

这里，“Material Design”的标题用了很多突出的效果——大，高对比度，线条粗。

这个页面的底部就用了淡化的效果。小，低对比度，线条更细。

那么重点来了。

页面的标题是唯一一种在任何情况下都用突出的样式的，对于别的元素，你

有可能要同时用到突出与淡化。

如果一个页面的元素需要强调，突出和淡化效果都试一下吧。这不仅能减少强调效果所带来的压迫感，还能给不同的元素找到他们适合的效果。

Blu Homes 的页面设计得无可挑剔——大大的标题，但是重点的字是小写——太多强调的元素会给人压迫感。

这个页面的数字通过大小，颜色，对齐来吸引你的注意力——但是注意，这里也用了淡化的效果：相比于灰色的背景来说明亮，对比度低得线条。

在数字下面有小的文字，虽然是灰色的而且字小，却用了大写和加粗的突出效果。

这些都是做的很好地平衡。