资源推送系统样式规范 (重构版)

字数

2441 字

阅读时间

11 分钟

基于《功能扩展方案》《资源推送系统》《tab页设计蓝图》《色彩系统》的重构设计，聚焦统一色彩体系、差异化推荐卡片、语义化反馈和风险预警整合，实现视觉统一与情感关怀的平衡设计。

1. 设计定位与重构原则

1.1 角色与体验目标

角色：智能化资源推荐平台，提供情绪相关资源、学习资料、放松内容、专业服务
体验目标：智能精准、个性化强、时效性高、用户控制，让用户获得"被理解"和"被关怀"的感受
视觉基调：统一的低唤醒色彩体系，通过推荐模块的差异化设计传递温暖关怀

1.2 重构核心原则

色彩统一性：全局采用中性色 Ink-0 (#F7F9FC) 作为页面背景，品牌蓝 #3A7BD5 作为主交互色
情感差异化：AI推荐模块采用暖色渐变 (#FEF3C7 → #FDE68A) 作为视觉破格，营造关怀氛围
风险语义化：严格遵循风险等级色彩规范，确保安全预警的可识别性
语义化反馈：使用语义化色彩系统（成功、警告、危险）提供直观的交互反馈

2. 色彩系统重构

2.1 全局色彩规范

色彩类型	颜色值	用途说明	映射关系
页面背景	`#F7F9FC`	全页面基础背景色	`Ink-0`
顶栏/底栏	`#FFFFFF`	顶部导航和底部TabBar背景	纯白
主交互色	`#3A7BD5`	主要按钮、选中状态、链接	`Calm Blue`
辅助色	`#8C86FF`	情绪强度条渐变、装饰元素	`Mist Purple`
卡片描边	`#E9EDF3`	标准卡片描边色	浅灰蓝

2.2 推荐模块专用色彩

元素	颜色值	用途说明	设计意图
推荐背景渐变	`linear-gradient(135deg,#FEF3C7,#FDE68A)`	AI推荐卡片背景	温暖关怀，视觉焦点
推荐文字	`#92400E`	推荐卡片中的主要文字	确保暖色背景上的可读性
推荐标签背景	`#DBEAFE` / `#FEF3C7`	AI推荐、情绪匹配标签	轻量化标识，不破坏整体

2.3 资源类型色彩系统

资源类型	主色	背景色	用途说明
视频类	`#EF4444`	`#FEE2E2`	视频资源标识和背景
音频类	`#8B5CF6`	`#EDE9FE`	音频资源标识和背景
文章类	`#3B82F6`	`#DBEAFE`	文章资源标识和背景
工具类	`#10B981`	`#D1FAE5`	工具资源标识和背景
活动类	`#F59E0B`	`#FEF3C7`	活动资源标识和背景

2.4 风险预警色彩规范

风险等级	颜色值	使用场景	强制程度
低风险(L1)	`#F59E0B`	温和提醒条	可关闭
中风险(R2/R3)	`#F97316`	橙色提示条	需确认
高风险(R4)	`#DC2626`	红色强制提示条	不可忽略

2.5 语义化反馈色彩

反馈类型	颜色值	使用场景
成功反馈	`#22C55E`	有帮助、已完成等积极反馈
警告反馈	`#F59E0B`	需要注意的提示信息
错误反馈	`#EF4444`	不相关、失败等消极反馈

3. 模块重构设计

3.1 今日状态卡 (`Current Emotion Status`)

重构目的：将此模块作为用户情绪状态的冷静反馈，而非推荐的视觉延伸

scss

.current-emotion-card {
  // 背景与边框：严格遵循品牌色系
  background: #EEF5FF;  // brand-50
  border: 2rpx solid #D9E8FF;  // brand-100
  border-radius: 32rpx;

  // 情绪强度条：品牌蓝到雾紫的渐变
  .mood-intensity-bar {
    background: linear-gradient(90deg, #3A7BD5 0%, #8C86FF 100%);
    border-radius: 6rpx;
    height: 12rpx;
  }

  // 文字色彩：保持冷色调
  .title { color: #1E40AF; font-size: 28rpx; font-weight: 600; }
  .emotion-text { color: #5A6672; font-size: 24rpx; }
}

3.2 个性化推荐卡片 (`Personalized Recommendations`)

重构目的：作为页面的视觉焦点，在统一规范下营造"被理解"和"被关怀"的温暖体验

scss

.recommendation-card {
  // 背景设计：保持暖色渐变作为局部破格
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-radius: 32rpx;
  position: relative;

  // 文字色彩：深琥珀色确保可读性
  .title { color: #92400E; font-size: 28rpx; font-weight: 600; }
  .description { color: #92400E; font-size: 22rpx; }

  // 推荐标签：轻量化设计
  .ai-tag {
    background: #DBEAFE;
    color: #1E40AF;
    border-radius: 18rpx;
    padding: 4rpx 16rpx;
    font-size: 16rpx;
    font-weight: 600;
  }

  .emotion-tag {
    background: #FEF3C7;
    color: #92400E;
    border-radius: 18rpx;
    padding: 4rpx 16rpx;
    font-size: 16rpx;
    font-weight: 600;
  }

  // 推荐资源卡片：白底+暖色描边
  .resource-item {
    background: #FFFFFF;
    border: 2rpx solid #FDE68A;
    border-radius: 24rpx;

    // 匹配度标识：成功绿色
    .match-score {
      background: #22C55E;
      color: #FFFFFF;
      border-radius: 16rpx;
      padding: 4rpx 12rpx;
      font-size: 16rpx;
      font-weight: 600;
    }
  }
}

3.3 资源分类与列表 (`Resource Categories & List`)

重构目的：实现清晰、有序、易于操作的资源浏览体验

scss

// 分类导航：品牌蓝主色
.category-nav {
  .category-item {
    &.active {
      background: #3A7BD5;  // 品牌蓝主色
      color: #FFFFFF;
      border-radius: 32rpx;
    }

    &.inactive {
      background: #FFFFFF;
      border: 2rpx solid #E9EDF3;
      color: #5A6672;
      border-radius: 32rpx;
    }
  }
}

// 资源列表：标准白底卡片
.resource-list {
  .resource-card {
    background: #FFFFFF;
    border: 2rpx solid #E9EDF3;
    border-radius: 24rpx;

    // 主要操作按钮：品牌蓝
    .cta-button {
      background: #3A7BD5;
      color: #FFFFFF;
      border-radius: 24rpx;
      font-weight: 600;
    }

    // 资源类型图标：语义化背景色
    .type-indicator {
      &.video { background: #FEE2E2; }
      &.audio { background: #EDE9FE; }
      &.article { background: #DBEAFE; }
      &.tool { background: #D1FAE5; }
      &.activity { background: #FEF3C7; }
    }
  }
}

3.4 风险预警推送 (`Risk Alert Push`)

重构目的：将资源推送与风险预警流程无缝结合

scss

// 中风险提示 (R2/R3)
.risk-warning-medium {
  background: #F97316;  // 橘红色
  color: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx 32rpx;

  .action-buttons {
    .primary-btn {
      background: #FFFFFF;
      color: #F97316;
      border-radius: 12rpx;
    }
  }
}

// 高风险强制提示 (R4)
.risk-warning-high {
  background: #DC2626;  // 红色
  color: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;

  .sos-button {
    background: #FFFFFF;
    color: #DC2626;
    border-radius: 16rpx;
    font-weight: 700;
    animation: pulse 2s infinite;
  }
}

3.5 反馈系统 (`Feedback System`)

重构目的：提供清晰、符合用户直觉的交互反馈

scss

.feedback-system {
  .feedback-btn {
    &.positive {
      background: #F0FDF4;  // success-50
      color: #22C55E;        // success-500
      border: 2rpx solid #22C55E;

      &.selected {
        background: #22C55E;
        color: #FFFFFF;
      }
    }

    &.negative {
      background: #FEF2F2;  // red-50
      color: #EF4444;        // red-500
      border: 2rpx solid #EF4444;

      &.selected {
        background: #EF4444;
        color: #FFFFFF;
      }
    }
  }
}

4. 动画与交互效果

4.1 标准动画时长

快速反馈：0.1s (按钮点击)
过渡动画：0.3s (页面切换、状态变化)
入场动画：0.4s (卡片渐显、上滑)
呼吸效果：1.5s (紧急提示)

4.2 交互动画

scss

// 按钮点击反馈
.button-press {
  transform: scale(0.95);
  transition: transform 0.1s ease-in-out;
}

// 卡片悬停效果
.card-hover {
  transform: translateY(-8rpx);
  box-shadow: 0 24rpx 64rpx rgba(15, 20, 26, 0.12);
  transition: all 0.3s ease;
}

// 紧急提示呼吸动画
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.pulse-animation {
  animation: pulse 1.5s ease-in-out infinite;
}

5. 响应式设计规范

5.1 断点设置

手机竖屏：750rpx (标准设计)
手机横屏：1334rpx
平板：1536rpx
桌面：2048rpx

5.2 适配规则

卡片间距：32rpx (手机) → 48rpx (平板)
文字大小：基础大小的 0.9x → 1.2x
圆角半径：统一 32rpx (主要卡片) → 16rpx (小元素)

6. 无障碍设计

6.1 色彩对比度

正文文字：对比度 ≥ 4.5:1
大号文字：对比度 ≥ 3:1
非文字元素：对比度 ≥ 3:1

6.2 焦点管理

键盘导航：所有可交互元素支持 Tab 键导航
焦点样式：品牌蓝边框 + 4rpx 偏移
跳过链接：提供"跳到主要内容"选项

6.3 辅助功能

屏幕阅读器：完整的 ARIA 标签支持
字幕支持：视频/音频内容提供文字稿
高对比度：提供高对比度模式

7. 设计资产与组件

7.1 标准组件库

卡片组件：基础卡片、推荐卡片、资源卡片
按钮组件：主要按钮、次要按钮、文本按钮
标签组件：分类标签、状态标签、推荐标签
提示组件：成功提示、警告提示、错误提示

7.2 图标系统

资源类型图标：视频、音频、文章、工具、活动
状态指示图标：情绪、匹配度、反馈、设置
风险等级图标：低风险、中风险、高风险

8. 质量保证

8.1 设计检查清单

[ ] 色彩使用是否符合全局规范
[ ] 推荐模块的暖色破格是否恰当
[ ] 风险预警色彩是否正确使用
[ ] 文字对比度是否达标
[ ] 交互状态是否完整
[ ] 动画效果是否流畅

8.2 开发交付规范

设计文件：包含完整的色彩变量定义
组件文档：每个组件的使用说明和限制
交互说明：所有用户交互的流程描述
响应式说明：各断点的布局适配规则

重构要点总结：通过统一的色彩体系和差异化的推荐模块设计，在保持整体视觉一致性的同时，通过局部破格传递温暖关怀。风险预警的语义化色彩确保了安全机制的有效性，完整的反馈系统优化了用户体验。

贡献者

Cai Hongyu

文件历史

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

资源推送系统样式规范 (重构版) ​

1. 设计定位与重构原则 ​

1.1 角色与体验目标 ​

1.2 重构核心原则 ​

2. 色彩系统重构 ​

2.1 全局色彩规范 ​

2.2 推荐模块专用色彩 ​

2.3 资源类型色彩系统 ​

2.4 风险预警色彩规范 ​

2.5 语义化反馈色彩 ​

3. 模块重构设计 ​

3.1 今日状态卡 (Current Emotion Status) ​

3.2 个性化推荐卡片 (Personalized Recommendations) ​

3.3 资源分类与列表 (Resource Categories & List) ​

3.4 风险预警推送 (Risk Alert Push) ​

3.5 反馈系统 (Feedback System) ​

4. 动画与交互效果 ​

4.1 标准动画时长 ​

4.2 交互动画 ​

5. 响应式设计规范 ​

5.1 断点设置 ​

5.2 适配规则 ​

6. 无障碍设计 ​

6.1 色彩对比度 ​

6.2 焦点管理 ​

6.3 辅助功能 ​

7. 设计资产与组件 ​

7.1 标准组件库 ​

7.2 图标系统 ​

8. 质量保证 ​

8.1 设计检查清单 ​

8.2 开发交付规范 ​

贡献者 ​

文件历史 ​

资源推送系统样式规范 (重构版)

1. 设计定位与重构原则

1.1 角色与体验目标

1.2 重构核心原则

2. 色彩系统重构

2.1 全局色彩规范

2.2 推荐模块专用色彩

2.3 资源类型色彩系统

2.4 风险预警色彩规范

2.5 语义化反馈色彩

3. 模块重构设计

3.1 今日状态卡 (`Current Emotion Status`)

3.2 个性化推荐卡片 (`Personalized Recommendations`)

3.3 资源分类与列表 (`Resource Categories & List`)

3.4 风险预警推送 (`Risk Alert Push`)

3.5 反馈系统 (`Feedback System`)

4. 动画与交互效果

4.1 标准动画时长

4.2 交互动画

5. 响应式设计规范

5.1 断点设置

5.2 适配规则

6. 无障碍设计

6.1 色彩对比度

6.2 焦点管理

6.3 辅助功能

7. 设计资产与组件

7.1 标准组件库

7.2 图标系统

8. 质量保证

8.1 设计检查清单

8.2 开发交付规范

贡献者

文件历史