推荐什么
决定用户先看到哪组内容。Flo 官方提到目标、阶段和记录相关性;没有公开所有推荐权重。S01 · Flo 官方帮助中心 ↗
从 Flo 的实际页面出发,拆清内容与画面的关系,再用《身体变化》三套效果稿,讨论我们的内容可以怎样表达。
研究汇报版。区分界面观察、公开做法与设计建议;所有配图可点击放大。
卡片先用几页短内容回答一个问题;需要更详细的解释时,再引导用户继续阅读或操作。
入口封面帮助选主题;组内单页逐步讲内容;文章、专题或功能是继续阅读与操作的去处。它们不一定是一篇文章的缩略版。
先看到题目或封面,判断是否与自己有关。
C01 · 录屏 V2 / 6.5s · 出处这一页提出问题,并给出简短背景。
C04 · 录屏 V2 / 24.5s · 出处这里预告可以进一步了解当天的症状。
C21 · 录屏 V2 / 166.5s · 出处随后出现同主题列表,让用户继续选择。
C22 · 录屏 V2 / 168.5s · 出处Flo 帮助中心把 Stories 介绍为与目标、周期或孕期相关的短内容,会随日期和记录更新。它首先解决的是“此刻有哪些知识与我有关”。S01 · Flo 官方帮助中心 ↗
知道当前读到哪里,也能随时退出。手机时间和电量不是内容模块。
提示当前进入了“继续了解”的阶段。
先说明为什么值得继续看。普通知识页这里承担正文解释。
此处是目标文章预览;其他页面可能是插画、图表或选项。
此处是向上滑动提示;其他页可能是文献、条件或署名。
此页底部有 Read now。这个按钮不是所有知识页都必有。
底部是选题背景说明;本帧没有长文按钮。
C04 · 录屏 V2 / 24.5s · 出处来源放在图表下方,说明这张图据何而来。
C20 · 录屏 V2 / 164.5s · 出处专家信息与目标内容一起出现,底部提供 Read more。
C07 · 录屏 V2 / 34.5s · 出处固定的是阅读习惯,变化的是本页要完成的任务。进度与退出较稳定;图形、署名、来源和按钮按内容需要出现,不是每张卡都塞满同一套模块。
“推荐哪一组”“组内怎样讲”“看完去哪里”,是三件需要分别判断的事。
决定用户先看到哪组内容。Flo 官方提到目标、阶段和记录相关性;没有公开所有推荐权重。S01 · Flo 官方帮助中心 ↗
决定这一页解释什么、下一页补什么。顺序应服务于读者的问题,不只是更换版式。S07 · Flo 产品经理与内容负责人 ↗
有的进入文章,有的进入专题或功能。目的地需要逐个核实,不能统一理解成“随机匹配一篇文章”。录屏证据 ↗
先交代主题及背景。
C04 · 录屏 V2 / 24.5s · 出处提出一个二选一的问题。
C10 · 录屏 V2 / 68.5s · 出处这是同一题的选中状态。
C11 · 录屏 V2 / 70.5s · 出处录屏中可以看到 Yes 之后的回应。
D09 · 录屏 V2 / 171.25s · 出处显示文章标题、预览与入口。
C23 · 录屏 V2 / 173s · 出处这是同主题画面的归组,包含回看与非连续时间点;C10/C11 是同一题的前后状态,不是两页新知识。没有取得另一答案的完整分支,也不能据此判断后续所有页面都按答案重排。
Flo 在 Intent 专题页案例中介绍:先梳理需求,确定优先级,再匹配内容与功能;重要信息在前,后续补充新信息,避免重复与过量。S07 · Flo 产品经理与内容负责人 ↗
这里借鉴的是内容组织方法。Intent 专题页与 Stories 短页不是同一界面,也不能据此推断 Flo 会实时读懂任意文章并自动生成每一页。
设计稿中的短内容组开场。
Figma 设计稿,未上线 · 出处既有文案与插画共同组成卡面。
Figma 设计稿,未上线 · 出处有关联文章时,提供进一步阅读。
Figma 设计稿,未上线 · 出处引导进入 Momcozy Reads 内容库。
Figma 设计稿,未上线 · 出处| 比较点 | Flo:能确认的内容 | Momcozy:当前资料中的方案 |
|---|---|---|
| 内容从哪里来 | Stories、文章、专题与功能可以互相承接;不能确认每组都从一篇长文自动生成。 | 运营整理内容,制作图片或 GIF;后台排序、打标,可关联一篇长文。 |
| 每页为何不同 | 从截图可见,不同页面承担解释、数量、提问或跳转等任务。 | 文案制作在图片里。页面形式主要在制作阶段决定,不由客户端临时排版。 |
| 为什么推荐 | 官方确认与目标、阶段及记录有关;完整算法未公开。 | 阶段标签匹配,再结合投放、曝光与排序规则;不足时补充长文。 |
| 怎样接文章 | 本轮看见文章入口与专题入口两种;不能假定每页都引向同一文章。 | 当前 PRD:每组可选关联一篇长文,组尾由客户端追加引导;全部组结束再给内容库入口。 |
Figma 设计稿与交互记录 ↗提供的 PRD/项目资料 ↗
项目尚未上线,未提供用户效果数据。此处反映资料中的设计范围,不把技术细节或审核能力写成已完成。
可直接借鉴的,是“每页为什么存在”。我们的播放框架已有方案,当前最需要补强的是:怎样从真实内容决定每页的任务、顺序与画面。
先看内容需要表达哪一种关系,再选图形与排版。每类配原图依据和 6 张参考,点击图片可以放大。
这是本研究的归纳,包含补充形式,不是 Flo 官方公布的全部模板。分类允许组合:例如网格可以承载分类,也可以承载多选;是否可点击,要另看交互。对照比较、顺序步骤尚无本轮录屏中的独立实例。
图文与图解帮助解释;清单、分类、比较、数据、阶段、步骤呈现不同关系;入口与选择承担不同动作。同一关系换画风仍归同类,同一画风换了任务也可能归不同类。这是当前材料的选型框架,不是只能存在11种形式。
这件事是什么,为什么会这样?
一个概念、原因或结论,需要一段完整解释。
问题或结论在上;相关插画配必要正文。一页讲清一个中心意思。
这张图能否帮助理解这句话?如果只能装饰,先保证正文好读。
原图依据:问题标题和一段解释组成主阅读区,小插画提示这是一个问题。
注意:不能把完整解释拆成许多孤立短句,也不必每页都配人物。
它在哪里,各部分是什么关系?
部位、物件、构成或位置关系,仅靠文字不容易说清。
一张主图,加少量指向准确的引线和短标签。
每条线指向什么?位置是否有意义?能否在手机尺寸下辨认?
原图依据:引线把名称与图中对象对应起来。原截图是结构证据,不代表我们要照搬这种器官画法。
注意:不能为了画面丰富而添加不存在的部位、联系或因果箭头。
有哪些可以做的事情?
几条同级建议、提醒或可独立采用的方法。
短方法可以同页分组;每条都需要解释时,一条一页。
这些方法是否可以独立选择?能否调换先后?可以调换就不必画流程箭头。
原图依据:原截图是并列情况的列表,证明列表组织方式;不能把它直接说成方法教学。
注意:不要把并列建议误写成必须依次完成的步骤;条件和例外不能丢。
同一个主题可以分成哪几类?
同一分类维度下的多个并列概念,权重相近。
等规格图标或插画,加各自标题;必要时附一句解释。
各项是否同级、同一维度?只是展示,还是确实能点击?
原图依据:三个并列类别采用相近图标和文字规格,方便逐项看懂。
注意:网格是排版,不自动意味着可以多选;不同层级的信息不要硬凑九宫格。
本轮录屏未确认独立实例。下方以精选参考说明可用方向。
两种情况到底差在哪里?
有可对应的对象和共同的比较维度。
左右或上下对照,同一元素尽量保持相同,只突出关键差异。
比较是否公平?同一尺度、同一条件下是否真的可比?
原图依据:本轮录屏尚未确认一张独立的双栏比较卡。这里以用户精选参考补足;不冒称 Flo 必然有此模板。
注意:不要为了对比制造健康上的绝对好坏,也不要把比喻图当成统计。
有多少,差多少,如何变化?
已有可靠数值,且数值确实帮助回答本页问题。
大数字、柱形、点列或趋势线,配含义、单位、比较基准与来源。
数据来自哪一段原文?对象是谁?是否需要说明时间、样本或适用范围?
原图依据:标题与解释先说明讨论对象,图表再呈现数量差异,图下紧接文献。
注意:没有数据就不画百分比。概念圆圈、情绪隐喻不是测量结果。
什么时候发生,现在到了哪里?
日期、孕周、月龄或阶段本身影响内容含义。
时间轴、日期列、阶段节点或对齐的时间矩阵。
这里真有时间关系吗?顺序、跨度和当前点是否明确?
原图依据:当前孕周与后续周数放在同一条进程中,帮助理解所处位置。
注意:几个并列知识点不能因为好看就连成时间线;阅读页码也不是生理阶段。
看完以后,我可以继续做什么?
存在有用的目标文章、主题页或功能。
先讲点击价值,再给目标预览和明确按钮。
点开后去哪里?按钮文案是否准确预告目的地?目标是否可用?
原图依据:说明继续阅读的价值,展示目标文章,再给页内手势提示与底部入口。
注意:不要把所有页都做成广告式跳转;没有真实功能就不画假按钮。
这一个问题,你的答案是什么?
答案互斥,或只需提交一个程度值,并且回答确有用途。
简短题干,少量等权选项,明确选中与回应状态。
为什么要问?回答后给什么反馈?用户能否跳过或修改?
原图依据:二选一问题在后续画面出现选中态和对应回应;未核实的另一分支不作推测。
注意:不能仅为增加互动而问无用问题。截图只能证明外观,不能证明完整程序逻辑。
这些情况中,哪些同时适用于你?
多个状态、活动或偏好可以同时成立。
图标网格或选项行,多项选中,必要的确认与数量说明。
是否有互斥项?是否限制数量?保存后用于什么?
原图依据:录屏可以看到多个症状同时选中,勾号和底色共同表示状态。
注意:一张清单上画了勾,不等于已经有记录系统;内容与交互规则要一起定义。
本轮录屏未确认独立实例。下方以精选参考说明可用方向。
先做什么,再做什么?
原文确有操作顺序、逐步推导或循环关系。
编号、动作小图和箭头配合;上一项的结果承接下一项。
调换顺序会改变含义或结果吗?循环有没有起点?
原图依据:本轮录屏未确认完整独立步骤卡。此类是我们按内容需要补充的形式,不是 Flo 官方模板清单。
注意:方法 1、2、3 不一定是先后步骤。推导链也要与真实身体操作区分。
形式丰富应该来自内容关系的不同。先完成能审核的逐页稿,再让图把这些关系讲清楚。
沿用既有字体、温和配色与成熟亲切的插画。选择贴近生活的场景和物件,让健康内容保持清楚、平静。
帮助指出位置、区分类别、比较差异、解释顺序。柔和风格是品牌选择;是否更吸引、更易理解,需要实际阅读反馈。
字体回到 Exposure[-10] 与 Aeonik Soft Pro。参考图中的其他字体、Logo、强刺激画面不直接沿用。
先说清这组为谁写、解决什么;圈出原文事实、条件与来源。
解释、分类、方法、比较或行动;每页保留一个完整中心意思。
下一页补充什么?哪些是并列?删掉重复,补上缺失的前提。
按信息关系选版式;先审内容和图示,之后才精修画面。
| 逐页稿保留什么 | 要说明到什么程度 |
|---|---|
| 本页要点与来源 | 采用原文哪一段?哪些数字、条件与措辞不能丢? |
| 前后关系 | 为什么接在上一页之后?下一页再回答什么? |
| 图形任务 | 图解释什么;大小、箭头、颜色分别代表什么? |
| 交互与去向 | 没有就留空;有则写清目标、反馈与是否保存。 |
固定原文、版本和拆稿规则,让 AI 提出候选;资深内容负责人判断是否讲清楚,专业审核人核对健康事实,设计核对画面是否表达准确。
本次《身体变化》已经有原文摘录、拆解说明和三套效果稿,因此可以从后面的同题对比开始评审。资料汇总中部分“P1~P4”表示每周不同内容位,并非同一短内容组的四页,不能直接拼成一个故事。
新增提醒、来源替换与原文直接提取要分别记录;图稿能生成,不等于内容已经通过审核。
项目资料 ↗身体变化原文与拆解 ↗画面会动,与页面能处理用户选择,是两种能力。格式选择应跟着内容用途和现有技术走。
整张卡面可以包含文字与插画;翻页、暂停和打开文章仍由 App 处理。
GIF 或其他动效可以演示过程。即使画了按钮,也不会自己保存答案。
要有点击、状态、分支、保存与恢复规则;设计交付各状态和对应文案。
Flo 工程文章介绍过自研 UI Constructor:服务端描述组件与动作,iOS、Android 客户端按约定绘制。Contentful 提供内容模型、管理与发布能力,Flo 团队负责集成。这套做法包含代码与配置,不能简单理解为“做一张图片”或“都是 HTML”。S08 · Flo 工程团队 ↗S04 · Aleksandr Popitich,Flo 软件工程师;Contentful 授权转载 ↗
上述为 2021 年工程文章与 2023 年 Intent 内容库案例。可借鉴其分工,不能据此断言当前每张 Stories 都用同一渲染方式;具体单选分支、动效格式与实现成本仍未公开。Contentful 是内容平台,现有证据不足以把它称为卡片设计外包机构。S05 · Contentful 客户案例 ↗
| 我们先做什么 | 设计交付 | 技术重点判断 |
|---|---|---|
| 当前:静态卡片 | 已审核逐页稿、静态图、页序与来源 | 现有容器适配、翻页暂停、关联文章;图片中的正文如何支持修改与多语言。 |
| 下一步:短动态样例 | 一段能解释变化的动效、静态替代图 | 实际支持格式、体积、播放与暂停;GIF 只是当前 PRD 中的支持范围。 |
| 确有价值时:互动原型 | 题目、选项、各状态与分支文案 | 组件与答案处理是否已有;需要保存什么、如何恢复、如何统计。 |
未检查我们的客户端代码,不预估“几天即可接入”。Flo 也曾先用一个专题与少量组件验证,再完善内容管理。S04 · Aleksandr Popitich,Flo 软件工程师;Contentful 授权转载 ↗
先让静态内容成立,再增加有明确用途的运动与互动。保留可编辑文案、来源和状态说明,避免只剩一张无法继续维护的图。
《身体变化》沿用体重、饮食、练习性宫缩与初乳四个知识块。对比重点是信息如何组织,以及读者先看到什么。
三套分别侧重理解、行动和查阅;每套都是封面+4页的独立方案,不是连续阅读15页。标题、措辞、画面与部分配色同时变化,因此这里比较的是综合表达,不把差异只归因于版式。原文、拆解与制作说明 ↗
先解释关系、类别和差异。
把可做的事情与重要提醒放到前面。
用问题、答案态和对应表组织信息。
先看饮食页的差异;切换主题可以查看其余9张。这里的按钮只切换报告视图,卡面中的选项仍是静态图片。
A2 把食物做成三个等权单元,先帮助辨认类别。
本次效果稿 · A2 · 出处B2 一行一个动词与配图,让方法更容易定位。
本次效果稿 · B2 · 出处C2 先提问,再给全部选中的答案态;还不能点击。
本次效果稿 · C2 · 出处读者是需要认识类别、找到方法,还是检查理解?三种任务不必使用同一个画面。
A1 用两条汇合线组织因素与解释,不表示数值或影响强度。
本次效果稿 · A1 · 出处B1 从起点到当前,再到团队复查;不是医学增长曲线。
本次效果稿 · B1 · 出处C1 先呈现问题与答案,再解释理由;此图直接展示答案。
本次效果稿 · C1 · 出处关系图、回顾节点与问答,哪一种更容易让读者理解“个体差异”这个中心意思?
A3 左右对齐两个条件与对应说明,底部保留咨询提示。
本次效果稿 · A3 · 出处B3 将联系提醒放进强调区,再补背景解释。
本次效果稿 · B3 · 出处C3 用分支线连接条件与说明;不是完整的分诊工具。
本次效果稿 · C3 · 出处条件和行动是否被完整保留?对照或分支有没有让人误以为已覆盖所有情况?
A4 用两段解释配完整人物与物件,保持阅读连贯。
本次效果稿 · A4 · 出处B4 用观察、理解、尝试串起内容;不是必须按序执行的医学操作。
本次效果稿 · B4 · 出处C4 把现象与说明逐行对齐,图标帮助找行。
本次效果稿 · C4 · 出处连续说明、阅读顺序、对应表,哪一种更适合首次阅读,哪一种更适合回来查找?
同一知识,可以按解释、行动与查阅的目的组织。正式制作时按每页的任务组合,不必整篇锁死在 A、B 或 C;哪种更有效,需要下一步验证。
现在已经有可讨论的真实画面。下一步先找出讲清楚与讲不清楚的地方,再决定哪些形式值得保留。
事实、来源和适用条件是否完整?图形有没有暗示原文没有的关系?
用自己的话说出核心意思;能否找到方法或条件?记录误解,比只问好不好看更有用。
前后页能否接上,是否想继续或深读?播放结束与实际理解分开判断。
目前三套同时改变了措辞与画面。先据此筛选方向;之后如需判断某种版式是否更好,应尽量固定内容与展示条件,记录比较方法和样本。
| 谁来判断 | 负责什么 |
|---|---|
| 资深内容运营/编辑 | 读者需要、拆页顺序、重点与措辞;建立通过和退回的例子。 |
| 相应专业审核人 | 健康事实、适用条件、补充提醒与图示是否准确。 |
| 设计 | 图是否讲对关系、是否符合品牌、手机尺寸下是否清楚。 |
| 产品与技术 | 入口与互动是否必要,已有能力能否支持,以及实现成本。 |
| AI | 基于指定原文生成候选、整理差异和查漏;不自行批准内容发布。 |
以上是建议的协作流程,不表示目前已经有内容审核系统。Flo 与 AWS 的公开审核案例也把规则、来源核对和人工医学复核放在流程中;它不能证明我们的图片已通过审核。S06 · Flo 工程团队与 AWS 联合撰文 ↗
先对比四个知识块的三种表达,记录具体保留与修改理由。
统一事实、来源、字体与手机阅读标准,完成一组可交付内容。
观察理解、误解与继续阅读意愿;不先宣称哪套胜出。
只选有明确价值的页面,做短样例给技术评估后再扩展。
本轮可以确定方向与评审方法;最终效果结论,需要真实阅读反馈。
正文就近放出处。这里集中保留文章、项目文件与原图索引,便于复查。
L01 · Flo 录屏截图
保留原帧与秒数。
L02 · 项目品牌与执行规范
卡片项目统一执行规范与反馈 ↗
L03 · 已筛选参考库
Eagle 参考文件夹 ↗。本报告沿用63张不同参考图,在11类中展示66次;原收藏、标签与备注未改动。
M01 · Momcozy 设计稿与交互记录
Figma 设计页面 ↗ · 只读提取记录 ↗。页面名称中的年份不作为发布日期依据。
M02 · 提供的项目资料汇总
By Week与知识星球现有资料整理 ↗。包含需求、方案及运营材料;本报告未独立核验原飞书文档的最终批准状态。
M03 · 《身体变化》三套效果稿
所用原文摘录 ↗ · 拆解与逐页说明 ↗ · 当前素材与校验清单 ↗
公开资料截至 2026-11-04 核对。收藏参考外链沿用已有元数据,未逐一登录复核;即使外站不可用,报告内仍保留配图。没有卡片层面的可靠对照数据,不用系统规模、工程成本或整体业务数据代替卡片效果。