# 内容设计：先读得清楚，再留下性格

## 正文不是封面海报的缩小版

Cyan × Orange 与白底是整套作品的基础。青色猫看橙色日出是保留母题；它不决定技术图的节点形状，也不要求正文重复日出、云朵、装饰性口号。

**结构不能靠装饰证明。** 一个页面是否清楚，要看读者能否找到正在解释的问题、看懂上下文、区分事实与判断、沿着图和来源继续查。看起来“丰富”不等于有信息层级。

猫与日出是独立装饰资产，可以替换而不改变正文或技术图的含义。

## 三个媒介分别做什么

| 媒介 | 应做 | 不做 |
|---|---|---|
| Markdown | 自身有清楚标题、短段落、准确链接与邻近图注；不依赖自定义样式才能理解 | 用 HTML 大量摆版、空格对齐、装饰文字模拟封面 |
| 网页 | 提供目录、合理行长、锚点、横向图示浏览、可选复制与搜索 | 用层层卡片包住全文、必须登录、无限动画 |
| PDF | 为连续阅读重新控制分页、表格和图宽，给出可点击来源与版次 | 把整个网页截图、把横向巨图缩到读不清 |

reference 给机看时可以更直接，但完整句子、准确单位、作用域和检查条件仍然重要。不要把模糊与省略误称为简洁。

## 建议的排版尺寸

阅读站正文为桌面 17px、手机 16px，行高 1.95，宽屏正文列最大 744px。文章题头与连续正文分开；章节采用无衬线标题，小号章号在桌面与标题同行，手机移到标题上方。目录、版次和核验范围降低视觉权重，正在阅读的章节有位置提示。以中英混排、代码、比较表等真实内容试读，不靠扩大空白掩盖层级问题。

PDF 正文建议 10.5–11.5pt，图中文字在实际版面中不低于约 9.5pt。章节标题可以有少量衬线气质，正文与技术图用清楚的无衬线；代码用等宽。装饰字不承担说明文字。

表格一般不超过四个主要比较维度；确有更多时拆成几个有标题的小表或每项一节，不压小字号。代码不能截断；长路径、模型 ID 与 URL 在可复制性不受损的情况下换行。

## 色彩 token

下表为冷白主题的主要 CSS token；暖纸主题的完整值见 `styles/fieldbook-tokens.json`，主题选择只存在读者浏览器。技术图与冻结出版物保留各自源文件中的配色，网站改版不回写历史出版物。

| 角色 | 值 | 使用方式 |
|---|---|---|
| paper | `#FFFFFF` | 持续阅读背景 |
| ink | `#183544` | 标题、正文、图标签 |
| muted | `#566872` | 日期、图注、辅助信息 |
| cyan | `#007F93` | 导航、线、少量重点、图边框 |
| cyan-light | `#EFF9FB` | 小范围结构面，不铺整页 |
| orange | `#BE4B13` | 时间变化、关键分支、少量强调 |
| orange-light | `#FFF4EC` | 需要注意的局部区域 |
| line | `#D3E4E8` | 分隔线和表格底线 |

正文用深色，不把亮橙小字铺在白底上。颜色必须与文字/线型同时编码：橙色节点不是唯一的“危险”说明，实线与虚线也必须有图例。配色的实际对比检查不等于整站已完成可访问性合规。

## 装饰额度

封面/封底可以出现较完整的猫看日出。章节起点可有一个小耳形、日出半圆或书脊色线；不是每章必须都有。网页署名仅出现在公共页脚一处，题头与正文不重复展示；Markdown 下载和法律归属说明仍保留。页脚签名旁可以有一个小型猫形，避免一排表情图标。

技术图内部不放猫头。代码区域、错误信息、预算、来源链接、权限判断旁不放可能误认成按钮或状态的装饰。图示与装饰分目录，允许技术附件完全不带母题。

Cloudflare 产品名称用于真实的服务阅读入口；云、边缘节点与路由装饰采用原创线稿。站点使用自有标识，不使用官方 logo 或产品 icon。商标归属说明置于页脚，避免暗示官方关系；参考 [Cloudflare 商标规则](https://www.cloudflare.com/trademark/)。

## 图的五条阅读规则

每张图只回答一个问题：结构、影响、内容生命周期、出版或例子执行。箭头方向表达信息/影响/执行中的一种，并在图下注明，不混在同一张图。

节点名使用仓库中的真实概念，少用“赋能”“中台”“核心引擎”等无法落实到文件或职责的词。节点中文标签优先，目录名可补充在第二行。分组只在确有边界时使用。

入口路线与任务状态图在手机及窄阅读列使用专门的纵向布局，和横版共享 `tools/figures.py` 中的语义。其余密集宽图保留内部横向滚动与文字解释，不能把整张图缩到字号只有几像素。网页不会拦截整页滚动；图的全尺寸 SVG 可单独打开。打印版按图形比例分配独立横页或拆图，不能截图凑一页。

图有标题、说明、图例和 Mermaid 链接；没有颜色也能理解。装饰取消不影响信息；新皮肤不得偷偷改节点、边或分支条件。

每次图形结构变化后，检查边穿字、线重叠、标签截断、字号、空白与图注。机器测试只能发现一部分，最后仍要看真正渲染结果。

## 阅读中的交互

键盘焦点用控件内部底色、下划线或内侧底线标示，不画外围焦点框；滑块通过加深、放大滑块本身标示焦点。鼠标与键盘访问同一组链接和控件。章节锚点在悬停或键盘定位时显示，不单独挤出一行。

正文中的来源编号使用小号注释，不重复附加文字徽标或箭头。术语用点状下划线；普通站内链接保持简洁，外部来源与源码用小箭头说明离站。完整链接图例放在页脚。

## 内容节奏

开头给明确判断或正在回答的问题；随后用具体材料解释。保留必要条件，但不要每节以同一段防御性提醒结束。不为“看起来专业”反复插入 authority、canonical、fail-closed 等词；需要概念时解释一次，后面直接使用。

一个例子里的失败、修复与取舍值得展开；“还有很多可能性”不值得占版面。真实输入用于验收：长模型 ID、费用小数、晚生效日期、代码块、来源冲突和没有实测结果的比较。

## 当前资产归属

README 横幅 `assets/motifs/repository-banner.svg` 将项目名与猫看日出排成横向题头；运行 `python3 tools/figures.py` 从原母题生成，避免独立复制维护猫的轮廓。横幅只在仓库 README 展示并链接到阅读站；网站已有独立题头，HTML 投影省略此图。下载的 README Markdown 和对应图片仍保留原样。

`assets/motifs/cat-sunrise.svg` 是首页、页脚、404 与出版封面的原生装饰源；几何青猫、橙色半轮日出与书页细线构成全站母题。冷白默认与暖纸可选共享透明母题，清晰轮廓、细分隔线与少量青橙强调延伸到题头、章节、目录、表格和实践入口。主画增加轻云与细连接线，保留猫、日出和书页的原有轮廓。`reading-pages.svg` 用于手册与来源页，`field-notes.svg` 用于实践、观察与目录页，`edge-route.svg` 用于服务；比较、用例、例子、实施参考分别用 `weigh-routes.svg`、`launch-window.svg`、`task-loop.svg`、`ledger.svg`，篇尾用 `colophon.svg`；它们都是装饰，不声明部署拓扑。正文的四幅说明图及其中两幅的手机布局由 `tools/figures.py` 显式生成，六幅机制与架构图由 Mermaid 生成；二者不在出版时回写。旧版封面随固定的 r3 出版物保留。