2026-04-04-yomiya-page-template-design-merge-into-07

Yomiya 页面模板 Design.md

项目：Yomiya Content System
文档性质：完整页面模板设计文档（Design.md）
用途：把当前 active 文档中的页面职责、视觉规则和分发逻辑组织成一份可复用的页面模板说明书，供产品 / iOS / 前端 / 设计协作使用
适用对象：产品 / iOS / 前端 / 设计 / Backend / Admin / Content Ops
状态：当前有效的页面模板设计总说明
最后更新：2026-04-04

---

1. 文档目标、边界、与 active 文档的分工

1.1 这份文档是什么

这份文档是一份完整的页面模板 Design.md。

它不再只是冻结当前生效规则，而是把 Yomiya 当前页面体系里“页面怎么长、模块怎么组合、共用组件怎么复用、行为规则怎么落在设计侧”系统化写清楚。

它的目标不是取代 01/06/07，而是作为它们之上的设计总说明书，为后续 iOS / 前端 / 产品协作提供统一的页面模板依据。

1.2 这份文档要解决什么问题

这份文档重点回答 4 类问题：

1. 五类页面模板分别长什么样：Home、Collection List、Collection Detail、Content Detail、Search Entry
2. 这些页面共用哪些设计构件：顶部控制层、区块标题家族、Hero、横向合集带、纵向合集行、直接内容行、更多箭头与弱辅助动作
3. 设计侧行为规则怎么统一：什么时候隐藏、什么时候缩短、什么时候退单卡、什么时候不补位、什么叫“可用但不抢主叙事”
4. 页面之间怎样形成连续浏览链路：从首页发现，到方向选路，到合集厚着陆，到内容消费，再回到下一步继续逛

1.3 这份文档不做什么

这份文档明确不负责：

• 不重复定义后端字段冻结表
• 不替代 06-首页分发与合集字段要求.md
• 不重写当前 active 的页面硬规则清单
• 不扩写成完整品牌手册或全量组件库
• 不把所有历史探索重新拉回 active 范围

它是一份页面模板设计文档，不是后端对象说明文档、运营策略文档、全量 design system handbook，也不是新一轮开放式视觉探索稿。

1.4 和现有文档的分工

• 01-当前目标与范围.md：负责阶段目标、范围和主链路边界
• 06-首页分发与合集字段要求.md：负责首页分发层对象与字段承接
• 07-视觉与页面表达.md：负责当前执行有效的页面家族、模块顺序、视觉角色和页面硬规则
• 本文档：负责把这些内容组织为完整页面模板设计文档

一句话区分：

• 06 管承接对象
• 07 管当前生效规则
• 本 Design.md 管页面模板化表达

1.5 文档语气与写法

这份文档结构上接近完整 Design.md，语言上继续保持 active 文档的短、硬、可执行。

它不追求空泛设计叙事，也不退回工程字段文档，而是偏设计执行的页面模板说明书。

---

2. 文档结构

2.1 文档头与阅读说明

文档最前面保留：文档名称、文档性质、适用对象、状态、最后更新，以及与 01 / 06 / 07 的分工说明。

2.2 总体设计目标

说明 Yomiya 是什么类型的产品、要优先服务哪类用户、页面应该传达什么气质、明确不应该长成什么。

2.3 全局页面表达原则

沉淀所有页面共享的总规则，包括页面层级、模块轻重、主动作、顶部控制层、标题外提、页面节奏和全局不做事项。

2.4 共用模板构件

定义多个页面会复用的构件家族，包括顶部控制层、Homepage Tabs、区块标题家族、Hero、横向合集带、纵向合集行、直接内容行、页面引导头部、主动作 / 次动作和底部续逛层。

2.5 五类页面模板

分别定义 Home、Collection List、Collection Detail、Content Detail、Search Entry 五类页面模板。

2.6 页面间跳转与承接关系

冻结不同粒度入口应该进入哪一层页面，保证页面不是孤立模板，而是一条连续内容探索链路。

2.7 设计侧行为规则总表

统一收口显示 / 隐藏 / 缩短 / 降级 / 不补位 / 直接深链等规则，把“视觉设计”和“内容供给现实”接起来。

2.8 附录

保留术语表、旧说法映射表、与 active 文档的关系、历史来源和本文档不覆盖的内容。

---

3. 总体设计目标

3.1 产品类型的设计定义

Yomiya 在设计上应被定义为：

一款面向内容探索者的日语沉浸内容平台。

它首先是一个“可以逛、可以点、可以连续消费”的内容平台，而不是一个以任务完成、学习进度、功能入口为主的学习控制台。

这一定义决定页面设计的优先级：

• 优先让用户看到“有什么值得点开”
• 优先帮助用户判断“点进去会去哪里”
• 优先保证浏览链路是连续的
• 不把首页做成功能导航中心或任务管理页

3.2 页面设计要服务的核心用户状态

这套页面模板优先服务的，不是带着强任务来的用户，而是：

打开 App 时，希望快速发现一条值得消费内容的人。

他们通常：

• 还没决定具体要看哪一条
• 可能只知道一个大方向
• 更容易被“看起来值得点”的模块吸引，而不是被功能入口驱动
• 希望低成本开始，再自然进入下一步

所以页面设计最重要的，不是解释系统有多完整，而是降低用户从“还没决定”到“开始消费”的阻力。

3.3 整体气质目标

Yomiya 的整体设计气质应冻结为：

轻盈、克制、内容感强。

它需要同时满足 4 个感受：

1. 轻盈：页面不能厚重、拥挤、装饰过量，控制层和辅助层应该轻，让内容先被看见
2. 克制：品牌表达不能依赖高饱和和大面积强调色，页面不靠视觉噪音制造年轻感
3. 内容感强：用户一进入就应感到这里“有很多内容可以逛”，平台感来自内容货架、模块节奏和连续浏览路径
4. 可持续浏览：页面不能只支持一次点击，每一层都应继续把用户往下一步带

3.4 参考方向的正确使用

当前最合适的参考方向，不是直接复制某个竞品，而是抽取一种节奏：

借鉴 QQ 音乐式的呼吸感、层次感和模块节奏，但不照搬它的高饱和视觉语言。

这意味着：

• 可以借鉴它的内容货架感
• 可以借鉴它的模块切换节奏
• 可以借鉴它的“丰富但不乱”的页面层级
• 但不能借鉴它那种更彩色、更娱乐化的 UI 表达

Yomiya 需要的是更安静、更克制、更适合日语内容消费的版本。

3.5 明确避开的方向

本文档明确不做：

1. 学习控制台：不把首页和方向页做成任务入口、进度仪表盘、工具导航中心
2. 资讯门户：不让页面像新闻聚合首页或密集更新流
3. 高饱和年轻化：不使用大面积鲜艳色块或每个模块一套颜色系统
4. 过度极简：不因为追求克制，把页面做得太空、太冷、太少层次

3.6 一句话设计目标

Yomiya 的页面设计目标，不是把内容系统展示得更完整，而是把内容探索与连续消费这件事做得更轻、更清楚、更值得点开。

---

4. 全局页面表达原则

4.1 页面层级原则

Yomiya 的页面必须先让用户分清楚“这一屏谁最重要”。

全局层级固定为 5 层：

1. 页面主锚点：当前页最重要的视觉入口，例如首页 Hero、合集详情页顶部 Hero、内容详情页消费主区
2. 强内容区块：承担“替你选好”或“这里值得继续点”的主区块，例如 热门推荐
3. 轻入口区块：承担方向扩展、低压力探索，例如 Homepage Tabs、轻松入门
4. 直接消费区块：让用户可以跳过进一步探索，直接进入内容，例如 播客精选、今天正在更新
5. 续逛区块：放在更后的位置，延长浏览链路，例如 还能继续逛

硬规则：

• 同一屏不能出现两个第一主锚点
• 搜索、tabs、辅助动作不能抢占主锚点层级
• 页面越往下，越应该从“判断值不值得点”过渡到“还有什么可以继续逛”

4.2 模块轻重原则

模块之间的差异，主要通过角色和节奏建立，而不是靠装饰堆出来。

页面上的视觉轻重应主要来自：

• 模块顺序
• 封面尺度
• 信息密度
• 留白
• 标题强度
• 卡片 / 列表的轻重区别

而不是来自：

• 过强背景色
• 厚重阴影
• 每个模块一套自己的视觉系统
• 过多图标头和解释文案

丰富感来自模块节奏与内容密度，不来自装饰负担。

4.3 主动作原则

每个页面只允许一个真正的主动作。

• Home：主动作应来自 Hero 或当屏最强内容消费入口
• Collection Detail：只允许一个真正主动作，例如 开始听 / 全部播放
• Content Detail：内容消费本身就是页面主动作，其他动作退居次级
• Search Entry：搜索输入是主任务，但不是视觉上最强按钮化动作

补充规则：

• 品牌红只给最重要动作和激活态
• 次动作必须明显弱于主动作
• 不允许“更多”“收藏”“分享”“筛选”与主动作竞争

4.4 顶部控制层原则

顶部控制层在 Yomiya 中始终是弱框架层，不是页面主故事。

它的职责只是：

• 标明当前页面身份
• 提供明确可用的搜索入口
• 承载最多一个轻量辅助动作

它不应该：

• 扩成任务入口组
• 膨胀成第二导航系统
• 用过强视觉压过首屏内容
• 把用户注意力从内容主锚点提前拉走

首页尤其要守住：搜索必须可用，但视觉上弱于 Hero。

4.5 标题外提原则

区块标题统一外提，不写进卡片内部。

这样能稳定建立两件事：

1. 用户先看见“这是一组什么内容”
2. 再决定是否继续看卡片或列表

规则：

• 区块标题与内容容器分离
• 更多箭头 属于区块动作，不属于卡片内容
• 标题不承担卡片说明职责
• 卡片内部只保留与点击判断直接相关的信息

4.6 页面节奏原则

Yomiya 的“年轻感”来自节奏，不来自颜色刺激。

这个节奏主要由 4 件事组成：

• 强弱模块交替
• 横向与纵向内容形态交替
• 紧凑阅读区与宽松浏览区交替
• 页面向下时持续出现新的进入理由

因此页面不应：

• 所有模块长得一样
• 所有区块密度一样
• 所有内容都用卡片表达
• 所有模块都试图争取第二强位

首页尤其要守住：Hero 后先给强精选层，再切到轻入口层，再进入直接消费层，最后落到底部续逛层。

4.7 页面首先回答什么

无论哪一类页面，设计都应优先帮助用户快速回答这 3 个问题：

1. 这是什么
2. 值不值得点
3. 点进去会去哪里

如果一个页面必须依赖大量说明文字才能理解，那它的模板就还没有成立。

4.8 全局不做事项

• 不把首页做成学习控制台
• 不把方向页做成百科式分类墙
• 不把合集页做成标签页容器
• 不把内容页做成随机推荐墙
• 不为播客、资讯、JLPT 单独发明新页面家族
• 不让模块各自发明视觉语言
• 不用高饱和颜色制造“年轻感”
• 不用过度极简牺牲平台内容感

---

5. 共用模板构件

这一章把多个页面会复用的构件先定义清楚。每个构件统一回答：构件目的、视觉角色、组成结构、适用页面、交互与点击对象、显示 / 隐藏 / 缩短规则、不该如何使用。

flowchart TD
  A[共用模板构件] --> B[顶部控制层]
  A --> C[Homepage Tabs]
  A --> D[区块标题家族]
  A --> E[内容容器家族]
  A --> F[动作构件家族]
  A --> G[行为型附属构件]
  E --> E1[Hero]
  E --> E2[横向合集带]
  E --> E3[纵向合集行]
  E --> E4[直接内容行]

5.1 顶部控制层

作用：标明页面身份，提供搜索入口或返回入口，承载最多一个轻量辅助动作。

适用页面：Home、Collection List、Collection Detail、Search Entry；Content Detail 可沿用成熟消费页样式，但仍需遵守“弱于内容主区”的原则。

设计规则：

• 首页顶部最轻
• 方向页和合集页可以稍强，但仍不能抢主内容
• 搜索可用，但不能像主 CTA 一样突出
• 不扩成多任务工具栏

5.2 Homepage Tabs

这是首页专属的轻量方向入口层。

作用：帮用户快速进入大方向，提供低成本第一层选路。

视觉角色：辅助层，轻于 Hero，轻于强内容区块。

设计规则：

• 单行、统一高度、chip-like 即可
• 只有选中态使用品牌红
• 不足内容时隐藏单个 tab，不补空位
• 不能膨胀成第二导航中枢

5.3 区块标题家族

A. 标准区块标题

用于首页与列表类内容模块，包含左侧标题、右侧 更多箭头、极少量必要弱说明。

规则：

• 标题始终外提
• 更多箭头 是动作，不是第二标题
• 不在标题下堆解释文案

B. 页面引导头部

用于 Collection List 与 Collection Detail 的页面级身份区。

包含：大标题、一行简说明、可选轻标签 / 统计、可选封面。

规则：

• 是页面身份区，不是营销 Banner
• 说明要短
• 不写成长段教学

5.4 内容容器家族

A. Hero

作用：页面第一主锚点。主要用于 Home，必要时也可作为合集页顶部整体身份区的参考。

规则：

• 大封面 / 大图像占主导
• 标题与轻标签信息简洁
• 局部强调可用红色，但不能满屏红
• 至少 2 张才轮播，不足则退单卡

B. 横向合集带

作用：承担“扫一眼”的轻探索。

适用场景：轻松入门、更多你可能想看。

规则：

• 强调横向扫读
• 信息负载轻
• 不适合承载重解释和强编辑判断

C. 纵向合集行

作用：承担“替你选好”的强精选层。

适用场景：热门推荐。

规则：

• 比完整卡片更轻
• 标题优先、图片次之
• 适合表达精选感，而不是泛列表感

D. 直接内容行

作用：让用户可直接消费内容。

适用场景：播客精选、今天正在更新、合集详情页列表。

规则：

• 标题优先
• 元信息单行
• 节奏快
• 不做资讯卡片式双段结构

5.5 动作构件家族

A. 主动作

例如：开始听、全部播放、继续播放。

规则：

• 每页只有一个真正主动作
• 品牌红主要留给这里

B. 次动作

例如：收藏、分享、查看全部、筛选 / 轻辅助动作。

规则：

• 描边或浅填充
• 明显弱于主动作
• 不得与页面主任务竞争

5.6 行为型附属构件

这类构件不是“长相核心”，但很影响页面成立。应统一定义：

• 更多箭头
• 空状态
• 缩短状态
• 隐藏状态
• 单卡降级
• 底部续逛层

这样后面写页面模板时，可以统一引用：什么情况下显示、什么情况下不显示、不够内容时如何退化、哪些退化方式允许出现、哪些不允许。

---

6. 五类页面模板

每个页面模板统一按以下结构展开：页面任务、用户进入时的状态、页面首先回答的问题、页面骨架顺序、组成模块、主动作、降级 / 隐藏规则、这页不承担什么、页面成立标准。

flowchart LR
  A[Home] --> B[Collection List]
  A --> C[Collection Detail]
  A --> D[Content Detail]
  A --> E[Search Entry]
  B --> C
  C --> D
  D --> C

6.1 Home

页面任务：建立平台感，帮用户快速发现值得点开的内容，在第一屏给出明确第一跳，并往下继续提供新的进入理由。

用户进入时的状态：还没决定具体看哪条内容，可能只知道模糊方向，更适合被内容吸引而不是被功能驱动。

页面首先回答的问题：

1. 这里是什么类型的平台
2. 现在最值得点开的是什么
3. 我如果继续往下看，还会遇到什么

页面骨架顺序：

1. 顶部控制层
2. Homepage Tabs
3. 今日新闻速递
4. 热门推荐
5. 轻松入门
6. 播客精选
7. 今天正在更新
8. 更多你可能想看（可选）
9. 还能继续逛

组成模块：顶部控制层、Homepage Tabs、Hero、标准区块标题、横向合集带、纵向合集行、直接内容行、底部续逛层。

主动作：只有一个真正强主动作，来自 Hero 或第一主消费入口。

这页不承担什么：不承担学习控制台职责、不承担方向百科页职责、不承担深度展开某个方向全部内容、不承担第二个搜索首页职责。

页面成立标准：用户应能快速感到有内容可逛、有一条内容可以立刻开始、往下滑还有不同节奏的区块，搜索存在但没抢走首页主叙事。

6.2 Collection List

页面任务：告诉用户“你进入的是哪个方向”，先露出一到两个最强路径，再用稳定合集流承接更多选择。

用户进入时的状态：已决定方向，但还没决定要进哪个具体合集。

页面首先回答的问题：

1. 我现在在哪个方向
2. 这个方向下先看哪条路径最合适
3. 如果我不选第一条，还有哪些合集可以继续挑

页面骨架顺序：

1. 顶部控制层
2. 页面引导头部
3. 一到两个最强路径区
4. 稳定合集流
5. 底部轻续逛或返回其他探索路径

组成模块：顶部控制层、页面引导头部、标准区块标题、横向或纵向合集容器、轻量续逛层。

主动作：通常没有像“播放”那样的强按钮主动作。它的主任务是帮助用户选出下一个合集，因此页面主动作体现在“最强路径块”，而不是红色按钮。

这页不承担什么：不是第二个首页、不是分类百科墙、不是密集控制面板、不是内容详情页替代品。

页面成立标准：用户应感到知道自己进入了哪个方向、很快能选一个合集进去、这页有层级而不是平铺合集海，也没有重新做成一个首页。

6.3 Collection Detail

页面任务：快速解释这个合集是什么，告诉用户为什么值得进入，给出唯一主动作，让内容列表尽早开始。

用户进入时的状态：已决定要看这个合集，但还没决定具体从哪条内容开始。

页面首先回答的问题：

1. 这是一个什么合集
2. 为什么值得进入
3. 我该从哪里开始
4. 进入后怎么持续消费

页面骨架顺序：

1. 顶部控制层
2. 顶部整体 Hero / 页面引导头部
3. 一条主动作行
4. 内容列表
5. 底部相关合集或续逛层

组成模块：顶部控制层、页面引导头部 / Hero 头部、主动作、直接内容行列表、底部续逛层。

主动作：必须有且只有一个真正主动作：开始听、全部播放、继续播放。

这页不承担什么：不是评论页、不是多标签容器、不是方向页、不是营销页。

页面成立标准：用户应感到知道这组内容是什么、知道为什么值得点、知道第一步从哪里开始、不需要先看一堆说明，内容列表已经很快出现。

6.4 Content Detail

页面任务：正式消费一条内容，让来源上下文可见，让消费后的下一步可见。

用户进入时的状态：已经确定要消费这条内容。

页面首先回答的问题：

1. 我现在看的是什么
2. 它来自哪个合集或来源
3. 看完 / 听完之后我去哪

页面骨架顺序：

1. 内容消费主区
2. 来源 / 所属合集关系
3. 下一条或继续消费入口
4. 次级辅助动作

组成模块：内容消费区、来源上下文、下一步推荐、次动作。

主动作：内容消费本身就是页面主动作。其他动作如收藏、分享、设置、解释功能，都必须弱于内容本身。

这页不承担什么：不是探索首页、不是随机推荐墙、不是方向分发页。

页面成立标准：用户应感到内容本身始终是第一焦点、来源关系可见但不抢主位、看完之后下一步很清楚。

6.5 Search Entry

页面任务：承接明确意图检索，让用户快速缩小范围，用已有卡片家族承接结果。

用户进入时的状态：通常已经有明确关键词，或知道自己要找哪类内容。

页面首先回答的问题：

1. 我能不能快速找到想要的内容
2. 结果属于哪类对象
3. 如果没找到，我接下来怎么继续

页面骨架顺序：

1. 顶部控制层 / 搜索输入
2. 搜索结果区
3. 轻空状态 / 轻建议层

组成模块：顶部控制层、搜索输入、搜索结果列表、轻空状态。

主动作：搜索输入本身是页面主任务。重点不是强按钮，而是搜索流程清晰、结果呈现稳定。

这页不承担什么：不是首页主故事、不是第二个精选首页、不是热榜与营销承接页。

页面成立标准：用户应感到搜索入口明确可用、结果结构稳定、空状态不重、不吵、不营销化。

---

7. 页面间跳转与承接关系

7.1 整体链路原则

Yomiya 的页面体系应按用户决策粒度分层：

• 还没决定看什么：进入 Home
• 已经决定方向，但没决定具体合集：进入 Collection List
• 已经决定合集，但没决定具体条目：进入 Collection Detail
• 已经决定具体内容：进入 Content Detail
• 带着明确关键词找内容：进入 Search Entry

flowchart LR
  A[还没决定看什么] --> B[Home]
  C[已决定方向\n未决定合集] --> D[Collection List]
  E[已决定合集\n未决定条目] --> F[Collection Detail]
  G[已决定具体内容] --> H[Content Detail]
  I[带着明确关键词] --> J[Search Entry]

页面层级不是按技术对象拆的，而是按用户“已经决定到哪一步”拆的。

7.2 首页入口的落点原则

首页不是所有点击都跳同一层页面，而要按入口颗粒度，把用户送到最合适的落点。

A. 强单点内容入口

例如：播客精选 的某条内容、今天正在更新 的某条内容、首页 Hero 的可直接消费动作。

落点：Content Detail

原因：用户已经决定点这条内容，不应再被迫经过合集页。

B. 单合集入口

例如：热门推荐 某个合集、轻松入门 某个合集、更多你可能想看 某个合集。

落点：Collection Detail

原因：用户已经认可“这一组内容值得进入”，但还没决定组内哪一条。

C. 大方向 / 一级路径入口

例如：Homepage Tabs、Hero 整卡如果承接的是方向性列表、页面中“看更多这个方向”的入口。

落点：Collection List

原因：用户只决定了方向，还没决定进哪个合集。

7.3 Collection List 的承接原则

方向页的职责，不是把所有内容直接摊开给用户，而是：

• 先帮助用户在方向内继续选路
• 再把用户送入某个合集

它的主要出口应是进入 Collection Detail。

只有在特殊强单点入口成立时，才允许直接进入内容页。默认情况下，不建议方向页大面积跳过合集层直接打到内容页。

7.4 Collection Detail 的承接原则

合集页是整套链路里最重要的厚着陆页。它接住的是：首页过来的合集兴趣，和方向页过来的方向内选择。

它必须尽快把用户送到两种动作之一：

1. 开始连续消费：通过主动作
2. 选择一条具体内容：通过内容列表

因此合集页最核心的出口是进入 Content Detail。

7.5 Content Detail 的回流原则

内容页不能成为链路终点，否则首页建立起来的平台感会在第一条内容后断掉。

消费后，至少应提供一种最强下一步：

1. 同合集下一条
2. 返回所属合集
3. 相关推荐 / 相近路径

优先级建议固定为：

• 第一优先：同合集下一条
• 第二优先：所属合集
• 第三优先：相关推荐

7.6 搜索在整套体系中的位置

搜索是明确入口，但不是首页主叙事。

它是：

• 一条高意图、低噪音的补充入口
• 用来承接“我知道我在找什么”
• 不是重新组织整个平台的第二首页

搜索结果落点也应服从同一原则：

• 搜到单条内容 → Content Detail
• 搜到某个合集 → Collection Detail
• 搜到某个方向入口 → Collection List

7.7 链路设计的核心判断

当一个入口要决定跳哪里时，只问一件事：

用户此刻到底已经决定到了哪一层？

• 还没决定内容，只决定方向 → Collection List
• 已决定合集 → Collection Detail
• 已决定具体内容 → Content Detail

这样可以避免两个常见错误：

1. 把所有入口都粗暴打到内容页
2. 把所有入口都先绕进某个中间页

---

8. 设计侧行为规则总表

8.1 设计侧退化原则

Yomiya 的页面退化规则必须遵守 4 条总原则：

1. 优先隐藏，不造假补位：内容不足时可以隐藏模块，不能为了把页面填满临时造一个新模块顶上去
2. 优先缩短，不改变模块职责：数量不足时可以缩短，但不能因为数量变少，就把模块改成另一种东西
3. 优先单卡降级，不重写结构：Hero 不足轮播条件时退单卡，不为此发明另一套首页头图逻辑
4. 退化后仍要保持页面角色稳定：页面即使“缺货”，也不能变成另一种产品气质

退化只能削弱呈现，不能改变模块身份。

8.2 模块显示 / 隐藏的基本逻辑

所有模块都建议先分成三类状态：

• 正常显示：数据量和条件都满足，按完整模板渲染
• 缩短显示：仍能成立，但数量变少，保持同一模块形态，不替换成别的模块
• 直接隐藏：数量或条件不足，无法成立，整块不显示，不补空位、不造新位、不发明过渡模块

8.3 首页模块级规则

今日新闻速递

• 至少 2 张卡时轮播
• 不足时降为单卡
• 播放队列不足时隐藏播放按钮
• 不能因为库存不足，把 Hero 变成搜索头或功能入口区

热门推荐

• 固定是 Hero 后第一强区块
• 少于 3 个强合集时整块隐藏
• 不允许被 轻松入门 抢位

轻松入门

• 不足 4 个合集时整块隐藏
• 不能改成纵向精选列表
• 不能上移替代 热门推荐

播客精选

• 默认按 5 条视觉设计
• 实际允许 3-5 条自适应
• 低于成立下限时整块隐藏

今天正在更新

• 默认按 5 条视觉设计
• 实际允许 3-5 条自适应
• 语义始终是“这里真的在更新”
• 不能退化成泛强合集曝光层

更多你可能想看

• 只在库存充足时显示
• 不足 4 个合集时整块隐藏
• 不能拿来补底部续逛位

还能继续逛

• 固定承担底部续逛角色
• 池子不足时缩短数量
• 不造新模块补位
• 不与 更多你可能想看 互相替名

8.4 更多箭头 的规则

显示条件：

• 确实存在“进入下一层查看更多”的承接页
• 当前模块不是最终态展示
• 有足够内容值得继续展开

不显示条件：

• 模块本身已经是最终态
• 没有清晰承接页
• 内容量不足，展开意义不成立

硬规则：

• 更多箭头 是动作，不是装饰
• 不允许为了“看起来完整”而机械给每个区块都加
• 它出现时，必须清楚知道会把用户送去哪里

8.5 不补位规则

当某个模块不成立时：

• 可以隐藏
• 可以缩短
• 可以让页面整体更短

但不能：

• 临时拉别的模块顶替
• 复制相邻模块充数
• 把页面重排成另一套结构
• 用营销块、榜单块、功能块去补内容缺口

Yomiya 要的是稳定的页面模板，不是每次缺货就重新拼首页。

8.6 允许直接深链的规则

允许直接深链 Content Detail

• 播客精选
• 今天正在更新
• 其他明确属于“直接消费层”的内容行模块

默认不直接深链

• 热门推荐
• 轻松入门
• 更多你可能想看
• 方向型入口
• 大主题入口

原因：这些模块承担的是“选组”或“扩面”，不是单点立即消费。

8.7 搜索与空状态规则

• 搜索空状态保持轻，不引入热榜、排行墙、营销横幅
• 搜索结果复用已有卡片 / 行样式家族
• 搜索即使无结果，也不能突然变成一个精选首页
• 搜索建议层若存在，也必须弱于真正搜索结果

8.8 页面级稳定性规则

• 同类模块在不同页面中的角色不能来回漂移
• 同一页面不要因为内容量变化而变成另一种页型
• 首页再缺内容，也不能失去首页的主叙事层级
• 方向页再简单，也不能变成平铺列表
• 合集页再轻，也必须保住“主动作 + 列表尽早开始”
• 内容页再丰富，也不能失去“内容第一焦点”

---

9. 附录

9.1 术语表

本文档中的核心术语包括：Home、Collection List、Collection Detail、Content Detail、Search Entry、Homepage Tabs、Hero、横向合集带、纵向合集行、直接内容行、主动作、次动作、续逛层。

这些术语用于统一设计文档中的页面与模块语言，不用于替代后端技术对象命名。

9.2 旧说法映射表

• 继续发现 → 更多你可能想看
• 重点合集外露区 → 今天正在更新
• 继续浏览流 → 还能继续逛
• chips / 快速筛选标签 / tabs 混用 → Homepage Tabs

这份映射表只用于历史追溯，不代表旧叫法仍可继续使用。

9.3 与 active 文档的映射关系

• 01-当前目标与范围.md：负责阶段目标、范围和主链路边界
• 06-首页分发与合集字段要求.md：负责首页分发层对象与字段承接
• 07-视觉与页面表达.md：负责当前执行有效的视觉规则与页面硬规则
• 本文档：负责把这些内容组织为完整页面模板设计文档

9.4 历史来源清单

这份文档的主要历史来源包括：

• archive/plans/2026-03-30-yomiya-visual-design-system-design.md
• archive/specs/yomiya-frontend-page-architecture.md
• archive/specs/yomiya-implementation-spec-core.md
• archive/specs/yomiya-canonical-naming.md
• archive/snapshots/页面线框/home-wireframe.html
• archive/snapshots/页面线框/collection-list-wireframe.html
• archive/snapshots/页面线框/collection-detail-wireframe.html

这些材料用于保留设计收敛证据，不重新作为默认入口。

9.5 iOS 设计来源说明

本轮文档吸收了 EveryDayJapanese iOS 仓库中的基础设计定义：

• 品牌红：#F33454
• 文本层级：text_fill_1 / text_fill_2 / text_fill_3
• 间距节奏：12 / 16 / 24 / 32
• 圆角节奏：8 / 12 / 16 / 24
• 轻控制、内容优先、列表与详情页的弱装饰风格

本文档没有直接照搬现有 iOS 的具体新闻页实现细节、与旧内容结构绑定过深的历史页面命名，以及不适合当前 Yomiya 页面家族的特定业务 UI。

9.6 本文档不覆盖的内容

本文档不覆盖：

• 后端字段与 API 结构
• Admin 配置后台
• 运营填充流程细节
• 完整品牌系统与营销规范
• 全量组件库实现细节
• 未进入当前页面家族的远期页型