# “心灵氧舱”（MindOC）应用的页面设计构想
---

### **整体布局结构**
1. **三栏式底部导航**  
   - **底部固定导航栏**：半透明磨砂玻璃效果，圆角顶部边框，高度为56px  
   - **标签按钮分布**：等宽三栏，图标在上、文字在下，点击时图标上移4px  
   - **选中状态指示**：底部3px动态色条（#c06c84），伴随透明度渐变动画  

2. **内容区域分层**  
   - **路由容器**：占满底部导航栏上方空间（`height: calc(100% - 56px)`）  
   - **浮动功能按钮**：右下角悬浮录音键，呼吸动画 + 按压反馈，与底部栏保持72px安全距离  

3. **响应式适配**  
   - **移动端**：日历单列展示，聊天消息气泡占宽70%  
   - **平板/桌面端**：日历7列网格，聊天界面最大宽度800px居中  

---

### **色彩方案**
1. **主色调**  
   - **治愈粉紫**：`#c06c84`（情绪高亮色）  
   - **渐变背景**：  
     - 底部导航：`linear-gradient(45deg, #a8edea 0%, #fed6e3 100%)`  
     - 录音按钮：`linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)`  

2. **辅助色系**  
   - **中性灰**：`#6c757d`（未选中状态）  
   - **状态标识**：  
     - 快乐：`#a8edea → #fed6e3` 渐变  
     - 焦虑：`#ff9a9e → #fad0c4` 渐变  

3. **动态色彩映射**  
   - 情绪日历格子根据分数变色：  
     - 快乐（>0.7）：浅蓝绿背景  
     - 中性（0.4-0.7）：珍珠白背景  
     - 低落（<0.4）：浅粉背景  

---

### **核心视觉元素**
1. **情绪日历页**  
   - **网格布局**：自适应列数（移动端1列 → 平板3列 → 桌面7列）  
   - **交互细节**：  
     - 点击格子放大10% + 粒子飞散特效  
     - 悬停时显示微光涟漪动画  
   - **数据可视化**：  
     - 右上角情绪曲线缩略图  
     - 周报弹窗带热力图分析  

2. **解压游戏舱**  
   - **粒子引擎**：Canvas实现的动态流体效果  
     - 捏泡泡：点击爆破 + ASMR音效联动  
     - 沙画：笔刷拖拽生成粒子轨迹  
   - **成就系统**：  
     - 勋章墙带神经科学彩蛋（如“多巴胺爆发者”）  

3. **AI守护页**  
   - **对话界面**：  
     - AI头像：柔和3D模型（类似Lottie动画）  
     - 消息气泡：差异化左右布局 + 时间戳  
   - **危机干预**：  
     - 连续负面输入触发柔光呼吸引导动画  
     - 紧急联系人浮出式面板  

---

### **交互动画体系**
1. **基础反馈**  
   - 按钮点击缩放（0.9倍）  
   - 页面切换淡入淡出（300ms）  

2. **核心动效**  
   - **录音键呼吸**：3秒周期缩放 + 透明度波动  
   - **情绪粒子**：Canvas实现的流体力学模拟  
   - **成就解锁**：勋章弹出 + 粒子喷射庆祝动画  

3. **情境化动画**  
   - 深夜模式自动切换星空粒子背景  
   - 高压力值触发动态模糊减压滤镜  

---

### **字体与排版**
1. **字体组合**  
   - 主标题：`PingFang SC Medium`  
   - 正文：`HarmonyOS Sans`  
   - 数据标签：`Roboto Mono`（等宽数字）  

2. **层级规范**  
   - 标题：20px + 字重600  
   - 正文：16px 行高1.6  
   - 辅助信息：12px 浅灰（`#6c757d`）  

---

### **设计验证要点**
1. **色彩对比度**：文本与背景至少4.5:1（通过WebAIM校验）  
2. **动效可关闭**：提供减少动画选项  
3. **触控热区**：按钮最小48×48px  
4. **暗黑模式**：基于CSS变量自动切换  

---

此设计通过**柔和的渐变色**、**有节制的动效**和**直观的交互逻辑**，构建了一个兼具专业性与亲和力的数字疗愈空间。每个视觉元素均服务于核心功能——帮助用户在5分钟内完成一次有效的情绪调节。