这里实际上是把图片局部区域的光线变得更柔和，突出了文字。如果我们在浏览器上缩小 Elastica 博客，会看出到底发生了什么。



　　在图片左下角有一块阴影区域，文字置于其上，就很容易辨认了。

　　这可能是在图片优雅呈现文字最细微的一种方法。我还没在别处见过，保存下来，说不定将来什么时候就用到了。

法则5：做好强调与弱化

　　把文字设计得又美观又得体通常就是通过放大或缩小文字，做出反差的效果。

　　我认为，UI 设计最困难的地方就在于文字的装饰，因为设计文字时需要考虑的因素太多了：

　　字号
　　颜色
　　字体粗细
　　大小写
　　斜体
　　字母间距
　　页边空白（准确的说不是文字的一部分，但是容易影响阅读时的注意力，所以也算在这个列表里了）

　　还有其它一些方法调整文字吸引读者的注意力，但是不常用，也不推荐你使用。

　　下划线。下划线现在基本上等同于超链接了，我觉得你还是不要挑战人们的常识比较好。
　　文字背景色。这个有时候也被当作超链接，只不过不是那么常见。
　　删除线。一边待着去吧，你这个怪人。

　　就我个人经验来说，当我觉得一段文字设计的不好时，通常不是因为用了大写字母，或者颜色太重，而是因为各种要素的搭配出了问题。

强调和弱化

　　你可以把所有的文字样式分成两类：

　　增强可读性的样式：大字号、粗体、大写等；
　　减弱可读性的样式：小字号、与背景对比不明显、空白较少等。



　　上图“Material Design”这个标题就很突出：字号大、反衬明显、字体较粗



　　上图页脚的字就是弱化处理的，字号小、反衬不明显、字体较细

　　我认为文字设计的核心在于：

　　标题是唯一需要全部强调的元素，其它的部分则应该将强调与弱化结合使用。

　　如果网页上某个元素需要强调，把强调和弱化结合在一起，可以避免整个页面看起来太有压迫感，同时又让各个元素的呈现效果恰到好处。



　　下面这张 Blu Homes 的首页堪称是这方面的典范：上方文字较大，突出显示，但是用了小写字母。没有给人强烈的压迫感。



　　网页上的数字字号较大，是网页上的重要信息。但是请注意，数字的字体很细，与背景色对比也不明显；而数字下方的单位虽然写得很小，却全部加粗，用大写字母。

　　这就是设计中的平衡。


　　
　　上面这张图是 Contents Magazine 的网站，也是学习强调和弱化的一个好案例。

　　文章标题是唯一没有用斜体的部分，而且还做了加粗处理，更容易吸引读者的关注。
　　作者姓名写在文章标题下方，字体加粗，与没有加粗的”by“区分开来。
　　“ALREADY OUT”独立出来，字号很小，与背景区分不明显，但是用了大写字母，字间距很大，文字外围空白较多，当你想要找它的时候一眼就能看见。

鼠标悬停或选中时的样式

　　设计鼠标悬停或选中时的样式也是同样的道理，只不过更难一些。

　　通常情况下，改变字体大小、大小写、粗细时会改变文字所占空间的大小，让人们理解鼠标正悬停在这里。

　　此外，下面这些要素也能够影响人们的感受：

　　文字颜色
　　背景色
　　阴影
　　下划线
　　细小的动画——上升、下降等

　　这里再推荐一个比较普适的方法：给白色的元素上色；或者当背景颜色较深时，把有颜色的内容变成白色。



　　装饰文字是非常难的，但是每当我感到“这些文字不可能再变好看时”，我的判断都是错的。我需要做的就是不断优化，不断尝试。

　　所以想开点吧，如果你设计出来的文字不好看，不要担心，你需要不断地提升自己的能力，让自己变得更好。

法则6：只用合适的字体

　　有些字体很不错，就用它们吧。

　　注意:这一部分没有太多知识要学，我只是给你推荐一些好用的免费字体给你。

　　有的网站很有个性，会用到比较特别的字体。但是，大多数产品的 UI 设计只要保持干净、简洁就可以了。所以，把那些太花哨的字体放到一边吧。

　　我在这里推荐一些免费的字体。因为这篇文章是为初学 UI 设计的人所写，这些免费的字体完全够用了。

　　我希望你把这些字体下载下来，在你开始项目设计之前，浏览一下它们。



　　以下是我推荐的字体：



　　Ubuntu（上图）——字体偏粗，对于有些 app 来说太张扬了，但是对于大多数 app 来说还是不错的。在 Google Fonts 上可以找到。



　　Open Sans——非常易于辩读，是一款很流行的字体，用在正文非常合适，在 GoogleFonts 上也能找到。


推荐阅读：看过各大车展车载交互系统，后装车机更有戏了
更多讨论内容请点击：http://bbs.carcav.com/read-htm-tid-958420.html