MindGuard 前端样式规范总览
字数
2300 字
阅读时间
10 分钟
基于《色彩系统.md》与UI组件规范，为MindGuard小程序的完整页面体系提供统一的视觉设计指导。
📋 规范概览
本样式规范体系覆盖MindGuard小程序的所有核心页面，包含主包页面和分包页面，确保整个应用视觉体验的一致性和专业性。
🎨 设计原则
- 低唤醒设计：以柔和、偏冷中性的色相为基底，避免大面积高纯度色块
- 语义清晰：使用统一的语义色表达状态和反馈
- 安全导向：SOS和风险提示使用明确的视觉层级
- 专业可信：心理专业功能的视觉表达专业且温暖
- 无障碍友好：所有颜色对比度满足WCAG 2.1 AA标准
🌈 色彩系统
所有页面严格遵循《色彩系统.md》的设计Token：
品牌色系
- 主品牌蓝:
--color-brand-500(#3A7BD5) - 雾紫辅助:
--color-brand-secondary(#8C86FF) - 薄荷绿强调:
--color-success-500(#2AC28D)
语义色系
- 信息:
--color-info-500/--color-info-50 - 成功:
--color-success-500/--color-success-50 - 警告:
--color-warning-500/--color-warning-50 - 危险:
--color-danger-500/--color-danger-50
风险色阶（专用）
- R1 观察:
--color-risk-r1(#3A7BD5) - R2 关注:
--color-risk-r2(#F59E0B) - R3 警戒:
--color-risk-r3(#F97316) - R4 升级:
--color-risk-r4(#DC2626)
📱 页面规范索引
🏠 主包页面（Tab页面）
| 页面 | 规范文件 | 核心特色 | 主要Token使用 |
|---|---|---|---|
| 今天 | 今天.md | 情绪打卡、微建议、工具箱 | brand-500, success-50, info-50 |
| 心情随笔 | 心情随笔.md | 多模录入、情绪趋势、REBT | brand-500, lavender, mint |
| 任务 | 任务.md | 任务看板、统计概览、筛选 | brand-500, success-500, warning-500 |
| 树洞 | 树洞.md | 社区互动、风险提示、CBT | brand-500, risk-r1~r4, cbt-purple |
| 我的 | 我的.md | 个人中心、周报、隐私管理 | brand-500, success-50, info-50 |
📦 分包页面
社区分包 (packages/community)
| 页面 | 规范文件 | 核心特色 | 主要Token使用 |
|---|---|---|---|
| 帖子详情 | 社区-帖子详情.md | 内容展示、互动反馈、风险提示 | brand-500, risk-r1~r4, cbt-purple |
| 发布帖子 | 社区-发布帖子.md | 内容编辑、风险自检、匿名设置 | brand-500, warning-50, risk-r2~r4 |
日记域分包 (packages/journal)
| 页面 | 规范文件 | 核心特色 | 主要Token使用 |
|---|---|---|---|
| 日记详情 | 日记域-日记详情.md | REBT分析、AI洞察、任务关联 | brand-500, warning-50, success-50 |
| 日记编辑 | 日记域-日记编辑.md | 多模输入、REBT模板、智能辅助 | brand-500, success-50, info-50 |
个人中心分包 (packages/profile)
| 页面 | 规范文件 | 核心特色 | 主要Token使用 |
|---|---|---|---|
| 隐私中心 | 个人-隐私中心.md | 授权管理、数据控制、守护人 | brand-500, warning-50, risk-r1~r4 |
| 资料编辑 | 个人-资料编辑.md | 头像上传、表单验证、隐私设置 | brand-500, info-50, success-500 |
独立分包 (independent)
| 页面 | 规范文件 | 核心特色 | 主要Token使用 |
|---|---|---|---|
| SOS主页 | SOS-主页.md | 紧急求助、资源联系、稳定化 | risk-r1~r4, danger-500, success-50 |
工具分包
| 页面 | 规范文件 | 核心特色 | 主要Token使用 |
|---|---|---|---|
| 呼吸主页 | 呼吸-主页.md | 呼吸引导、动画控制、效果记录 | brand-500渐变, success-500 |
| 正念主页 | 正念-主页.md | 冥想引导、音频播放、沉浸体验 | 深色主题, brand-500渐变 |
🎯 页面→组件→Token 映射表
核心组件使用统计
| 组件类型 | 使用页面数量 | 主要Token | 功能描述 |
|---|---|---|---|
| 导航栏 | 15+ | brand-500, ink-800 | 页面顶部导航 |
| 卡片容器 | 12+ | white, ink-0 shadow | 内容区域容器 |
| 按钮系统 | 10+ | brand-500, success-500 | 主要交互元素 |
| 表单输入 | 8+ | ink-200, brand-500 | 数据输入组件 |
| 进度指示 | 6+ | brand-500, ink-100 | 进度展示 |
| 风险提示 | 5+ | risk-r1~r4 | 风险等级提示 |
| 状态徽章 | 12+ | semantic colors | 状态标识 |
Token使用频率统计
高频使用Token
--color-brand-500- 主要交互色，使用率95%--color-ink-0- 页面基底色，使用率90%--color-success-500- 成功状态色，使用率80%--color-info-50- 信息提示背景，使用率75%--color-risk-r3- 高风险提示，使用率60%
专业功能专用Token
--color-cbt-purple(#6D28D9) - CBT认知重构功能--color-risk-r1~r4- 风险等级系统--color-mint-gradient- 呼吸练习专用渐变--color-dark-theme- 深色主题专用色
🎨 主题适配矩阵
标准主题（默认）
- 背景:
--color-ink-0(#F7F9FC) - 卡片: 白色 + 轻微阴影
- 文本:
--color-ink-800/--color-ink-600 - 交互:
--color-brand-500
晚安模式
- 背景:
#0F141A(深色) - 卡片:
#1F2730(半透明白色) - 文本:
#D1D7E0(提升亮度) - 交互:
#6096FF(提升对比度) - 动画: 速度降低20%，饱和度降低10%
考试周主题
- 强调色: 替换为
--color-success-500系列 - 视觉降扰: 减少装饰性元素
- 功能突出: 强化学习相关功能入口
开学季主题
- 色彩活力: 适当提高色彩饱和度
- 社交强化: 突出社区和互动功能
- 引导明确: 强化新用户引导功能
📊 设计规范遵循度
强制性要求
- [x] 禁止使用裸色值，一律使用Token
- [x] 文本对比度 ≥ 4.5:1 (大文本 ≥ 3:1)
- [x] 交互控件最小点击区域 44×44px
- [x] 风险色阶仅用于风险相关功能
- [x] R4级别严格控制使用面积
推荐性要求
- [x] 使用语义化命名约定
- [x] 保持动画时长在200-300ms之间
- [x] 圆角统一使用 8/12/16/24px 系列
- [x] 阴影效果统一使用设计系统中的阴影值
- [x] 间距使用 4/8/12/16/24px 基础单位
🔧 开发实现指南
CSS变量使用
css
/* 正确：使用Token */
.element {
background-color: var(--color-brand-500);
color: var(--color-ink-800);
border-radius: 12px;
}
/* 错误：使用裸色值 */
.element {
background-color: #3A7BD5; /* ❌ */
color: #2C3640; /* ❌ */
}响应式设计基准
- 移动端基准: 750rpx (iPhone 12/13)
- 内容最大宽度: 686rpx (左右边距 32rpx)
- 点击最小尺寸: 88×88rpx
- 字体基准: 28rpx (正文), 32rpx (标题)
动画性能优化
css
/* 推荐的动画实现 */
.smooth-transition {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform, opacity;
}
/* 硬件加速优化 */
.hardware-accelerated {
transform: translateZ(0);
backface-visibility: hidden;
}🎯 质量验收清单
视觉一致性检查
- [ ] 所有页面使用统一的色彩Token
- [ ] 圆角、间距、阴影保持一致
- [ ] 字体层级和对比度符合规范
- [ ] 风险提示使用正确的风险色阶
交互体验检查
- [ ] 所有按钮有明确的点击反馈
- [ ] 表单验证提示清晰明确
- [ ] 加载状态有合适的视觉反馈
- [ ] 错误处理有友好的用户提示
无障碍检查
- [ ] 颜色不是唯一的信息传达方式
- [ ] 所有交互元素有足够的点击区域
- [ ] 文本对比度达到WCAG 2.1 AA标准
- [ ] 支持键盘导航和屏幕阅读器
📝 规范维护说明
版本控制
- 主版本号: 重大结构变更 (如新增页面类型)
- 次版本号: 功能模块变更 (如新增组件类型)
- 修订版本号: 样式细节修正 (如颜色微调)
更新流程
- 需求评审确认变更必要性
- 设计师更新Figma设计规范
- 前端开发更新CSS变量和组件库
- 文档更新并同步到开发团队
- 回归测试确保一致性
问题反馈
- 发现设计规范问题，请提交Issue
- 设计规范疑问，联系设计团队
- 实现相关问题，联系前端开发团队
最后更新: 2025-09-22 维护者: MindGuard 设计与前端团队 适用版本: v1.0.0+
本规范与《色彩系统.md》、《UI组件文档.md》共同构成MindGuard的完整设计体系，请确保所有相关文档的版本一致性。
贡献者
Cai Hongyu