实用UI设计法则（下）

本文编译自Medium，作者是一位UX（User Experience，用户体验）设计师，他通过自己学习UI设计的过程，总结出7条实用的法则，为UI设计新手提供了宝贵的经验。文章分为2个部分，前几天分享了第一部分，今天是终结版，来学习咯！

第一部分：

实用UI设计法则（上）：http://www.16xx8.com/photoshop/jiaocheng/2014/135206.html

以下是 UI 设计入门你需要掌握的 7 条法则：

光线来自天空（第1部分）黑白优先（第1部分）增加空白空间（第1部分）学会在图片上呈现文字做好强调和弱化只用合适的字体像艺术家一样偷师

法则4：学会在图片上呈现文字

在图片上优雅地呈现文字并不容易，这里给出6种方法。

如果你想要成为好的 UI 设计师，你必须学会在图片上美观地呈现文字。优秀的设计师在这方面做得都不错，而水平较低的设计师往往在这方面也比较差，甚至完全不会。在学习了这部分以后，相信你会有很大的提升。

方法0：直接在图片上放文字

我很犹豫要不要讲这种方法，因为应用起来十分困难。不过直接在图片上放文字从技术上来说也是可行的，下面这个网站的首页就很不错，所以说说也无妨。

直接在图片上放文字时，有几点需要非常注意：

图片应该比较暗，而且颜色不能有太大的反差。文字必须是白色的，我知道你也能找到用其它颜色的案例。但是我觉得，你最好还是用白色。在不同屏幕，不同尺寸的窗口调试页面，确保各种情况下文字都是清晰、易于辨识的。

上面这 3 个方面调整好就 OK 了，不要再做其它处理。

我自己从来没有在任何专业的项目上直接把文字放在图片上，这种方法是可行的，也能做出酷炫的效果，但还是小心点。

方法1：暗化整张图片

可能在图片上放文字最简单的方法就是暗化整张图片，如果原图颜色不够深，你可以用半透明的黑色在上面覆盖一层，比如下面这个案例就加了一层不透明度 35% 的黑色。

如果你直接放原图，底色太亮，和文字的反差不够明显，看不清文字。

类似的方法同样适用于小图。

加一层黑色是最简单、普适性最强的。当然你也可以用其它合适的颜色，比如这样：

方法2：给文字加个框

这是一种简单有效的方法。在白色文字下方加上一个略透明的黑色方块，就可以放在各种各样的图片上了，而且显示效果非常清晰。

当然，你也可以放别的颜色，只是需要小心谨慎。

方法3：虚化图片

虚化图片是增加文字易读性的好方法，把文字下方的图片虚化了，同时把虚化部分亮度调低。

iOS 7 用毛玻璃的效果虚化了背景，而 Windows Vista 也使用了这种虚化效果。

虚化图片的方法也有局限性，你需要确保在不同屏幕上图片尺寸调整后，文字依然是在虚化的区域上的。

看看下面这个例子，你能看清小标题吗？真不知道这样的设计是怎么通过审核上线的。

方法4：底部褪色

所谓底部褪色是将图片的下边缘变暗一些，然后在放上白色的文字。这是一种非常有独创性的方法，我不知道在 Medium 之前有没有人用过，但我是先在 Medium 上看到的。

乍一看，你可能觉得这就是把文字放在了图片上。其实不然，图片上有一些非常细微的变化，中间完全没有黑色覆盖，而底部有不透明度大约 20% 的黑色覆盖在上面。

这样的变化很难看出来，但确实存在，而且确实提高了文字的可辨认性。

此外，Medium 还给文集图片上的文字加了些许阴影，进一步提高了文字的易读性。最终的效果就是 Medium 可以把任何文字放在任何图片上，阅读体验非常好。

有人可能会问了，为什么是把图片的底部变暗呢？为什么不能是图片的其它区域？要回答这个问题，请看法则1：光线来自天空。光线从上面照下来，图片的上方亮一些，而底部较暗，看起来更自然。

此外，你还可以把虚化和底部褪色结合起来，做出底部虚化的效果，比如下面这张图的效果：

方法5：把图片部分区域的光线变得更柔和

Elastica的博客的题图并不是太暗，而且对比都较强。为什么文字的辨识度还这么高呢，就像下面两张图显示的这样：