情绪打卡样式规范

字数

3333 字

阅读时间

16 分钟

参考《功能-情绪打卡.md》《集合-情绪打卡.checkins.md》《页面-情绪打卡.md》整理的视觉与实现规范，用于情绪打卡功能的统一设计语言。

1. 设计定位

角色：情绪数据采集的核心入口，将抽象的情绪感受转化为结构化的数据记录
核心体验：通过简洁直观的交互界面，降低用户的记录门槛，提高数据采集的准确性
视觉基调：遵循"低扰动"原则，使用温和的色彩和友好的表情，避免给用户造成额外压力

2. 色彩与情感设计

2.1 情绪色彩系统

情绪轮色系：采用低饱和度色彩，避免情绪标签化
- 喜悦 #F5A97F（温暖橙）｜平静 #5AA6A6（宁静青）｜专注 #7C86FF（专注紫）
- 焦虑 #C9A86A（忧虑黄）｜低落 #8BA3C7（忧伤蓝）｜愤怒 #E57A74（激昂红）
情绪分值色阶：0-100分值对应色带渐变
- 负向区间（0-39）：#E57A74 → #C9A86A 红黄渐变
- 中性区间（40-59）：#92A1B0 中性灰
- 正向区间（60-100）：#5AA6A6 → #F5A97F 青橙渐变
风险等级色彩：
- L1（一般）：#2AC28D Success 绿
- L2（关注）：#F2B23D Warning 黄
- L3（需要干预）：#FF6B6B Danger 红
- L4（紧急危机）：#E63946 Critical 深红

2.2 交互色彩规范

主要操作：品牌蓝 #3A7BD5（保存按钮、重要交互）
次要操作：浅蓝 #BFD6FF（编辑、查看详情）
辅助操作：中性灰 #7B8893（取消、忽略）
禁用状态：#E9EDF3 浅灰背景 + #C5CEDA 禁用文字

3. 页面布局结构

3.1 今天页情绪状态卡布局

┌──────────────────────────────────────────┐
│ 情绪状态卡（今天页顶部）                    │
├──────────────────────────────────────────┤
│ [头像] 当前状态 · 最后更新时间             │
│ 🟢 今日情绪良好 · 风险等级 L1              │
│ 情绪指数：72分                            │
│ [再次打卡按钮]                            │
└──────────────────────────────────────────┘

状态卡规范：

尺寸：654×120rpx，圆角 24rpx
背景：白色 #FFFFFF + 卡片阴影
内边距：上下 24rpx，左右 32rpx
头像尺寸：48×48rpx，圆角 24rpx

3.2 情绪打卡面板布局

┌──────────────────────────────────────────┐
│ 情绪打卡                                │
├──────────────────────────────────────────┤
│ 情绪分值：[0─────●─────100] 72分         │
│ 情绪标签：[😊开心] [😟焦虑] [😴疲惫] [+自定义] │
│ 场景标签：[📚学业] [👥社交] [🧘自我] [🏠其他] │
│ 能量指数：[○○○○○] 3/5                    │
│ 备注：[输入框 placeholder:记录此刻感受...]    │
│ 附件：[📷添加图片] [🎤添加语音]            │
│                                          │
│ [取消]                    [保存打卡]      │
└──────────────────────────────────────────┘

打卡面板规范：

面板尺寸：屏幕宽度 100%，最大高度 800rpx
背景：白色 #FFFFFF，底部圆角 32rpx
内容区域：从顶部 y=0 开始，各模块间距 32rpx
底部操作区：固定高度 120rpx，包含取消和保存按钮

3.3 心情曲线抽屉布局

┌──────────────────────────────────────────┐
│ 心情曲线                                │
├──────────────────────────────────────────┤
│ [返回] 今日情绪变化                      │
│                                          │
│ ┌────────────────────────────────────┐   │
│ │        情绪趋势折线图              │   │
│ │    100│    ●                     │   │
│ │     80│  ●   ●                   │   │
│ │     60│●         ●               │   │
│ │     40│            ●            │   │
│ │     20│               ●         │   │
│ │      0│                  ●      │   │
│ └────────────────────────────────────┘   │
│                                          │
│ 时间轴：00:00 06:00 12:00 18:00 24:00   │
│                                          │
│ 打卡记录：                              │
│ ├─ 09:00 72分 平静 自习室               │
│ ├─ 13:10 45分 焦虑 宿舍                 │
│ └─ 20:05 80分 喜悦 完成任务             │
└──────────────────────────────────────────┘

曲线抽屉规范：

抽屉高度：屏幕高度 80%，从底部弹出
图表区域：590×300rpx，边距 32rpx
时间轴：高度 40rpx，5个时间点均匀分布
记录列表：每个记录项高度 80rpx，包含时间、分值、情绪标签

4. 核心组件规范

4.1 情绪状态卡 `<MoodStatusCard>`

xml

<!-- 情绪状态卡 -->
<rect x="24" y="16" width="327" height="120" rx="16" fill="#FFFFFF" filter="url(#cardShadow)" />
<!-- 用户信息区 -->
<circle cx="56" cy="56" r="24" fill="#F0F4F8"/>
<text x="56" y="60" font-size="12" fill="#3A7BD5" text-anchor="middle">头像</text>
<text x="88" y="52" font-size="14" fill="#2C3640" font-weight="600">当前状态</text>
<text x="88" y="68" font-size="10" fill="#7B8893">最后更新：10分钟前</text>

<!-- 情绪状态显示 -->
<circle cx="280" cy="48" r="6" fill="#2AC28D"/>
<text x="280" y="52" font-size="10" fill="#2AC28D" text-anchor="middle">L1</text>
<text x="296" y="48" font-size="12" fill="#2C3640">今日情绪良好</text>
<text x="296" y="64" font-size="10" fill="#5A6672">情绪指数：72分</text>

<!-- 操作按钮 -->
<rect x="248" y="80" width="80" height="28" rx="14" fill="#3A7BD5"/>
<text x="288" y="96" font-size="12" fill="#FFFFFF" text-anchor="middle">再次打卡</text>

规格说明：

卡片尺寸：327×240rpx，圆角 32rpx
用户信息区：头像 48×48rpx，文字左对齐
状态指示：风险徽标 12×12rpx，状态文字 12-14rpx
操作按钮：80×56rpx，圆角 28rpx，品牌蓝填充

4.2 情绪分值滑块 `<MoodSlider>`

xml

<!-- 情绪分值滑块 -->
<text x="24" y="32" font-size="14" fill="#2C3640" font-weight="600">情绪分值</text>
<text x="327" y="32" font-size="14" fill="#3A7BD5" text-anchor="end">72分</text>

<!-- 滑块轨道 -->
<rect x="24" y="48" width="303" height="8" rx="4" fill="url(#moodGradient)"/>
<rect x="24" y="48" width="218" height="8" rx="4" fill="#3A7BD5" opacity="0.3"/>

<!-- 滑块按钮 -->
<circle cx="242" cy="52" r="12" fill="#FFFFFF" stroke="#3A7BD5" stroke-width="3"/>
<circle cx="242" cy="52" r="6" fill="#3A7BD5"/>

<!-- 分值标签 -->
<text x="24" y="72" font-size="10" fill="#7B8893">0</text>
<text x="175.5" y="72" font-size="10" fill="#7B8893" text-anchor="middle">50</text>
<text x="327" y="72" font-size="10" fill="#7B8893" text-anchor="end">100</text>

<!-- 情绪区间标识 -->
<text x="24" y="88" font-size="9" fill="#E57A74">负向</text>
<text x="175.5" y="88" font-size="9" fill="#92A1B0" text-anchor="middle">中性</text>
<text x="327" y="88" font-size="9" fill="#2AC28D" text-anchor="end">正向</text>

规格说明：

滑块总宽度：606rpx，高度 16rpx
滑块按钮：24×24rpx，白色填充 + 品牌蓝描边
渐变轨道：使用 url(#moodGradient) 从红到绿渐变
当前进度：根据分值显示对应宽度，透明度 30%
标签文字：分值 14rpx，区间标识 18rpx

4.3 情绪标签选择器 `<MoodTagSelector>`

xml

<!-- 情绪标签选择器 -->
<text x="24" y="32" font-size="14" fill="#2C3640" font-weight="600">情绪标签</text>

<!-- 预设标签 -->
<g transform="translate(24, 48)">
  <!-- 喜悦 - 选中状态 -->
  <rect x="0" y="0" width="64" height="32" rx="16" fill="#FFF6E8"/>
  <text x="8" y="20" font-size="12">😊</text>
  <text x="24" y="20" font-size="11" fill="#F2B23D">开心</text>

  <!-- 焦虑 - 未选中状态 -->
  <rect x="72" y="0" width="64" height="32" rx="16" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="80" y="20" font-size="12">😟</text>
  <text x="96" y="20" font-size="11" fill="#7B8893">焦虑</text>

  <!-- 疲惫 - 未选中状态 -->
  <rect x="144" y="0" width="64" height="32" rx="16" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="152" y="20" font-size="12">😴</text>
  <text x="168" y="20" font-size="11" fill="#7B8893">疲惫</text>

  <!-- 自定义添加 -->
  <rect x="216" y="0" width="64" height="32" rx="16" fill="#F7F9FC" stroke="#E9EDF3" stroke-dasharray="4,2"/>
  <text x="232" y="20" font-size="12">+</text>
  <text x="244" y="20" font-size="11" fill="#7B8893">自定义</text>
</g>

<!-- 已选标签显示区 -->
<g transform="translate(24, 96)">
  <text x="0" y="12" font-size="11" fill="#5A6672">已选：</text>
  <rect x="40" y="0" width="48" height="24" rx="12" fill="#EEF5FF"/>
  <text x="64" y="16" font-size="10" fill="#3A7BD5" text-anchor="middle">开心</text>
  <rect x="96" y="0" width="48" height="24" rx="12" fill="#EEF5FF"/>
  <text x="120" y="16" font-size="10" fill="#3A7BD5" text-anchor="middle">平静</text>
</g>

规格说明：

标签尺寸：64×64rpx，圆角 32rpx
选中状态：浅黄背景 #FFF6E8 + Warning色文字
未选中状态：浅灰背景 #F7F9FC + 灰色描边 #E9EDF3
自定义按钮：虚线边框 stroke-dasharray="4,2"
已选标签：48×48rpx，蓝色背景 #EEF5FF
表情符号：24rpx，文字：22rpx

4.4 能量指数选择器 `<EnergyPicker>`

xml

<!-- 能量指数选择器 -->
<text x="24" y="32" font-size="14" fill="#2C3640" font-weight="600">能量指数</text>

<!-- 能量等级显示 -->
<g transform="translate(24, 56)">
  <!-- 等级1 - 未选中 -->
  <circle cx="20" cy="12" r="8" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="20" y="16" font-size="10" fill="#C5CEDA" text-anchor="middle">1</text>

  <!-- 等级2 - 未选中 -->
  <circle cx="60" cy="12" r="8" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="60" y="16" font-size="10" fill="#C5CEDA" text-anchor="middle">2</text>

  <!-- 等级3 - 选中 -->
  <circle cx="100" cy="12" r="8" fill="#FFF6E8" stroke="#F2B23D"/>
  <text x="100" y="16" font-size="10" fill="#F2B23D" text-anchor="middle">3</text>

  <!-- 等级4 - 未选中 -->
  <circle cx="140" cy="12" r="8" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="140" y="16" font-size="10" fill="#C5CEDA" text-anchor="middle">4</text>

  <!-- 等级5 - 未选中 -->
  <circle cx="180" cy="12" r="8" fill="#F7F9FC" stroke="#E9EDF3"/>
  <text x="180" y="16" font-size="10" fill="#C5CEDA" text-anchor="middle">5</text>

  <!-- 连接线 -->
  <line x1="28" y1="12" x2="172" y2="12" stroke="#E9EDF3" stroke-width="2"/>

  <!-- 能量描述 -->
  <text x="220" y="16" font-size="12" fill="#5A6672">中等能量</text>
</g>

<!-- 能量等级说明 -->
<g transform="translate(24, 88)">
  <text x="0" y="12" font-size="10" fill="#7B8893">1=疲惫不堪</text>
  <text x="100" y="12" font-size="10" fill="#7B8893">3=精力适中</text>
  <text x="200" y="12" font-size="10" fill="#7B8893">5=精力充沛</text>
</g>

规格说明：

圆点尺寸：16×16rpx，间距 40rpx
选中状态：浅黄背景 #FFF6E8 + Warning色描边和文字
未选中状态：浅灰背景 #F7F9FC + 灰色描边 #E9EDF3
连接线：连接所有圆点，灰色 #E9EDF3
说明文字：20rpx，灰色 #7B8893

4.5 风险提示徽标 `<RiskLevelBadge>`

xml

<!-- 风险等级徽标 -->
<g transform="translate(24, 24)">
  <!-- L1 - 一般 -->
  <rect x="0" y="0" width="40" height="20" rx="10" fill="#2AC28D"/>
  <text x="20" y="14" font-size="10" fill="#FFFFFF" text-anchor="middle">L1</text>
  <text x="48" y="14" font-size="11" fill="#2AC28D">情绪良好</text>

  <!-- L2 - 关注 -->
  <rect x="120" y="0" width="40" height="20" rx="10" fill="#F2B23D"/>
  <text x="140" y="14" font-size="10" fill="#FFFFFF" text-anchor="middle">L2</text>
  <text x="168" y="14" font-size="11" fill="#F2B23D">需要关注</text>

  <!-- L3 - 需要干预 -->
  <rect x="240" y="0" width="40" height="20" rx="10" fill="#FF6B6B"/>
  <text x="260" y="14" font-size="10" fill="#FFFFFF" text-anchor="middle">L3</text>
  <text x="288" y="14" font-size="11" fill="#FF6B6B">建议干预</text>

  <!-- L4 - 紧急危机 -->
  <rect x="0" y="32" width="40" height="20" rx="10" fill="#E63946"/>
  <text x="20" y="46" font-size="10" fill="#FFFFFF" text-anchor="middle">L4</text>
  <text x="48" y="46" font-size="11" fill="#E63946">紧急危机</text>
</g>

规格说明：

徽标尺寸：40×40rpx，圆角 20rpx
颜色方案：L1-Success绿、L2-Warning黄、L3-Danger红、L4-Critical深红
文字：徽标内白色 20rpx，描述文字 22rpx
动画效果：等级变化时有脉冲动画提醒

5. 交互设计规范

5.1 打卡流程交互

触发阶段：
- 点击状态卡或"再次打卡"按钮
- 面板从底部弹出，带有弹性动画
- 背景半透明遮罩，点击遮罩可关闭
输入阶段：
- 情绪分值：拖拽滑块实时显示分值和颜色变化
- 标签选择：点击切换选中状态，支持多选
- 能量指数：点击圆点选择对应等级
- 备注输入：实时字数统计，最大280字
提交阶段：
- 表单验证：确保必填项完整
- AI分析：显示"正在分析..."状态
- 结果展示：显示风险等级和相关建议
- 后续操作：提供"补充随笔"、"查看建议"等选项

5.2 动画与过渡效果

面板弹出：300ms cubic-bezier(0.4, 0, 0.2, 1) 弹性动画
滑块交互：拖拽时实时反馈，释放后弹性回弹
标签选择：150ms 缩放动画，选中时放大 1.1 倍
风险提示：等级变化时 600ms 脉冲动画
页面跳转：200ms 淡入淡出过渡

5.3 异常状态处理

网络异常：显示"网络连接失败，请重试"提示
数据验证失败：具体字段标红，显示错误提示
AI分析超时：显示"分析中，请稍候..."，超时后提示稍后查看
存储失败：显示"保存失败，数据已缓存"提示

6. 响应式适配

6.1 屏幕适配

小屏设备（<320px）：缩小间距，简化文字描述
标准设备（320px-414px）：按照标准规范显示
大屏设备（>414px）：增加卡片间距，优化布局密度

6.2 横屏适配

状态卡：宽度自适应，高度保持不变
打卡面板：调整为居中显示，最大宽度限制
曲线图表：扩展宽度，增加数据点密度

6.3 暗色模式

背景色：深灰背景 #1C1C1E 替代白色
卡片背景：#2C2C2E 替代白色
文字颜色：调整为 #F2F2F7 和 #AEAEB2
边框颜色：#38383A 替代浅灰色
风险色彩：保持原有颜色，降低亮度 10%

7. 可访问性要求

7.1 色彩对比度

主要文字对比度 ≥ 4.5:1
次要文字对比度 ≥ 3:1
交互元素对比度 ≥ 3:1

7.2 交互反馈

提供非颜色的状态变化（边框、阴影、文字）
确保可点击区域 ≥ 44×44rpx
支持键盘导航和屏幕阅读器

7.3 动画控制

提供减少动画选项
确保动画持续时间控制在 300ms 以内
避免快速闪烁和强烈视觉刺激

该规范确保情绪打卡功能在不同场景下保持一致的用户体验，为用户提供温和、友好的情绪记录体验。

贡献者

Cai Hongyu

文件历史

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

情绪打卡样式规范 ​

1. 设计定位 ​

2. 色彩与情感设计 ​

2.1 情绪色彩系统 ​

2.2 交互色彩规范 ​

3. 页面布局结构 ​

3.1 今天页情绪状态卡布局 ​

3.2 情绪打卡面板布局 ​

3.3 心情曲线抽屉布局 ​

4. 核心组件规范 ​

4.1 情绪状态卡 <MoodStatusCard> ​

4.2 情绪分值滑块 <MoodSlider> ​

4.3 情绪标签选择器 <MoodTagSelector> ​

4.4 能量指数选择器 <EnergyPicker> ​

4.5 风险提示徽标 <RiskLevelBadge> ​

5. 交互设计规范 ​

5.1 打卡流程交互 ​

5.2 动画与过渡效果 ​

5.3 异常状态处理 ​

6. 响应式适配 ​

6.1 屏幕适配 ​

6.2 横屏适配 ​

6.3 暗色模式 ​

7. 可访问性要求 ​

7.1 色彩对比度 ​

7.2 交互反馈 ​

7.3 动画控制 ​

贡献者 ​

文件历史 ​

情绪打卡样式规范

1. 设计定位

2. 色彩与情感设计

2.1 情绪色彩系统

2.2 交互色彩规范

3. 页面布局结构

3.1 今天页情绪状态卡布局

3.2 情绪打卡面板布局

3.3 心情曲线抽屉布局

4. 核心组件规范

4.1 情绪状态卡 `<MoodStatusCard>`

4.2 情绪分值滑块 `<MoodSlider>`

4.3 情绪标签选择器 `<MoodTagSelector>`

4.4 能量指数选择器 `<EnergyPicker>`

4.5 风险提示徽标 `<RiskLevelBadge>`

5. 交互设计规范

5.1 打卡流程交互

5.2 动画与过渡效果

5.3 异常状态处理

6. 响应式适配

6.1 屏幕适配

6.2 横屏适配

6.3 暗色模式

7. 可访问性要求

7.1 色彩对比度

7.2 交互反馈

7.3 动画控制

贡献者

文件历史