Yomiya Frontend Page Architecture
Yomiya Frontend Page Architecture
Section titled “Yomiya Frontend Page Architecture”文档性质：前端页面体系与页面职责梳理
用途：在不让设计稿反向决定内容结构的前提下，明确 Yomiya 前端页面系统应该如何承载内容系统
适用对象：产品 / iOS / 前端 / 设计 / 内容运营
最后更新：2026-03-29
1. 本文档的前提
Section titled “1. 本文档的前提”这份文档有一个非常重要的前提：
页面结构与页面职责，以内容系统文档和执行规格为准。 竞品截图和旧 Figma 设计稿，只作为组件形式、信息布局和页面表达方式的参考，不作为结构依据。
也就是说：
- 先看文档定义的内容系统结构
- 再决定前端页面如何承载它
- 最后再参考每日英语与旧 Figma 的样式表达
不能反过来用设计稿去决定内容系统结构。
补充规则：
- 页面职责、页面层级看本文档
- 页面内所有可见元素、数量、点击结果、隐藏规则，以
yomiya-implementation-spec-core.md中的元素冻结表为准 - 原型里不允许长期保留“说明跳哪一页”的提示性文案，这类信息只存在于规格文档
2. 当前最重要的结构修正
Section titled “2. 当前最重要的结构修正”Yomiya 前端页面当前最重要的修正，不是“改一版首页样式”，而是：
把后端内容组织单位和前端探索呈现单位彻底拆开。
后端内容组织单位
Section titled “后端内容组织单位”- Channel
- Collection
- Series
- Topic
- Item
前端探索呈现单位
Section titled “前端探索呈现单位”- 搜索入口
- quick filters / chips
- 推荐信息流
- 模块化内容区块
- 列表展开页
- 内容详情页
关键原则：
Collection 很重要，但它不等于首页主视觉单位。
首页的探索体验，应优先服从用户如何逛内容，而不是服从后台内容模型长什么样。
3. 前端页面体系总览
Section titled “3. 前端页面体系总览”flowchart TD
A[首页 Home] --> C[合集列表页 Collection List]
A --> D[合集详情页 Collection Detail]
A --> E[内容详情页 Content Detail]
C --> D
D --> E
E --> D
E --> A
这四层页面分别承担什么角色
Section titled “这四层页面分别承担什么角色”3.1 页面职责对照图（新增）
Section titled “3.1 页面职责对照图（新增）”flowchart LR
A[首页
负责发现与分发] --> C[合集列表页
负责方向下的合集选择] --> D[合集详情页
负责合集内部条目展开] --> E[内容详情页
负责单条内容消费]
3.2 页面职责简表（新增）
Section titled “3.2 页面职责简表（新增）”| 页面层 | 主要任务 | 用户状态 | 不该承担什么 |
|---|---|---|---|
| 首页 | 发现、推荐、引导进入 | 还未决定具体看什么 | 深度展开全部内容 |
| 合集列表页 | 在方向内选择具体合集 | 已决定方向，未决定合集 | 直接替代合集详情页 |
| 合集详情页 | 在合集内选择具体条目 | 已决定合集 | 替代内容详情页消费 |
| 内容详情页 | 真正消费单条内容 | 已决定具体内容 | 承担前置探索 |
3.2.1 第一次读就能懂的页面理解法
Section titled “3.2.1 第一次读就能懂的页面理解法”如果有人第一次接触这套页面，不要先记英文页名，先按用户脑子里的问题理解：
- 首页：这里有什么值得看
- 合集列表页：这个方向下我该先看哪一个合集
- 合集详情页：这个合集里具体有哪些内容
- 内容详情页：我现在正式开始看这一条
对应到概念上：
- 方向：一条路，比如
旅行、动漫、资讯 - 合集：一组已经替用户整理好的内容，比如
去日本旅行必备 - 内容：一条可以直接消费的图文、视频或音频
一句话判断：
方向页是帮用户选路，合集页是帮用户选这一组里的内容，内容页才是真正开始消费。
- 首页 Home：内容发现首页
- 合集列表页 Collection List：某个一级主题 / 内容方向下的合集集合页
- 合集详情页 Collection Detail：单个合集的展开页，承载该合集下的具体内容条目
- 内容详情页 Content Detail：单条内容消费页
4. 首页 Home 的角色定义
Section titled “4. 首页 Home 的角色定义”4.1 首页不是做什么的
Section titled “4.1 首页不是做什么的”首页不是：
- 学习任务主页面
- 课程目录页
- 功能总入口页
- 榜单堆叠页
4.2 首页是什么
Section titled “4.2 首页是什么”首页是：
多模板内容分发首页。
它要先解决四件事：
- 让新用户快速觉得“这里已经替我选好了”
- 让用户能立刻开始第一条内容消费
- 让用户继续下滑时不断遇到新的进入理由
- 在不增加新页型的前提下，把用户分发到最合适的落点
4.3 首页固定结构（Phase 1 冻结版）
Section titled “4.3 首页固定结构（Phase 1 冻结版）”首页自上而下固定为：
- 顶部控制层
- 顶部分类 chips
- Hero 新闻速递轮播
- 热门推荐合集（首个纵向外露合集）
- 轻松入门（横向密集合集带）
- 播客精选（高权重纵向外露合集）
- 继续发现（横向密集合集带）
- 重点合集外露（如 NHK 今日要闻）
- 底部续逛合集流
这 9 层已经足够支撑 Phase 1。
当前明确不进入首页固定结构的模块：
- 榜单
- 常驻专题位
- 任务化学习模块
- 多套并行播客专区
- 田字格方向入口
- 独立的轻松入门专区
4.4 顶部控制层
Section titled “4.4 顶部控制层”顶部控制层只承担：
- 搜索入口
- 页面标题或品牌感
- 必要的轻量状态入口
它不承担：
- 学习计划控制台
- 重运营推荐位
- 第二排大导航
4.5 顶部分类 chips 的职责冻结
Section titled “4.5 顶部分类 chips 的职责冻结”首页顶部的 quick filters / 分类 chips 是：
轻量方向导航，不是首页第一主角。
Phase 1 冻结 chips
Section titled “Phase 1 冻结 chips”旅行动漫资讯JLPT播客
日本文化 保留在首页内容模块和合集体系里，不进入首页顶层 chips。
chips 的职责
Section titled “chips 的职责”- 给主动探索型用户一条快捷路
- 其他方向 chip 直接进入对应的合集列表页
- 提醒用户“我也可以不跟着首页推荐走”
chips 不承担
Section titled “chips 不承担”- 首页第一说服力
- 模块化内容展示
- 首页资讯模块的内部切换
4.6 首页模块模板体系
Section titled “4.6 首页模块模板体系”Yomiya 首页采用多模板混排，不再把所有模块压成同一种卡片。
Phase 1 首页模板固定为：
- Hero 新闻速递轮播模板：承接新闻速递型当日混合路由，支持左右滑动
- 横向密集合集带模板：承接高密度合集分发，一屏应看到多张卡，支持快速扫更多合集
- 纵向推荐合集列表模板：承接首页第一纵向推荐区，直接纵向列出强合集，不放大图标头部和解释文案
- 纵向直接列表模板：承接播客、NHK 等纵向模块，标题在卡片外部，卡内直接列出内容行，不放大图标头部和解释文案
- 续逛合集流模板：在首页下半段继续延长可下滑深度
补充规则：
- 这里定义的是模板职责，不是数量冻结表
- 每个模板的具体数量、上线阈值、隐藏规则，以
yomiya-implementation-spec-core.md为准 - section 标题行允许在“真实合格数量超过首页展示上限”时带一个右侧
更多箭头，它只是溢出提示与更多入口，不构成新模板类型
当前明确不做：
- 榜单模板
- 为了完整而生的专题模板
- 单一模板覆盖全部首页模块
4.7 首页模块落点规则
Section titled “4.7 首页模块落点规则”首页允许四种交互结果并存：
- 首页原地播放：只允许 Hero 轮播卡右下角播放按钮触发
- 合集列表页：Hero 轮播卡主体、顶部 chips
- 合集详情页：热门推荐纵向合集列表、横向密集合集带、纵向直接列表模块标题、底部续逛合集流
- 内容详情页：纵向直接列表模块中列出的具体内容条目
判断原则很简单：
- Hero 的整卡点击进入合集列表页，不直达单条内容
- Hero 的播放按钮只负责首页原地播放，不承担跳页
- 热门推荐纵向列表直接分发单合集，不承担内容条目外露
- 横向合集带优先分发单合集
- 纵向直接列表模块用 section 标题承担合集入口，用列表行承担具体内容入口
- 如果横向合集带或纵向列表模块的真实合格数量超过首页展示上限，则在 section 标题右侧显示
更多箭头 - 多合集模块的
更多箭头进入现有合集列表页模板承接的“更多列表”；单合集内容模块的更多箭头进入对应合集详情页 更多箭头复用现有合集列表页 / 合集详情页，不新增任何新页型
4.7.1 今日新闻速递 的产品定义
Section titled “4.7.1 今日新闻速递 的产品定义”今日新闻速递 不定义为标准 Collection。
它是：
首页 Hero 专用的当日混合新闻路由。
它的来源是：
NHK 新闻Yahoo 新闻
这两条内容集合按当日优先级混排，生成：
- Hero 轮播展示
- Hero 右下角播放按钮对应的混合播放队列
- Hero 整卡点击进入的“今日混合新闻列表”
但它不成为长期货架，不单独进入 Collection 体系。
这意味着：
- 长期货架仍然是
NHK 今日要闻、日本娱乐速报（Yahoo 来源）等标准合集 今日新闻速递只属于首页分发层- 它不会打破
Collection角色，只是在首页借用现有列表页模板承接
4.8 首页表达原则
Section titled “4.8 首页表达原则”原则 1：首屏先给“替你选好了”的感受
Section titled “原则 1：首屏先给“替你选好了”的感受”首页第一说服力来自 Hero 新闻速递轮播和紧接着的热门推荐纵向外露合集，不来自先选分类。
原则 2：首页的丰富感来自连续模块堆叠
Section titled “原则 2：首页的丰富感来自连续模块堆叠”不是首屏塞满，而是纵向外露合集和横向滑动带交错出现，让用户继续下滑仍有内容可逛。
原则 3：底部续逛流是长度补充层
Section titled “原则 3：底部续逛流是长度补充层”它的职责是延长浏览，不是再开一套新运营主战场。
原则 4：空模块直接隐藏
Section titled “原则 4：空模块直接隐藏”首页不出现“待补充”“敬请期待”式占位。
原则 5：Hero 不写解释性标题
Section titled “原则 5：Hero 不写解释性标题”首页 Hero 不再出现 今日推荐、直达内容详情页 这类解释性辅助文字，而是直接让轮播内容本身承担说服力。
原则 6：纵向外露合集标题外提
Section titled “原则 6：纵向外露合集标题外提”所有首页纵向模块的标题都采用 section 标题样式，左对齐放在卡片外部，不在卡片内部重复写一遍。
原则 6.1：首个纵向区不写自我说明
Section titled “原则 6.1：首个纵向区不写自我说明”Hero 下方的 热门推荐 模块，直接进入纵向合集清单。
它不再包含：
- 大图标式头部
- “这是热门推荐”一类说明文案
- 单合集的内容条目外露
原则 6.2：其他纵向模块也不写自我说明
Section titled “原则 6.2：其他纵向模块也不写自我说明”日语播客精选、NHK 今日要闻 这类纵向模块，也统一使用直接列表样式。
它们同样不再包含：
- 大图标式头部
- 标签说明区
- 模块解释段落
交互固定为：
- section 标题进入合集详情页
- 列表行进入内容详情页
它只回答一件事：
- 现在最值得点进的 5 个合集是什么
原则 7：播客进入首页前半段高权重外露
Section titled “原则 7：播客进入首页前半段高权重外露”播客不再只作为顶部 chips 或低权重合集位存在。
Phase 1 首页允许且只允许一个高权重播客外露模块，位置固定在：
- 热门推荐纵向外露之后
- 继续发现横向合集带之前
这样可以把播客放进吊二屏附近，增强“内容很多、类型也丰富”的感受，但不新增第二套播客专区。
5. 合集列表页 Collection List 的角色定义
Section titled “5. 合集列表页 Collection List 的角色定义”5.1 合集列表页是什么
Section titled “5.1 合集列表页是什么”合集列表页是：
某个方向下的合集集合页。
它承接的是：
- 用户已决定方向
- 但还没决定具体进哪个合集
5.2 它什么时候出现
Section titled “5.2 它什么时候出现”当入口代表的是一个大方向而不是单合集时，应先进入合集列表页。
Phase 1 的典型方向包括：
- 资讯
- 旅行
- 动漫日剧
- JLPT
- 播客
- 日本文化
5.3 方向页不是新页型
Section titled “5.3 方向页不是新页型”产品上可以把 资讯 或 播客 的落点叫作“方向页”，但页面体系上，它们仍然是：
合集列表页 Collection List。
不新增第六种页面类型。
资讯方向页首版冻结
Section titled “资讯方向页首版冻结”资讯 顶部 chips 进入同一种合集列表页。
首版先固定突出两条主路：
NHK 今日要闻日本娱乐速报（Yahoo 来源）
这两条路下面再继续展开更多资讯合集。
播客方向页首版冻结
Section titled “播客方向页首版冻结”播客 顶部 chips 也进入同一种合集列表页。
首版结构建议：
- 头部说明
- 重点播客路线
- 更多可继续下滑的播客合集
5.4 合集列表页固定结构
Section titled “5.4 合集列表页固定结构”合集列表页固定包含：
- 方向头部信息
- 重点路线卡或重点合集卡
- 标准合集列表
- 继续下滑的更多合集
它不直接承担深度单条消费。
补充约束：
- 方向头部采用图、标题、说明一体化布局，不再把说明拆成独立段落区
收藏、全部播放这类主动作不进入方向级合集列表页
6. 合集详情页 Collection Detail 的角色定义
Section titled “6. 合集详情页 Collection Detail 的角色定义”6.1 合集详情页是什么
Section titled “6.1 合集详情页是什么”合集详情页是：
单个合集的深度承接页。
它不是薄薄一层过渡页，而是平台感的重要组成部分。
6.2 合集详情页固定结构
Section titled “6.2 合集详情页固定结构”Phase 1 合集详情页固定包含：
- 合集头部信息
- 主动作区（收藏、全部播放）
- 内容条目列表
为什么要做厚
Section titled “为什么要做厚”- 让用户进入合集后立刻知道这是什么、值不值得收藏、能不能直接连播
- 承接 QQ 音乐式“头部一体化 + 主动作 + 长列表”的深页体验
- 降低用户在合集内消费一次后立刻流失的概率
6.3 合集详情页的落点
Section titled “6.3 合集详情页的落点”合集详情页里的核心点击落点仍然是内容详情页。 合集详情页不再承担二次合集分发层。
7. 内容详情页 Content Detail 的角色定义
Section titled “7. 内容详情页 Content Detail 的角色定义”7.1 内容详情页在 Phase 1 的处理方式
Section titled “7.1 内容详情页在 Phase 1 的处理方式”内容详情页在 Phase 1 不重新设计页面类型，而是复用现有客户端成熟界面：
- 图文内容复用当前新闻详情页
- 视频内容复用当前导入 / 播放界面
本轮不再提供内容详情页原型，直接复用现有客户端成熟页面。
7.2 内容详情页必须承接的下一步
Section titled “7.2 内容详情页必须承接的下一步”消费完一条内容后，至少要给出以下之一：
- 下一条内容
- 所属合集入口
- 相关推荐
如果内容消费完就断掉，前面的首页和合集设计都会被削弱。
8. 页面之间的跳转关系
Section titled “8. 页面之间的跳转关系”flowchart TD
A[首页 Home] --> C[合集列表页 Collection List]
A --> D[合集详情页 Collection Detail]
A --> E[内容详情页 Content Detail]
C --> D
D --> E
E --> D
E --> A
首页典型分发
Section titled “首页典型分发”- Hero 轮播卡主体 -> 合集列表页
- Hero 播放按钮 -> 首页原地播放
- 热门推荐 / 轻松入门 / 继续发现 标题右侧更多箭头 -> 合集列表页
- 热门推荐纵向合集列表 -> 合集详情页
- 轻松入门横向合集带 -> 合集详情页
- 播客精选 / 重点合集纵向直接列表标题与标题右侧更多箭头 -> 合集详情页
- 播客精选纵向直接列表行 -> 内容详情页
- 重点合集纵向直接列表行 -> 内容详情页
- 底部续逛合集流 -> 合集详情页
9. 用 QQ 音乐和旧 Figma 时，应该怎么用
Section titled “9. 用 QQ 音乐和旧 Figma 时，应该怎么用”9.1 QQ 音乐参考图的作用
Section titled “9.1 QQ 音乐参考图的作用”QQ 音乐当前只拿来参考三件事：
- 多模板首页怎么连续下滑
- 合集列表页怎么承接一个方向
- 合集详情页怎么做成厚页
不能拿来直接决定：
- Yomiya 的分类命名
- Yomiya 的内容逻辑
- Yomiya 的页面类型数量
9.2 旧 Figma 的作用
Section titled “9.2 旧 Figma 的作用”旧 Figma 仍可参考：
- 组件样式基础
- 页面信息块组织方式
- 分类卡和列表卡的基础表达
但不能反向决定：
- 页面职责
- 内容系统结构
- 首页模块顺序
10. 当前最关键的前端修正方向
Section titled “10. 当前最关键的前端修正方向”首页从“旧功能入口页”收成“Hero 轮播 + 横滑合集带 + 纵向外露合集卡”的内容分发页。
首页不保留 全部分类 入口，不再单独做方向选择层。
资讯页与播客页继续用合集列表页承接，不新增页型。
合集详情页必须做厚，不再允许薄页过场。
内容详情页 Phase 1 直接复用客户端成熟界面，不在这轮重新发散。
11. 一句话总括
Section titled “11. 一句话总括”Yomiya Phase 1 的前端页面体系已经收口成一条明确主线：首页负责分发，合集列表页负责方向内选择，合集详情页负责厚承接，内容详情页负责真实消费；不再新增页型，不再补榜单，也不再保留 全部分类 这种承接不足的入口，只把这条链路做硬。