佳佳的博客

Appearance

写给大家看的设计书 -- Robin Williams ​

[美] 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 种颜色组成的就是最基础的色轮。

  • 互补色（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 大小等产生的。