Meditation App · UI/UX Prototype

静息 · 冥想 App 完整原型

以 375 × 812(iPhone X 基准)为画布,按产品经理视角规划了 6 个功能模块共 9 个页面: 今日首页、冥想分类、播放页、呼吸练习、睡眠故事、计时器、课程详情、周记录、个人中心。 全部页面在同一 HTML 内以独立设备框横向排列,便于逐屏评审与直接交付开发。

Tailwind CSS Unsplash 图片 Lucide Static 图标 375px 基准

01 · 今日首页

9:41

早上好

林晚晴

连续 28 天
晨间冥想
今日推荐

晨间清醒冥想

10 分钟 · 身体扫描 · 适合早晨

已听 6 / 10 分钟

呼吸练习

睡眠故事

冥想计时

继续学习

课程封面

正念入门 21 天

第 6 天 · 觉察情绪

为你推荐

专注冥想

专注力提升

15 分钟 · 中级

#效率

焦虑缓解

焦虑缓解练习

8 分钟 · 初级

#情绪

森林冥想

森林清晨

20 分钟 · 环境音

#自然

首页
发现
计时
我的

02 · 分类发现

9:41⌁ ⌁ ▮
搜索冥想、睡眠、课程

探索主题

自然

自然与声音

情绪

情绪疗愈

专注

专注与效率

睡眠

深度睡眠

精选合集

合集封面

7 天正念挑战

每天 10 分钟 · 共 7 课 · 已有 12 万人完成

加入计划 进度 3 / 7

名师课程

讲师头像

苏瑾 · 呼吸法导师

12 门课程 · 4.9 分

关注
讲师头像

陈默 · 正念减压

9 门课程 · 4.8 分

关注
首页
发现
计时
我的

03 · 冥想播放页

播放背景
9:41⌁ ⌁ ▮

晨间清醒冥想

苏瑾 · 身体扫描 · 第 1 段

06:1210:00
定时
助眠
环境音
投屏

04 · 呼吸练习

9:41⌁ ⌁ ▮

箱式呼吸

4-4-4-4 节奏 · 缓解焦虑

吸气

4

4

吸气

4

屏息

4

呼气

4

停留

第 3 / 8 轮

05 · 睡眠故事

22:38⌁ ⌁ ▮

今晚想听点什么

所有故事均在 30 分钟后自动停止播放

星夜
本期推荐

星夜航船

32 分钟 · 声音质感细腻

情景故事

雪境

落雪小镇

28 分钟 · 壁炉

森林

苔藓森林

24 分钟 · 溪流

海岸

退潮海岸

36 分钟 · 海浪

助眠音景

白噪音

山间白噪音

雨声

屋檐雨声

睡眠定时

30 分钟后渐弱停止

开启
首页
发现
计时
我的

06 · 冥想计时器

21:04⌁ ⌁ ▮

自由冥想

无引导音,仅计时提醒

12:30

已冥想 12 分 30 秒

5

分钟

15

分钟

30

分钟

60

分钟

结束提醒 渐弱提示音
震动 开启
屏幕常亮 冥想期间保持

07 · 课程详情与播放列表

20:15⌁ ⌁ ▮
课程封面
21 天课程

正念入门:从身体开始

苏瑾 · 4.9 分 · 3.2 万人学过

21

课时

3.5h

总时长

28%

已完成

课程目录

第 1 天 · 认识呼吸

12 分钟

第 6 天 · 觉察情绪

15 分钟 · 进行中

第 7 天 · 慈悲冥想

18 分钟

第 21 天 · 毕业回顾

25 分钟

讲师

讲师

苏瑾

正念减压师 · 10 年教学

关注

08 · 冥想周记录

9:41⌁ ⌁ ▮

本周练习

10 月 7 日 — 10 月 13 日

128

总时长(分钟)

+18%

较上周

一
二
三
四
五
六
日

6 天

连续练习

42 次

累计完成

练习分布

晨间清醒 6 次
身体扫描 4 次
睡眠冥想 3 次

09 · 个人中心

9:41⌁ ⌁ ▮
头像

林晚晴

已坚持冥想 128 天

年度会员

128

连续天数

42h

累计时长

9

完成课程

MY SPACE

练习记录
我的收藏
睡眠报告 良好

SETTINGS

提醒设置 每天 21:30
外观与主题 深色
帮助与反馈

静息 v1.0.0 · 愿你此刻安宁

首页
发现
计时
我的