2026-04-11-yomiya-onboarding-ios-prototype-design
Yomiya Onboarding iOS Prototype Design
Section titled “Yomiya Onboarding iOS Prototype Design”日期：2026-04-11
中文边界说明：本文是
2026-04-11的历史原型输入，不再作为当前 onboarding 事实源。 当前中文事实入口请读product/YomiyaOnboarding/README.md，维护规则请读docs/文档唯一来源维护规则.md。
1. 已确认结论
Section titled “1. 已确认结论”- 原始
15 屏思路已收敛为更合理的13 屏主链 - 目标是帮助用户开始第一周，而不是反复确认选择
- 原型平台为
iOS 移动端 375px - 顶部进度按
6 个阶段分段，不按总屏数线性推进 - 关键选择页支持左上角返回反选
- 不增加页尾文本入口
调整我的选择
2. 最终信息架构
Section titled “2. 最终信息架构”01 品牌开场
02 动态起始页
03 阶段过场
04 主目标页
05 卡点页
06 起点判断页
07 中性过场页
08 时间承诺页
09 内容偏好页
10 开始方式说明页
11 计划生成页
12 第一周计划页
13 订阅页
3. Prototype Prompt
Section titled “3. Prototype Prompt”You are a world-class mobile UI/UX engineer and prototype designer. You specialize in iOS-style onboarding flows, multilingual mobile interfaces, and product flows that convert without feeling like sales funnels.
Create a medium-fidelity iOS mobile onboarding prototype for Yomiya / 每日日语.
The prototype must reflect a final 13-screen onboarding flow, not the earlier 15-screen draft.
Core keywords: short copy, clear next step, light branching, plan delivery before subscription, multilingual-friendly.
Tech Stack
Section titled “Tech Stack”- Output a mobile onboarding prototype for
375pxwide iPhone viewport - Use iOS-native layout language with a restrained custom palette
- Simulate status bar, safe area, rounded device corners
- Use a segmented top progress indicator based on
6 stages - Single-select screens auto-advance
- Auto-transition screens do not enter history stack
- Keep left back arrow only on editable / decision pages
Visual Design Requirements
Section titled “Visual Design Requirements”Color Palette
Section titled “Color Palette”- Primary Background:
#FFFFFF - Secondary Background:
#F8FAFC - Card Background:
#F8FAFC - Primary Text:
#0F172A - Secondary Text:
#64748B - Border / Divider:
#E2E8F0 - Accent Blue:
#2563EB - Accent Blue Light:
#DBEAFE - Primary Button Background:
#0F172A - Primary Button Text:
#FFFFFF
UI Style Characteristics
Section titled “UI Style Characteristics”- Cards: rounded
18px, soft border, no heavy shadow - Primary button: full-width, dark background, white text,
16pxradius - Option cards: vertical stack, centered text, two-line structure
- Progress bar: 6 equal segments, active segment in dark color
- Copy: no long paragraphs, no explanatory system language
Typography
Section titled “Typography”- Large screen title:
22pxbold - Card title:
15pxsemibold - Secondary helper text:
12-13px - Buttons:
15pxsemibold
Content Structure
Section titled “Content Structure”Stage 1 Brand Entry
Section titled “Stage 1 Brand Entry”- Brand opening
- Dynamic start page
- Transition page
Stage 2 Understand Me
Section titled “Stage 2 Understand Me”- Primary goal
- Main pain point
- Self-assessed level
Stage 3 Arrange Week One
Section titled “Stage 3 Arrange Week One”- Neutral transition
- Weekly time commitment
- Preferred content entry
Stage 4 Explain Start Mode
Section titled “Stage 4 Explain Start Mode”- How you will start
Stage 5 Generate Plan
Section titled “Stage 5 Generate Plan”- Plan generation
Stage 6 Deliver and Convert
Section titled “Stage 6 Deliver and Convert”- Week-one plan delivery
- Subscription confirmation
Specific Page Content
Section titled “Specific Page Content”Screen 01
Section titled “Screen 01”- Title:
每日日语 - Subtitle:
慢慢长出语感 - No CTA
- Auto-transition after about 1.6s
Screen 02
Section titled “Screen 02”- Headline:
边听边学更容易开始 - Primary CTA:
开始 - Secondary CTA:
我已有账号
Screen 03
Section titled “Screen 03”- Headline:
快速找到适合你的学习方式 - Auto-transition after about 1.2s
Screen 04
Section titled “Screen 04”- Title:
你现在最想改善什么？ - Options:
听懂一点/更容易跟上真实内容更敢开口/说的时候没那么卡重新开始/把学习接回来
Screen 05
Section titled “Screen 05”- Title:
你最容易卡在哪里？ - Options:
一听就丢/速度一快就断掉连不起来/认识词，放进内容就糊很难开始/知道该学，却总没开始
Screen 06
Section titled “Screen 06”- Title:
你现在更接近哪一种？ - Options:
刚开始/想轻松进入学过一点/但还是跟不稳基础还行/想更自然听懂
Screen 07
Section titled “Screen 07”- Headline:
接下来，安排你的第一周 - Subcopy:
再看两步，就能开始。 - Auto-transition after about 1.2s
Screen 08
Section titled “Screen 08”- Title:
这周你想留多少时间？ - Options:
每天 5 分钟/轻一点，先开始每天 10 分钟/更稳一点，也不重每天 20 分钟/想更集中地往前走
Screen 09
Section titled “Screen 09”- Title:
你想从哪类内容开始？ - Options:
轻松听一听/更容易进入真实内容日常对话/更接近生活里会遇到的表达更有结构感/更适合想稳一点往前走
Screen 10
Section titled “Screen 10”- Title:
你会这样开始 - Blocks:
先开始一条内容/先走一小步，更容易开始。卡住时再看一点/精听、AI 解析、查词，都会接住你。按你的节奏继续/先坚持一周，你会更容易听进去。
- CTA:
生成我的计划
Screen 11
Section titled “Screen 11”- Title:
你的第一周，快整理好了 - Loading items:
正在匹配第一条内容正在整理这一周节奏正在准备辅助功能入口
- Hide top progress
- Auto-transition after about 2.0s
Screen 12
Section titled “Screen 12”- Title:
这是你的第一周 - Cards:
每天 10 分钟/先把开始做顺，再慢慢加深。第一条内容：轻松听一听/一条更容易进入的真实内容，适合重新接回语感。遇到卡点时/精听、AI 解析、查词都会在你需要时出现。先坚持一周/你会更容易听进去，也更容易继续下去。
- CTA:
正式开始
Screen 13
Section titled “Screen 13”- Title:
开始这一周 - Subcopy:
你的第一周已经准备好了。订阅后，现在就可以开始。 - Subscription options:
年订阅/更适合想稳定学下去的人/¥298 / 年月订阅/先按月开始，也能随时继续/¥39 / 月
- CTA:
开始订阅 - Secondary action:
暂不订阅
Interaction Details
Section titled “Interaction Details”- Show back arrow on screens
04 / 05 / 06 / 08 / 09 / 10 / 12 / 13 - Auto screens
01 / 03 / 07 / 11do not enter navigation history - When user goes back, previous selection remains highlighted
- When user changes any answer from screens
04 / 05 / 06 / 08 / 09, invalidate downstream generated plan and regenerate on next forward path - Do not add extra text links like “adjust my choices” at page bottom
Output Format
Section titled “Output Format”Produce a medium-fidelity onboarding prototype or screen spec that is directly usable by:
- product design
- mobile design
- AI prototype generation tools
- iOS implementation planning
Every screen must include:
- screen goal
- elements
- exact copy
- button labels
- transition behavior
- back behavior
- relation to previous and next screens
No placeholder lorem ipsum. No extra educational pages. No duplicate summary screens.