LESSON · COMPOSITION RIDGE
五

构图与布局

前几站收拾的是单件行李,这一站把它们摆进同一幅画面。构图回答的问题只有一个:什么,放在哪里。

No.01

间距会说话

人眼默认把靠得近的东西当成一组。所以间距是一种语言:组内用小间距,组间用大间距——两档拉开,结构自动浮现;两档一样大,所有东西糊成一团。

试一试

两张间距,一个名片

inner < outer
青崖散人
山径养护员 · 入山三年
128
巡山
36
路牌
9
迷路救援
结伴同行
6px
24px
分组清晰
No.02

一条看不见的线

对齐是页面的骨架:每个元素都应该和另一个元素有确切的边线关系。偏移十像素不会让人立刻喊出来,但会让整页隐隐发痒。勾选试试:

试一试

对齐 · 打乱 · 网格

feel the itch
北坡手记
订阅
No.03

层级三档杆

决定「先看什么」的是三个旋钮:字号、字重、颜色。主标题至少要在其中一个维度上碾压全场,三样都只赢一点点,等于全输。拉拉看:

试一试

把主标题调到「第一眼」

size · weight · color
ridge notes · no.12
垭口的风

翻过这道山脊的人,都学会了两件事:看云识路,以及把要说的话先想好——山上不给人犹豫的余地。

辛卯年 · 秋 · 手抄本第七册
30px
400
30%
No.04

三分法与动线

把画面横竖各切三刀,四个交点是最省力的落点——主体放在交点附近,比死居中更有生气。视线则习惯按「Z」字扫过页面:左上出发,右下离开,把要紧的东西放在这条路上。

试一试

山径小景 · 叠上三分线

rule of thirds
行人

落日恰好压在右上交点,行人踩在左下交点,一暖一冷对角呼应——这就是「放对位置」的运气,其实是可以计算的手艺。

No.05

样例小径

框架构图 · 回声进入用例 放大细看 ↗
为什么这样设计页头页脚与四边留白围出一扇「窗」:窗外是界面,窗内是作品——被框住的就是重要的。
黄金比例 · CALIBRE φ进入用例 放大细看 ↗
为什么这样设计栏宽 459 : 741 ≈ 1 : 1.618,字号按 φ 等比递进——秩序感无需解释。
引导线 · 节点 2026进入用例 放大细看 ↗
为什么这样设计放射光线与栏线延长线全部汇于「立即报名」——引导线与三分法在右下交点合流。
美术馆海报 · 前与后进入用例 放大细看 ↗
为什么这样设计Z 动线:标题 → 画面 → 信息 → 按钮;标题以字号+字重压场,其余全部让路。
负空间 · 白露进入用例 放大细看 ↗
为什么这样设计全页留白约 88%:文案、瓶身与页码各踞一角——空负责安静,主体才有声音。
图 ·《图版》进入用例 放大细看 ↗
为什么这样设计宽高比报文体,裁切护焦点,图注给出处——图片同时是色块,与段落同属明暗。
线 ·《线界》进入用例 放大细看 ↗
为什么这样设计分割线划经纬,栏线定秩序,下划线示意「可点」,重线当强调句——一条 1px 发丝线,能立起整个版面。
对称均衡 · 衡进入用例 放大细看 ↗
为什么这样设计页面以中轴完全镜像,天然庄重;两侧数字互为砝码——对称之中的微妙呼吸。
三分法 · 远山进入用例 放大细看 ↗
为什么这样设计视口即画布:标题压上三分线,CTA 落在右下交点——版面从「填表格」变成「取景」。
No.06

本站行囊

  • 组内间距小、组间间距大,两档拉开成结构
  • 对齐是骨架,偏移十像素全页发痒
  • 层级三档杆:字号、字重、颜色——至少一维碾压
  • 三分法落点,Z 字动线运货