yomiya-frontend-page-architecture

Yomiya Frontend Page Architecture

文档状态：历史证据 当前替代文档：../../01-当前目标与范围.md 为什么保留：保留旧页面架构推导，方便回溯页面设计为什么收敛成现在的主路径规则。

历史留档说明：本文件保留为旧页面体系来源，不再作为默认入口。当前执行请看 ../../01-当前目标与范围.md。

文档性质：前端页面体系与页面职责梳理
用途：在不让设计稿反向决定内容结构的前提下，明确 Yomiya 前端页面系统如何承载当前内容系统 适用对象：产品 / iOS / 前端 / 设计 / 内容运营
状态：当前有效 最后更新：2026-04-03

---

1. 本文档的角色边界

这份文档只回答三个问题：

1. 当前有效页面体系有哪些层
2. 每一层页面分别承担什么职责
3. 首页入口应该落到哪一层页面

它不再重复维护以下内容：

• 首页固定模块清单
• 各模块字段、数量、上线阈值、隐藏规则
• 数据接口字段冻结表
• 视觉样式细节

这些内容分别看：

文档	负责内容
yomiya-phase1-execution-spec.md	阶段目标、指标、首页主叙事、阶段判断
yomiya-canonical-naming.md	名词与字段口径冻结
yomiya-implementation-spec-core.md	当前产品 / 数据 / API / 模块冻结表
product/YomiyaContentSystem/07-视觉与页面表达.md	当前视觉系统与页面表达原则

补充规则：

• 页面结构与页面职责，以内容系统文档和执行规格为准
• 竞品截图、QQ 音乐参考图和旧 Figma 设计稿，只作为视觉表达参考，不作为结构依据
• 如果本文档与 yomiya-implementation-spec-core.md 的冻结表冲突，以 core 为准

---

2. 当前有效页面体系

flowchart TD
    A[首页 Home] --> B[合集列表页 Collection List]
    A --> C[合集详情页 Collection Detail]
    A --> D[内容详情页 Content Detail]
    B --> C
    C --> D
    D --> C
    D --> A

2.1 四层页面的职责简表

页面层	主要任务	用户状态	不该承担什么
首页	发现、推荐、分发	还没决定具体看什么	深度展开全部内容
合集列表页	在某个方向内选择具体合集	已决定方向，未决定合集	直接替代合集详情页
合集详情页	在单个合集内选择具体条目	已决定合集	替代内容详情页消费
内容详情页	真正消费单条内容	已决定具体内容	承担前置探索

2.2 第一次读就能懂的理解法

• 首页：这里有什么值得看
• 合集列表页：这个方向下我先看哪个合集
• 合集详情页：这个合集里具体有哪些内容
• 内容详情页：我现在正式开始看这一条

一句话判断：

方向页帮用户选路，合集页帮用户选这一组里的内容，内容页才是真正开始消费。

---

3. 首页 Home 的职责

3.1 首页是什么

首页是：

内容平台首页，而不是学习任务首页。

它要先解决四件事：

1. 让用户快速感知“这里内容很多”
2. 让用户能立刻开始第一条内容消费
3. 让用户继续下滑时不断遇到新的进入理由
4. 在不新增页型的前提下，把用户分发到最合适的落点

3.2 首页不负责什么

首页不负责：

• 充当学习控制台
• 深度展开某个方向下的全部合集
• 深度展开某个合集下的全部内容
• 为每个内容方向各开一种新页型

3.3 首页的落点原则

首页不是所有入口都跳向同一层页面，而是按入口颗粒度决定落点：

首页入口类型	应进入页面	说明
强单点内容入口	内容详情页	用户已经知道要点哪一条内容
单合集入口	合集详情页	用户已经知道要进哪一组内容
大主题 / 一级方向入口	合集列表页	用户只知道方向，还没决定合集

补充规则：

• 首页模块名称、数量、点击对象、阈值和降级规则，都看 yomiya-implementation-spec-core.md
• 首页顶部 chips 是轻量方向导航，不是首页第一主角
• 首页允许“原地播放 / 合集列表页 / 合集详情页 / 内容详情页”四类结果并存，但不因此新增页型

3.4 今日新闻速递 的页面归属

今日新闻速递 不是独立新页型，也不是长期 Collection。

当前冻结理解是：

• 它属于首页 Hero 的当日混合新闻分发路由
• Hero 整卡进入现有合集列表页模板承接的当日混合新闻列表
• Hero 播放按钮只负责首页原地播放

这条规则同样适用于 资讯 和 播客 方向入口：

• 资讯 顶部入口不新增“资讯频道页”，而是进入现有合集列表页
• 播客 顶部入口不新增“播客频道页”，而是进入现有合集列表页

---

4. 合集列表页 Collection List 的职责

4.1 合集列表页是什么

合集列表页是：

某个方向下的合集集合页。

它承接的是：

• 用户已决定方向
• 但还没决定具体进哪个合集

4.2 它什么时候出现

以下情况优先进入合集列表页：

1. 首页顶部方向 chips
2. Hero 整卡对应的大方向或当日混合列表
3. 任何“大主题 / 一级方向”入口
4. 任何“更多列表”类型的承接入口

4.3 它不是什么

合集列表页不是：

• 新增的“资讯频道页”
• 新增的“播客频道页”
• 合集详情页的替代品
• 单条内容消费页

也就是说，资讯方向页 和 播客方向页 本质上都是现有合集列表页模板在不同方向下的承接，不额外发明新页面类型。

---

5. 合集详情页 Collection Detail 的职责

5.1 合集详情页是什么

合集详情页是：

单个合集的展开页。

它回答的问题是：

我已经决定看这个合集了，这里面到底有哪些内容？

5.2 它应该承接什么

合集详情页应承接：

• 合集头部身份信息
• 合集内条目列表
• 全部播放或连续消费入口
• 返回所属方向继续探索的路径

5.3 它不负责什么

合集详情页不负责：

• 替用户先决定方向
• 直接替代首页的内容发现职责
• 直接替代内容详情页完成单条消费

---

6. 内容详情页 Content Detail 的职责

6.1 内容详情页是什么

内容详情页是：

单条内容的正式消费页。

它是：

• 图文、音频、视频的实际播放或阅读页面
• 用户完成第一条有效消费的主要承接页

6.2 内容详情页必须承接的下一步

内容详情页不能只负责“看完这一条”，还必须承接至少一种继续消费路径：

1. 下一条内容
2. 所属合集
3. 相关推荐

否则首页建立起来的“平台感”会在第一条内容消费后断掉。

---

7. 页面之间的跳转原则

7.1 当前主链路

flowchart LR
    A[首页] --> B[合集列表页]
    B --> C[合集详情页]
    C --> D[内容详情页]
    D --> E[下一条 / 所属合集 / 相关推荐]

7.2 典型分发路径

1. 首页顶部 旅行 / 动漫 / 资讯 / JLPT / 播客 chips 进入对应合集列表页

2. 首页某个横向或纵向合集卡 进入对应合集详情页

3. 首页某条直接外露内容 进入内容详情页

4. 首页 Hero 今日新闻速递 整卡 进入现有合集列表页模板承接的当日混合新闻列表

5. 首页 Hero 播放按钮 保持首页原地播放，不跳新页

---

8. 设计稿和参考图该怎么用

当前使用规则很简单：

• QQ 音乐、竞品截图、旧 Figma 可以参考组件形态、节奏和视觉表达
• 不能用它们反推内容层级、页面层级和对象关系
• 如果设计稿与当前执行规格冲突，先修设计稿，不反向改内容系统

---

9. 当前最关键的前端修正方向

1. 不再把“后端内容组织单位”和“前端探索呈现单位”混成一套概念。
2. 不再把首页简化成“首页 -> 内容详情页”两层结构。
3. 不再为 资讯、播客 这类方向单独发明新页型。
4. 不再在本文件重复维护首页模块冻结表，相关细节统一收口到 yomiya-implementation-spec-core.md。
5. 视觉表达继续可以迭代，但页面职责和页面层级先稳定。

---

10. 一句话总括

Yomiya 前端当前有效页面体系只有四层：首页负责发现与分发，合集列表页负责方向内选合集，合集详情页负责合集内选条目，内容详情页负责单条消费；首页模块冻结细表看 core，本文件只负责页面职责与跳转原则。