呼吸-主页高保真样式规范

字数

2444 字

阅读时间

10 分钟

参考高保真稿和页面文档，基于《色彩系统.md》与UI组件规范，聚焦呼吸练习引导、计时控制和体验记录的视觉呈现。

1. 设计定位与体验目标

页面主任务：提供专业的呼吸练习引导，通过可视化的呼吸节奏、计时控制和效果记录，帮助用户进行呼吸放松训练。
体验关键词：宁静专注、节奏稳定、视觉引导、效果追踪。通过舒缓的色彩和流畅的动画营造放松氛围。
视觉策略：整页基底使用渐变背景，核心练习区域使用大尺寸可视化元素，效果记录使用温和的数据展示，营造专业的放松训练环境。

2. 页面结构框架

┌──────────────────────────────────────────┐
│ 顶部导航栏：返回按钮 + 标题"呼吸练习" │
├──────────────────────────────────────────┐
│ 练习选择区：不同呼吸模式选择卡片 │
├──────────────────────────────────────────┐
│ 呼吸引导区：大型呼吸可视化动画 + 引导文字 │
├──────────────────────────────────────────┐
│ 控制面板：开始/暂停 + 时长设置 + 音量控制 │
├──────────────────────────────────────────┐
│ 进度显示：练习进度 + 剩余时间 + 呼吸计数 │
├──────────────────────────────────────────┐
│ 效果记录：练习前后的状态对比 + 感受记录 │
├──────────────────────────────────────────┐
│ 练习建议：个性化建议 + 相关资源推荐 │
└──────────────────────────────────────────┘

3. 模块规格详解

3.1 顶部导航栏

容器：高度 88rpx，背景透明，无阴影。
返回按钮：左侧箭头图标，白色 #FFFFFF。
标题：居中显示"呼吸练习"，字号 32rpx，字重 700，颜色 #FFFFFF。

3.2 练习选择区

容器：背景半透明白色 rgba(255, 255, 255, 0.9)，圆角 32rpx，内边距 32rpx。
练习卡片：
- 4-7-8呼吸法：4秒吸气，7秒屏息，8秒呼气
- 方形呼吸法：4秒吸气，4秒屏息，4秒呼气，4秒屏息
- 深度呼吸法：6秒吸气，2秒屏息，8秒呼气
- 自然呼吸法：跟随自然节奏的呼吸引导
卡片样式：
- 默认：白底，品牌蓝边框 --color-brand-500
- 选中：品牌蓝背景 --color-brand-500，文字白色
- 卡片尺寸：宽度 144rpx，高度 176rpx，圆角 24rpx

3.3 呼吸引导区

容器：全屏中央区域，最大宽度 600rpx，高度 600rpx。
呼吸动画：
- 呼吸圆形：直径 400rpx，使用渐变色 linear-gradient(135deg, #3A7BD5, #8C86FF)
- 吸气动画：圆形逐渐放大到 120%，透明度 1.0 → 0.6
- 屏息动画：圆形保持大小，轻微脉动
- 呼气动画：圆形逐渐缩小到 80%，透明度 0.6 → 1.0
引导文字：
- 动态文字："吸气..."、"屏息..."、"呼气..."、"放松..."
- 文字样式：字号 48rpx，字重 600，颜色 --color-ink-700
- 文字位置：呼吸圆形下方，居中对齐

3.4 控制面板

容器：底部固定区域，高度 240rpx，背景半透明白色 rgba(255, 255, 255, 0.95)，圆角顶部 48rpx。
开始/暂停按钮：
- 圆形按钮，直径 128rpx，背景 --color-success-500
- 播放图标：白色三角形，大小 24x48rpx
- 暂停图标：白色双竖线，大小 24x48rpx
时长设置：
- 时长选择：1分钟、3分钟、5分钟、10分钟、自定义
- 选择器：横向滚动选择器，选中项放大显示
音量控制：
- 音量图标：扬声器图标，根据音量大小显示不同状态
- 音量滑块：横向滑块，范围 0-100

3.5 进度显示

容器：位于控制面板上方，高度 120rpx。
练习进度：
- 进度条：横向进度条，背景 --color-ink-100，进度 --color-brand-500
- 百分比显示：右侧显示完成百分比
剩余时间：
- 时间显示：格式为"MM:SS"，字号 36rpx，字重 600
- 位置：进度条上方，居中显示
呼吸计数：
- 计数显示："第 X 次呼吸"，字号 28rpx，颜色 --color-ink-600
- 位置：剩余时间下方，居中显示

3.6 效果记录

容器：背景 --color-info-50，圆角 24rpx，内边距 32rpx。
状态对比：
- 练习前：情绪状态、压力水平的文字描述
- 练习后：情绪状态、压力水平的文字描述
- 对比显示：使用上升/下降箭头表示改善程度
感受记录：
- 感受输入：文本输入框，记录练习感受
- 感受标签：放松、平静、专注、困倦等选择标签
自动保存：
- 保存提示："练习记录已保存"
- 保存时间：显示保存时间戳

3.7 练习建议

容器：背景 --color-success-50，圆角 24rpx，内边距 32rpx。
个性化建议：
- 建议标题："今日建议"，字号 28rpx，字重 600，颜色 --color-success-600
- 建议内容：基于用户情绪状态和练习历史的个性化建议
相关资源：
- 资源标题："推荐资源"，字号 28rpx，字重 600，颜色 --color-success-600
- 资源列表：正念练习、冥想指导、睡眠音乐等相关资源

4. 交互与状态要求

4.1 练习引导

动画同步：呼吸动画与引导文字完全同步
节奏控制：用户可随时调整呼吸节奏，适应个人需求
视觉反馈：动画的流畅性和视觉舒适度
声音引导：可选择的语音引导，与动画同步

4.2 控制交互

开始/暂停：点击按钮即可开始或暂停练习
时长调整：练习过程中可调整时长，立即生效
音量控制：实时调整引导音量
中断处理：练习中断时保存当前进度

4.3 效果记录

状态记录：练习前后自动记录用户状态
感受收集：练习完成后收集用户感受
效果分析：基于历史数据分析练习效果
个性化推荐：根据效果分析提供个性化建议

5. 响应式与实现提示

5.1 屏幕适配

基准宽度 750rpx，呼吸动画圆形最大 400rpx
小屏幕时适当缩小动画尺寸，确保完整显示
横屏时重新布局，确保核心功能可用

5.2 性能优化

呼吸动画使用 CSS3 动画，确保流畅性
音频文件预加载，减少延迟
练习数据本地存储，减少网络请求

6. 数据绑定与埋点对齐

模块	数据来源	关键状态	样式影响
练习选择	breathing_exercises	练习类型、难度	卡片选中状态、描述显示
呼吸引导	breathing_patterns	当前阶段、进度	动画状态、引导文字
控制面板	session_control	播放状态、时长	按钮状态、时间显示
进度显示	progress_tracking	完成度、剩余时间	进度条、时间显示
效果记录	effect_analysis	状态变化、感受	对比显示、感受标签
练习建议	recommendation_engine	个性化建议、资源	建议内容、资源列表

7. 色彩映射表

页面元素	HEX值	Token映射	说明
页面背景	linear-gradient(135deg, #EEF5FF, #D9E8FF)	--color-info-50渐变	页面基底色，营造宁静氛围
卡片背景	rgba(255, 255, 255, 0.9)	90%透明白色	半透明卡片背景
品牌蓝主色	#3A7BD5	`--color-brand-500`	主要交互元素、选中状态
呼吸动画渐变	linear-gradient(135deg, #3A7BD5, #8C86FF)	品牌蓝到雾紫渐变	呼吸圆形渐变色
成功状态	#2AC28D	`--color-success-500`	开始按钮、积极状态
信息提示背景	#EEF5FF	`--color-info-50`	效果记录区域
建议区域背景	#EAFBF5	`--color-success-50`	练习建议区域
进度条背景	#E9EDF3	`--color-ink-100`	进度条背景
进度条进度	#3A7BD5	`--color-brand-500`	进度条进度
文字主色	#2C3640	`--color-ink-800`	主要文字
文字次要	#5A6672	`--color-ink-500`	次要文字

8. 特殊动画要求

呼吸动画：使用贝塞尔曲线实现自然的呼吸节奏
过渡效果：所有状态变化都有平滑过渡
视觉舒适：避免过于鲜艳的颜色和快速闪烁
性能优化：使用硬件加速确保动画流畅

这是模板派生页面，基于今天页高保真样式规范生成，主要差异点：

专业的呼吸引导动画：大型可视化呼吸圆形，与音频引导完全同步
渐变背景设计：使用渐变背景营造宁静放松的氛围
半透明UI元素：控制面板和卡片使用半透明背景，增强沉浸感
练习效果追踪：练习前后的状态对比和效果分析
个性化推荐系统：基于用户练习历史和情绪状态的个性化建议
多种呼吸模式：4-7-8、方形呼吸、深度呼吸等多种专业呼吸法
实时状态记录：练习过程中的实时进度和状态记录

贡献者

Cai Hongyu

文件历史

最后编辑于 5 个月前查看完整历史

呼吸-主页高保真样式规范 ​

1. 设计定位与体验目标 ​

2. 页面结构框架 ​

3. 模块规格详解 ​

3.1 顶部导航栏 ​

3.2 练习选择区 ​

3.3 呼吸引导区 ​

3.4 控制面板 ​

3.5 进度显示 ​

3.6 效果记录 ​

3.7 练习建议 ​

4. 交互与状态要求 ​

4.1 练习引导 ​

4.2 控制交互 ​

4.3 效果记录 ​

5. 响应式与实现提示 ​

5.1 屏幕适配 ​

5.2 性能优化 ​

6. 数据绑定与埋点对齐 ​

7. 色彩映射表 ​

8. 特殊动画要求 ​

贡献者 ​

文件历史 ​

呼吸-主页高保真样式规范

1. 设计定位与体验目标

2. 页面结构框架

3. 模块规格详解

3.1 顶部导航栏

3.2 练习选择区

3.3 呼吸引导区

3.4 控制面板

3.5 进度显示

3.6 效果记录

3.7 练习建议

4. 交互与状态要求

4.1 练习引导

4.2 控制交互

4.3 效果记录

5. 响应式与实现提示

5.1 屏幕适配

5.2 性能优化

6. 数据绑定与埋点对齐

7. 色彩映射表

8. 特殊动画要求

贡献者

文件历史