# 卡片研究｜汇报结构与制作要求

版本：2026-11-04 · v02，加入《身体变化》三套案例  
用途：作为后续 HTML 汇报的内容与排版依据；本文件不代表实验已经完成或方案已经上线。

## 开头：整份汇报只围绕一个问题

> **怎样把一篇知识内容，组织成一组让用户看得懂、愿意继续看的卡片？**

开头说明：从 Flo 的实际卡片出发，对照 Momcozy 现有方案，研究内容怎样拆、画面怎样选，以及怎样判断效果。

正文按下面七部分展开，最后附来源索引。先用实际画面让人看懂，再解释规律，最后讨论制作与实施。

## 第一部分｜Flo 的卡片是什么，点进去会发生什么？

**这一部分要回答：卡片在阅读过程中起什么作用？**

### 1. 先看整体路径

用原截图展示：入口封面 → 一组短内容 → 继续阅读或操作的入口 → 实际目的地。

- 分清入口卡、一组内容、组内单页、长文章或专题页。
- 用一组真实案例说明：同一个主题中，为什么会出现解释、图解、数据、选择题等不同画面。
- 跳转到文章、专题列表还是功能，必须按实际证据分别说明。

### 2. 再拆单张卡片

在原截图上用数字标出：进度与退出、本页主题、正文解释、插画或图表、来源或署名、行动入口。

这些是观察区域，不是每页必有的六个模块。至少并排展示三种情况：普通知识页、带来源或署名的页、带继续阅读入口的页。

**展示要求：**截图旁就写标注解释；录屏中不连续的画面不能拼成完整操作过程。结论要说明“哪些相对固定、哪些随内容变化”。

## 第二部分｜为什么这样组织？与我们的方案有什么不同？

**这一部分要回答：为什么看到这组内容，为什么按这个顺序看，看完又去哪里？**

把三件事分开讲：

| 问题 | 需要说明的内容 |
| --- | --- |
| 为什么推荐这一组？ | 阶段、目标、记录或投放规则；哪些有官方说明，哪些没有公开。 |
| 为什么下一页这样讲？ | 每页承担什么任务，前后怎样承接，哪些是并列补充，哪些是真正的递进。 |
| 为什么这里出现按钮？ | 继续读文章、进入专题还是打开功能；点击后能得到什么。 |

选择一个有连续证据的案例，逐页写清“这一页补充了什么、为什么接在上一页后面”。再归纳可借鉴的顺序，如问题→解释→方法，或情境→并列建议→延伸阅读。它们是分析方法，不是每篇都必须套用的公式。

**对照我们的当前方案：**用设计稿和已提供的 PRD，对比内容来源、组内编排、推荐规则、关联长文及交互能力。明确标注“设计稿／方案中／待技术确认”，不能写成上线事实。

**展示要求：**一组真实页序配简短解释，再用一张简洁对照表。把“运营提前组织内容”和“客户端播放内容”分开说明，不把推荐逻辑说成实时自动排版。

## 第三部分｜11 类画面形式：各自适合讲什么？

**这一部分要回答：内容出现什么关系时，适合用哪种画面？**

当前研究按以下 11 类组织：

| 类型 | 主要解决的问题 |
| --- | --- |
| 01 图文解释 | 这是什么，为什么会这样？ |
| 02 图解标注 | 在哪里，各部分如何对应？ |
| 03 方法清单 | 有哪些可以独立采用的方法或提醒？ |
| 04 网格分类 | 同一主题可以分成哪些同级类别？ |
| 05 对照比较 | 两种情况的关键差别是什么？ |
| 06 数据呈现 | 有多少、差多少、如何变化？ |
| 07 时间阶段 | 什么时候发生，目前处于哪里？ |
| 08 行动入口 | 看完可以继续读什么、做什么？ |
| 09 单选问答 | 一个问题选一个答案，之后怎样回应？ |
| 10 图标多选 | 哪些情况可以同时适用？ |
| 11 顺序步骤 | 先做什么、后做什么，为什么不能调换？ |

每一类采用同样的展示结构：

1. **是什么：**一句话说明用途。
2. **原图是什么样：**Flo 原截图及简短标注；未观察到的类型明确标为补充研究。
3. **参考是什么样：**至少 5 张，现有版本按每类 6 张平铺；每张写一句具体借鉴点。
4. **什么时候用：**给出内容判断依据和主要限制。

**分类口径：**这 11 类是本研究的归纳，含补充形式，不称为“Flo 官方全部 11 种模板”。其中有画面排版，也有行动与交互，不是完全互斥的分类。对照比较、顺序步骤目前缺少本轮录屏中的独立实例，不能补造 Flo 原图。

**展示要求：**原图、参考图、解释放在同一模块。可按类别切换，也能展开全部；图片可放大，能追溯到本地原图和原始来源。后续补入更完整的“为什么归纳为这 11 类”论证。

## 第四部分｜我们的内容怎样拆，参考怎样选？

**这一部分要回答：怎样从真实内容走到合适的画面？**

### 1. 先讲选择标准

- **符合品牌：**延续现有字体、温和配色和成熟亲切的插画；避免恐怖写实和过度幼儿化。
- **帮助理解：**图要说明位置、差异、数量、先后或情境。不能只有好看，没有信息作用。
- **保持准确：**数字、箭头、动作和比较都有原文依据。参考画面里的健康结论不直接移用。

说明插画的价值：可以突出重点、简化不必要的细节，并保持品牌一致；是否更吸引人、更容易理解，仍需要实际测试。

### 2. 再讲文章怎么拆

原文与来源 → 明确这一组要回答的问题 → 整理先后和并列关系 → 确定每页任务 → 选择形式 → 审核内容和草图 → 制作静态图。

逐页稿至少保留：本页要点、原文依据、前后关系、图形任务，以及必要的入口或反馈说明。

**展示要求：**采用已提供且资料完整的内容作例子。没有完整原文时，只展示方法，不编造案例。先完成拆稿和草图判断，再进入精修出图。

## 第五部分｜静态、动态与互动，分别怎样实现？

**这一部分要回答：哪些靠图片，哪些需要代码，我们现在可以先做什么？**

用一页对照说明三种能力：

| 形式 | 设计侧交付 | 技术侧需要确认 |
| --- | --- | --- |
| 静态卡片 | 逐页文案、图片、顺序、来源 | 图片适配、翻页、暂停、关联文章入口 |
| 动态画面 | 明确运动目的、短动效、静态替代图 | GIF 或其他格式支持、加载、播放与暂停 |
| 真实互动 | 题目、选项、状态、各分支反馈 | 点击处理、条件逻辑、答案保存及恢复 |

先简述 Flo 公开案例中的内容管理、结构化配置和原生界面做法，写清文章年代与适用范围；不能凭外观断言所有 Stories 都用相同技术，也不能直接说成 HTML。

外部平台的作用要说具体，例如 Contentful 提供内容管理与发布能力，不能把它泛称为卡片设计机构。

**阶段建议：**先验证静态内容与画面，再做少量有明确用途的动态样例，交技术判断格式、接入成本和必要性。当前资料中的静态与 GIF 是方案范围，不等于已验证的线上能力。

## 第六部分｜案例实现效果对比：同一组《身体变化》，三种表达方向

**这一部分要回答：前面研究的拆分方法和画面形式，实际做出来有什么差别？**

放在技术说明之后、评估与下一步之前，用已生成的真实效果稿承接前面的分析。

### 1. 先交代共同基础

采用孕28周《身体变化》：同一来源下的体重、饮食、练习性宫缩和初乳四个知识块。三套均为同一原版封面＋4张内容页；这是三个独立方案，不是连读15页。

当前素材：1张共用封面、12张不同内容页；三个方案目录各有5张PNG。沿用已恢复的原版封面，不采用留档的新封面尝试版。

### 2. 展示三套全貌

- **A｜解释与理解：**关系图、分类、对照和场景说明，重点是把知识讲明白。
- **B｜方法与行动：**回顾节点、清单、提醒和引导顺序，重点是突出读者可以做什么。
- **C｜问答与查阅：**问题、选项、条件分支和对应表，重点是让问题与答案容易对应。

每套一行展示封面＋4页；每行下方只留一句设计意图。图片保持原比例，可放大。

### 3. 同一主题，三张并排比较

默认先展示“均衡饮食”，它的差异最直接；其他三个主题可切换或展开，保留全部12张内容页。

| 同一知识块 | A：解释与理解 | B：方法与行动 | C：问答与查阅 |
| --- | --- | --- | --- |
| 体重变化 | 两个因素汇合到解释 | 从起点到复查的节点 | 问题、答案与解释 |
| 均衡饮食 | 三类食物并列分类 | 三条行动清单 | 多项已选中的答案态 |
| 练习性宫缩 | 两种描述左右对照 | 条件与联系提醒前置 | 条件对应不同说明 |
| 初乳渗漏 | 连续图文与人物场景 | 观察→理解→尝试的阅读顺序 | 现象与说明逐行对应 |

每组三图紧邻标注：第一眼突出什么、信息怎样组织、图承担什么作用、还有什么需要评估。不要仅比较配色和插画是否好看。

### 4. 从画面观察，走向待验证问题

以饮食页为例：A把类别放在一起，B把信息写成行动，C用问题和答案态组织内容。分别需要判断：类别是否易辨认、方法是否易找到、问答是否带来理解价值。

**本节结论：**同一知识可以按解释、行动、查阅等不同目的组织；实际使用时可以逐页选择，不必整组固定用一种形式。哪种更易理解、更愿意继续读，交给后面的评估判断。

**比较口径：**三套的标题、措辞、排版及部分配色同时变化，属于综合表达方案对比，不是只改变一个版式变量的受控实验。当前“效果”指画面实现效果，不填写点击、记忆或理解提升数据。

### 5. 图文使用与分类要求

- C1、C2注明“静态答案态示意”，不能写成已实现点击、保存或分支反馈。
- B3是内容中的行动提醒，不等同于前文08类“可跳转的行动入口”；B4是阅读引导顺序，不能称为必须依次执行的医学操作。C3按条件分支说明，不硬写成线性步骤。
- 不为覆盖11类而强凑归类；当前案例没有合适的数值图表，不补造数据。
- 保留原文摘录、拆解说明及来源链接；补充提醒与原文提取分开记录。现有素材不等于已完成专业内容审核。
- 素材按完整图片展示，不拉伸统一比例。模型生成字形与真实字体排版、静态图与App接入分别说明，细节放在可展开的制作说明中。

**案例阅读入口：**[文章拆解与三套表现形式](/Users/lute/公司设计盘/卡片合集/卡片新的形式修改-11-3/备份汇总/20261104-身体变化-三套完整表现-v03/文章拆解与三套表现形式.md)；[原文摘录](/Users/lute/公司设计盘/卡片合集/卡片新的形式修改-11-3/备份汇总/20261104-身体变化-三套完整表现-v03/05_文章原文/孕28周_身体变化_原文摘录.md)；[说明与来源](/Users/lute/公司设计盘/卡片合集/卡片新的形式修改-11-3/备份汇总/20261104-身体变化-三套完整表现-v03/说明与来源.md)。

## 第七部分｜怎样判断好不好，谁来决定下一步？

**这一部分要回答：AI 可以参与哪里，什么情况下值得继续做？**

- **先评内容：**事实是否正确、条件是否完整、页与页是否接得上。
- **再评画面：**图有没有帮助解释，手机上是否读得清，是否符合品牌。
- **再看用户：**能否说出核心要点、有没有误解、是否愿意继续看；自动播放结束不能当成已经理解。

实验建议：同一份原文、相同事实与品牌要求下，对比不同拆页或表达方案，明确本轮只判断哪一个变化。实验资料未补齐前，不填写结果或效果增幅。

职责建议：

| 角色 | 负责判断什么 |
| --- | --- |
| 内容运营／资深编辑 | 选题、读者价值、拆页顺序与表达是否清楚 |
| 对应专业审核人 | 健康事实、适用条件、风险及图示准确性 |
| 设计 | 画面关系、品牌一致性与手机阅读 |
| 产品与技术 | 交互是否必要、功能边界与实现成本 |
| AI | 基于指定原文提出拆稿、形式和草图候选；不能自行确认内容正确或批准发布 |

**展示要求：**这是建议的协作流程，不写成目前已有审核系统。结尾明确下一步先产出什么、由谁判断、满足什么条件再增加动态或互动。

## 来源与证据要求

正文引用处直接提供可点击链接；最后附完整索引。来源至少分为：

- Flo 官方帮助、产品或工程文章：支持产品说明或已披露的做法。
- 录屏、原截图：支持已观察到的界面和操作状态。
- 项目参与者作品集、供应商案例：注明身份和证据范围。
- Momcozy 设计稿、PRD 和提供的项目材料：标明版本及尚未上线的状态。
- 收藏参考图：说明借鉴的是构图或表达，不把它当成医学或效果证据。

没有卡片层面的可靠数据，就不设置“效果提升”结论。系统规模、工程成本、整体业务数据不能代替卡片效果。

## 全页文字与排版要求

- 开头完整保留主题句；每部分围绕这个主题推进。
- 每个小块只讲一个主要结论，配两三句必要解释。
- 使用能直接讲给同事听的语言，少术语、少抽象口号。
- 正文不出现对话记录、口误示例或“之前跟你说过”等表述。
- 图文紧邻；先看到图和结论，再按需展开细节。
- 参考图每类至少 5 张；保留完整比例，避免只放一张代表图。
- 截图数字标注、原图出处和可放大查看同时保留。
- 将事实观察、设计分析和待验证建议清楚区分，不用每段重复长免责声明。
- 新 HTML 另存版本，保留已有文件，产出集中在备份汇总目录。

## 已接入材料与待补充材料

已接入：孕28周《身体变化》原文摘录、三套拆解说明与当前效果稿，安排在第六部分。

仍待补充：

1. **实验与判断材料：**用于完善第七部分的比较方法和真实结果；第六部分已接入效果稿，但没有用户测试结果。
2. **11 类版式的详细论证：**用于补强第三部分的分类依据与边界。

这两部分未到齐时，其余有依据的内容可以继续整理；缺失内容标明状态，不代写结论。