从复杂性中建立秩序
好的文档不只承载文字,也应当帮助读者迅速识别结论、依据与下一步行动,同时保留原始内容层级。
1.1 设计原则
视觉表达保持克制,但关键结论需要足够明确。颜色负责建立章节氛围,结构负责传递信息。
清晰
通过标题、细线与稳定网格,让信息层级一眼可辨。
克制
不使用阴影与多余装饰,避免视觉噪音。
可追溯
来源、判断与行动保持明确边界。
1.2 关键判断
风格不应该改变内容本身,而应该让内容原有的结构变得更容易理解。Humanist editorial principle
- 优先呈现结论,再展开背景与依据
- 让并列信息保持相同的视觉权重
- 避免为了版式而拆散完整的叙述
有序步骤用编号标记,并列要点用星形标记:
- 判断材料属于哪一类文档
- 决定章节颗粒度与组件映射
- 按样式规范复核留白与配色
把决策放进上下文
对比不同内容场景的阅读方式与优先级,并把从读取源文档到完成检查的步骤放进同一条工作流程。
2.1 场景比较
| 内容场景 | 阅读方式 | 适配程度 | 优先级 |
|---|---|---|---|
| 产品愿景 | 叙事与章节阅读 | 高 | P0 |
| 研究报告 | 证据与图表检索 | 中高 | P1 |
| 操作手册 | 按步骤查阅 | 中 | P2 |
本表仅用于预览组件视觉,不代表正式评估结果。
2.2 工作流程
- 01读取源文档保留文字、层级与来源
- 02建立语义结构识别章节、表格和流程
- 03套用主题样式只改变呈现方式
- 04桌面与移动端检查确认阅读和交互完整
↻ 根据预览反馈继续微调
卡片家族
以下组件用于并列要点、对比、定义、补充说明与强调。它们共享同一套卡片语汇,但各自承担不同的阅读任务。
3.1 并列对比
对比卡片把两种做法放在同一水平线上,标签只有两个词,正文保持一段。
想法经过需求列表、用户故事与评审会议,交接一次就偏一次,进入研发的内容与最初意图已经隔了好几层。
提出者直接与模型推演,并把结论写进版本化的意图文档,文档包含想要什么、为什么以及约束条件。
3.2 快速开始
定义型信息适合用键值卡片:左侧是短标签,右侧是完整说明。
- 前置条件
无。
- 基础设施
约定的意图模板,以及一个版本化的存放位置。
- 执行方式
在评审前把草稿提交到产品仓库,让下游阶段可以直接引用。
- 验收标准
每一份产物都能被下一个阶段直接读取,不需要再次转述。
3.3 补充说明
与主线有关但会打断节奏的内容,放进深色侧栏卡片,作为读者可以稍后再看的一段。
3.4 重点说明
在受管环境中,组织级设置需要一次明确的批准才能生效,团队不能各自绕过。
本页组件只调整呈现方式,不改写来源内容,也不复制参考站点中的品牌标识、导航或推广模块。
3.5 延伸阅读
成组的短链接使用链接卡片,标题在上,路径在下。
3.6 卡片色调
卡片可以声明色调:中性面、浅色强调、深色面板与实底强调。带色调的卡片不加描边,靠底色与纸面区分;不声明色调时则是纸面上的细线卡片(见 1.1)。
中性纸面
用于并列事实与普通说明。
浅色强调
用于推荐做法与新的路径。
深色面板
用于需要停下来读一段的内容。
实底强调
用于整页只有一次的结论。
技术表达也可以温暖
让技术信息在保持清晰的同时仍然保有温度。
4.1 结构示例
卡片区块只描述语义,颜色与圆角由样式决定,因此同一份内容可以切换成其他主题。
{
"type": "compare",
"columns": [
{"label": "传统方式", "tone": "old", "content": "…"},
{"label": "AI 原生方式", "tone": "new", "content": "…"}
]
}