页面布局设计是做什么的？

概述

大多数页面失败在节奏上，而非创意上。文字没问题，色彩没问题，但看起来仍然像模板，因为垂直间距是逐段决定的，没有任何对齐。

核心原则：在开始任何样式工作之前，先选定一个间距尺度、一个字体层级和一个区块系统，然后绝不引入任何不在该体系内的数值。

区块系统

内容区块共用少数几个数值。固定场景（pinned scenes）是例外。

部分	规则
区块标题	每个内容区块使用一个尺寸（例如桌面端48，手机端38）
左边缘	一个边缘，与导航标志边缘对齐。自适应高度尺度会移动边缘，请测量它
标签	标题上方使用一种药丸样式
卡片	一种圆角、一种细线、一种色调。绝不要同时使用边框、阴影和填充
结尾卡片	标题在网格行上，按钮在下一行，不需额外句子

固定和滚动场景保持其自身的舞台尺寸。它们设计为视口高度，其空白区域作为滚动跑道。在没有重新锚定每个基于百分比的定位之前，不要缩小固定舞台。

一个每个区块都有自己的标题尺寸、左边缘和卡片的页面看起来像是拼凑的。这张表就是阻止这种情况发生的方法。

间距节奏

只决定一次尺度。以4px为基础、几何递增的斜坡覆盖所有情况：

0.4  0.8  1.6  2.4  3.2  4.8  6.4  8  12  16 rem

通过两个令牌驱动所有区块间距：--sec 用于区块之间，--blk 用于区块内部的块之间。收紧一个松散的页面意味着更改两个数字，而不是四十个。在一个页面上，桌面端使用48和40单位，手机端使用36和28单位，使文档整体减少了约10%。

收紧节奏时，元素尺寸不变。 卡片、文字、标志、按钮：保持原本设计。比较新旧版本之间的组件尺寸以证明这一点。

区块内边距是页面崩溃的地方。审计每一个接缝，而不是每一个区块：

接缝	总间隙	视觉感受
两个不相关的区块	200-240px	独立的章节
一个延续上方内容的块	40-80px	一个章节的两个部分
全出血媒体与区块相接	0	一个剪切

测量上方区块的 padding-bottom 和下方区块的 padding-top 的总和。一个页面有120/60、64/20、24/0和0/120，会产生180、84、24和120的间隙，毫无逻辑。读者会感受到这种混乱，却无法具体描述。

在同色背景上，超过约240px的间隙需要一些内容。要么收紧它，要么在其中放一个行动号召按钮。

首屏

调整首屏尺寸，使下一块内容在首个屏幕上显示出来。clamp(620, 100svh - 150, 900) 单位可将证明条带在一次滚动后置入视图中。一个填满视口且下方没有任何内容的英雄区域，隐藏了页面所依赖的证明。

共享组件属于站点

存在于线上站点的导航、页脚或按钮就是设计本身。不要在新页面上重新设计它。当它在新页面上看起来不同时，原因几乎总是页面级别的覆盖产生了泄漏。将计算后的样式与线上站点进行比较，并移除覆盖，限定在泄漏发生的断点范围内。

字体层级

最多两种字体家族：一种展示用，一种正文用。展示字体中的数字读起来像设计好的；普通正文字体中的数字读起来像数据。

始终在与其他数字排在同一行的任何数字上设置 font-variant-numeric: lining-nums tabular-nums。没有它，"3,000" 和 "500,000+" 将无法对齐，并且你不会知道原因。

负字母间距随尺寸缩放：大致在展示尺寸时为 -0.02em，正文时为 0，大写眉线文字上为 0.08em。

精确匹配设计的字体宽度。关于光学尺寸陷阱，请参见 extracting-figma-truth。

卡片与网格

最常见的卡片错误是不均匀的内容导致不均匀的卡片。

之前	之后	原因
`.card { padding: 2rem }` 在网格内	在网格上添加 `align-items: stretch`，并在卡片上添加 `height: 100%`	否则卡片高度取决于其内容
内容从上到下流动	在必须位于底部的元素上使用 `margin-top: auto`	将指标或CTA固定到卡片之间的共享基准线上
标签在一张卡片中换行到1行，在另一张中换行到2行	标签的 `min-height` 等于2行高度	保持每张卡片的基准线一致
`<img>` 具有固有尺寸	使用 `aspect-ratio` 的包装器 + 图片上的 `object-fit: cover`	混合宽高比的图片网格不是真正的网格
卡片后的灰色填充	白色加 `1px` 细线	填充读起来像占位符，细线读起来像设计

统计与数字块

一个数字块按固定顺序包含三个部分：上方来源或标签、数字、下方说明文字。数字是块中最大的元素，行中的每个数字共享一个基准线。

绝不要将非数字内容放入数字位置。"Creative Ops" 与 "150+" 和 "3,000" 排在一行看起来像错误。要么找到数字，要么将该事实移到散文中。
一个换行到两行的数字会破坏行。"6 weeks to 24 hours" 变成 "24h"，其余内容放在说明文字中。
说明文字限制在两行以内。如果需要三行，说明文字在替数字做工作。

Logo条带

Logo 根据光学重量调整大小，而不是边界框。一个堆叠式组合标志、一个方形徽章和一个单行文字标志设置为相同的CSS高度，看起来会以三种不同的方式出现问题。

从以下开始：堆叠式组合标志44px，方形徽章40px，文字标志22px，然后目视调整。将所有标志统一为一种墨水颜色。混合的Logo颜色会使条带看起来像被刮过一样。只有已清理的标志才能放在条带中（参见 writing-claims-that-hold）。

共享CSS与手机溢出

为桌面组件编写的宽度规则，例如 width: 37rem !important，可能使整个文档比手机屏幕宽（428 vs 390）。症状是右侧边缘出现白色条带。在390宽度下检查 scrollWidth 与 clientWidth，并将固定宽度限定在其设计的断点范围内。

模板化页面的迹象

每个区块都居中
所有区块内边距都是 120px，无论位置关系如何
卡片同时具有边框、阴影和填充
标题使用正文字体且加粗
数字使用正文字体
两个强调色，都不是品牌色
一个页面上 border-radius 值有4、8、12和16

页面布局设计