汐

潮汐眠 · 冥想 iOS App 原型

全部页面展示在同一 HTML 中 · iPhone 375px 基准 · Tailwind CSS + Unsplash

需求与场景(用户视角)

通勤路上 3 分钟安定、午休 10 分钟放松、睡前 20 分钟入睡引导;焦虑时快速平复;坚持打卡获得正反馈;离线也能听已下载内容。

功能与页面(产品视角)

欢迎与目标设定 → 今日推荐(分类/课程)→ 冥想播放(呼吸、计时、音量)→ 呼吸练习 → 睡眠故事与白噪音 → 数据与设置(提醒、订阅、下载)。

视觉与交互(设计视角)

深色低刺激配色(夜蓝 + 潮汐绿),大圆角、慢节奏动效;底部 5 个标签;播放页以圆形呼吸为主视觉,所有主按钮均在拇指热区内。

01 · 欢迎与目标设定

首次启动
夜空山峦

TIDE · SLEEP · MEDITATE

今晚,
让呼吸带你靠岸

先告诉我们你想改善什么,我们会为你生成第一周计划。

更快入睡
缓解焦虑
提升专注
早晨清醒练习
每天提醒时间22:30

02 · 首页(今日推荐)

Tab 1

晚安,阿禾

已连续练习 12 天 · 本周 86 分钟

今日一句

“潮水退去时,沙滩记得的不是消失,而是形状。”

冥想

为你推荐 · 10 分钟

睡前身体扫描

第 3 天 · 引导师 林深

呼吸

睡眠

减压

白噪音

午间 10 分钟放松

冥想 · 10:00

焦虑时的 3 分钟急救

呼吸 · 03:00

雨夜列车(睡眠故事)

故事 · 25:00

03 · 冥想播放页

沉浸模式

睡前身体扫描 · 第 3 天

06:42

跟随呼吸 · 吸气 4s

06:42
15:00
倍速 1.0x 定时 15 分钟 章节 音量
背景音
海浪 雨声 壁炉

04 · 呼吸练习(4-7-8)

快速平复

4-7-8 呼吸法

第 3 轮 / 共 6 轮

屏息

7

保持,肩膀放松

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

3:21

本轮剩余

86

今日次呼吸

64

心率(估)

05 · 睡眠 · 故事与白噪音

Tab 2 · 发现

睡眠

搜索故事、白噪音、引导师
山谷

编辑精选 · 25 分钟

雨夜列车

缓缓驶过苏格兰高地的夜车,适合入睡困难的晚上。

窗外雨声

白噪音 · 循环

可离线30min

壁炉噼啪

白噪音 · 循环

可离线45min

夜行列车

睡眠故事 · 25:00

播放

羽毛与湖

睡眠故事 · 18:30

下载

港口的夜

睡眠故事 · 22:10

下载

06 · 练习数据与我的

Tab 5

我的练习

12

连续天数

86

本周分钟

42

累计次数

最近 7 天

比上周多 21 分钟
一二三四五六日
瑜伽

会员 · 2026 年到期

解锁全部课程与离线下载

练习提醒每天 22:30
离线内容已下载 6 个
隐私与数据

页面按 iPhone 375px 设计,宽屏横向排列、窄屏单列,界面内不出现滚动条。
样式由 Tailwind CSS CDN 提供,图片来自 Unsplash(首次加载需要联网)。