Whiteboard Diagram 将任何概念转化为优雅的…

# 在线教育平台注册流程 · 手绘白板风格图

一、流程总览（白板手绘版示意）

```

┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐

│ 📖 浏览 │ │ ▶️ 点击 │ │ 📱 手机号 │ │ 💰 支付 │

│ 课程页 │ ───→ │ 试听 │ ───→ │ 注册 │ ───→ │ 9.9元 │

│ │ │ │ │ │ │ 体验课 │

└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘

Step 1 Step 2 Step 3 Step 4

```

二、分步细节描述

Step 1：浏览课程页

• 用户从首页/广告落地页进入课程列表页
• 页面元素：课程封面、标题、简介、学员评价
• 手绘元素：画一个浏览器窗口框 + 课程卡片列表

Step 2：点击试听

• 课程详情页设置醒目的「免费试听」按钮（手绘用波浪线强调）
• 触发试听视频/音频播放页
• 手绘元素：按钮上画个爆炸星形框

Step 3：手机号注册

• 弹出注册弹窗：输入手机号 → 获取验证码 → 输入验证码
• 需勾选用户协议（合规要点）
• 手绘元素：画一个带输入框的小弹窗卡片

Step 4：支付9.9元体验课

• 展示订单确认页：课程名 + 价格（区间性小额付费）
• 支持微信/支付宝等主流方式
• 支付成功 → 跳转体验课学习页
• 手绘元素：画二维码方块 + 成功对勾 ✓

三、制作工具建议

• 手绘风格：Excalidraw、tldraw、Handraw（中文版）
• 专业绘图：draw.io、ProcessOn、Figma
• 操作要点：选择「粗糙/手写」线条样式，手写字体，配色建议黑笔+1-2个高亮色

四、设计小贴士

• 4个步骤间用带箭头的虚线连接，标注转化动作
• 可在每步下方标注流失风险点（如注册弹窗流失率较高需优化）
• 建议补充「试听结束→注册」的引导时机说明

需要我帮你把某个步骤细化成子流程图吗？