2026-03-30-yomiya-visual-design-system-design

Yomiya 视觉设计系统 / DESIGN.md 草案

项目: Yomiya Content System
类型: 与 Stitch DESIGN.md 预期对齐的结构化视觉定义文档
状态: 草案进行中
最后更新: 2026-03-30

概述

Yomiya 不应该看起来像一个课程应用，也不应该像一个纯资讯应用。 它应该是一款年轻、轻盈、内容丰富的日语沉浸平台，层级清晰、界面噪音很低。

这个视觉系统由四个核心特征定义：

• 内容货架感。用户应当立刻感到这里有很多东西可以逛。
• 年轻但克制。借鉴 QQ 音乐的节奏、韵律和呼吸感，但不照搬它的色彩系统。
• 信息优先。视觉处理的存在，是为了帮助用户判断这是什么、值不值得点、点进去会去哪里。
• 默认可扩展。随着更多合集、列表和内容持续加入，系统仍然保持有序。

一句话定义：

一个面向日语内容平台的轻量内容货架设计系统，以现有 iOS 品牌红作为唯一强强调色，并依靠暖白表面、柔和灰阶结构、边框和节奏，建立年轻、通透、可信赖的产品气质。

Yomiya 设计原则

• 首页是内容平台首页，不是学习控制台。
• 视觉设计应当服务于内容理解和浏览效率。
• 丰富感应来自模块节奏与内容密度，而不是厚重装饰。
• 系统的年轻感应来自内容块的节奏、裁切和运动，而不是高饱和颜色。
• 第一屏应该传达“这里有值得立刻点开的内容”，而不是“请选择一个功能”。
• 合集和方向是结构概念，页面要把它们翻译成用户容易理解的内容货架和路径。

色彩

核心角色

• 主色: #F33454
  • 唯一依据是现有 iOS 品牌红。
  • 只用于最重要的行动按钮、激活态、选中标签、播放强调和高注意力徽标。
• 中性色背景
  • 基于现有 iOS background 与 bg_gray。
  • 页面背景保持在暖白到灰白之间。
  • 次级容器背景保持为浅灰白。
• 文字
  • 复用现有 iOS text_fill_1、text_fill_2、text_fill_3。
  • text_fill_1 用于标题和关键信息。
  • text_fill_2 用于正文与摘要。
  • text_fill_3 用于辅助文案、元信息和弱状态。
• 辅助氛围色
  • 允许使用低饱和的暖米、浅雾蓝、浅橄榄作为内容氛围色。
  • 它们不是品牌色，只用于封面占位和区块节奏辅助。

色彩规则

• 不使用大面积品牌红背景。
• 不允许每个模块各自发明一套高饱和色盘。
• 同一屏内，强红强调最多出现一到两处。
• 丰富感应来自表面层级对比，而不是多色 UI 噪音。

字体排版

字体排版应沿用当前 iOS 系统字栈与字号伸缩行为。 重点不是重新发明一套字体语言，而是建立更明确的页面级与模块级层级。

字体层级角色

• 页面标题: 24-28，半粗体
  • 用于合集详情标题和方向页标题。
• 区块标题: 18-20，半粗体
  • 用于 热门推荐、轻松入门、继续发现 等模块标题。
• 卡片标题: 15-17，中等字重或半粗体
  • 用于合集卡、路径卡和直接内容行。
• 正文: 13-15，常规字重
  • 用于摘要和说明。
• 元信息 / 标签: 11-12，中等字重
  • 用于时长、来源、等级、数量和弱元信息。

排版规则

• 同一屏不要超过两种主字体字重。
• 不依赖长段落去解释首页模块。
• 标题要帮助用户决定是否点击，而不是写成分类学标签。

层级

Yomiya 应通过以下方式建立层级：

• 轻微的背景变化
• 细边框
• 稳定的圆角体系
• 留白节奏
• 封面比例变化

不应通过厚重阴影和强悬浮卡片建立层级。

层级规则

• 常规卡片使用轻边框加极弱阴影。
• 重要卡片可以使用更大圆角和更强的封面占比，但不能做成厚重悬浮。
• Hero 通过裁切、尺度和下一张卡的露出来建立层级。
• 列表在视觉上应始终轻于卡片。

组件系统

布局基础

使用现有 iOS 的间距与圆角节奏：

• 间距: 12 / 16 / 24 / 32
• 圆角: 8 / 12 / 16 / 24

角色映射：

• 8: 小标签、轻量标签控件、小型轻量控件
• 12: 内容行、小卡片、输入框
• 16: 标准合集卡、横向卡片、按钮
• 24: Hero 卡片、大合集容器、合集详情 Hero 区

规则：

• 页面标准左右内边距默认使用 16。
• 大模块之间的间距默认使用 24。
• 所有页面保持稳定一致的圆角语言。
• 同一页面不要混用过多圆角尺度。

页面框架组件

顶栏

用于首页、方向页和合集详情页。

包含：

• 品牌字标或页面标题
• 在需要时提供返回 / 分享 / 搜索入口
• 最多一个轻量辅助动作

规则：

• 首页顶栏应轻盈、贴近内容。
• 方向页和合集页可以承载更强的页面身份。
• 图标动作的视觉权重必须弱于核心内容块。

搜索框

搜索属于轻控制层，不属于主内容货架。

规则：

• 使用浅填充或柔和灰底。
• 占位文案使用次级文字色。
• 保持稳定的输入高度和圆角形态。
• 搜索必须显得可用，但不能在视觉上压过 Hero。

筛选标签

标签是路径标记，不是 Hero 动作。

规则：

• 默认态：浅填充、细边框、深色文字。
• 选中态：品牌红激活状态。
• 高度统一，不做夸张胶囊。
• 整行应像轻量引导，而不是和内容争抢注意力的第二导航条。

区块标题家族

标准区块标题

包含：

• 左对齐标题
• 右侧 更多箭头
• 只有在确有必要时才出现的弱说明

规则：

• 标题始终留在卡片外。
• 更多箭头 必须被读作动作，而不是第二个标题。
• 避免在标题下再增加额外模块解释。

页面引导头部

仅用于方向页和合集详情页。

包含：

• 大页面标题
• 一行说明
• 可选标签或统计
• 可选封面

规则：

• 这是页面级身份区块。
• 说明用来澄清页面是什么，不用来解释如何交互。
• 标签保持次级，不得膨胀成第二段正文。

内容容器家族

Hero 卡片

仅用于首页 Hero。

包含：

• 大封面或插画背景
• 主标题
• 一到两个轻标签
• 页码指示点
• 右下角播放按钮

规则：

• 不写解释性副标题。
• 卡片本身必须能独立成立。
• 红色只作局部强调，绝不铺满整张卡。
• 需要露出下一张卡的一部分，制造货架节奏。

横向合集卡

用于 轻松入门、继续发现 以及其他横向合集带。

包含：

• 封面
• 合集标题
• 一行弱说明或元信息

规则：

• 它用于“扫”，不是用于“读”。
• 封面比例必须保持一致。
• 信息负载刻意保持轻。

纵向合集行

用于首页 热门推荐。

包含：

• 小缩略图
• 合集标题
• 一行说明

规则：

• 要有编辑挑选、精选货架的感觉。
• 它比完整卡片更轻。
• 标题优先，图片次之。

直接内容行

用于播客区块、重点合集外露区块和合集详情页列表。

包含：

• 缩略图
• 内容标题
• 一行元信息，例如时长、来源和类型

规则：

• 节奏要快，扫描以标题为先。
• 元信息始终保持单行。
• 不要把每一行做成资讯卡片式的双段落结构。

动作组件

主动作

用于：

• 全部播放
• 开始听
• 继续播放
• 页面上唯一最强的主行动按钮

规则：

• 每个页面只允许一个真正的主动作。
• 品牌红只用于最重要的动作。

次动作

用于：

• 收藏
• 分享
• 查看全部
• 筛选和辅助动作

规则：

• 使用描边或浅填充处理。
• 绝不与主动作竞争。

模块定义模板

文档中的每个页面模块都应使用以下结构定义：

1. 模块目的
2. 视觉角色
3. 结构
4. 密度
5. 交互
6. 显示规则

组件硬规则

• 同角色的合集卡不允许混用不同封面比例。
• 同角色模块不能在“标题外提”和“标题写进卡片”之间来回切换。
• 首页纵向模块默认不带大图标头和解释文案。
• 所有 更多箭头 必须共享同一套视觉语言。
• 品牌红只保留给最重要的动作和激活态。
• 模块之间不能各自发明一套小型视觉系统。

页面系统

首页（Home）

首页是第一层发现页。

它负责：

• 证明平台内容足够丰富
• 降低第一次点击成本
• 给用户继续逛下去的理由

它不是：

• 分类索引页
• 学习任务控制台
• 课程地图

合集列表页（Collection List）

Collection List 是方向内的第二层选择页。

它只在用户已经知道方向、但还没决定具体选哪一个合集时存在。

它应该像：

• 轻量页面引导
• 一到两个关键路径
• 下方更多合集

合集详情页（Collection Detail）

Collection Detail 是单个合集的厚页着陆点。

它要回答：

• 这个合集是什么
• 它值不值得收藏
• 它是否适合连续播放 / 连续消费
• 用户应该从哪里开始

它在结构上应更接近 QQ 音乐的专辑页：

• 统一的顶部区域
• 两个稳定动作
• 一条长列表

但视觉上要更轻、更克制，娱乐感更少。

内容详情页（Content Detail）

Content Detail 在视觉上继续继承第一阶段（Phase 1）已成熟的现有客户端 UI。

这份文档只定义它在内容系统中的角色：

• 首页哪些模块可以直接深链进入它
• 进入后如何保持合集关系可见
• 内容消费后如何露出“下一步”

搜索入口（Search Entry）

搜索是一个明确存在的入口，但不是首页叙事中心。

规则：

• 在首页顶部提供清晰入口
• 视觉权重弱于内容模块
• 现在先定义清楚，方便后续扩展保持一致

页面关系

• Home 负责分发
• Collection List 负责在方向内帮助选择
• Collection Detail 提供厚着陆页
• Content Detail 负责真实消费

这个系统不允许再长出额外页面类型去承载：

• 全部分类
• 单独的资讯频道页类型
• 第二套播客页类型
• 独立的新手专区页

首页（Home）

顶部控制层

模块目的

在不抢走首页叙事主线的前提下，提供尽可能轻的身份和控制层。

视觉角色

弱视觉框架。

结构

• 品牌字标或轻页面标题
• 搜索入口
• 可选一个轻量状态入口

密度

轻且紧凑。

交互

• 点击搜索进入搜索
• 点击辅助动作进入对应目的地

显示规则

始终显示，并且视觉上始终弱于 Hero。

快速筛选标签

模块目的

在不改变首页“被编辑挑选”属性的前提下，给主动探索型用户一个轻量入口。

视觉角色

辅助层。

结构

• 旅行
• 动漫
• 资讯
• JLPT
• 播客

密度

轻。

交互

点击后进入对应的 Collection List。

显示规则

• 当方向不合格时隐藏对应单个标签
• 绝不使用占位补空
• 绝不增加 全部分类

Hero 新闻轮播

模块目的

承担首页最强的分发位，并告诉用户这里有值得立刻打开的内容。

视觉角色

整个首页的第一主视觉锚点。

结构

• 大封面背景
• 主标题
• 一到两个标签
• 指示点
• 右下角播放按钮

密度

中。

交互

• 点击整张卡进入对应的 Collection List
• 点击播放按钮在首页原地开始播放

显示规则

• 至少 2 张卡才能组成轮播
• 否则降级为单卡
• 当播放队列不足时隐藏播放按钮

热门推荐

模块目的

在 Hero 之后立刻把最值得点进的合集交给用户，降低第一次选择成本。

视觉角色

首页第二强层。

结构

• 区块标题
• 可选 更多箭头
• 固定数量的纵向合集行

密度

轻到中。

交互

• 点击行进入对应的 Collection Detail
• 点击 更多箭头 进入对应的 Collection List

显示规则

• 至少有 3 个强合集时才显示
• 3 到 5 个按真实数量展示
• 少于 3 个整块隐藏

轻松入门横滑带

模块目的

提供最容易开始的第一跳，降低用户起步压力。

视觉角色

节奏切换层。

结构

• 区块标题
• 可选 更多箭头
• 横向合集带

密度

轻。

交互

点击卡片进入对应的 Collection Detail。

显示规则

• 至少需要 4 个合集
• 否则整块隐藏

播客精选区

模块目的

把可以立刻开听的内容显性外露，扩展首页中用户感知到的内容形态。

视觉角色

首页中段重要的直接消费区块。

结构

• 区块标题
• 可选 更多箭头
• 5 条直接内容行

密度

中。

交互

• 点击标题进入 Collection Detail
• 点击内容行进入 Content Detail

显示规则

• 需要一个稳定播客合集且能外露 5 条内容
• 少于 5 条时整块隐藏

继续发现

模块目的

在第一波高权重内容之后，把探索面继续拉宽。

视觉角色

扩展层。

结构

• 区块标题
• 可选 更多箭头
• 横向合集带

密度

轻。

交互

点击卡片进入对应的 Collection Detail。

显示规则

• 至少需要 4 个合集
• 否则整块隐藏

重点合集外露区

模块目的

把足够强的合集直接拆出内容，降低进入连续消费的摩擦。

视觉角色

直接列表层，和播客精选属于同一家族。

结构

• 区块标题
• 可选 更多箭头
• 5 条直接内容行

密度

中。

交互

• 点击标题进入 Collection Detail
• 点击内容行进入 Content Detail

显示规则

• 至少需要 1 个强合集且能外露 5 条内容
• 否则整块隐藏

继续浏览流

模块目的

在主内容模块之后继续延长首页浏览链路。

视觉角色

低优先级补充层。

结构

• 区块标题
• 轻量浏览合集流

密度

轻到中。

交互

点击合集卡进入 Collection Detail。

显示规则

• 至少有 1 个有效合集即可出现
• 内容池小的时候缩短数量
• 不允许新增运营占位补空

首页硬规则

• Hero 是第一屏唯一的主视觉锚点。
• 第一个纵向区块必须始终是“替你选好的合集”，而不是功能入口。
• 横向带和纵向直接列表必须交错出现，制造呼吸感。
• 所有区块标题都保持外提。
• 所有 更多箭头 都必须使用同一套视觉语言。
• 首页不能长出榜单、常驻专题位、方向田字格入口区，也不能长出独立新手专区。

合集列表页（Collection List）

Collection List 就是方向页。 它的任务不是立刻消费内容，而是帮助用户在一条明确的内容路径里选到合适的合集。

它应该像：

• 一个方向，命名清晰
• 一到两个最强路径先被露出
• 下方是稳定的更多合集流

它不应该像：

• 第二个首页
• 分类百科全书
• 密集控制面板

页面引导头部

模块目的

告诉用户自己进入了哪个方向，以及这里会出现什么类型的合集。

视觉角色

轻量页面锚点。

结构

• 页面标题
• 一行方向说明
• 可选柔和封面或氛围块
• 可选两到三个弱标签或统计

密度

轻到中。

交互

• 点击返回回到上一页
• 可选分享或搜索入口放在顶栏动作中

显示规则

始终显示。

关键路径卡

模块目的

在通用合集流开始之前，先露出这个方向里一到两个最重要的合集或路径线。

视觉角色

方向页内的第一决策层。

结构

• 必要时出现的区块标题
• 一到两张更大的路径卡
• 每张卡包含封面、标题、一行摘要，以及一到两个弱标签

密度

中。

交互

点击卡片进入对应的 Collection Detail。

显示规则

• 只有当这个方向确实存在一到两个明显更强的路径时才显示
• 如果没有真实路径优先级，就整块隐藏
• 绝不使用弱占位合集去硬填这个区块

标准合集流

模块目的

为当前方向下所有合格合集提供稳定的浏览层。

视觉角色

方向页主体。

结构

• 可选区块标题
• 纵向合集流
• 每张合集卡包含封面、标题、一行摘要，以及数量、更新节奏或等级等弱元信息

密度

中。

交互

点击合集卡进入对应的 Collection Detail。

显示规则

• 所有合格合集按照稳定顺序展示
• 当内容池很大时，弱化装饰性处理
• 绝不为了让页面看起来更满，就把一个小池子硬拆成伪分区

方向差异说明

资讯

• 页面应立刻露出两条主路径：NHK 今日要闻 和 日本娱乐速报。
• 新鲜度比情绪氛围更重要，但页面仍然使用与其他方向相同的卡片家族。
• 不发明专门的资讯频道页样式，资讯 仍然是一个 Collection List。

播客

• 页面应有稳定连载感，更像在追节目，而不是在浏览孤立单集。
• 更新节奏、主播信号和系列连续性可以写进弱元信息。
• 不要把它做成一个播客应用克隆版，避免加入过大的播放控制框架。

旅行

• 页面应有实用、场景导向的感觉。
• 路径命名必须一眼就有用，比如交通、酒店、购物、餐厅语言。
• 视觉气氛可以略偏暖，但仍然必须在同一套中性系统内。

动漫

• 封面可以承载更多情绪和辨识度，但 UI 本身仍然保持克制。
• 标题应直接说清楚场景或兑现点，不依赖长摘要。
• 不要让这个页面变成一堵粉丝向海报墙。

JLPT

• 页面应有结构感和建立信心的感觉，但不能像考试控制台。
• 弱元信息可以露出 N5-N4 或 N3 冲刺 这类等级带。
• 避免把页面做成任务格、检查点或学习小组件集合。

合集列表页硬规则

• Collection List 只服务于方向级入口，不为每一个合集都单独复制一层。
• 用户首先看到的选择必须是合集，而不是功能工具。
• 一个方向页可以露出一到两个关键路径，但不能膨胀成第二个首页规模的模块堆叠。
• 页面引导必须短，不写长段落去解释这个页面怎么用。
• 资讯 和 播客 必须复用这一页型，不能再额外引入新页面家族。
• 这里的合集卡可以比首页卡稍厚一点，但仍然要轻于合集详情 Hero。

合集详情页（Collection Detail）

Collection Detail 是单个合集的厚着陆页。 用户在这里不再问“该选哪个方向”，而开始问“这一组内容我应该从哪里开始”。

它应该快速回答四个问题：

• 这个合集是什么
• 为什么值得进入
• 它是否已经足够成熟，适合连续消费
• 用户第一条应该点哪一条

合集 Hero

模块目的

建立合集身份，并降低用户第一次播放或点击前的犹豫。

视觉角色

页面第一锚点。

结构

• 顶栏
• 合集封面
• 合集标题
• 一段短摘要
• 可选标签，例如方向、等级带、更新节奏或合集类型

密度

中。

交互

• 点击返回回到上一页
• 可选分享保留在顶栏

显示规则

始终显示。

主动作行

模块目的

提供最明确的开始动作，以及一个稳定的辅助动作。

视觉角色

紧贴 Hero 之下的高注意力动作层。

结构

• 一个主动作，例如 全部播放、开始听 或 从第一条开始
• 一个次动作，例如 收藏

密度

轻。

交互

• 主动作从预期的第一条开始连续消费
• 次动作用于收藏或关注该合集

显示规则

• 只要合集里至少有一条合格内容，就显示主动作
• 当支持合集级收藏时，次动作保持可用
• 这一行里不允许出现第三个竞争性按钮

内容条目列表

模块目的

以一种让“第一次选择”足够容易、也让“继续往下看”足够明显的方式，把合集里的实际内容露出来。

视觉角色

主消费入口层。

结构

• 只有在必要时才出现的区块标题
• 直接内容行
• 每行包含缩略图、标题和一行元信息

密度

中。

交互

点击内容行进入 Content Detail。

显示规则

• 只要存在合格内容就始终显示
• 合集内部顺序必须稳定
• 不要只是为了装饰，就把一份短列表硬拆成人为分组

相关合集横滑带

模块目的

在用户已经理解当前合集，或部分消费之后，继续延长浏览。

视觉角色

低优先级续逛层。

结构

• 区块标题
• 轻量横向合集带

密度

轻。

交互

点击合集卡进入另一个 Collection Detail。

显示规则

• 至少有 3 个相关合集时才显示
• 当相关性弱，或可能分散当前合集注意力时，整块隐藏

合集详情页硬规则

• 页面顶部必须是一个统一块：封面、标题、摘要和动作属于同一个整体。
• 摘要必须短。如果一个合集需要长文才能解释清楚，那说明这个合集本身不够强。
• 页面上只允许一个真正的主动作。
• 内容列表必须尽早开始，不要把它埋在大段说明模块之后。
• 播客 合集使用和其他合集相同的页面家族，不能有播客专属详情模板。
• 这个页面在结构上可以接近 QQ 音乐专辑页，但视觉上必须更轻、更稳、更少娱乐感。
• 第一阶段（Phase 1）不引入 简介 / 目录 / 评论 这类标签页。

内容详情页（Content Detail）

Content Detail 仍然是实际消费页。 第一阶段（Phase 1）保留现有成熟的阅读或播放 UI，但这个页面现在必须在视觉上属于内容系统，而不是一个与外部断开的孤立终点。

来源上下文条

模块目的

让用户始终知道自己是从哪个合集或路径进入的，从而让页面继续属于一个更大的内容货架。

视觉角色

弱上下文层。

结构

• 一条弱来源文案，例如 来自 去日本旅行必备
• 可选合集标签或小型返回入口

密度

轻。

交互

点击来源上下文返回对应的 Collection Detail。

显示规则

• 当当前内容有明确来源合集时显示
• 如果用户是从合集进入的，就优先保留这个准确合集上下文
• 如果用户从搜索或分享进入，则在可用时回退到该内容最强的默认合集

下一步区块

模块目的

避免用户在消费结束或暂停后，直接撞到一个死胡同。

视觉角色

消费后的第一承接桥。

结构

• 同一合集内最强的一条“下一条”入口
• 在合适时补一个更弱的合集返回或相关合集入口

密度

轻到中。

交互

• 点击下一条进入下一个 Content Detail
• 点击合集返回进入 Collection Detail

显示规则

• 只要存在顺序关系，就优先露出同合集的下一条
• 只有在同合集续播关系已经成立后，才显示更宽泛的相关推荐出口
• 隐藏那些与用户当前路径没有明确连接的弱推荐或泛推荐

内容详情页硬规则

• 第一阶段（Phase 1）不在没有单独批准的情况下重做现有成熟的播放或阅读框架。
• 消费后的最强出口通常应该是同合集的下一条，而不是随机推荐。
• 合集关系需要保持可见，但必须是次级。内容本身仍然是第一焦点。
• 只有播客内容行、重点合集外露内容行这类强直接消费模块，才允许从首页直接进入 Content Detail。
• 如果一条内容属于多个合集，页面应先保留进入时的上下文，默认合集只作为回退方案。

搜索入口（Search Entry）

搜索是一个明确意图入口。 它服务于已经知道自己想找什么的用户，但不能抢走首页的精选节奏。

首页搜索框

模块目的

提供明确可用的搜索方式，同时不让搜索变成首页的主故事。

视觉角色

轻控制入口。

结构

• 搜索图标
• 占位文案
• 浅背景或柔和描边处理

密度

轻。

交互

点击进入搜索。

显示规则

始终显示在首页顶部控制层。

搜索结果

模块目的

用系统中已经定义好的卡片和内容行家族，尽快把用户送回合格的合集或内容。

视觉角色

工具页，不是编辑页。

结构

• 持续可见的搜索框
• 空状态下的最近搜索或轻量建议
• 合格的合集结果
• 合格的内容结果

密度

中。

交互

• 点击合集结果进入 Collection Detail
• 点击内容结果进入 Content Detail

显示规则

• 空状态保持轻、安静
• 没有结果时，给恢复性引导，而不是用无关的编辑推荐把页面塞满
• 复用现有视觉家族，不发明搜索专属结果卡

搜索入口硬规则

• 搜索始终可用，但在首页视觉权重上绝不能强于 Hero。
• 占位文案应该描述可搜索的内容，而不是写产品口号。
• 搜索结果必须像快速工具层，而不是第二个精选首页。
• 搜索空状态里不引入热榜、排行墙或大营销横幅。
• 搜索可以同时返回合集和内容，但不能创造第三套脱离现有系统的结果语言。

应做与不该做

应做

• 品牌红只用于最重要的动作和激活态。
• 用间距节奏和模块交替制造内容丰富感。
• 把封面、标题和元信息作为核心决策组合。
• 先让内容可见，再让导航逻辑变得可见。

不该做

• 不要退回成功能入口型首页。
• 不要给每个模块都加重图标头和解释文案。
• 不要把首页重新做成分类目录。
• 不要同时用颜色噪音、过大圆角和厚重阴影去硬推“年轻感”。