--- > [美] Robin Williams 著苏金国刘亮译 --- 虽然不是计算机相关的书籍，但是作为 Web 开发人员，书里的部分知识经常会用到，值得去读一下。书中的一些基本原则，对于开发人员来讲虽然可能不知道这些规则，但是在开发的过程中基本上都是遵守的。比如重复，CSS 就是用来实现这个的。再比如亲密性，页面上肯定是有关系的东西放在一起的。关于颜色方面的收获比较大。自己在做页面设计时总感觉颜色选择起来很困难，也找不到规律，只能反复尝试，然后凭感觉。根据这些基础的理论去设计颜色会容易很多。字体部分都是以英文字体为例的。关于字体类别，由于 CSS 中使用字体的限制很大，基本上都是优先 `system-ui` 字体，选择的余地很小，对于国内的开发人员来说帮助不大。字体对比方面和设计人员是通用的，对于 Web 开发人员来收，最常用的就是大小、字重和颜色。 ## 四大基本原则 - **对比（ Contrast ）** - 要避免页面上的元素太过相似。 - **重复（ Repetition ）** - 让设计中的视觉要素在整个作品中重复出现。 - **对齐（ Alignment ）** - **任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。** - 在得到更多培训之前，一定要坚持一个原则：页面上只使用一种文本对齐：所有文本都左对齐，或右对齐，或者全部居中。 - **亲密性（ Proximity ）** - **将相关的项组织在一起。** - **物理位置的接近就意味存在着关联。** - 亲密性的根本目的是实现**组织性**。 ## 颜色这里的颜色使用的都是 CSS 提供的默认配色，其橙色相关的几个感觉和书上的有些差别，但应该也不会差很大。比如书上说的橙黄，CSS 默认没有提供这个颜色，个人感觉金色（`gold`）比较接近。

- **三原色（primary color）** 这是唯三无法创建的颜色。 - 黄 yellow #ffff00 - 红 red / #ff0000 - 蓝 blue / #0000ff - **三间色（secondary color）** 将色轮上相邻的颜色等量地混合，就会得到三间色。 - 黄 + 红 = 橙 orange / #ffa500 - 红 + 蓝 = 紫 purple / #800080 - 蓝 + 黄 = 绿 green / #00ff00 - **第三色（tertiary color 或 third color）** - 将相邻的三间色和三原色等量混合得到的颜色称为第三色。 - 橙 + 黄 = 金色 gold / #ffd700 - 橙 + 红 = 橙红 orangered / #ff4500 - 紫 + 红 = 紫罗兰 violet / #ee82ee - 紫 + 蓝 = 蓝紫 blueviolet / #8a2be2 - 绿 + 蓝 = 水绿 aqua / #00ffff - 绿 + 黄 = 黄绿 yellowgreen / #ff4500

### 色轮上面的 12 种颜色组成的就是最基础的色轮。 ![](/uploads/files/2023/9/29/color-ring.svg)

- **互补色（complement）** 色轮上相对（即完全对立）的颜色称为互补色。由于它们如此对立，所以最佳搭配是一种作为主色，另一种用于强调。 - 蓝 + 橙 - 红 + 绿 - 黄 + 紫 - 黄绿 + 紫罗兰 - 蓝紫 + 金色 - 水绿 + 橙红 - **三色组（triad）** 彼此等距的三种颜色通常会形成一个让人愉悦的三色组。所有三色组中的三种颜色都有基础色使其相互连接，因此看上去非常协调。 - **基色三色组（primary triad）** - 黄 + 红 + 蓝一种极其流行的颜色组合，儿童产品通常都采用这种组合。 - **间色三色组（secondary triad）** - 绿 + 紫 + 橙 - **分裂互补三色组（split complement）**：一种颜色 + 互补色两侧的颜色 - 黄 + 紫罗兰蓝紫 - 绿 + 橙红紫罗兰 - **类似色**：色轮上彼此相邻的颜色 - 水绿绿黄绿 - 暗色和亮色 - 纯色就是**色调** - 向色调增加黑色就构成了**暗色（shade）** - - 向色调增加白色就构成了**亮色（tint）** - - 单色 - **单色组合（monochromatic combination）**：有一种色调及其相应的多种亮色和暗色组成。 - 暗色和亮色的组合：使用一种颜色的不同亮色和暗色。 - **色质（tone）**：某种颜色的特定明暗度、深浅度或色调。 - 色质过于接近会导致颜色组合时发生视觉抖动。 - 暖色与冷色 - 暖色：包含红色或黄色。 - 冷色：包含蓝色。 - **冷色总趋于后退，而暖色是趋进型的。**暖色不费多大功夫就能产生效果；如果要组合暖色和冷色，一定要少用些暖色。 - CMYK 与 RGB - CMYK：Cyan（一种蓝色）、Megenta（一种红/粉红色）、Yellow（黄色）、一个 Key 色（通常是黑色）。用于印刷。 - RGB：Red、Green、Blue。用于屏幕显示。

## 字体 - **协调** - 如果选择只使用一种字体，页面上的所有元素都采用相同性质的字体，这种设计就是协调的。 - 大多数协调的设计往往都相当平静和正式。 - **冲突** - 如果在同一个页面上设置了两个或多个类似的字体，它们并非完全不同，但也不完全相同，这个设计就是冲突的。 - 协调是一个稳妥有用的概念，但冲突务必要避免。 - **对比** - 强烈的对比能吸引我们的视线。要在设计中增加对比，最有效、最简单而且最让人满意的方法之一就是利用字体。 ### 字体类别 - Oldstyle - 基于手写体创建的字体。 - 有截线，而且小写字母的截线总有一个角度（笔的角度）。 - 所有曲线笔划都有一种从粗到细的变化，技术上讲，这称为“粗细过度”。 - 如果在曲线壁画的最细部分画一条线，这条线将是对角线。这条线称为**强调线（stress）**。 - Modern - 随着印刷技术的发展，导致字体变得越来越机械。 - Modern 字体就像一座钢铁大桥，结构很严格，笔划中有剧烈的粗细过渡（或对比）。 - 由于不存在笔的倾斜；所以强调线完全是垂直的。 - Modern 字体看起来往往有一种冷酷、高雅的感觉。 - Slab serif - 粗细过渡很小甚至没有。 - 这一字体有时称为 Clarendon，因为 Clarendon 字体是这种类型的典型代表。 - 粗细对比很小的许多 Slab serif 字体可以提供很小的可读性，这说明它们可以很好地用于显示大量文本。 - 与 Oldstyle 字体相比，总的看来，设置为这种字体的页面更暗，因为它们的笔划比较粗，而且粗细相对单一。 - 由于其简洁、直接的外观，Slab serif 常在儿童图书中使用。 - Sans serif - 单词 “Sans” 在法语中的含义是“没有”，所以 Sans serif 字体就是指笔划末端没有截线的字体。 - Sans serif 字体的粗细几乎总是单一的，这说明笔划中几乎没有可见的粗细过渡，字体的粗细都一样。 - 也有少数 Sans serif 字体稍微有一些粗细过渡。 - Script - 看上去利用一个书法笔或书法刷（或者有时用钢笔或专业笔）手写的所有字体都属于 Script 类字体。 - 这一类字体还可以很容易地划分为连笔手写体、不连笔手写体、手工书写的手写体、模仿传统书法风格的手写体，等等。 - Decorative - Decorative 字体很容易看出来，如果一本书全部使用这种字体，都这样一本书让你很想把它扔掉，那就大致可以认为这属于一种 Decorative 字体。 - Decorative 字体本身很不错，它们不仅有趣而且特别，很易于使用，有时更廉价，而且你一时想表达的任何突发奇想都可以使用这种字体。 - 正因为它们如此特别，所以这种字体的使用要有限制。 ### 字体对比 - **大小 Size** - 字体大小的对比非常明显。不过，为了有效地使用大小对比，**绝对不要保守**。 - 字体大小对比并不意味着必须让字体很大，而只是要求应该有对比。 - 不要全部使用大写。 - 要以一些有煽动性的非常规方式造成大小对比。 - **字重 Weight** - 字体的粗细是指笔划的粗细度。 - 大多数字体系列都设计为包括多种不同的粗细：常规（regular）、粗体（blod），可能还有半粗体（semibold）、极粗（extra bold），或者细字体（light）。 - 结合多种不同字体粗细时，要记住一个规则：不要太保守。 - 粗细对比不仅能使页面更引人注目，也是组织信息的最有效的方式之一。 - **结构 Structure** - 字体的结构是指这种字体是如何建立的。 - 如果你要结合使用来自两种不同字体系列中的字体，就要使用不同结构的字体系列。 - **形状 Form** - 字母的形状是指它的外形。字符可能有相同的结构，但是“形状”不同。 - 可以简单地把形状对比认为是大写与小写的对比。 - 如果一个词采用全大写，整个词的形状也与小写词不同。正是由于这个原因，使得全大写很难读。 - **方向 Direction** - 字体“方向”的意思很直观，就是文字有一定倾斜度。 - 不要设置方向。 - 只有当你明确地说出原因时才可以设置有方向的文本，你要能够说明为什么这种字体必须有方向，为什么它能增加美观或促进表达。 - 向右向上倾斜的字体产生一种前进的力量。向下倾斜的字体会产生一种反向的力量。 - 请千万不要在角落里放有角度的字体。 - 不过，对于“方向”还有另外一种解释。文字复杂的方向变化可以形成有趣的对比。 - 实现字体方向对比时还可以介入布局中的其他部分，如结合图片或线条来强调方向或形成方向反差。 - **颜色 Color** - 要记住暖色（红色、橙色）是前进型的，会引起我们的注意。另一方面，冷色（蓝色、绿色）则是远离型的，总是在我们的视线中后退。 - “颜色”是由不同的字母粗细、结构、形状、字母内的空间、字母间的间距、行间距、字母大小或 `x-height` 大小等产生的。

目录