Files

T

boos e0a5f57793 feat(desktop): embed BoosAPI Desktop client as a subproject

Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as
a monorepo subdirectory under desktop/. Source only — node_modules,
dist, Cargo target and the upstream .git history are excluded.

desktop/ keeps its own independent Cargo workspace (desktop/src-tauri
with crates/*); it is not part of the backend boosapi crate, so a
`cargo check` at the metapi root still compiles only the backend. Build
the desktop app from desktop/src-tauri per desktop/README.md.

Note: app icons are still placeholder assets pending the final BoosAPI
logo. The updater signing keys live outside the repo and are not
included.

2026-06-22 11:32:57 +08:00

6.0 KiB

Raw Permalink Blame History

排版调研：什么样的文本排版是舒适的

来源：2025-2026 主流产品分析 + 排版设计理论

核心发现

1. 舒适感来自"看不见的设计"

所有顶级产品（GitHub、Notion、Stripe、Linear）的排版有一个共同点：你不会注意到它。用户从来不会说"Notion 的行高好舒服"——他们只会说"用 Notion 写东西很舒服"。排版做对了，它就消失了。做错了，用户会感到莫名的不适但说不出为什么。

2. 字重比字号更重要

Apple HIG 的做法最能说明这一点：body 和 title 可以是同样的 17pt，区分靠的是 Regular vs Semibold，而不是 16px vs 36px。

行业趋势：

SemiBold (600) 正在取代 Bold (700) 成为标题首选字重——自信但不粗暴
极细字重（Ultralight/Thin）被 Apple 明确不推荐
shadcn 的 h1 用 extrabold(800)，h2 用 semibold(600)——标题之间也有字重梯度

启示：与其让 h4/h5/h6 都用 text-base 然后靠字重区分失败，不如用颜色、opacity、大写字母这些维度来建立层级。Linear 用 dim（降低亮度）来区分次要信息。

3. 行宽是阅读舒适度的第一变量

来源	推荐行宽
排版理论	50-75 字符，66 字符最佳
WCAG 无障碍	不超过 80 字符
Baymard Institute	超过 80 字符的内容被跳过率 +41%
CSS 实现	`max-width: 65ch` 或 `30-40rem`

所有严肃的内容产品都限制行宽：GitHub 980px，Notion 宽边距，Stripe 居中列。没有一个做全宽正文。

4. 行高与行宽是联动的

场景	行高
正文（桌面）	1.5-1.6x
窄栏/移动端	1.3-1.45x
标题	1.1-1.2x（紧凑，防止视觉碎片化）
UI 组件	1.2-1.3x

关键关系：行宽越长，行高应该越大。短行配大行高会"散架"，长行配小行高会"织成布"。目标是"均匀的排版色彩"——看起来舒服、邀请阅读。

5. 标题缩放比例决定整体调性

比例	值	适用场景	感觉
Major Second	1.125	紧凑 UI、仪表盘	克制、高密度
Major Third	1.25	文档、内容应用	平衡、专业
Perfect Fourth	1.333	营销、多样内容	有层次、明快
Perfect Fifth	1.5	编辑排版、长文	戏剧性、正式

Major Third (1.25) 是多数内容应用的最佳起点。

6. 留白是奢侈品

感觉最"高级"的产品——Notion、Stripe、Linear——恰恰是留白最慷慨的。留白传达品质感。但过多的留白会让内容感觉断裂、需要过多滚动。

段落间距共识：

段落之间：至少 1em，理想为行高的 1.5 倍
标题上方的空间应该是下方的 1.5 倍以上（接近原则：标题属于后面的内容）
Wichita State 研究：合理的段落间白可以提升理解力 20%

7. 衬线字体正在回归

Claude.ai 是旗舰案例：AI 回复用衬线体，UI 用无衬线——这是对无衬线单一文化的声明。

驱动因素：

高分辨率屏幕让衬线清晰锐利
几何无衬线的审美疲劳
追求温暖感和人格化
"过度抛光的 AI 审美正在造成视觉疲劳，设计师转向更有质感的字体"

对渲染库的启示：同时支持衬线和无衬线（通过 --ms-font-sans / --ms-font-mono token）是前瞻性的。

8. 流式渲染需要系统字体

ChatGPT 主要用 system-ui 不是偷懒——是性能工程。自定义字体意味着流式渲染时的布局跳动（layout shift），系统字体意味着即时稳定。

对 markstream-vue 的启示：

默认字体栈应该是 system-ui 优先（零加载、零跳动）
通过 --ms-font-sans token 允许用户切换到 Inter/Geist/衬线
字体加载策略本身就是排版决策

9. Dark 模式不是可选的

每一个调研的产品都支持。Claude、Linear、Cursor 默认暗色。 Tailwind 的 prose-invert、github-markdown-css 的 prefers-color-scheme 都说明这是基础能力。

10. 排版正在变成设计令牌系统

Vercel（Geist tokens）、Stripe（design tokens）、USWDS（font-size tokens）、 shadcn（CSS variables）。硬编码值在消亡，一切通过变量/token 流转。这正是我们在做的。

主流产品排版定位

产品	感觉	关键特征
GitHub	功能性、隐形、实用	不引人注目的排版，让内容说话
Notion	干净、通透、冥想感	大量留白，内容漂浮在空间中
Linear	专业、克制、工程感	次要元素降亮度，只让重要内容突出
Stripe	精致、权威、可信赖	三栏布局，内容与代码对话
Vercel/Geist	瑞士现代、精确、开发者原生	三层类型系统（Heading/Label/Copy）
ChatGPT	干净、机构感、高效	系统字体优先，零布局跳动
Claude	温暖、文学感、有人格	衬线体做 AI 回复——反无衬线单一文化

对 markstream-vue 的建议

默认排版方向

不需要5种 preset，需要1种好的默认+ 通过 token 可调。

推荐方向：Technical Clean + 一点 Notion 的呼吸感

理由：

markstream-vue 的主要场景是 AI 对话 + 开发文档 + 内容渲染
用户期望"专业但不冷淡"的感觉
需要同时服务代码密集和纯文字密集的场景

具体参数方向

维度	建议	依据
内容宽度	`max-width: 65ch`	行业共识
正文字号	16px (1rem)	所有产品的最低线
正文行高	1.6	无障碍 + 舒适的交叉点
标题缩放	Major Third (1.25)	文档/内容应用的平衡点
标题字重	h1: 700, h2: 600, h3-h4: 600, h5-h6: 500	Apple + shadcn 的 weight > size 趋势
段落间距	1.5em	行高的约 1x
标题上下比	上 1.5x : 下 1x	接近原则
默认字体	`system-ui` → 可通过 token 切换	流式渲染零跳动
h5/h6 区分	opacity/color 降级，不是字号	Linear/Apple 的做法

6.0 KiB Raw Permalink Blame History Unescape Escape