2026-04-11-yomiya-onboarding-google-stitch-design

Yomiya Onboarding Google Stitch Design Brief

日期：2026-04-11

中文边界说明：本文是 2026-04-11 的历史设计 brief，不再作为当前 onboarding 事实源。 当前中文事实入口请读 product/YomiyaOnboarding/README.md，维护规则请读 docs/文档唯一来源维护规则.md。

1. 文档目标

这份文档用于向 Google Stitch 提供一份可执行的 onboarding 设计 brief。

目标不是一次性画完全部 13 屏，而是先建立一套稳定、可扩展、可复用的视觉母版与页面模板，让后续 screens 可以在同一套设计语言下继续扩展。

这次 onboarding 要解决的问题不是“怎样先卖会员”，而是：

• 用户第一次进入时，能否快速理解产品的开始方式
• 用户能否用很短的路径完成一次轻分流
• 用户能否拿到一份“现在就能开始”的第一周计划
• 整个流程是否更像“开始体验”，而不是“进入销售漏斗”

一句话目标：

帮助用户在最短路径里拿到一个可执行的第一周开始方式。

2. 设计方向

本次采用：

方案 B：前段有情绪，后段回归产品主语言

这意味着：

• onboarding 不是一套完全脱离现有产品的子品牌视觉
• 但前段也不能和现有内容页一样平，必须建立足够清楚的进入感和开始感
• 前 2-3 类模板允许更强的情绪氛围和插画表达
• 中后段页面必须明显回归现有 EveryDayJapanese-iOS 的轻壳层产品语言

整体气质关键词：

• 明亮
• 鼓励
• 开始感强
• 轻
• 克制
• 可信

不希望的气质：

• 过强营销化
• 过强成就体系感
• 过强健身 App 激励感
• 过强教材 / 课程系统感

3. 第一轮输出范围

第一轮只做 5 类模板，不包含订阅页。

模板列表：

1. Hero 启动页
2. 单选决策页
3. 说明型 CTA 页
4. 生成中页
5. 计划交付页

这些模板分别映射到现有 screen：

• 01 / 02 / 03 / 07 → Hero 启动页
• 04 / 05 / 06 / 08 / 09 → 单选决策页
• 10 → 说明型 CTA 页
• 11 → 生成中页
• 12 → 计划交付页

明确不在第一轮范围内：

• 13 订阅页
• 暗色模式
• 完整 13 屏高保真展开
• 第二层转化页
• 更复杂的教育页和权益页

4. 设计语言继承来源

Google Stitch 需要继承现有 iOS 工程中的设计语言，而不是从零重新发明一套视觉。

主要继承来源：

• EveryDayJapanese/Controller/YomiyaDemo/Theme/YomiyaDesignTokens.swift
• EveryDayJapanese/Extension/SwiftUI/Spacing/Spacing.swift
• EveryDayJapanese/Extension/SwiftUI/TextStyle.swift
• EveryDayJapanese-iOS 中已经确立的轻壳层、无边框、低阴影设计原则

应被 Stitch 理解为以下约束：

• 页面外壳轻，不厚重
• 大部分页面使用浅底和柔和表面层级
• 主边距以 16px 为基线
• 文字层级理性、简洁、偏 iOS 原生
• 卡片主要靠浅表面色差和圆角成立
• 默认不使用描边
• 默认不使用悬浮阴影
• shadow 不是默认视觉语言

5. 视觉硬约束

5.1 模式与平台

• 第一轮只做 Light Mode
• 设备默认 iPhone 375px 宽竖屏
• 使用 iOS 原生布局语言

5.2 主色策略

• 主强调色直接沿用现有 brand1 / accentStrong
• 不新造第二套 onboarding 品牌色
• 主色只做点缀，不做大面积铺底

主色允许出现的位置：

• 主按钮
• 单选卡选中态的小面积强调
• 顶部阶段进度的命中部分
• 计划交付页的关键行动点
• 少量 icon / 提示点

主色不应出现的方式：

• 整屏主色背景
• 大面积高饱和铺色
• 每一屏都用主色做主要视觉重量
• 用主色替代信息层级

5.3 卡片策略

• 页面允许存在卡片分组
• 但必须参考前端实验中的 无边框、无阴影卡片
• 主要靠 surfaceMuted / surfaceRaised 一类轻表面色差和圆角成立
• 禁止厚重卡片堆叠感

5.4 顶部进度

• 顶部进度存在感应当 清楚但克制
• 它更像阶段提示，不像考试式任务进度条
• 在 单选决策页 和 说明型 CTA 页 中保持一致
• 在 生成中页 中隐藏

5.5 插画策略

• 插画只出现在：
  • Hero 启动页
  • 生成中页
• 其余页面回归纯产品界面

插画人物画像：

• 22-30 岁
• 城市年轻人
• 更像通勤、独处、轻学习、自主安排生活的人

场景策略：

• Hero 启动页 偏通勤 / 城市移动 / 开始感
• 生成中页 偏室内轻学习 / 安静准备感

日语学习线索：

• 中等露出
• 可以包含少量：
  • 日文字符碎片
  • 字幕感
  • 听力波形
  • 对话气泡
  • 学习卡片片段
• 但不能堆满屏幕

6. 视觉禁区

以下方向在第一轮中明确禁止：

• 健身 App 式强激励、强对抗、强成就海报感
• 大面积高饱和蓝底、紫底、霓虹渐变
• 过强广告感的 paywall 语气提前渗入前五类模板
• 厚描边卡片
• 悬浮阴影卡片
• 玻璃拟态卡片
• 二次元海报风
• 日漫封面风
• 过强教材产品感
• 樱花、鸟居、和风纹样等刻板日本意象堆砌
• 大量日文文本铺陈
• 把计划页做成总结页、成就页或报告页
• 把决策页做成设置页或问卷系统

正向约束：

• 明亮，但不刺眼
• 鼓励开始，但不喊口号
• 有情绪，但不营销化
• 有卡片分组，但不厚重
• 有品牌识别，但不靠满屏品牌色
• 有学习线索，但不做教材感

7. 文案与内容约束

第一轮完全沿用现有原型文案，不做设计性改写。

Stitch 需要直接使用现有 screen copy，以便后续校验：

• 标题长度是否合理
• 选项卡两行信息密度是否合理
• 说明模块是否过重
• 计划交付页的信息结构是否成立

不得使用：

• 占位文案
• Lorem ipsum
• 通用营销短句替代真实文案

8. 模板级设计要求

8.1 Hero 启动页

覆盖 screens：

• 01
• 02
• 03
• 07

页面任务：

• 建立第一印象
• 同时立住品牌与情绪标题
• 让用户感到“现在就能开始”

信息结构：

• 顶部安全区 / 状态栏
• 品牌名
• 情绪标题
• 可选副标题或阶段提示
• 主 CTA 或自动推进提示
• 背景插画 / 场景氛围

设计要求：

• 这是整套 onboarding 中情绪最强的一类页
• 但不能像广告海报或开屏硬广
• 品牌名和情绪标题并重
• 品牌不是 splash logo，也不能完全退到角落
• 主色只做局部点亮
• 背景主要由浅色氛围、场景插画和轻空气感成立

细节要求：

• 01 更像品牌开场，无 CTA
• 02 有清楚 CTA，是开始感最强的一屏
• 03 / 07 更像阶段转场页，保留情绪但降低操作性

8.2 单选决策页

覆盖 screens：

• 04
• 05
• 06
• 08
• 09

页面任务：

• 承担 onboarding 的主骨架
• 快速收集关键偏好
• 让用户点选后自然前进

信息结构：

• 返回箭头
• 顶部阶段进度
• 双行标题
• 3 个单选项
• 每个选项两行信息

设计要求：

• 回归现有产品主语言
• 页面浅底、轻容器、强可读
• 不再依赖插画
• 选项卡有卡片感，但必须无边框、无阴影
• 靠轻表面变化、圆角、留白成立

选中态要求：

• 清楚但不过分
• 通过轻表面变化、小面积主色点缀、字重变化和细标记来表达
• 不得做成大按钮感

8.3 说明型 CTA 页

覆盖 screens：

• 10

页面任务：

• 把“你会这样开始”讲清楚
• 建立开始路径的可信度
• 为进入生成态做心理预备

信息结构：

• 返回箭头
• 顶部阶段进度
• 页面标题
• 3 个说明模块
• 主按钮

设计要求：

• 比单选页更多一点说明感
• 但不能变成详情页或价值宣讲页
• 三个模块应像明确的行动步骤，而不是营销卖点
• 模块继续采用轻卡片或轻分组
• 无边框、无阴影

8.4 生成中页

覆盖 screens：

• 11

页面任务：

• 把等待转化成“正在为你准备”的体验
• 建立被认真准备的感受
• 为计划交付页蓄势

信息结构：

• 主标题
• 生成中状态文案列表
• 插画场景
• 可选的轻量进度暗示
• 无返回
• 无顶部阶段条

设计要求：

• 这是第二个允许使用插画的模板
• 情绪上比 Hero 更安静、更专注
• 不是技术化 loading page
• 更像“系统正在整理你的开始方式”

8.5 计划交付页

覆盖 screens：

• 12

页面任务：

• 真正交付第一周计划
• 让用户感到“现在就可以开始”
• 把主按钮变成自然的下一步动作

信息结构：

• 返回箭头
• 页面标题
• 4 个计划模块
• 主按钮

设计要求：

• 更像行动页，不像摘要页
• 4 个模块要有主次关系，而不是平均排布成 checklist
• 继续使用轻卡片语言
• 无边框、无阴影
• 比单选页更稳一点，但仍然轻

优先级建议：

1. 节奏
2. 第一条内容
3. 卡住时的承接功能
4. 一周预期

主按钮要求：

• 按钮要明显
• 但计划内容仍应是页面主体
• 不得让页面看起来像 paywall 前置页

9. 逐类模板使用的现有文案

Hero 启动页

• 01
  • 每日日语
  • 慢慢长出语感
• 02
  • 边听边学
  • 更容易开始
  • 开始
  • 我已有账号
• 03
  • 快速找到
  • 适合你的
  • 学习方式
• 07
  • 接下来，
  • 安排你的第一周
  • 再看两步，就能开始。

单选决策页

• 04
  • 你现在最想
  • 改善什么？
  • 听懂一点 / 更容易跟上真实内容
  • 更敢开口 / 说的时候没那么卡
  • 重新开始 / 把学习接回来
• 05
  • 你最容易
  • 卡在哪里？
  • 一听就丢 / 速度一快就断掉
  • 连不起来 / 认识词，放进内容就糊
  • 很难开始 / 知道该学，却总没开始
• 06
  • 你现在更接近
  • 哪一种？
  • 刚开始 / 想轻松进入
  • 学过一点 / 但还是跟不稳
  • 基础还行 / 想更自然听懂
• 08
  • 这周你想留
  • 多少时间？
  • 每天 5 分钟 / 轻一点，先开始
  • 每天 10 分钟 / 更稳一点，也不重
  • 每天 20 分钟 / 想更集中地往前走
• 09
  • 你想从哪类
  • 内容开始？
  • 轻松听一听 / 更容易进入真实内容
  • 日常对话 / 更接近生活里会遇到的表达
  • 更有结构感 / 更适合想稳一点往前走

说明型 CTA 页

• 10
  • 你会这样开始
  • 先开始一条内容 / 先走一小步，更容易开始。
  • 卡住时再看一点 / 精听、AI 解析、查词，都会接住你。
  • 按你的节奏继续 / 先坚持一周，你会更容易听进去。
  • 生成我的计划

生成中页

• 11
  • 你的第一周，
  • 快整理好了
  • 正在匹配第一条内容
  • 正在整理这一周节奏
  • 正在准备辅助功能入口

计划交付页

• 12
  • 这是你的
  • 第一周
  • 每天 10 分钟 / 先把开始做顺，再慢慢加深。
  • 第一条内容：轻松听一听 / 一条更容易进入的真实内容，适合重新接回语感。
  • 遇到卡点时 / 精听、AI 解析、查词都会在你需要时出现。
  • 先坚持一周 / 你会更容易听进去，也更容易继续下去。
  • 正式开始

10. Stitch 输出要求

Google Stitch 在第一轮应输出：

1. 整体视觉方向摘要
2. 5 类模板页的设计稿
3. 每类模板的组件说明
4. 模板与实际 screens 的映射关系
5. 从现有 iOS 设计语言推导出的 spacing / type / surface guidance

输出优先级：

• 先建立模板语言
• 再说明这些模板如何派生出具体 screens
• 不要试图在第一轮覆盖完整 13 屏

额外要求：

• 明确区分哪些是模板，哪些是实际 screen 的实例
• 所有页面均基于 Light Mode
• 所有页面均遵守现有 token 语言的轻量化约束
• 订阅页不在本轮范围内

11. 成功标准

如果第一轮 Stitch 结果正确，应该满足：

• 前段有进入感，但没有变成营销海报
• 中后段能清楚看出与现有产品属于同一家族
• 单选决策页看起来清楚、轻、好选，不像设置页
• 说明页不显得啰嗦
• 生成中页有“正在为你准备”的感受，而不是普通 loading
• 计划交付页更像“现在就能开始”的行动页，而不是总结页
• 后续扩展到完整 13 屏时，不需要推翻这 5 类模板