设计入门读书笔记

写给大家看的设计书

Robin Williams 把非专业设计者最需要的东西压缩成四条原则。它们不是审美主张，而是一份可以逐条对照的检查清单——四条的英文首字母恰好拼作 CRAP。

对比 Contrast 重复 Repetition 对齐 Alignment 亲密性 Proximity

概览

CRAP 四大设计原则

书里的讲解顺序是从亲密性开始的——它最容易做，也最先出效果。四条原则彼此咬合，很少单独起作用。

对比 Contrast

建立视觉层级

页面上的不同元素之间要有对比效果。如果两个项不完全相同，就应当使之截然不同。

  • 字体大小
  • 颜色深浅
  • 粗细对比

重复 Repetition

建立统一性

在整个作品中重复使用视觉要素（颜色、形状、字体等），增强作品的统一性和条理性。

  • 颜色主题
  • 字体样式
  • 图形元素

对齐 Alignment

增强一致性

每一项都应与页面上的某个内容存在视觉联系，避免随意放置，打造清晰精致的外观。

  • 左对齐
  • 右对齐
  • 居中对齐

亲密性 Proximity

组织信息

将相关内容组织在一起，使其物理位置接近，形成视觉单元，帮助读者理解信息关系。

  • 信息分组
  • 合理留白
  • 层次清晰

原则一 · Proximity

亲密性：把相关的东西放到一起

将相关的项组织在一起，移动它们使物理位置相互靠近。这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。

间距均等

标题、日期、作者、正文以同样的间距均匀排开，读者无法判断哪个属于哪个。

按关系分组

把作者和日期收拢到标题下面，让空白本身说明分组——修正方式不是加线框，而是调整间距。

四个要点

  1. 不要畏惧留白

    空白不是浪费，而是设计的重要组成部分。

  2. 信息逻辑分组

    通过空间距离体现信息之间的关系。

  3. 减少视觉单元

    页面上独立元素越少，设计越清晰。

  4. 引导视线流动

    空白可以引导读者的视线，使页面更易读。

自查方法

眯起眼睛看你的设计，数一数有多少视觉元素。如果超过 3–5 个独立的组，考虑进行合并或重新组织。

原则二 · Alignment

对齐：每个元素都要有视觉联系

每一项都应与页面上的某个内容存在视觉联系，避免随意放置，这样才能打造清晰精致的外观。

左对齐

Flush Left
左边形成一条清晰的隐形边界线，是最常见也最稳妥的选择。
推荐使用

右对齐

Flush Right
营造独特精致感，适合与左对齐元素形成有意的对比。
适度使用

居中对齐

Centered
正式、稳重，但两侧都没有边界线，容易显得乏味。
慎用

检查清单

  1. 不要在同一页面混用多种对齐方式

    选定一种并贯彻到底，混用会让隐形边界线互相抵消。

  2. 养成为元素画对齐线的习惯

    在草图上拉出参考线，看每个元素是否落在同一条线上。

  3. 检查每个元素是否与其他元素存在对齐关系

    孤立的元素会显得是被"扔"上去的。

原则三 · Repetition

重复：让视觉要素反复出现

在整个作品中重复使用视觉要素，增强作品的统一性和条理性。重复不是复制，是让读者认出"这是同一套东西"。

可以重复什么

  1. 字体样式

    标题与正文各自固定一套，不随页面变化。

  2. 颜色主题

    品牌色与强调色的用法保持一致。

  3. 图形元素

    线条、形状、图标的风格统一。

  4. 空间关系

    间距与对齐方式在各页之间可预期。

重复的作用

  1. 增强统一性

    把各个部分联系起来成为一个整体。

  2. 增加条理性

    重复元素成为视觉线索，帮助读者浏览。

  3. 引导视线

    在不同页面重复出现，引导有序阅读。

  4. 建立品牌形象

    在系列材料中反复强化认知。

强化已有元素

发现设计中已经出现的重复项，使其更突出、更鲜明。

创造新元素

设计独特的图片风格、特殊的字体处理等，再让它反复出现。

避免过度重复

过度重复会造成视觉疲劳，需要与对比结合使用。

原则四 · Contrast

对比：不同就要截然不同

如果两个项不完全相同，就应当使之不同，而且应当是截然不同。对比既能增强视觉效果，也是建立层次、引导视线的主要手段。

大小

大 小
字号差距要拉开，相差两三档才看得出是刻意的。

粗细

粗 细
跳过中间字重，直接用最粗与最细。

结构

Serif Sans
衬线与无衬线是字体骨架层面的差异。

形状

ABC abc
全大写与小写的外形轮廓完全不同。

方向

水平 斜体
排列方向或字形倾斜都能构成对比。

颜色

明度差比色相差更可靠——去色后仍要能分辨。

对比要强烈

避免过于细微的对比，让差异足够明显。

避免冲突

差异不大不小，会产生冲突而不是对比。

注意层次

对比服务于信息层次，确保重点真的被突出。

延伸 · Color

色彩运用

网页显示走 RGB，但配色关系（互补、三色组、类似色）通常参考传统的 RYB 色轮——两套体系服务于不同目的，不必混为一谈。

科学色轮

屏幕显示 · 加法混色

红、绿、蓝三原色叠加得到白色，是网页与一切自发光设备的基础。

  • 红 R
  • 绿 G
  • 蓝 B

艺术色轮

传统美术 · 减法混色

红、黄、蓝三原色，是配色理论与色彩和声的基础，印刷则用 CMYK 四分色实现。

  • 红 R
  • 黄 Y
  • 蓝 B

互补色

色轮上正对面的两色，对比最强烈。

三色组

色轮上彼此等距的三色，活泼且平衡。

类似色

色轮上相邻的颜色，整体协调不刺眼。

暖色

具有前进感，更醒目、积极，容易抢占注意力。

冷色

具有后退感，更冷静、专业，适合做背景与大面积底色。

延伸 · Typography

字体设计

六大字体类别，以及搭配它们的三种结果。下面的样例依赖你系统里已安装的字体，实际显示可能与描述略有出入。

Aa 字

旧式体

Oldstyle

基于手写体，有明显衬线，适合大量正文。

可读性高

Aa 字

现代体

Modern

衬线极细，粗细对比剧烈，外观冷峻高雅。

不适合大量正文

Aa 字

粗衬线体

Slab Serif

衬线粗且方正，简洁直接，分量感强。

常用于儿童图书

Aa 字

无衬线体

Sans Serif

没有衬线，干净现代，笔画粗细均匀。

屏幕阅读友好

Aa 字

手写体

Script

模仿手写笔迹，装饰性强，气氛感强。

不适合大段文本

Aa 字

花体

Decorative

装饰性极强，传达鲜明情绪，个性突出。

特定场合使用

协调 Concordant

只用一种字体家族，整体平和正式。

安全，但可能乏味

冲突 Conflicting

使用相似但不相同的字体，差异不上不下。

应尽量避免

对比 Contrasting

通过明确的字体差异强化视觉区分。

用于建立信息层级

排版基本规则

  1. 标点后只留一个空格

    打字机时代的两个空格已不适用于现代排版。

  2. 使用印刷体引号

    用弯引号（“ ”）而不是直引号（" "）。

  3. 避免整段全大写

    全大写抹平了单词轮廓，明显降低可读性。

  4. 不用下划线表示强调

    下划线会切断字母降部，改用斜体或粗体。

应用

实践应用

同样四条原则，落到不同载体上的侧重点各不相同。

名片设计

10–11 磅字体，去除一切冗余信息。

信笺信封

与名片风格保持一致，统一整体形象。

传单设计

有趣的字体，放大图片，留足空白。

新闻简报

重复元素，一致对齐，易读的正文字体。

宣传册

选对折叠方式，突出重点信息。

明信片

独特形状，明亮颜色，信息尽量简洁。

报纸广告

利用留白制造对比，避免过小的字号。

简历设计

用对比突出重点，结构清晰专业。

设计流程

  1. 创建中心点

    先确定读者最先看到什么。

  2. 信息分组

    按逻辑关系把内容归并成组（亲密性）。

  3. 建立对齐

    为所有组拉出统一的隐形边界线（对齐）。

  4. 创建重复

    让视觉要素在页面之间反复出现（重复）。

  5. 建立对比

    最后拉开差异，让视线落到该落的地方（对比）。

小结

设计要诀：不要畏畏缩缩

初学者最常见的失误不是做错，而是做得不够——差异拉不开，留白不敢留。适度放大差异，信息层级自然就清楚了。

对比

截然不同

重复

统一协调

对齐

视觉联系

亲密性

逻辑分组

资料来源与整理说明

本文依据 Robin Williams 的《The Non-Designer's Design Book》（中文书名《写给大家看的设计书》）整理，是本站围绕 CRAP 四大设计原则所作的读书笔记；不同版本的章节与译名可能略有差异。

字体类别示例依赖读者系统中已安装的字体，实际显示效果可能与描述不完全一致。