04-20屏线性流程图
20 屏线性流程图
Section titled “20 屏线性流程图”这份文档把当前 onboarding 同时用两层方式表达清楚:
- 用户视角的
20 个可见页面 - 工程视角的
18 个实现 step
1. 20 屏可见主链
Section titled “1. 20 屏可见主链”flowchart TD
V01[01 Brand Intro]
V02[02 Showcase A]
V03[03 Showcase B]
V04[04 Showcase C]
V05[05 Showcase D]
V06[06 Coach Intro]
V07[07 Phase Intro]
V08[08 Goal]
V09[09 Level]
V10[10 Pain]
V11[11 Week Intro]
V12[12 Start Type]
V13[13 Interest Tags]
V14[14 Daily Time]
V15[15 Weekly Frequency]
V16[16 Notification Prompt]
V17[17 Encouragement]
V18[18 Explanation]
V19[19 Generating]
V20[20 Plan Result]
PAY[Paywall]
V01 --> V02 --> V03 --> V04 --> V05 --> V06 --> V07 --> V08 --> V09 --> V10 --> V11 --> V12 --> V13 --> V14 --> V15 --> V16 --> V17 --> V18 --> V19 --> V20 --> PAY
2. 18 step 实现主链
Section titled “2. 18 step 实现主链”flowchart TD
S01[brandIntro]
S02[networkWarmup]
S03[welcomeShowcase]
S04[coachIntro]
S05[phaseIntro]
S06[goalQuestion]
S07[levelQuestion]
S08[painQuestion]
S09[weekIntro]
S10[startTypeQuestion]
S11[interestTags]
S12[dailyTimeQuestion]
S13[weeklyFrequency]
S14[notificationPrompt]
S15[encouragement]
S16[explanation]
S17[generating]
S18[plan]
PAY[Paywall]
S01 --> S02 --> S03 --> S04 --> S05 --> S06 --> S07 --> S08 --> S09 --> S10 --> S11 --> S12 --> S13 --> S14 --> S15 --> S16 --> S17 --> S18 --> PAY
3. 两层口径的对应关系
Section titled “3. 两层口径的对应关系”flowchart TD
V01[01 Brand Intro] --> S01[brandIntro]
H1[(hidden)] --> S02[networkWarmup]
V02[02-05 Showcase 4 pages] --> S03[welcomeShowcase]
V06[06 Coach Intro] --> S04[coachIntro]
V07[07 Phase Intro] --> S05[phaseIntro]
V08[08 Goal] --> S06[goalQuestion]
V09[09 Level] --> S07[levelQuestion]
V10[10 Pain] --> S08[painQuestion]
V11[11 Week Intro] --> S09[weekIntro]
V12[12 Start Type] --> S10[startTypeQuestion]
V13[13 Interest Tags] --> S11[interestTags]
V14[14 Daily Time] --> S12[dailyTimeQuestion]
V15[15 Weekly Frequency] --> S13[weeklyFrequency]
V16[16 Notification Prompt] --> S14[notificationPrompt]
V17[17 Encouragement] --> S15[encouragement]
V18[18 Explanation] --> S16[explanation]
V19[19 Generating] --> S17[generating]
V20[20 Plan Result] --> S18[plan]
4. 当前回退链路
Section titled “4. 当前回退链路”flowchart TD
P20[20 Plan Result] -->|返回| P18[18 Explanation]
P18 -->|返回| P17[17 Encouragement]
P17 -->|返回| P16[16 Notification Prompt]
P16 -->|返回| P15[15 Weekly Frequency]
P15 -->|返回| P14[14 Daily Time]
P14 -->|返回| P13[13 Interest Tags]
P13 -->|返回| P12[12 Start Type]
P12 -->|返回| P10[10 Pain]
P10 -->|返回| P09[09 Level]
P09 -->|返回| P08[08 Goal]
P08 -->|返回| P06[06 Coach Intro]
P06 -->|返回| P0205[02-05 Welcome Showcase]
说明:
11 Week Intro和07 Phase Intro为自动过场,不单独作为回退落点14 Daily Time返回时会回到13 Interest Tags15 Weekly Frequency返回时会回到14 Daily Time20 Plan Result返回时直接回到18 Explanation
5. 登录与支付分支
Section titled “5. 登录与支付分支”flowchart TD
SHOW[02-05 Welcome Showcase]
AUTH[Full-screen AuthViewController]
HOME[Home]
SHELL[Onboarding Shell]
PLAN[20 Plan Result]
PAY[Full-screen PaywallViewController]
SHOW -->|我已有账号| AUTH
AUTH -->|取消关闭| SHELL
AUTH -->|登录成功| HOME
PLAN -->|出发吧!| PAY
PAY -->|关闭| HOME
6. 阶段拆分
Section titled “6. 阶段拆分”flowchart TD
subgraph A[阶段 1 沉浸进入]
A1[01-06]
end
subgraph B[阶段 2 先被理解]
B1[07-10]
end
subgraph C[阶段 3 安排第一周]
C1[11-17]
end
subgraph D[阶段 4 说明开始方式]
D1[18]
end
subgraph E[阶段 5 生成计划]
E1[19]
end
subgraph F[阶段 6 交付第一周]
F1[20]
end
A --> B --> C --> D --> E --> F