Meditation App Prototype

静心 · 冥想 App 完整原型

面向「睡前焦虑 + 通勤碎片时间」的冥想用户,把一次完整的 App 体验拆成 6 个关键页面:今日推荐、场景冥想库、正在播放、专注计时、睡眠故事与个人中心。 每个页面都是 375×812 的 iPhone 基准稿,可直接进入开发。

9:41􀙇 􀋲 􀛨
晨雾山谷
安
晚上好,安然
◔ ♡

今日冥想 · 第 12 天

睡前,把今天
慢慢放下

雪夜山峦

深度睡眠 · 12 分钟

山间回响

快速开始

🌤

晨间

🍃

减压

🫁

呼吸

🌙

助眠

① 今日首页 · 天气化背景 + 连续打卡 + 快捷入口

9:41􀙇 􀋲 􀛨

场景冥想库

今天想去哪里?

🔍
全部 放松 专注 睡眠 焦虑

编辑精选

森林光斑

系列 · 3 节课

雨林回声

自然白噪音 · 降噪专注

全部场景

海滩

海岸潮汐

18 分钟 · 舒缓

苔藓森林

苔藓小径

25 分钟 · 专注

阳光树冠

午后树冠

10 分钟 · 提神

极光

极光夜空

30 分钟 · 深度睡眠

今日
◉
场景
◫
故事
▶
我的
☺

② 场景库 · 搜索 + 标签筛选 + 双列卡片

9:41􀙇 􀋲 􀛨
⌄ 正在播放 ⋯
雪夜山峦
剩余 08:12

山间回响

深度睡眠 · 雪落声景

跟随呼吸,把注意力放回身体,
让今天的声音慢慢远去。

04:0312:00
安

引导语

吸气四拍,屏息两拍…

③ 播放器 · 环形进度 + 声音可视化 + 播放控制

9:41􀙇 􀋲 􀛨
‹

专注计时

⋯

04:32

深呼吸 · 第 68 次

4-7-8 节律

节律设置

吸气4 拍
屏息7 拍
呼气8 拍

④ 专注计时 · 呼吸动画 + 4-7-8 节律可调

21:05􀙇 􀋲 􀛨
‹ 睡眠故事 ♡

今晚,讲个
慢下来的故事

播客式叙事,45 分钟后自动淡出

星空

第 12 夜 · 续

灯塔与守夜人

▶
雾

雾中的小火车

38 分钟 · 已在听 12 分钟

雪

雪落山间小屋

52 分钟 · 新

猫

猫咪的呼噜声

26 分钟 · 环境音

⏱ 定时停止 45 分钟 ›

⑤ 睡眠故事 · 大图封面 + 续播列表 + 定时停止

9:41􀙇 􀋲 􀛨
安

安然

已连续冥想 12 天 · 累计 26 小时

186

总分钟

12

连续天数

24

完成课程

本周练习

共 74 分钟
一
二
三
四
五
六
日
我的收藏›
冥想提醒每晚 22:00
目标与成就›
下载与网络›

⑥ 个人中心 · 打卡统计 + 周视图 + 设置项

屏幕状态

快捷键:← / → 切换屏幕,Home / End 跳到首尾,F 切换专注模式。 地址栏的 #p3 可以直接定位到第 3 屏,嵌入对比页后分享链接也能落到同一屏。

产品规划

  • · 核心场景:睡前焦虑缓解、通勤碎片专注、晨间唤醒
  • · 关键路径:进入 → 今日推荐 → 一键播放 → 连续打卡
  • · 差异化:用“场景 + 故事”替代列表式课程目录

交互要点

  • · 播放器支持后台播放与锁屏控制
  • · 计时结束自动淡出并回到今日页
  • · 全部控件满足 44pt 触控热区

设计规范

  • · 基准 375×812,安全区上下各 44 / 34pt
  • · 主色 Calm 600,底色 Sand,强调色按场景切换
  • · 字号阶梯 11 / 12 / 13 / 18 / 26 / 30pt