设计基础

概念

设计基础研究的是"把元素组织成整体"这件事的通用规律，不依赖于具体门类（海报、界面、版式、包装都合用）。它的两大板块：

板块	研究什么	核心问题
平面构成	点、线、面的组织	秩序从哪里来？如何制造视觉张力？
色彩构成	明度、色相、纯度关系的组织	如何让颜色彼此配合而不打架？

设计 ≠ 装饰。装饰是往已有东西上加花样；设计是从功能与信息出发，决定"谁先被看到、谁跟着被看到"。因此设计基础的每一条规律，最终都要能回答一个可检验的问题：观众的第一眼落在哪里？（色彩学里的对比度就是这个问题最硬的量化指标。）

原理

平面构成：点、线、面

一切视觉元素先归为三种基本形态，而它们的判定不取决于自身，取决于相对尺度与观看距离：

形态	特征	视觉作用
点	画面中相对最小的单位	聚焦，视线锚点
线	有长度与方向的窄长形	引导、分割、产生动势
面	有面积与形状的块	承载、稳定、构成底色

关键认识：同一个圆，在巨幅海报上是"点"，在名片上就是"面"。所以"点线面"是关系判断，不是形状属性。

三种形态的视觉性格：

• 水平线——稳定、水平感、远；
• 垂直线——挺拔、庄严、向上；
• 斜线——动感、不稳定、有纵深；
• 曲线——柔和、连续、速度变化；
• 折线——紧张、断裂、机械。

形式法则：八种组织手段

1. 重复——同一单元反复出现，产生秩序与节奏（最基本的秩序来源）；
2. 近似——单元略有差异的重复，避免呆板；
3. 渐变——形状、大小、方向、色彩按规律递变，产生空间与运动感；
4. 发射——单元从一个或多个中心向外扩散，视觉冲击最强；
5. 特异——在规律中出现唯一的例外，制造焦点最经济的手段；
6. 密集——单元疏密变化，产生明暗与张力；
7. 对比——大小、虚实、聚散、冷热的并置；
8. 分割——把整体切分为有比例关系的若干部分。

"特异"值得单独记：一百个相同元素里放一个不同的，观众必然先看到那一个。界面上"重点按钮"的本质就是特异。

比例系统：为什么是黄金比和 √2

黄金比：

$$\phi =\frac{1+\sqrt{5}}{2}=1.6180339887,\frac{1}{\phi }=\phi -1=0.6180339887$$

它的著名性质是自相似：从黄金矩形中切掉一个正方形，剩下的小矩形与原来的矩形相似（比例仍为 $\phi$）。这就是它能无限嵌套分割成黄金螺旋的几何原因。

斐波那契数列 $1,1,2,3,5,8,13,21,34,55,89,144,\dots$（每项为前两项之和）的相邻比值会交替逼近 $\phi$：

比值	数值	与 $\phi$ 之差
8/5	1.600000	0.018034
13/8	1.625000	0.006966
21/13	1.615385	0.002649
34/21	1.619048	0.001014
55/34	1.617647	0.000387
89/55	1.618182	0.000148

误差每两步约缩小到 1/2.6。这就是"黄金比常出现在自然物与人造物中"的数学来源——凡按"前项加后项"生长的结构（叶序、螺旋、层数增长），比值必然趋于 $\phi$。

√2 矩形：A 系列纸张的核心性质是"对折后比例不变"。设长边为 1、短边为 $x$，对折（沿长边中线裁开）后新矩形长边为 $x$、短边为 $1/2$，比例不变要求：

$$\frac{1}{x}=\frac{x}{1/2}\Rightarrow x^2=\frac{1}{2}\Rightarrow x=\frac{1}{\sqrt{2}}\Rightarrow \frac{1}{x}=\sqrt{2}=1.414214$$

A4 对折成 A5、A5 对折成 A6，形状完全不变——这才是 A 系列被全世界采用的原因：排版、缩放、装订只需按比例处理，不必重排。

网格系统

网格把版面切成可复用的栏位，使多个页面的元素位置保持一致（这是"系统设计"的起点，与程序里"由规则推导结构、不手写清单"是同一种思想）。

12 栏是工业惯例，理由是12 有 1、2、3、4、6、12 六个因数：可以平均分成 2、3、4、6 栏而不出现半栏，兼容性最好。

栏宽公式：

$$W_{\text{col}}=\frac{W-2M-(C-1)G}{C}$$

其中 $W$ 版心宽、$M$ 页边距、$C$ 栏数、$G$ 栏间距。

色彩构成

色彩构成研究三个维度的对比与调和（度量定义见色彩学）：

• 明度对比——最影响可读性。任何"看得清看不清"的问题，先修明度。
• 色相对比——决定情绪强度。
• 纯度对比——决定"雅"与"俗"。大面积高纯度必然显廉价，这是最常被忽视的一条。

调和手段：同一（消灭差别）→ 近似（缩小差别）→ 秩序（差别按规律排列）→ 呼应（远距离重复同一色）。"呼应"是最实用的救场手法：画面里孤零零的一个跳色，只要在对角再点一次，立刻就"成系统"了。

示例

例 1：A 系列的尺寸与面积

规格	尺寸 (mm)	面积 (mm²)	相对 A0
A0	841 × 1189	1 000 000（定义为 1 m²）	1
A3	297 × 420	124 740	1/8
A4	210 × 297	62 370	1/16

A4 面积计算：$210\times 297=\ast \ast 62370$ mm² $=623.7$ cm²**。

注意理论值与实际值的差：按"$1/16$ 平方米"应为 $1000000/16=62500$ mm²，实际是 62 370 mm²，差 130 mm²（0.21%）。原因是毫米取整：210 与 297 都是取整后的整数，$210\times 297$ 与理论的 $210.224\times 297.180$ 有极小偏差。

这个 0.21% 的偏差是"标准允许的实践误差"——做精确计算（如拼版、印刷用纸量）时必须用实际尺寸，不能想当然用 $1/16$ m²。

例 2：在 A4 上定位黄金分割点与三分点

A4 宽 210 mm：

• 黄金分割点：$210\times 0.618=\ast \ast 129.78$ mm**
• 三分点：$210/3=\ast \ast 70.0$ mm** 与 $210\times 2/3=\ast \ast 140.0$ mm**

三个数字都在 130 附近（129.78 / 140.0），说明三分法与黄金比在实用上差别不大（相差 10.22 mm，不到 5%）。

结论：选哪个取决于习惯与对齐系统，不必争论谁更"科学"。真正重要的是"选定之后全项目一致"——一致性带来的秩序感，收益远大于在 129.78 与 140 之间纠结。

例 3：12 栏网格的两组参数

印刷（A4，页边距 15 mm，栏间距 5 mm）：

$$W_{\text{col}}=\frac{210-2\times 15-(12-1)\times 5}{12}=\frac{180-55}{12}=\frac{125}{12}=10.4167\text{mm}$$

网页（视口 1440 px，边距 80 px，栏间距 24 px）：

$$W_{\text{col}}=\frac{1440-160-264}{12}=\frac{1016}{12}=84.6667\text{px}$$

网页那一组要注意"栏宽不是整数"——这在实际开发中必须处理：

• 要么让浏览器按小数布局（会出现亚像素模糊），
• 要么把栏间距或边距微调成整数，例如把间距改为 20 px：$W_{\text{col}}={\displaystyle \frac{1440-160-220}{12}}=88.333$ px，仍非整数；
• 更稳妥的做法是把总宽调成 12 的整数倍，如视口 1464、边距 80、间距 24：$W_{\text{col}}={\displaystyle \frac{1464-160-264}{12}}=\ast \ast 86.6667$ px**。

这就是"设计稿落地时对不上像素"的根源：网格的除法天然产生小数，必须在设计阶段就选一组能整除的参数。

例 4：字号阶梯与基线

字号阶梯常用等比模数：取基准 16（8 的倍数体系）：

模数	序列（pt）
1.200（小三度）	16 → 19.20 → 23.04 → 27.65
1.250（大三度）	16 → 20.00 → 25.00 → 31.25
1.333（纯四度）	16 → 21.33 → 28.43 → 37.90

1.250 的好处是所有值都能落在整数或 .25 上（16 / 20 / 25 / 31.25），便于像素对齐，是最常用的选择；1.333 跨度更大、层级更分明，适合大屏与海报。

行距与基线的换算（1 pt = 25.4/72 = 0.352778 mm）：字号 10 pt、行距 1.5 倍 = 15 pt：

$$15\times 0.352778=5.2917\text{mm}\approx 5.29\text{mm}$$

若按 8 mm 的基线网格排版，5.2917 mm 无法整除——所以印刷品的基线网格要重新选取（例如用 4 mm 或 5 mm 的基线），让"设计比例"与"物理尺寸"互相兼容。

例 5：视觉中心为何高于几何中心

画面高 1000 px 时：

• 几何中心：0.5 → 500 px
• 黄金分割：0.618 → 618 px（自顶部），0.382 → 382 px

人的视觉重心偏向中上部，所以：

• 版面上的主标题、主视觉通常放在上部约 0.382 处（382 px）；
• 页脚、签名等信息放在底部；
• 版式"看起来歪"往往不是真的歪，而是元素落在了几何中心而没落在视觉中心。

对齐是另一条规律：几何中心需要"上紧下松"的补偿——下边距大于上边距时，版面才显得稳（因为视觉重心上移，需要更大的下部空间来平衡）。

要点

要点与常见误区

1. 点、线、面是关系判断，不是形状属性。同一个圆在海报上是点、在名片上是面。先问"相对谁"，再定"是什么"。
2. 最有效的焦点手段是"特异"：在规律中出现唯一的例外。比任何装饰都省事，也更符合视觉规律。
3. 黄金比 $\phi =1.6180339887$ 的价值在于"自相似"（切掉正方形后比例不变），不在于"好看"。它是一套可递归的比例系统，不是审美标准。
4. 斐波那契比值交替逼近 $\phi$（34/21 = 1.619048、89/55 = 1.618182），误差每两步约降到 1/2.6。凡按"前项加后项"增长的结构，比值必然趋于 $\phi$。
5. A 系列的真正优势是"对折不变形"（$\sqrt{2}=1.414214$），不是面积。A4 面积 62 370 mm² 与 $1/16$ m²（62 500）差 130 mm²（0.21%），是毫米取整造成的，精确计算不能用理论值。
6. 三分法与黄金比在实用上差别不大（A4 宽 210 mm：129.78 vs 140.0，差不到 5%）。选一个、全项目统一，比争论哪个更科学有价值得多。
7. 12 栏的合法性来自因数多（1、2、3、4、6、12），能分成 2/3/4/6 栏而不出现半栏。
8. 网格除法天然产生小数：网页 1440 px、12 栏、间距 24 得栏宽 84.6667 px。设计阶段就要选一组能整除的参数，否则落地必然对不上像素。
9. 看不出问题先修明度：色彩构成的三个维度里，明度对比对可读性的影响最大。"色相调得再美，明度不够也是糊的"（对比度门槛见色彩学）。
10. 大面积高纯度必然显廉价；孤立的跳色用"呼应"救场——在对角再点一次同样的色，画面立刻成系统。
11. 视觉中心高于几何中心：1000 px 高的版面，主视觉常落在 382 px，不是 500 px；下边距大于上边距才显稳。

小结

• 平面构成三形态：点（聚焦）、线（引导）、面（承载）；判定取决于相对尺度与观看距离，不是形状本身。
• 八种形式法则：重复、近似、渐变、发射、特异（最经济的焦点手段）、密集、对比、分割。
• 黄金比 $\phi =\ast \ast 1.6180339887$，其价值在自相似**；斐波那契比值交替逼近（89/55 = 1.618182，差 0.000148）。
• A 系列纸张因 $\sqrt{2}=1.414214$ 而"对折不变形"；A4 = 210 × 297 = 62 370 mm²，与 $1/16$ m²（62 500）差 130 mm²（0.21%），源于毫米取整。
• 定位：A4 宽 210 mm 上黄金点 129.78 mm、三分点 70.0 / 140.0 mm。
• 12 栏栏宽：A4（边距 15、间距 5）为 10.4167 mm；网页（1440 px、边距 80、间距 24）为 84.6667 px——网格除法必生小数，参数要选可整除的。
• 字号阶梯模数 1.200 / 1.250 / 1.333（16 → 21.33 → 28.43 → 37.90）；1 pt = 0.352778 mm，10 pt 字 1.5 倍行距 = 5.2917 mm。
• 视觉中心 ≈ 0.382（1000 px 高的版面约 382 px），高于几何中心 0.5；下边距大于上边距才稳。
• 色彩构成三对比：明度（先修）、色相、纯度；调和手段：同一 → 近似 → 秩序 → 呼应。

下一篇：书法