PageLayout.md 3.7 KB
“心灵氧舱”（MindOC）应用的页面设计构想
整体布局结构
三栏式底部导航
- 底部固定导航栏：半透明磨砂玻璃效果，圆角顶部边框，高度为56px
- 标签按钮分布：等宽三栏，图标在上、文字在下，点击时图标上移4px
- 选中状态指示：底部3px动态色条（#c06c84），伴随透明度渐变动画
- 底部固定导航栏：半透明磨砂玻璃效果，圆角顶部边框，高度为56px
内容区域分层
- 路由容器：占满底部导航栏上方空间（
height: calc(100% - 56px)） - 浮动功能按钮：右下角悬浮录音键，呼吸动画 + 按压反馈，与底部栏保持72px安全距离
- 路由容器：占满底部导航栏上方空间（
响应式适配
- 移动端：日历单列展示，聊天消息气泡占宽70%
- 平板/桌面端：日历7列网格，聊天界面最大宽度800px居中
- 移动端：日历单列展示，聊天消息气泡占宽70%
色彩方案
主色调
- 治愈粉紫：
#c06c84（情绪高亮色） - 渐变背景：
- 底部导航：
linear-gradient(45deg, #a8edea 0%, #fed6e3 100%) - 录音按钮：
linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)
- 底部导航：
- 治愈粉紫：
辅助色系
- 中性灰：
#6c757d（未选中状态） - 状态标识：
- 快乐：
#a8edea → #fed6e3渐变 - 焦虑：
#ff9a9e → #fad0c4渐变
- 快乐：
- 中性灰：
动态色彩映射
- 情绪日历格子根据分数变色：
- 快乐（>0.7）：浅蓝绿背景
- 中性（0.4-0.7）：珍珠白背景
- 低落（<0.4）：浅粉背景
- 快乐（>0.7）：浅蓝绿背景
- 情绪日历格子根据分数变色：
核心视觉元素
情绪日历页
- 网格布局：自适应列数（移动端1列 → 平板3列 → 桌面7列）
- 交互细节：
- 点击格子放大10% + 粒子飞散特效
- 悬停时显示微光涟漪动画
- 点击格子放大10% + 粒子飞散特效
- 数据可视化：
- 右上角情绪曲线缩略图
- 周报弹窗带热力图分析
- 右上角情绪曲线缩略图
- 网格布局：自适应列数（移动端1列 → 平板3列 → 桌面7列）
解压游戏舱
- 粒子引擎：Canvas实现的动态流体效果
- 捏泡泡：点击爆破 + ASMR音效联动
- 沙画：笔刷拖拽生成粒子轨迹
- 捏泡泡：点击爆破 + ASMR音效联动
- 成就系统：
- 勋章墙带神经科学彩蛋（如“多巴胺爆发者”）
- 勋章墙带神经科学彩蛋（如“多巴胺爆发者”）
- 粒子引擎：Canvas实现的动态流体效果
AI守护页
- 对话界面：
- AI头像：柔和3D模型（类似Lottie动画）
- 消息气泡：差异化左右布局 + 时间戳
- AI头像：柔和3D模型（类似Lottie动画）
- 危机干预：
- 连续负面输入触发柔光呼吸引导动画
- 紧急联系人浮出式面板
- 连续负面输入触发柔光呼吸引导动画
- 对话界面：
交互动画体系
基础反馈
- 按钮点击缩放（0.9倍）
- 页面切换淡入淡出（300ms）
- 按钮点击缩放（0.9倍）
核心动效
- 录音键呼吸：3秒周期缩放 + 透明度波动
- 情绪粒子：Canvas实现的流体力学模拟
- 成就解锁：勋章弹出 + 粒子喷射庆祝动画
- 录音键呼吸：3秒周期缩放 + 透明度波动
情境化动画
- 深夜模式自动切换星空粒子背景
- 高压力值触发动态模糊减压滤镜
- 深夜模式自动切换星空粒子背景
字体与排版
字体组合
- 主标题：
PingFang SC Medium - 正文：
HarmonyOS Sans - 数据标签：
Roboto Mono（等宽数字）
- 主标题：
层级规范
- 标题：20px + 字重600
- 正文：16px 行高1.6
- 辅助信息：12px 浅灰（
#6c757d）
- 标题：20px + 字重600
设计验证要点
- 色彩对比度：文本与背景至少4.5:1（通过WebAIM校验）
- 动效可关闭：提供减少动画选项
- 触控热区：按钮最小48×48px
- 暗黑模式：基于CSS变量自动切换
此设计通过柔和的渐变色、有节制的动效和直观的交互逻辑，构建了一个兼具专业性与亲和力的数字疗愈空间。每个视觉元素均服务于核心功能——帮助用户在5分钟内完成一次有效的情绪调节。