StarmoAI
网站文章页面设计与排版规范

网站文章页面设计与排版规范

Article Page Design System & Editorial Layout Specification

规范DOCXv1.0
规范DOCX下载原文件
网站文章页面 设计与排版规范

Article Page Design System & Editorial Layout Specification

适用范围：个人博客 / 技术文章 / 日记 / 深度长文 / 知识型内容 / MDX 交互文章

文档目标 把“文章写出来”升级为“文章被稳定、清晰、可持续地阅读”。本规范同时定义信息架构、标题层级、字号、行宽、间距、图文比例、响应式规则、组件插入方式、无障碍要求与开发落地标准。

文档图片 1

Version 1.0 · 2026

目录

    1. 规范的目标与适用边界
    1. 文章页面的信息架构
    1. 正规文章布局的 4 种模式
    1. 页面栅格、容器宽度与响应式规则
    1. 标题系统：H1 / H2 / H3 / H4 的定义
    1. 正文字体、字号、行高与行宽
    1. 垂直节奏：段落、标题、列表、模块间距
    1. 文章头部 Hero / Meta 信息区规范
    1. 图片、图表、公式、代码与表格规则
    1. 引用、提示、脚注、标签与强调方式
    1. 交互式知识组件的插入规则
    1. 长文目录、阅读进度与侧栏设计
    1. 移动端文章设计规范
    1. 无障碍、可读性与内容安全线
    1. 常见错误与禁止项
    1. 推荐的默认方案（可直接作为网站标准）
    1. Astro / Markdown / MDX 实现建议
    1. 设计 Token 与 CSS 变量建议
    1. 页面验收清单

  • 附录 A：文章模板

  • 附录 B：设计参数速查表

如何使用 如果不想一次执行全部规则，优先执行 5 条：正文宽度、标题层级、行高、垂直节奏、移动端内边距。它们决定了 80% 的阅读质量。
  1. 规范的目标与适用边界

文章页面不是“把 Markdown 渲染出来”就结束。一个成熟文章系统至少同时解决四件事：阅读效率、信息层级、视觉节奏、跨设备稳定性。视觉风格可以变化，但这四个目标不应随主题变化。

1.1 核心目标

目标 定义 判断方式
可读 用户不费力地连续阅读 10–20 分钟 不频繁丢行、回看、缩放
可扫读 用户能在 10 秒内理解文章结构 标题、摘要、目录清晰
可扩展 文章可插入图片、表格、代码、交互组件 组件加入后不破坏版式
可复用 不同文章保持统一视觉语法 同层级元素不随文章临时改样式
可响应 桌面、平板、手机都不需要横向滚动 结构按断点变化而非整体缩小

1.2 不追求的目标

  • 不追求每篇文章都“像海报”。文章首先是阅读产品，不是视觉展览。

  • 不追求所有内容都动画化。只有文字表达成本高的概念才适合交互。

  • 不追求标题越大越高级。标题大小必须服务层级，而不是制造冲击。

  • 不允许为了“高级感”降低正文对比度或把正文字号压得过小。

判断原则 任何设计如果让用户更难看清、更难定位、更难理解，即使视觉上更漂亮，也应该删除。
  1. 文章页面的信息架构

标准文章页建议拆成 6 个层级：站点导航 → 文章头部 → 正文主线 → 辅助导航 → 内容组件 → 文章尾部。主阅读区始终是视觉优先级最高的区域。

文档图片 2

图 1：文章页信息架构与宽度优先级示意

2.1 推荐页面骨架





…

2.2 信息优先级

  • H1 标题与一句话摘要：告诉用户“这篇文章在讲什么”。

  • 正文：完成核心叙事。

  • H2/H3：帮助用户定位结构。

  • 图片、图表、代码、交互组件：帮助理解，不抢正文主线。

  • 作者、日期、标签、分享、相关阅读：属于辅助信息。

  1. 正规文章布局的 4 种模式

文档图片 3

图 2：四类常见且可长期维护的文章布局

3.1 A：单栏 Editorial（默认推荐）

结构：页面中央只有一条主阅读列，标题、正文、图片沿同一阅读轴排列。它是最稳定的博客和日记布局。

适合 优点 风险
日记、观点、故事、普通博客 认知负担最低、手机适配最简单 长文缺少快速导航

3.2 B：正文 + 目录 TOC

结构：正文仍居中，但在左侧或右侧增加悬浮目录。适合 3000 字以上、H2 超过 5 个的技术文章、教程、研究型文章。

适合 优点 风险
教程、技术文档、深度文章 结构感强，快速跳转 侧栏过宽会压缩正文

3.3 C：正文 + 关联侧栏

结构：主正文约 70%，侧栏约 30%，侧栏用于术语、相关阅读、资源、作者信息。适合知识库和系列文章。

3.4 D：Magazine Split / 视觉专题

结构：大图、引用、正文交替形成视觉叙事。适合专题、人物、案例复盘，不适合普通日记长期套用。

默认策略 网站应有 1 个默认布局 + 1 个长文布局即可。不要让作者每篇文章重新选择十几种模板，这会破坏一致性。
  1. 页面栅格、容器宽度与响应式规则

文档图片 4

图 3：桌面、平板、手机的布局退化规则

4.1 推荐尺寸

区域 Desktop Tablet Mobile
页面最大宽度 1200–1360px 100% 100%
正文最大宽度 680–760px 640–720px auto
正文左右内边距 0–32px 28–32px 20–24px
侧栏 180–260px 可保留 1 个 折叠/抽屉
列间距 32–56px 24–32px 不使用多列

4.2 为什么正文不能铺满屏幕

文档图片 5

图 4：正文行宽对回行效率的影响

长行会增加眼球水平移动距离，并使读者更难找到下一行起点。对于中文正文，建议把一行控制在约 28–42 个汉字；英文通常控制在约 55–75 个字符。实际像素值取决于字体与字号，因此“正文最大宽度”比固定字数更适合作为工程规则。

  1. 标题系统：H1 / H2 / H3 / H4 的定义

文档图片 6

图 5：文章标题层级示意

5.1 语义规则

层级 语义 每篇文章建议 禁止
H1 文章主题 1 个 正文中再次使用 H1
H2 一级章节 3–10 个 仅为了放大文字使用 H2
H3 H2 下的小节 按需 跳过 H2 直接大量使用 H3
H4 局部条目/细分 少量 用到 H5/H6 形成过深结构

5.2 推荐字号体系

元素 Desktop Mobile 字重 推荐行高
H1 44–52px 32–38px 650–750 1.12–1.20
H2 30–36px 26–30px 650–700 1.20–1.28
H3 22–26px 20–23px 600–700 1.28–1.35
H4 18–20px 17–19px 600 1.35–1.45
正文 17–19px 16–18px 400–450 1.65–1.80
Caption 13–14px 12–13px 400 1.45–1.60
规则 字号不是绝对值，层级差才是核心。H1→H2、H2→H3 必须肉眼可辨；正文不能与 H3 接近到看不出结构。

5.3 标题间距

场景 推荐上间距 推荐下间距
H1 → 摘要 16–24px —
正文 → H2 56–72px 20–28px
正文 → H3 36–48px 14–20px
H2 → H3 28–36px 12–18px
  1. 正文字体、字号、行高与行宽

6.1 正文字体

中文网页正文优先选择系统无衬线字体或高质量中文无衬线字体。正文应避免过细字重。建议 font-weight 400–450，深色文字与浅色背景保持稳定对比。

类别 建议
中文无衬线 Noto Sans CJK / 思源黑体 / 系统 UI 字体
英文 Inter / system-ui / Arial / Helvetica
代码 JetBrains Mono / SFMono / Consolas / ui-monospace
数学公式 KaTeX / MathJax 使用其默认数学字体

6.2 正文字号

桌面端建议 17–19px；移动端建议 16–18px。16px 以下不建议用于连续阅读正文。大屏幕不等于正文必须无限放大，正文更重要的是行宽与行高的组合。

6.3 行高

中文段落推荐 line-height 1.65–1.80。标题行高更紧，避免标题看起来像正文。英文长文可以略低，但混排文章仍建议以中文阅读舒适度为准。

6.4 段落长度

  • 普通网页段落建议 2–6 行。

  • 超过 8–10 行的连续段落，应判断是否需要拆分。

  • 一句话不应为了“节奏感”被机械拆成一个段落；过度碎片化会降低文章连续性。

  1. 垂直节奏：段落、标题、列表、模块间距

文档图片 7

图 6：4px 基础网格下的垂直节奏

7.1 推荐 4px / 8px 基础网格

页面间距应来自有限的 token，而不是临时输入 17px、23px、51px。可以以 4px 为最小步进，用 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 构成主要间距。

Token 值 典型用途
space-1 4px 极小图标间距
space-2 8px 标签内间距
space-3 12px 小组件内部
space-4 16px 段内、卡片内部
space-6 24px 段间、图文之间
space-8 32px 小节切换
space-12 48px 章节标题前
space-16 64px 大章节间
space-24 96px 页面大模块间

7.2 为什么不能靠空行排版

编辑器里的空行只是内容结构，不应该决定视觉距离。视觉间距必须由 CSS 控制，否则不同渲染器、不同组件插入后会出现不可预测的版面。

  1. 文章头部 Hero / Meta 信息区规范

8.1 标准顺序

  • 可选：栏目 / Breadcrumb。

  • H1 标题。

  • 一句话摘要（Deck / Lead）。

  • 作者、发布日期、更新时间、阅读时长。

  • 标签（可选，最多 3–5 个）。

  • 封面图（可选，不强制每篇都有）。

8.2 H1 标题长度

桌面端理想为 1–2 行，手机端可以 2–3 行。标题超过 3 行时，应优先检查文案，而不是继续缩小字号。

8.3 摘要

摘要不是重复标题。它应在 1–3 句内回答：文章讨论什么、为什么值得读、读完得到什么。

  1. 图片、图表、公式、代码与表格规则

9.1 图片

规则 建议
宽度 正文图默认与正文同宽；关键图可 breakout 到 900–1100px
比例 同一文章内尽量控制在 1–2 种常用比例
图注 图下 12–14px，低一级对比度
Alt 描述图片传达的信息，而非只写“图片1”
加载 正文下方图片 lazy-load；首屏 LCP 图不要懒加载

9.2 图表

图表需要标题、单位、图例、数据来源（若适用）。移动端优先让图表重排或横向滑动，不要把字号缩到不可读。

9.3 代码块

  • 代码字体 13–15px，行高 1.55–1.70。

  • 长行允许横向滚动，不强制折行破坏代码结构。

  • 代码块必须有明显背景，与正文形成容器边界。

  • 可选：语言标签、复制按钮；不要在每个代码块堆太多工具按钮。

9.4 表格

普通表格尽量不超过 5–6 列。手机端可使用横向滚动容器，首列可视情况 sticky。数字列右对齐，文本列左对齐。

9.5 公式

块级公式上下至少保留 24–32px。公式编号仅在文章需要跨段引用时使用。不要把公式截图化，优先使用 KaTeX / MathJax。

  1. 引用、提示、脚注、标签与强调方式

10.1 强调层级

类型 视觉方式 使用频率
Bold 加粗 高
Inline code 等宽 + 浅底 中
Highlight 极浅背景 低
Callout 有边界的提示框 低
Pull quote 大号引用 极低，仅专题

10.2 Callout 类型

类型 用途 建议
Note 补充背景 中性配色
Tip 可操作建议 绿色/蓝绿色
Warning 有后果的注意项 黄色系
Critical 高风险事项 红色系，极少使用
控制噪声 一屏同时出现 3 种以上高强调元素，会导致所有强调都失效。文章页面的“高级感”更多来自克制，而不是元素数量。
  1. 交互式知识组件的插入规则

文档图片 8

图 7：交互组件应位于理解发生的节点

交互组件属于文章内容的一部分，而不是外挂展示区。它最适合解决“读文字很难形成直觉”的问题，例如轨道、密度、引力、时间轴、概率、结构关系、前后对比。

11.1 何时应该插入

情况 是否推荐
需要用户改变参数才能理解因果 强烈推荐
概念涉及空间/时间/运动 推荐
只是为了让页面动起来 不推荐
一张静态图已经解释清楚 不推荐
组件加载成本明显高于理解收益 不推荐

11.2 组件结构


// 先提出问题
// 1–3 个简单操作
// 即时反馈
// 一句话解释当前状态

11.3 尺寸与间距

属性 规范
最大宽度 与正文同宽或最多 breakout 到 960px
上下间距 32–48px
圆角 12–20px，统一
控件数 单卡建议 ≤ 3 个核心控件
默认状态 页面打开即能理解，不要求用户先配置
移动端 控件堆叠，触控目标 ≥ 44px
  1. 长文目录、阅读进度与侧栏设计

12.1 目录启用条件

建议当文章正文超过约 2500–3000 字、H2 ≥ 5、或文章明显具有教程/规范结构时启用目录。短文不需要目录。

12.2 Desktop TOC

  • 宽度 180–240px。

  • 只展示 H2，必要时展开当前 H2 下的 H3。

  • 当前章节高亮。

  • 使用 sticky，但顶部要避开站点导航。

  • 不要让目录比正文更抢眼。

12.3 Mobile TOC

移动端不要硬塞侧栏。目录改为“本文目录”按钮、顶部折叠区域、或底部抽屉。

12.4 阅读进度

阅读进度条适用于长文，可用 2–3px 顶部细线。不要使用占据内容区域的大型进度组件。

  1. 移动端文章设计规范

13.1 核心原则

  • 不是把桌面版整体缩小，而是重新组织信息。

  • 正文左右 padding 20–24px。

  • H1 不应因标题长而缩小到 28px 以下。

  • 所有交互触控目标建议至少 44×44px。

  • 表格、代码、宽图允许独立横向滚动。

  • 悬浮目录、作者卡、相关阅读侧栏必须折叠。

13.2 移动端图片

普通图片 100% 宽度；不要设置固定高度导致裁切关键内容。全出血图片可通过负 margin 延伸到屏幕边缘，但一篇文章应少量使用。

  1. 无障碍、可读性与内容安全线
项目 最低要求
正文对比度 普通文字目标 ≥ 4.5:1
大文字对比度 目标 ≥ 3:1
键盘访问 所有交互组件可 Tab 到达
Focus 状态 明显、不能被 outline:none 直接移除
触控目标 约 44px 或以上
动效 支持 prefers-reduced-motion
图片 有有意义的 alt
标题 语义顺序不跳级
高优先级 “浅灰正文 + 极细字重”是现代极简网站常见错误。正文颜色可以柔和，但不能牺牲阅读对比度。
  1. 常见错误与禁止项
错误 后果 修复
正文宽度 1000px+ 回行困难 限制到 680–760px
H1/H2/H3 差异过小 结构不清 放大比例与间距差
每段都只有一句话 阅读碎片化 恢复自然段
每屏都有彩色卡片 视觉噪声 减少强调级别
图片没有图注/Alt 理解和无障碍变差 补充语义说明
移动端硬保留三栏 内容变窄 侧栏折叠
组件为了“酷”而动 注意力被抢 只有需要解释时才使用
Markdown 用空行控制版面 跨渲染器不稳定 统一 CSS spacing token
  1. 推荐的默认方案（可直接作为网站标准）

如果只采用一套稳定方案，建议使用“单栏 Editorial + 长文可选 TOC + MDX 交互组件”的组合。它兼顾普通日记、技术文章、项目复盘和知识型长文。

16.1 Desktop 默认值

项目 建议值
site max-width 1280px
article max-width 720px
H1 48px / 1.15 / 700
H2 34px / 1.24 / 700
H3 24px / 1.32 / 650
Body 18px / 1.72 / 400
Meta 14px / 1.5
正文颜色 #1F2328
辅助文字 #66707A
正文段间距 20–24px
H2 上间距 64px
H3 上间距 40px
图片上下间距 32px
大组件上下间距 40–48px

16.2 Mobile 默认值

项目 建议值
viewport padding 20px（小屏）/ 24px（大屏手机）
H1 34px
H2 28px
H3 21px
Body 17px / 1.72
图片 100%
组件 100%，控件堆叠
目录 折叠或抽屉
  1. Astro / Markdown / MDX 实现建议

17.1 普通 Markdown

普通 Markdown 适合纯文字、图片、引用、代码、表格。它应该走同一套 prose 样式，不允许每篇文章单独写 CSS。

17.2 MDX

需要嵌入交互组件时使用 MDX。MDX 的价值是让文章保留 Markdown 的写作体验，同时允许插入 Astro / React / Web Component 等可复用组件。

—
title: “为什么空间站不会掉下来？”
layout: ../../layouts/Article.astro
—

# 为什么空间站不会掉下来？

正文……



继续解释……

17.3 组件目录建议

src/
components/
article/
ArticleHeader.astro
ArticleToc.astro
Figure.astro
Callout.astro
CodeBlock.astro
interactive/
DensityLab.astro
GravityLab.astro
OrbitLab.astro
layouts/
Article.astro
ArticleWithToc.astro
styles/
prose.css
tokens.css
  1. 设计 Token 与 CSS 变量建议
:root {
–article-max: 45rem; /* 720px /
–page-max: 80rem; / 1280px /

–font-body: 1.125rem; / 18px */
–line-body: 1.72;

–text-1: #1f2328;
–text-2: #66707a;
–border: #d8dde2;
–surface: #f6f7f7;

–space-2: .5rem;
–space-4: 1rem;
–space-6: 1.5rem;
–space-8: 2rem;
–space-12: 3rem;
–space-16: 4rem;
}

18.1 prose 样式骨架

.prose {
width: min(100%, var(–article-max));
margin-inline: auto;
font-size: var(–font-body);
line-height: var(–line-body);
color: var(–text-1);
}

.prose p { margin: 0 0 1.35em; }
.prose h2 { margin: 2.0em 0 .72em; }
.prose h3 { margin: 1.6em 0 .6em; }
.prose img,
.prose figure,
.prose .interactive-card { margin-block: 2rem; }

@media (max-width: 767px) {
.prose { padding-inline: 20px; }
}
  1. 页面验收清单
检查项 Pass 标准
H1 每篇只有 1 个，手机不超过 3 行为佳
层级 H2/H3 不跳级
正文宽度 桌面 680–760px
正文尺寸 Desktop 17–19px / Mobile 16–18px
行高 1.65–1.80
段间距 一致，不用空行硬撑
图片 清晰、有 Alt，必要时有图注
表格 移动端可用，不挤成一团
代码 可横向滚动，字号可读
目录 只在长文启用
交互组件 解决理解问题，不做装饰
无障碍 Focus、对比度、键盘访问正常
响应式 360 / 390 / 768 / 1280px 检查
性能 首屏不加载大量非必要交互 JS
验收方式 不要只看“首页截图好不好看”。至少用 1 篇短文、1 篇 3000+ 字长文、1 篇含图片/表格/代码/交互组件的文章进行真实压力测试。

附录 A：文章模板

A.1 普通文章模板

—
title: “标题”
description: “一句话摘要”
date: 2026-08-30
tags: [“设计”, “产品”]
—

# 标题

导语：告诉读者这篇文章解决什么问题。

## 第一部分

正文正文正文……

### 一个更小的主题

正文……

> 引用或关键观点。

## 第二部分

正文……

图片引用未随源文件提供：./image.png

图 1：图注说明。

## 结论

用 3–5 条内容收束文章。

A.2 交互文章模板

# 为什么会这样？

先让读者形成问题。



## 发生了什么？

解释组件中观察到的现象。

## 为什么？

给出原理、公式、模型。

## 如果改变条件？



## 结论

把交互体验重新压缩成可带走的知识。

附录 B：设计参数速查表

类别 默认 可接受范围
正文 max-width 720px 680–760px
正文字号 18px 17–19px
正文行高 1.72 1.65–1.80
H1 48px 44–52px
H2 34px 30–36px
H3 24px 22–26px
段间距 24px 20–28px
H2 顶部间距 64px 56–72px
H3 顶部间距 40px 36–48px
正文颜色 #1F2328 #181A1E–#30343A
辅助文字 #66707A 需保证对比度
圆角 16px 12–20px
移动端 padding 20px 20–24px
TOC 长文启用 H2≥5 或正文≥2500–3000字
组件触控目标 44px ≥44px

文档图片 9

附图：四种专业文章布局可作为模板库起点

—— 文档结束 ——

Article Design System · v1.0