3. 文字

（1）文字的定义

文本是站点的主要内容载体；字体设计自然也是重中之重。

既然我们在讲设计体系，以一致性为目标。那么同样地，我们也要把站点所使用的字号、字重等范围框定在数十个选项中。

数十个是个 magic number，大部分情况下应该都能满足。只要场景够特殊，特殊字体完全可以再加。

（2）文字的一些规范

1）文字——选项设计

相比于间距设计，字号大小我们有一个明显的适合阅读的字号范围，如 12 ~ 20px 。那么我们会更多在这个范围内设置字体选项。

来看下选项设计的10大范围，如下图所示：

但是呢，仅通过字号来设置层级，很快就会捉襟见肘。因此我们要结合字重 & 颜色（灰度），你会更加地游刃有余。

字重是 css 自带的，用好常用的 3、4 个尺度就好了。

来看一个例子：

大家可以看到，在右边的这张图当中，我们适当的使用了字重和颜色，以使得页面的内容更突出，内容更为饱和。

2）文字——对齐

不同字号大小的字体间如何对齐呢？我们应该要基于 baseline 对齐，就是文本的下边缘。

baseline 是一个字符的重心；重心对齐了，用户在移动视线时就能有平稳的阅读体验。

来看一个例子：

3）文字——行高

基本上，对于所有的文本设计来说，其意图都是为了保持良好的阅读体验，那么行高也不例外。

具体到设计哲学，就是：行高和字号大小大致成反比，目标是用户在视线换行时有稳定的下移体验。

4. 色彩

现在，到颜色部分了，谁不爱颜色呢？同样地，与上面一样的归纳步骤，我们来对颜色进行一个归纳。

（1）颜色选项——灰色

在你的色彩库中，应该要有10种左右的灰色来提供使用，并且这些颜色从文字到背景都用得上。如下图所示：

（2）颜色选项——主题色

大部分站点都少不了一两个贯穿全局的主题色；它出现在按钮、logo、背景、各种修饰元素之上，是品牌的记忆元素。如下图所示：

（3）颜色选项——功能色

有一些常见的颜色，被广泛地用来表达某些固定的语义信息。

红色，传达错误信息，或提示危险操作。

黄色，表示警告。

绿色，表示一些积极的变化，以示成功或增长的信息。

如下图所示：

（4）使用色盘

前面我们准备好了这么多由深入浅的颜色，那该如何使用呢？

我们可以作为前景和背景色来使用。主要标题可以用最亮的白色；次要标题挑一个背景颜色的浅色版本。

如下图所示：

再来看另外一种用法，即浅色背景深色前景的用法。浅色色块相较于白色背景对比度不大，适合不用过于抢夺眼球的场景。如下图所示：

（5）使用颜色的注意事项

颜色虽好，但使用不当会很容易打破页面层级的平衡。来看一个例子：

还有一种情况是，色盲的用户消费不了颜色，颜色在不同的文化中可能表示不同的含义。如下图：

大家可以看到，在上面这张图中，左上角的图是我们普通用户所看到的图，而左下角的图是色盲用户所看到的图。

5. 深度

（1）例子阐述

制造深度的技巧，八成与阴影设计有关。

深度补充了间距，从另一个维度上体现了层级。这是为什么？

这种深度的感官来自日常生活。平时我们是怎么感受平面上的深度的？答案是：自上而下的光照打 。

在平面上所造成的阴影。模拟这个现象，我们便可以实现网页元素的「深度」体验。

来看一个例子：

大家可以看到，在上面的这张图中，它的的光就是自上而下的光照打。

（2）阴影选项

下面我们来看一些常见的阴影选项。如下图所示：

看了上面的一些常见选项后，我们现在来梳理各种大小的阴影所造成的影响。具体如下：

• 小的阴影可以使元素略微突出，但不至于抢夺眼球。
• 中等阴影适用于小型弹出的模块，如下拉框。
• 最深的阴影则用于彻底地将模块与页面区分开来的场景。

如下所示：

🐾五、实用技巧

1. 图片上的层级

如果我们遇到图片上的色块斑驳不一，难以找到合适的前景色。这个时候我们应该咋办哩？

比如下面这张图：

下面我们来介绍解决这种问题的几种方法。

（1）增加蒙层

我们可以通过增加蒙层，来显示图片的层级。如下图所示：

（2）给文字加阴影

除此之外呢，你可以选择给文字加上阴影。 css 可以轻松地做到，只增加文字部分的对比度，而不影响整张图片的阅读体验。

如下图所示：

2. 用户头像

不管是在什么样的 app ，我们基本上都有上传图片的环节。那么，如何使得在任何的情况下，都能够清晰地展示用户头像里面的内容会是一个问题。

我们先来看这张图：

大家可以看到，在上面的这张图中，有一些用户头像出现了空白，这样间接地会使得我们不清楚整个用户头像实际上的尺寸是多少。

由小伙伴可能会首先想到，加个 border 。但加个 border 呢，又有点差强人意了，不一定能搭配好。

有个好方法就是，加点内阴影。相当于圈用户头像的外层做边框，这就非常精巧了。

3. 强调线

有时候，我们会很喜欢把表格类的设计给加上一些边框和分界线，但是这似乎看起来 a little 土。如下左图所示：

大家可以看到，加了边框，就很像传统的 table 一样，有一点点不美观。

所以呢，如上边右图一样，我们可以用阴影或者不同的背景块来代替边框。这样，间距其实也就清晰了，所以我们也就不需要什么分界线了。

🖌️六、资源

1. 译作推荐

在上面的这篇文章中，大部分内容来自于下面这篇译作。想深入了解的同学可以进一步观看。

给开发看的 UI 设计 · 语雀

2. 书籍推荐

前面我们也稍微提到过这本书，这里推荐给大家👉写给大家看的设计书(第4版) (豆瓣)

3. tailwindcss

tailwind 的 utility class 设计，深度实践了本文所讲的设计体系。

它的官网里面还有很多设计资源👉taildinwcss 设计框架，大家可以进一步学习查看。

同时呢，小伙伴们还可以了解来自 tailwind 作者的著作，Refactoring UI，它是本文的基础。

⛱️七、结束语

在上面的文章中，我们讲到了 UI 设计与前端的关系，同时呢，还讲到了设计中的一些功能导向，以及设计原则，设计体系。最后，我们还讲到了处理图片和表格的一些实用性技巧。

到这里，关于给开发人看的 UI 设计讲解就结束啦！希望对大家有帮助~