正念-主页高保真样式规范
字数
2418 字
阅读时间
10 分钟
参考高保真稿和页面文档，基于《色彩系统.md》与UI组件规范，聚焦正念冥想引导、音频播放和进度记录的视觉呈现。
1. 设计定位与体验目标
- 页面主任务：提供专业的正念冥想引导，通过音频播放、可视化进度和体验记录，帮助用户进行正念练习。
- 体验关键词：平静专注、声音引导、深度放松、体验记录。通过温和的色彩和清晰的声音控制营造专业的冥想环境。
- 视觉策略：整页基底使用深色调减少视觉干扰，核心播放区域使用大尺寸控件，进度记录使用简洁的数据展示，营造专注的冥想氛围。
2. 页面结构框架
┌──────────────────────────────────────────┐
│ 顶部导航栏：返回按钮 + 标题"正念冥想" │
├──────────────────────────────────────────┐
│ 练习选择区：不同冥想主题和时长选择 │
├──────────────────────────────────────────┐
│ 播放控制区：音频播放器 + 播放控制按钮 │
├──────────────────────────────────────────┐
│ 进度可视化：练习进度 + 阶段指示 + 时间显示 │
├──────────────────────────────────────────┐
│ 引导文字：当前阶段的文字引导和提示 │
├──────────────────────────────────────────┐
│ 环境设置：背景音乐 + 音量控制 + 睡眠定时 │
├──────────────────────────────────────────┐
│ 练习记录：练习历史 + 效果评价 + 感受记录 │
└──────────────────────────────────────────┘3. 模块规格详解
3.1 顶部导航栏
- 容器：高度 88rpx，背景透明，无阴影。
- 返回按钮：左侧箭头图标，白色
#FFFFFF。 - 标题：居中显示"正念冥想"，字号 32rpx，字重 700，颜色
#FFFFFF。
3.2 练习选择区
- 容器：背景半透明白色
rgba(255, 255, 255, 0.9)，圆角 32rpx，内边距 32rpx。 - 冥想主题：
- 基础正念：10分钟基础正念练习
- 身体扫描：15分钟身体扫描冥想
- 慈悲冥想：12分钟慈悲心培养
- 压力释放：8分钟压力释放练习
- 睡眠冥想：20分钟助眠冥想
- 时长选择：
- 快速选择：5分钟、10分钟、15分钟、20分钟
- 自定义：拖动滑块选择1-30分钟
- 选择样式：
- 主题卡片：垂直排列，圆角 24rpx，白底，选中状态品牌蓝边框
- 时长标签：横向排列，圆角 40rpx，选中状态品牌蓝背景
3.3 播放控制区
- 容器：全屏中央区域，宽度 560rpx，高度 560rpx。
- 音频可视化：
- 声波圆环：直径 480rpx，使用音频频谱数据驱动
- 颜色渐变：
linear-gradient(135deg, #8C86FF, #3A7BD5) - 动画效果：随音频节奏轻微脉动
- 播放控制：
- 播放/暂停按钮：圆形，直径 128rpx，背景
--color-brand-500 - 控制图标：白色三角形或双竖线，大小 24x48rpx
- 进度圆环：围绕播放按钮的圆环进度条
- 播放/暂停按钮：圆形，直径 128rpx，背景
3.4 进度可视化
- 容器：位于播放控制下方，高度 160rpx。
- 练习进度：
- 总进度：横向进度条，显示整体练习进度
- 阶段进度：显示当前冥想阶段进度
- 时间显示：
- 已用时间：MM:SS 格式，左侧显示
- 剩余时间：MM:SS 格式，右侧显示
- 总时长：显示在进度条上方
- 阶段指示：
- 阶段标签：开始、引导、深入、结束、完成
- 当前阶段：高亮显示当前所在阶段
3.5 引导文字
- 容器：背景半透明白色
rgba(255, 255, 255, 0.8)，圆角 24rpx，内边距 32rpx。 - 引导内容：
- 当前阶段：显示当前冥想阶段的名称和描述
- 引导提示：具体的正念指导文字
- 更新频率：根据音频进度自动更新
- 文字样式：
- 标题：字号 32rpx，字重 600，颜色
--color-ink-800 - 内容：字号 28rpx，行高 1.6，颜色
--color-ink-700
- 标题：字号 32rpx，字重 600，颜色
- 显示控制：
- 自动显示：练习开始后自动显示
- 手动隐藏：用户可手动隐藏引导文字
3.6 环境设置
- 容器：底部固定区域，高度 200rpx，背景半透明白色
rgba(255, 255, 255, 0.95)，圆角顶部 48rpx。 - 背景音乐：
- 音乐选择：自然声音、轻音乐、白噪音、无
- 音量控制：独立于引导音频的音量控制
- 音频控制：
- 引导音量：控制引导语音的音量
- 音效开关：开启/关闭提示音效
- 睡眠定时：
- 定时选择：练习结束后关闭计时器
- 选项：不关闭、15分钟后、30分钟后、60分钟后
3.7 练习记录
- 容器：背景
--color-info-50，圆角 24rpx，内边距 32rpx。 - 练习历史：
- 历史记录：显示最近7天的练习记录
- 统计信息：总练习时长、连续练习天数
- 效果评价：
- 情绪状态：练习前后的情绪对比
- 效果评分：1-5星的练习效果评分
- 感受记录：
- 感受输入：文本输入框记录练习感受
- 感受标签：平静、专注、放松、困倦等选择
4. 交互与状态要求
4.1 音频播放
- 播放控制：支持播放、暂停、重新开始
- 进度控制：可拖动进度条调整播放位置
- 音量控制：独立控制引导音频和背景音乐音量
- 播放完成：自动播放完成音效，显示完成提示
4.2 练习体验
- 沉浸模式：练习开始后自动进入沉浸模式
- 屏幕常亮：练习期间保持屏幕常亮
- 中断处理：来电等中断时自动暂停，恢复后可选择继续
- 完成反馈：练习完成后收集效果反馈和感受
4.3 数据记录
- 自动记录：练习开始时间、时长、完成状态自动记录
- 效果分析：基于历史数据分析练习效果趋势
- 个性化推荐：根据练习记录推荐合适的冥想内容
5. 响应式与实现提示
5.1 屏幕适配
- 基准宽度 750rpx，音频可视化圆形最大 480rpx
- 小屏幕时适当缩小控件尺寸，确保可点击
- 横屏时重新布局，确保核心功能可用
5.2 性能优化
- 音频文件预加载和缓存
- 音频可视化使用 Canvas 或 Web Audio API
- 练习数据本地存储，减少网络请求
6. 数据绑定与埋点对齐
| 模块 | 数据来源 | 关键状态 | 样式影响 |
|---|---|---|---|
| 练习选择 | mindfulness_exercises | 主题类型、时长 | 卡片选中状态、时长显示 |
| 播放控制 | audio_playback | 播放状态、进度 | 播放按钮、进度圆环 |
| 进度显示 | progress_tracking | 当前阶段、完成度 | 阶段指示、进度条 |
| 引导文字 | guidance_content | 当前阶段、引导内容 | 文字内容、显示状态 |
| 环境设置 | environment_config | 背景音乐、音量 | 设置状态、音量显示 |
| 练习记录 | practice_history | 历史记录、效果评分 | 历史列表、评分显示 |
7. 色彩映射表
| 页面元素 | HEX值 | Token映射 | 说明 |
|---|---|---|---|
| 页面背景 | #161B22 | #161B22 | 深色背景，减少视觉干扰 |
| 卡片背景 | rgba(255, 255, 255, 0.9) | 90%透明白色 | 半透明卡片背景 |
| 品牌蓝主色 | #3A7BD5 | --color-brand-500 | 主要交互元素、选中状态 |
| 音频可视化渐变 | linear-gradient(135deg, #8C86FF, #3A7BD5) | 雾紫到品牌蓝渐变 | 音频圆环渐变色 |
| 信息提示背景 | #EEF5FF | --color-info-50 | 引导文字区域 |
| 进度条背景 | #E9EDF3 | --color-ink-100 | 进度条背景 |
| 进度条进度 | #3A7BD5 | --color-brand-500 | 进度条进度 |
| 文字主色 | #D1D7E0 | #D1D7E0 | 深色背景上的主要文字 |
| 文字次要 | #9AA6B2 | #--color-ink-400` | 深色背景上的次要文字 |
| 成功状态 | #2AC28D | --color-success-500 | 完成状态、积极反馈 |
8. 特殊要求
- 深色主题：整体使用深色背景，减少视觉干扰
- 音频优化：确保音频播放的流畅性和质量
- 电池优化：长时间练习时的电池使用优化
- 离线支持：关键冥想内容支持离线播放
这是模板派生页面，基于今天页高保真样式规范生成，主要差异点：
- 深色主题设计：使用深色背景营造专注的冥想环境
- 音频可视化：基于音频频谱的动态可视化效果
- 专业的冥想引导：多阶段、多主题的正念冥想内容
- 环境音效控制：背景音乐和环境音效的独立控制
- 沉浸式体验：练习开始后的全屏沉浸模式
- 睡眠定时功能：支持练习后自动关闭的定时器
- 详细的练习记录：包含效果评分和感受记录的完整练习历史
贡献者
Cai Hongyu