中文界面为什么总显得排版很业余？qiaomu-design中文排版完全指南：从盘古之白到装饰字体子集化

qiaomu-design是一个面向 Claude Code 的"偏执型设计顾问" Skill：反 AI 味设计、四方向风格试衣间、58 站设计系统库。其中最能被新手直接复用的，就是它内置的中文排版规范——把"盘古之白、系统字体栈、装饰字体子集化、全角标点纪律"这些老设计师凭手感掌握的细节，全部写成了可执行的检查规则。本文用一份完整指南，带你一次看懂中文界面排版的所有"业余感"来源。

为什么中文界面一眼显得业余？

英文排版规则直接搬到中文界面上，几乎是所有"业余感"的源头。最常见的 5 个信号：

qiaomu-design 生成的中文落地页案例就是这套规范的直接产物：大标题用系统字体栈的粗重对比，而不是硬塞一个几 MB 的中文 webfont：

字体加载纪律：系统字体栈是第一硬规则

qiaomu-design 的第一条硬规则：中文正文/UI 一律用系统字体栈。中文字体单文件 5–20MB，用户机器上大概率没有 ZCOOL 系列字体，走 CDN 会严重拖慢首屏。默认写法（chinese-typography.md#L12-L17）：

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

零体积、渲染最佳。中文界面的"个性"不靠堆字体，而是靠：西文/数字展示字体（体积小可随意换）、中文字重与字号对比、排版结构、色彩。

盘古之白：看不见的专业感分割线

"盘古之白"指中文与西文、数字之间加空格的规范，来源见 chinese-typography.md#L58-L63：

• 中文与英文之间：在 Lumina 上使用 SDK
• 中文与数字之间：共 500 条记录
• 数字与单位之间：20 TB；但90°、15%这种不加空格
• 全角标点前后不加空格

下面这张电商详情页就是数字排版的示范：价格¥1,280、折扣-24%、评分4.9 分 (127 条评价)，数字用半角、折扣不加空格、与中文之间留白自然——没有任何一处拥挤：

行高、字距、每行字数：给密集笔画留呼吸

中文笔画密度远高于英文，排版参数必须整体放宽（chinese-typography.md#L48-L57）：

移动端尤其容易犯"每行挤 30+ 字"的错误，这张冥想助眠 App 案例保持了短行距、宽行高的移动端节奏：

字重陷阱：700 可能是"假粗体"

多数中文字体只有 400 / 700 两个字重，中间字重是渲染引擎伪合成，效果发虚；苹方甚至有 Ultralight–Semibold 却没有 Bold，写font-weight: 700实际落到 600（chinese-typography.md#L41-L45）。

规范做法：中文正文 400，标题/强调用 500 或 600，不写bold；层级主要靠字号+颜色拉开，字重只做辅助。

装饰中文字体子集化：唯一被允许的例外

只有两种场景可以用装饰中文字体：创意展示页（活动页/品牌 Hero/海报式页面）的标题短语，或用户明确要求的书法/复古/手写气质。且必须同时满足四个条件（chinese-typography.md#L21-L29）：

1. 只用于标题——正文/UI 永远系统栈
2. 用 Google Fonts 的text=参数子集化，只加载标题用到的字符
3. font-display: swap
4. 系统栈 fallback

<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&text=每场会议都值得铭记&display=swap" rel="stylesheet">

注意：思源黑体/宋体（Noto Sans/Serif SC）全量引入也算违规——同样是几 MB 级别，标题需要时同样走子集化。可选的装饰字体清单：Noto Serif SC（典雅书卷）、ZCOOL XiaoWei（轻盈时尚）、ZCOOL QingKe HuangYou（圆润温暖）、ZCOOL KuaiLe（活泼跳动）、Ma Shan Zheng（毛笔楷书）、Long Cang（随性手写）、Zhi Mang Xing（洒脱行书）。

这个数据叙事页的衬线大标题"速溶之外"就是典型的"创意场景 + 子集化装饰字体"用法——字体只服务标题短语，正文全部回到系统栈：

标点与斜体：没人注意、但人人能感知的纪律

• 中文句子用全角标点（，。？！），不夹半角
• 破折号——占两字宽不拆行，省略号……同理
• 标点不叠用（禁止「！！！」）
• 中文禁斜体——强调只用字重/颜色/字号；下划线只留给链接

暗色页：中文正文的对比度标准更高

• 亮色页中性文字用透明度写法：rgba(0,0,0,.88)主文 /.65次文 /.25禁用
• 暗色页正文不用纯白，用rgba(255,255,255,.85)降低眩光
• 中文笔画在低对比暗底上损失更大：暗色正文对比度按7:1（AAA）设防，而不是英文页常用的 4.5:1

qiaomu-design 如何自动守住这些细节

以上规则不是"建议"，而是交付门禁。每次涉及中文页面，qiaomu-design 都会读取 chinese-typography.md，并在交付前强制执行 preflight.md 的 D2 中文页追加项：

• 中文正文/UI 是系统字体栈；装饰中文字体只出现在标题且已text=子集化
• 中文行高 ≥ 1.5；正文 ≥ 14px；无负字距
• 中西文之间、中文与数字之间有空格；数字与单位间有空格（°、% 除外）
• 全角标点、无斜体、无叠用标点
• 中文字重只用 400/500/600，无伪 bold 发虚
• 暗色页正文rgba(255,255,255,.85)，对比度 ≥ 7:1

路由表里还明确写着"中文界面：中文排版优先于通用字体偏好"（SKILL.md），也就是说即使你在其他配置里写了英文字体偏好，只要页面含中文，这套规范自动优先。

结语：专业感 = 一条一条执行的小规则

中文排版的"业余感"从来不是单一错误，而是字体栈、行高、盘古之白、字重、标点、暗色对比度这些细节的集体失守。把这些规则交给 qiaomu-design 的规范库与 preflight 门禁去兜底，你只需要专注内容本身。