07-视觉与页面表达

07-视觉与页面表达

文档性质：Phase 1 当前执行有效的视觉与页面表达与页面模板总说明
用途：把首页、合集列表页、合集详情页、内容详情页和搜索入口的视觉角色、模块节奏、显示规则、页面模板与设计侧行为规则冻结成唯一 active 设计文档
边界：

• 这份文档是当前唯一页面设计主文档
• 信息结构、分发层和字段要求看 ./06-首页分发与合集字段要求.md
• 当前系统现实仍以 ./02-当前系统现实.md 为准
• 这份文档不扩写成长期全量品牌与组件系统手册
• 旧设计拆分稿、设计草案和过程计划全部进入 ./archive/ 默认读者：产品 / iOS / 设计 / Backend / Admin / Content Ops
  最后更新：2026-04-16 维护原则：
• 这份文档是 active source，不是一次性冻结稿。
• 只要前端验证、review 或用户盘问形成了更稳定的结论，就必须同步回写这里，避免代码与设计源分叉。
• 已拍板规则写成硬规则；仍在观察中的判断要明确写成“允许变化 / 待继续验证”，不能假装已经永久冻结。

---

1. 这份文档解决什么问题

当前 active 体系里，06 已经回答了首页 V1 需要哪些对象和字段，这份文档统一回答：

1. 页面之间的视觉角色怎么区分
2. 首页各模块的视觉轻重和顺序怎么冻结
3. 哪些旧命名和旧表达应该停止使用
4. 五类页面模板怎样成立
5. 页面之间怎样形成连续浏览链路
6. 哪些情况下应该使用哪一种组件原型
7. 设计侧显示 / 隐藏 / 缩短 / 降级规则怎么统一

一句话说，这份文档既回答“现在怎么呈现”，也回答“这些页面模板怎样作为一套系统成立”。

---

2. 与其他 active 文档的分工

• 01-当前目标与范围.md 回答当前轮次要做什么、首页主链路和边界是什么
• 06-首页分发与合集字段要求.md 回答首页 V1 需要什么承接对象和最小字段
• 07-视觉与页面表达.md 回答这些对象在页面上应该以什么视觉角色、顺序、密度、页面模板和行为规则出现

一句话区分：

• 06 管“怎么承接”
• 07 管“怎么呈现，以及怎样形成一套页面模板系统”

---

3. 当前视觉原则

当前页面表达只守住这几条：

• 首页是内容平台首页，不是学习控制台
• 丰富感来自模块节奏、内容密度和层级清晰，不来自厚重装饰
• 年轻感来自裁切、留白、模块呼吸感和轻快节奏，不来自高饱和配色
• 品牌红继续只做最重要动作和激活态，不做大面积背景
• 搜索和控制层始终弱于 Hero 与内容模块
• 页面首先帮助用户判断“这是什么、值不值得点、点进去去哪里”
• 当前 active 视觉默认采用浅色通透层级，不采用“边框定义层级”的旧做法
• 层级优先通过浅色面、留白、圆角和信息密度区分；当前 active 默认不使用阴影作为层级语言
• 如果一个组件去掉边框后会失去层次，应该先调整底色与间距，而不是把描边加回来

3.1 阅读密度与间距冻结

本轮前端收口后，阅读友好感不再靠单个组件各自微调，而统一按下面这套密度规则执行：

• 区块标题统一比列表信息更重半级，负责先把阅读锚点立起来
• 列表标题、副标题、meta 统一走更紧凑的 QQ 音乐式阅读节奏，不回到松散杂志排版
• 标题和副标题属于同一阅读群组，组内间距必须明显小于模块与模块之间的间距
• 搜索栏、Homepage Tabs、Hero、模块标题、列表主体之间统一遵守“组内紧、组间松”
• 首页底部 还能继续逛 因卡片体量更大，卡片与卡片之间的垂直间隔必须明显大于普通纵向列表行距
• 当阅读感不够时，优先改字阶、字重、留白和组距，不优先回退到描边
• 当某条旧硬规则在真实前端验证中持续破坏阅读感，必须回到本文件更新规则，而不是要求实现层继续硬扛

页面级硬规则：

• 所有区块标题统一外提，不写进卡片内部
• 同一页面只允许一个真正的主动作
• 不引入榜单、常驻专题、方向田字格和独立新手专区
• 不为播客、资讯、JLPT 另外长出新页面家族

3.2 本轮可冻结成约束的结论

这轮 session 已经形成可以直接约束设计与实现的结论，不再只是讨论意见：

1. 首页不保留品牌标题，搜索栏直接承接灵动岛下方空间
2. 首页一级 Homepage Tabs 是页内内容状态切换器，不是默认页面跳转器
3. 推荐 必须是默认命中 tab，播客 必须固定放在第二位
4. Hero 是首页唯一允许保留“白底 + 镂空三角”播放语言的区域
5. 纵向内容行里的视频提示只保留白色三角 glyph，不再外挂白色圆底
6. 除 Hero 外，其余独立播放按钮统一使用“白底 + 黑色实心三角”，且默认不加描边
7. 当前 active 页面系统默认不使用矩形外描边、chips 外描边、按钮外描边和播放按钮外描边
8. 合集详情页顶部一旦已经进入合集本身，就不再重复显示“这是合集”的 icon 提示
9. 合集详情页顶部头部去掉整块色块式说明框，固定为“左封面 + 右侧介绍”的透气头部
10. 合集详情页列表必须尽早开始，不能再被标题、tag 或说明层继续往下压
11. Hero 右上图片区必须缩小，并与右下播放按钮形成明确间隔，二者右缘保持对齐
12. 首页整体阅读密度统一向“标题更重、列表更紧、模块间距更有节奏”收口
13. 搜索页必须完整复用首页的共享搜索框和区块标题语言，不再保留“看起来相似但独立实现”的第二套系统
14. 内容详情页不保留独立桥接面板，不再为“来源合集 / 继续学习”搭建单独舞台
15. 首页底部 还能继续逛 固定增加探索型区块标题，当前 active 标题统一使用 继续探索
16. 当前 active 页面系统默认删除阴影表达，不把“极轻阴影”作为常规层级语言

换句话说，这轮结论已经进入 active 约束层，后续如果要改，必须回到这份文档修改，而不是在实现里局部回退。

---

4. 歧义冻结表

以下旧说法现在一律废弃，统一按右侧口径执行：

旧说法	现在统一口径	说明
继续发现	更多你可能想看	表示第二梯队横向扩面，只在库存充足时显示
重点合集外露区	今天正在更新	不是泛强合集外露，而是“这里真的在更新”的证明层
继续浏览流	还能继续逛	固定承担首页底部续逛角色
首页底部探索块标题未命名 / 继续探索 混用	继续探索	当前首页底部探索型区块标题的统一可见名称
chips / 快速筛选标签 / tabs 混用	Homepage Tabs	对象名统一；视觉上可以是 chip-like，但文档不再混称
播客精选 / 今天正在更新 固定 5 条	默认按 5 条视觉设计，允许 3-5 条自适应	视觉上按 5 条家族设计，库存不足时允许缩短
Hero 后区块不固定	Hero 后第一强区块固定为 热门推荐	不允许让 轻松入门 或 播客精选 抢首页第二强位

补充冻结：

• 更多你可能想看 和 还能继续逛 不是一个模块的两个名字
• 更多你可能想看 负责拉宽探索面
• 还能继续逛 负责延长浏览链路，并固定出现在更靠后的位置

---

5. 页面家族与承接链路

当前只保留 5 类页面表达：

1. Home
2. Collection List
3. Collection Detail
4. Content Detail
5. Search Entry

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

补充冻结：

• Home 内部现在包含 推荐态 / 分类态 两种内容状态
• Homepage Tabs 默认只负责在 Home 内切换状态，不默认跳转 Collection List
• Collection List 仍然保留为页面家族的一员，但它已经不是首页一级 tabs 的默认承接页

页面	主要任务	不承担什么
Home	平台感、发现、第一跳分发、页内方向切换	学习控制台、分类百科、第二个搜索页
Collection List	明确方向后的独立承接页 / 二级入口	首页一级 tabs 的默认落点、第二个首页、密集控制面板
Collection Detail	单合集厚着陆页	评论页、标签页容器、播客专属模板
Content Detail	实际消费	前置探索页、随机推荐墙
Search Entry	明确意图检索	首页主叙事、第二个精选首页

页面承接的判断规则只看一件事：

• 还没决定看什么 → Home
• 已经决定方向，但不是通过首页一级 tabs 的页内切换进入，并且需要独立方向承接页 → 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]

---

6. 首页视觉结构

6.1 首页是双状态页面，不是单一静态页

首页现在冻结为两个内容状态共用同一套顶层控制区：

1. 推荐态
2. 分类态

推荐态 的固定顺序为：

1. 顶部控制层
2. Homepage Tabs
3. 今日新闻速递
4. 热门推荐
5. 轻松入门
6. 播客精选
7. 今天正在更新
8. 更多你可能想看，仅库存充足时显示
9. 还能继续逛，以带 继续探索 标题的独立模块出现

分类态 的固定顺序为：

1. 顶部控制层
2. Homepage Tabs
3. 分类合集卡片流

补充规则：

• Homepage Tabs 命中 推荐 时显示完整首页
• 命中任一非 推荐 tab 时，首页直接切成分类合集卡片流
• 这一步是页内状态切换，不是跳转 Collection List
• 还能继续逛 固定承担底部续逛流角色，并明确带有 继续探索 区块标题
• 更多你可能想看 是可选扩面层，不抢底部续逛位
• 更多你可能想看 继续复用横向合集带，不另发明新样式

6.2 顶部控制层

视觉角色：

• 弱框架层
• 轻，不抢 Hero

结构：

• 灵动岛留白
• 搜索入口
• Homepage Tabs

硬规则：

• 首页不再保留品牌字标或 Yomiya 标题
• 搜索栏直接贴在灵动岛下方
• 搜索必须显得可用，但视觉上弱于 Hero
• 顶部控制层不扩成任务入口组

6.3 Homepage Tabs

视觉角色：

• 轻量方向入口
• 首页页内状态切换器

结构：

• 单行 chip-like 入口
• 高度统一
• 选中态才使用品牌红

硬规则：

• 对象名统一叫 Homepage Tabs
• 视觉上可以是 chips，但文档对象名不再混用
• 顺序固定为：推荐 / 播客 / 资讯 / 旅行 / 动漫 / JLPT
• 默认命中 推荐
• 点击后刷新当前首页内容态，而不是 push 新页面
• 内容不足时隐藏单个 tab，不补空位
• 选中态使用品牌红纯填充，不使用外围描边
• 未选中态使用浅底 capsule，不使用边框强调

6.4 今日新闻速递

视觉角色：

• 首页唯一第一主视觉锚点

结构：

• 小一号 Hero Banner
• 主标题
• 一行副文案
• 右侧图片填充区
• 右下角白色半透明播放按钮

硬规则：

• 至少 2 张卡时轮播，不足则降为单卡
• Hero 内不显示 tags
• Hero 下不显示指示点
• 静止状态下需露出约 40% - 45% 的下一张卡片宽度
• 每张 Hero 使用不同主题色
• 主标题维持在左上阅读起点，但允许比旧版略下沉一点，避免贴顶
• 副文案默认与播放按钮所在阅读带对齐，可换成两行，但不扩成厚说明块
• 播放队列不足时隐藏播放按钮
• 不能被搜索、tab 或后续区块抢第一主视觉权重
• Hero 图片区固定放在卡片右上角，不允许被右下角播放按钮压住
• Hero 图片区按接近 1:1 的占位感处理，不做细长缩略图
• Hero 图片区需要明显小于卡片高度，并与右下播放按钮保持清晰间隔
• Hero 图片区与播放按钮右缘对齐，不允许出现图片区视觉上偏左、按钮偏右的关系
• Hero 播放按钮保留“白底 + 镂空三角”语言，作为首页唯一例外
• Hero 配色固定走轻盈浅色，不使用高饱和、不使用渐变、不用深描边
• Hero 外围不使用描边定义边界，优先通过浅色面与裁切定义主视觉块，不把阴影当成默认完成手段

6.5 热门推荐

视觉角色：

• Hero 后第一强区块
• “替你选好”的精选货架

结构：

• 外提区块标题
• 纵向合集行

硬规则：

• Hero 后第一个内容区块固定是 热门推荐
• 纵向合集行与单集行属于同一家族，但合集行保留 chevron
• 合集行只保留封面图、合集 icon 标签、标题、副标题与右侧纵向居中的 chevron
• 不显示 18 条内容、每日更新、轻负担 这类第三层说明
• 少于 3 个强合集时整块隐藏
• 合集缩略图与行本体不使用外描边
• 右侧 chevron 是合集层级唯一额外 affordance，不再通过卡片边框补说明

6.6 轻松入门

视觉角色：

• 节奏切换层
• 降低起步压力的轻入口层

结构：

• 外提区块标题
• 横向合集带

硬规则：

• 它是横向“扫”的模块，不做纵向精选列表
• 去掉文字 tag，统一复用合集 icon 标签
• 横向合集项只保留封面图、标题和简短副说明
• 去掉厚重卡片边框与强包裹感
• 不足 4 个合集时整块隐藏
• 不抢 热门推荐 的第二强位
• 缩略图允许有圆角，但不使用外围描边和深色压边

6.7 播客精选

视觉角色：

• 首页中段的直接消费层

结构：

• 外提区块标题
• 标题右侧直接跟随箭头
• 直接内容行

数量规则：

• 默认按 5 条视觉设计
• 实际允许 3-5 条自适应

硬规则：

• 与 今天正在更新 属于同一家族
• 行内不显示右箭头
• 内容行副标题只显示真实存在的 tag 与时长
• tag 与时长统一用 · 分隔
• 点击标题进 Collection Detail
• 点击内容行进 Content Detail
• 内容缩略图如果需要视频播放提示，只保留白色三角 glyph，不外挂白底圆片
• 内容行不再使用边框或玻璃圆片去强化播放 affordance

6.8 今天正在更新

视觉角色：

• 证明“这里真的在更”的强更新证明层

结构：

• 外提区块标题
• 标题右侧直接跟随箭头
• 直接内容行

数量规则：

• 默认按 5 条视觉设计
• 实际允许 3-5 条自适应

硬规则：

• 取代旧“重点合集外露区”说法
• 语义不是“任何强合集都能拆出来”，而是“这个方向现在确实在更新”
• 与 播客精选 共用同一套直接内容行家族
• 行内不显示右箭头
• metadata 规则与 播客精选 完全一致

6.9 更多你可能想看

视觉角色：

• 第二梯队横向扩面层

结构：

• 外提区块标题
• 横向合集带

硬规则：

• 只在库存充足时显示
• 任务是拉宽探索面，不是延长底部浏览链路
• 直接复用 轻松入门 的横向合集带家族
• 不足 4 个合集时整块隐藏

6.10 还能继续逛

视觉角色：

• 首页底部续逛层

结构：

• 必须带 继续探索 区块标题
• 合集单卡片变体流

硬规则：

• 固定承担底部续逛角色
• 使用 Spotify 风格大色块合集卡片
• 卡片必须包含节目图片、节目名、副介绍、最近一集更新时间、最近一集标题与右下播放按钮
• 卡片背景色取自节目图片主色
• 该卡片不显示统一合集 icon 标签
• 池子不足时缩短数量，不造新模块补位
• 它和 更多你可能想看 的任务不同，不能互相替名
• 右下播放按钮统一使用“白底 + 黑色实心三角”
• 大色块卡片不使用外轮廓描边，默认优先通过纯色差、留白和裁切建立边界
• 大卡片之间的垂直间隔必须明显大于普通纵向列表行距，保证底部续逛层有呼吸感
• 这块当前冻结为“有标题的探索模块”，不再回到无标题自然续逛流

---

7. 页面模板说明

7.1 共用模板构件与使用规则

当前 active 页面系统里，真正可复用的主组件原型冻结为 5 类：

组件原型	主要使用场景	不该拿来做什么
Hero Banner	首页 推荐 状态第一主视觉位	分类页卡片流、普通合集列表
合集纵向列表样式	热门推荐 与其他纵向合集模块	单集消费列表
合集横向滑动样式	轻松入门、更多你可能想看	强探索型分类卡片流
单集纵向列表样式	播客精选、今天正在更新	合集发现卡片
合集单卡片变体	还能继续逛、首页分类态合集流、必要时的 Collection List	轻量合集横滑带

补充规则：

• 顶部控制层：标明页面身份，提供搜索入口或返回入口
• Homepage Tabs：首页专属轻量方向入口层，本质是状态切换器
• 区块标题家族：标题统一外提，标题右侧箭头是动作，不是第二标题
• 行为型附属构件：更多箭头、空状态、缩短状态、隐藏状态、单卡降级、底部续逛层
• 没有被上表列出的第六种合集组件原型，后续模块必须复用现有家族

所有原型再追加一层执行级约束：

• 默认不使用外描边定义卡片、按钮、chips、搜索框和播放按钮
• 默认只保留一套主边界语言：浅色面 + 圆角 + 留白；不把阴影纳入常规边界语言
• 如果某个组件必须强调激活态，优先改底色和文字，不优先加描边
• 播放相关 affordance 只允许三种语言：
  • Hero 主播放按钮：白底 + 镂空三角
  • 独立播放按钮：白底 + 黑色实心三角
  • 内容缩略图上的视频提示：白色三角 glyph
• 不允许在同一页面再出现第四种播放语言
• 不允许通过黑色透明底条、黑描边或厚白描边来补“精致感”

组件选型判定进一步冻结为：

• 只要任务是首页 推荐 状态第一主视觉锚点，只能用 Hero Banner
• 只要任务是“替用户先选一批值得点开的合集”，且仍处在首页主节奏里，只能用 合集纵向列表样式
• 只要任务是“横向扩面、降低进入门槛”，只能用 合集横向滑动样式
• 只要任务是“直接外露可消费单条内容”，只能用 单集纵向列表样式
• 只要任务是“更强探索 affordance 的合集发现”，包括首页分类态、底部续逛和当前 active Collection List，只能用 合集单卡片变体

禁止项：

• 合集单卡片变体 不显示统一合集 icon 标签
• 单集纵向列表样式 不显示行级 chevron
• 合集纵向列表样式 不回退展示第三层说明文案
• Homepage Tabs 不再承担默认页面导航
• Collection List 不再回退到旧的 header / summary / badges / 主路径区模板

7.1.1 组件原型与当前页面模块的映射示例

为避免后续继续出现“同一个任务长出第六种组件”的情况，当前 active 页面模块与组件原型的映射直接冻结如下：

页面 / 模块	必须使用的组件原型	说明
首页 今日新闻速递	Hero Banner	首页唯一第一主视觉位，不能退回普通合集卡片
首页 热门推荐	合集纵向列表样式	承担“替用户先选一批合集”的任务，不得混入单集行
首页 轻松入门	合集横向滑动样式	负责轻量横向扩面，不得改成长列表
首页 播客精选	单集纵向列表样式	负责直接消费单条内容
首页 今天正在更新	单集纵向列表样式	与 播客精选 同一家族，只是语义不同
首页 更多你可能想看	合集横向滑动样式	继续承担扩面，不发明新样式
首页 还能继续逛	合集单卡片变体	固定是底部续逛流，且带有探索型区块标题
首页非 推荐 tab 命中后的分类态	合集单卡片变体	页内切换后的方向承接流，不回到旧列表模板
Collection List 主体列表	合集单卡片变体	当前 active 方向页默认复用这一家族
Collection Detail 头部	压缩型详情头部	不是首页 Hero，也不是合集发现卡片
Collection Detail 内容列表	单集纵向列表样式	进入合集后直接承接具体内容消费
Content Detail 来源合集 / 下一步	不作为独立构件落地	当前 active 不落地独立 bridge panel；后续若重启需重新定义自然表达
Search Entry 结果区	复用现有合集或单集家族	由结果对象类型决定，不单独发明搜索专用卡片

追加执行结论：

• 如果一个新模块的任务能被上表任意一类解释，就必须复用对应原型
• 如果团队觉得“现有原型都不够”，先回到这份文档修改组件家族定义，再改实现
• 默认不允许在实现阶段临时发明“只在某一个页面出现一次”的一次性组件样式

7.2 Collection List

Collection List 仍然是方向页，但它已经不是首页一级 Homepage Tabs 的默认承接页。

它的视觉任务是：

• 告诉用户自己进入了哪个方向
• 直接承接这个方向下的稳定合集流
• 在必要时作为独立方向落地页或调试页存在

页面骨架：

1. 顶部控制层
2. 极短的页面身份提示，可无
3. 合集单卡片变体列表
4. 底部轻续逛或返回其他探索路径

硬规则：

• 不复制首页规模的模块堆叠
• 页面说明必须短，不写长段落教学
• 资讯、播客、旅行、动漫、JLPT 都复用同一页型
• 如果存在旧 header / summary / badges / 主路径区，不再作为 active 主模板
• 默认直接复用合集单卡片变体列表，不回到旧“先露路径，再露合集流”的表达
• 当前 active Collection List 不再靠边框和说明面板建立方向感，方向感由页面身份、合集色块和列表密度承担

7.3 Collection Detail

Collection Detail 是单合集厚着陆页。

它应该快速回答：

• 这个合集是什么
• 为什么值得进入
• 从哪里开始
• 进入后怎么连续消费

结构冻结：

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

硬规则：

• 顶部必须是一个整体，不拆成零碎模块
• 页面只允许一个真正主动作
• 内容列表不能被大段说明压到很后面
• 播客 合集继续和其他合集共用同一页面家族
• Phase 1 不引入 简介 / 目录 / 评论 标签页
• 顶部头部固定为“左缩略图 + 右介绍”的压缩型头部，不回到大面积海报头图
• 顶部头部不再套一整块色块说明框，只保留封面图和右侧介绍区
• 既然已经进入合集详情页，头部不再重复显示合集 icon 标签
• 头部不再展示 每日更新、今日公共议题 这类 tag 胶囊
• 主按钮行固定为左侧次动作、右侧主动作
• 主动作按钮使用文案后直接跟随三角 glyph，不再外挂独立圆形播放 badge
• 列表开始处不再显示 先从这里开始 这类额外标题
• 头部与按钮默认不使用描边，优先通过底色、留白和裁切建立层次，不依赖阴影

7.4 Content Detail

当前继续继承已成熟的阅读 / 播放 UI，但这页的前提始终是内容优先：

• 当前 active 不保留独立 bridge panel
• 来源上下文与下一步关系后续若要回归，必须以更自然、更轻的关系重新定义

页面骨架：

1. 内容消费主区
2. 次级辅助动作

硬规则：

• 内容本身仍是第一焦点
• 合集关系是次级；当前不通过独立 bridge panel 维持
• 消费后的最强出口优先是同合集下一条
• 其他动作如收藏、分享、设置、解释功能，都必须弱于内容本身
• 来源合集 与 继续学习 当前不以独立 bridge panel 落地
• 后续若恢复，只允许以更弱的 inline 关系重定义，不能直接回退旧 bridge 模式

7.5 Search Entry

搜索是明确可用的入口，但不是首页主故事。

页面骨架：

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

硬规则：

• 首页始终提供搜索入口
• 搜索视觉权重弱于 Hero
• 搜索结果复用现有卡片家族
• 搜索空状态保持轻，不引入热榜、排行墙或营销横幅
• 搜索不是第二个精选首页
• 搜索输入框、建议区、空状态面板默认不使用描边
• 搜索建议 chip 默认使用浅底填充，不使用 capsule 轮廓线
• 搜索输入与区块标题必须复用首页共享组件语言，不再保留并行实现

---

8. 设计侧行为规则总表

8.1 设计侧退化原则

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

1. 优先隐藏，不造假补位
2. 优先缩短，不改变模块职责
3. 优先单卡降级，不重写结构
4. 退化后仍要保持页面角色稳定

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

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

所有模块只分三类状态：

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

8.3 首页模块级规则

• 今日新闻速递
  • 至少 2 张卡时轮播
  • 不足时降为单卡
  • 不显示 tags
  • 不显示指示点
  • 静止状态下露出约 40% - 45% 的下一张卡片
  • 播放队列不足时隐藏播放按钮
  • 右上图片区与右下播放按钮不得互相遮挡
  • Hero 是首页唯一允许使用镂空三角播放按钮的区域
• 热门推荐
  • 固定是 Hero 后第一强区块
  • 少于 3 个强合集时整块隐藏
• 轻松入门
  • 不足 4 个合集时整块隐藏
  • 不能改成纵向精选列表
• 播客精选
  • 默认按 5 条视觉设计
  • 实际允许 3-5 条自适应
  • 标题右侧直接跟箭头
  • 行内不显示右箭头
• 今天正在更新
  • 默认按 5 条视觉设计
  • 实际允许 3-5 条自适应
  • 不能退化成泛强合集曝光层
  • 标题右侧直接跟箭头
  • 行内不显示右箭头
• 更多你可能想看
  • 只在库存充足时显示
  • 不足 4 个合集时整块隐藏
  • 不能拿来补底部续逛位
  • 继续复用横向合集带
• 还能继续逛
  • 固定承担底部续逛角色
  • 固定带 继续探索 区块标题
  • 池子不足时缩短数量
  • 不造新模块补位

8.4 线性视觉去除规则

当前 active 执行层默认遵守下面这些“去线性”规则：

• 不给矩形卡片外围加描边
• 不给 chips 外围加描边
• 不给按钮外围加描边
• 不给播放按钮外围加描边
• 不给搜索输入框外围加描边
• 当前不落地独立 bridge 面板

如果确实需要层级，设计侧允许使用的手段只有：

• 更轻或更深一档的底色
• 更精确的留白与内边距
• 同家族统一圆角
• 更明确的信息层级

不允许使用的补救方式：

• 重新加一圈灰线
• 重新加一圈白线
• 加黑色透明底条来托文字或 icon
• 用描边代替结构层次

8.5 更多箭头 的规则

显示条件：

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

不显示条件：

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

8.6 不补位规则

当某个模块不成立时：

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

但不能：

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

8.7 允许直接深链的规则

允许直接深链 Content Detail：

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

默认不直接深链：

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

---

9. 一句话总结

当前 active 页面设计不再拆成 07 / 08 两份文档；现在统一由 07-视觉与页面表达.md 同时负责页面家族、首页模块顺序、页面模板说明与设计侧行为规则，其中 06 负责承接结构，07 负责页面呈现与模板系统。