今天页高保真样式规范
字数
2358 字
阅读时间
10 分钟
参考高保真稿：docs/前端样式/svg/高保真图-今天.svg。场景聚焦"今日状态洞察 + 核心工具入口 + 任务提醒 + 社区动线 + 资源推送"，需与《色彩系统.md》中的语义色保持一致。
1. 设计定位与体验目标
- 页面主任务：在一屏内呈现今日状态、核心工具、行动任务预览、社区动态与个性化资源推送，让用户快速判断"现在该做什么"。
- 体验关键词：安心、秩序、智能推荐、轻量操作。通过柔和底色与适度留白降低干扰，强调关键 CTA。
- 视觉策略：整页基底使用 #F7F9FC，模块采用浅色面板加描边分组；品牌蓝用于导航、工具主图标与链接强调，与危机红保持明显层级差。
2. 页面结构框架
┌──────────────────────────────────────────┐
│ 顶部安全区：88rpx 纯白背景（状态栏或标题） │
├──────────────────────────────────────────┤
│ 今日状态卡（32rpx 圆角，双行文案加风险标签） │
├──────────────────────────────────────────┤
│ Top3 微建议卡片（智能推荐 + 一键生成任务） │
├──────────────────────────────────────────┤
│ 工具箱 2 行 × 4 列卡片网格 │
├──────────────────────────────────────────┤
│ 进行中的任务预览（成功主题卡加 CTA 按钮） │
├──────────────────────────────────────────┤
│ 个性化资源推送（基于情绪状态的资源推荐） │
├──────────────────────────────────────────┤
│ 社区动态卡（暖色提醒与风险等级标签） │
├──────────────────────────────────────────┤
│ 底部导航：120rpx 白底，首个 tab 选中高亮 │
└──────────────────────────────────────────┘
3. 模块规格详解
3.1 今日状态卡
- 容器：宽 686rpx、高 192rpx，圆角 32rpx；背景 #EEF5FF，描边 2rpx #D9E8FF；距左右各 32rpx，与顶部状态栏间距 24rpx。
- 主标题：字号 32rpx、字重 700、颜色 #2C3640，左对齐距容器左边 32rpx。
- 次级信息：字号 24rpx、字重 500、颜色 #5A6672，行距 40rpx，展示示例"情绪：平静 · 压力：2/10"。
- 风险标签：贴合右上角；胶囊高度 56rpx、圆角 1998rpx，底色 #EEF5FF，文字"R1 观察"，字号 24rpx、字重 600、颜色 #3A7BD5。需确保与底色对比度不低于 4.5。
- CBT提示：左下角添加小图标，提示可使用认知行为疗法工具。
3.2 Top3 微建议卡片
- 容器：宽 686rpx、高 240rpx，圆角 32rpx；背景 #F0F9FF，描边 2rpx #E0F2FE；距左右各 32rpx，上边距 24rpx。
- 标题：左上角"今日微建议"，字号 28rpx、字重 600、颜色 #1E40AF。
- 建议列表：垂直排列3个建议项，每项包含：
- 建议图标（32×32rpx，品牌蓝）
- 建议文本（24rpx/500/#475569）
- "一键生成任务"按钮（16×56rpx，圆角12rpx，品牌蓝背景）
- AI标识：右上角显示"AI推荐"小标签，背景 #DBEAFE，文字 #1E40AF。
3.3 工具箱
- 网格布局：两行四列，单卡包含 48×96rpx 图标块与下方 64rpx 文本区。列间距约 76rpx，行间距 80rpx，整体左右留白 32rpx。
- 卡片容器：白底 #FFFFFF，圆角 24rpx，描边 2rpx #E9EDF3，关闭阴影以描边区隔。
- 图标圆盘：32×64rpx，默认填充 #3A7BD5，圆角 32rpx；SOS 卡使用 #DC2626。
- 首字图形：字号 28rpx、字重 700、颜色 #FFFFFF，居中显示单字或字母（示例“日”“清”“S”）。
- 功能标签：距图标 32rpx，字号 24rpx、字重 600、颜色 #434E5A，示例包括心情随笔、清单、呼吸、正念、树洞、任务、打卡、SOS。
- 视觉标识：当前无动态徽章；如需后续扩展，可在卡片右上角预留 16×32rpx 徽章区域。
3.4 进行中的任务卡
- 容器：宽 686rpx、高 240rpx，圆角 32rpx；背景 #EAFBF5，描边 2rpx #C5EBDD，上外边距 40rpx。
- 标题：示例"整理书桌 10 分钟"，字号 32rpx、字重 700、颜色 #2C3640。
- 描述：字号 24rpx、字重 500、颜色 #5A6672，行高 40rpx，示例"小目标先开局，完成后记录感受。"
- 状态徽章：右上角胶囊 82×56rpx，底色 #EAFBF5，文字"Success"颜色 #1FA476。
- CBT标识：任务来源标识（如"CBT练习"、"AI建议"），左下角小标签。
- CTA 按钮：右下角 96×64rpx、圆角 20rpx，填充 #2AC28D，字号 32rpx、字重 600、文字颜色 #FFFFFF。按压态加深为 #1FA476 并提供 0.96 缩放反馈。
3.5 个性化资源推送
- 容器：宽 686rpx、高 280rpx，圆角 32rpx；背景 #FEF3C7，描边 2rpx #FDE68A；距左右各 32rpx，上边距 32rpx。
- 标题：左上角"为你推荐"，字号 28rpx、字重 600、颜色 #92400E。
- 资源卡片：水平滚动，单个资源卡片 100×200rpx，圆角 24rpx，包含：
- 资源缩略图（80×160rpx）
- 资源类型图标（16×32rpx，位于缩略图右上角）
- 资源标题（24rpx/600/#1F2937，2行截断）
- 资源时长/阅读时间（20rpx/400/#6B7280）
- 推送原因：底部显示"基于你的焦虑情绪推荐"，字号 20rpx、字重 400、颜色 #92400E。
- 查看更多：右侧"查看更多"链接，字号 24rpx、字重 500、颜色 #3A7BD5。
3.6 社区动态卡
- 标题行：左侧标题“社区动态”（32rpx/700/#2C3640），右侧链接“进入树洞”（24rpx/600/#3A7BD5），与任务卡间距 48rpx。
- 内容卡片：宽 686rpx、高 240rpx，圆角 32rpx；背景 #FFF6E8，描边 2rpx #F2E3C4。
- 主文案：字号 32rpx、字重 700、颜色 #2C3640，示例“有人在分享：考前焦虑自救清单”。
- 互动信息：字号 24rpx、字重 500、颜色 #5A6672，示例“12 条评论 · 3 人收藏”。
- 风险标签：胶囊 66×56rpx，底色 #FFF7E8，文字“R2 关注”，字号 24rpx、字重 600、颜色 #F59E0B。
3.5 底部导航
- 容器：高度 120rpx，背景 #FFFFFF；底部安全区填充相同颜色。
- 标签：字号 24rpx、字重 600，选中项颜色 #3A7BD5，未选中颜色 #5A6672。
- 选中条：位于选中标签下方，宽 64rpx、高 8rpx、圆角 4rpx，填充 #3A7BD5。当前选中“首页”。
4. 色彩与排版基准
4.1 关键色值
| 元素 | 颜色值 | 建议映射 |
|---|---|---|
| 页面背景 | #F7F9FC | var(--color-ink-50) |
| 状态卡底/描边 | #EEF5FF / #D9E8FF | brand-50 / brand-100 |
| 微建议卡底/描边 | #F0F9FF / #E0F2FE | blue-50 / blue-100 |
| 资源推送底/描边 | #FEF3C7 / #FDE68A | amber-50 / amber-100 |
| 品牌蓝核心 | #3A7BD5 | var(--color-brand-500) |
| 辅助墨色 | #2C3640、#5A6672、#434E5A | Ink-900 / 600 / 500 |
| 成功体系 | #EAFBF5、#C5EBDD、#2AC28D、#1FA476 | Success-50 / 100 / 500 / 600 |
| 风险提示 | #FFF6E8、#F2E3C4、#FFF7E8、#F59E0B、#DC2626 | Warning-50 / 200 / 75 / 500，Danger-500 |
| CBT标识色 | #EDE9FE、#C4B5FD | purple-50 / purple-200 |
4.2 字体与字号
- 主体字体栈：Inter → PingFang SC → Helvetica → Arial。
- 标题与标签字号 32rpx，正文描述 24rpx，强调项使用字重 600 或 700。
- 文案行高建议：标题 48rpx，正文 18~40rpx，保证中文阅读节奏。
4.3 SCSS 变量示例
$bg-page: #F7F9FC;
$surface-status: #EEF5FF;
$surface-suggestions: #F0F9FF;
$surface-tool: #FFFFFF;
$surface-task: #EAFBF5;
$surface-resources: #FEF3C7;
$surface-community: #FFF6E8;
$brand: #3A7BD5;
$brand-muted: #D9E8FF;
$cbt-accent: #EDE9FE;
$ink-strong: #2C3640;
$ink-base: #5A6672;
$success: #2AC28D;
$success-dark: #1FA476;
$warning: #F59E0B;
$danger: #DC2626;
5. 交互与状态要求
- 状态卡风险标签依据 risk_level 切换文案（R1 观察、R2 关注、R3 警示、R4 危急），并同步更新颜色；CBT提示图标点击进入Ask助理。
- 微建议卡片每项建议可点击，"一键生成任务"按钮调用行为闭环工作流，创建对应任务。
- 工具卡点击进入对应功能；SOS 卡需二次确认弹层，维持红色主图标提示急迫性。
- 任务卡 CTA 点击后进入任务详情，按钮按压态加深填充色并缩放至 0.96，状态徽章可切换为 In Progress 或 Done；CBT标识显示任务来源。
- 资源推送卡片可点击进入资源详情，支持收藏、分享、评价等交互；推送理由可点击了解更多推荐逻辑。
- 社区卡整卡可点击进入树洞详情；风险标签在无障碍模式中需语音播报。
- 底部导航切换动画 120ms 内完成，选中条与文字颜色同步过渡。
6. 响应式与实现提示
- 750rpx 为设计基准，左右留白固定 32rpx，内容最大宽度 686rpx。
- WeChat WebView 需处理安全区：顶部 88rpx、底部 68rpx（含 Home Indicator）。
- 文案限制在两行内展示，可使用 line-clamp 或 text-overflow 控制。
- 卡片以描边为主，避免浅背景上的阴影脏污；CTA 按钮可附加 0 12rpx 24rpx rgba(42,194,141,0.24) 的轻投影。
7. 数据绑定与埋点对齐
| 模块 | 数据来源 | 关键状态 |
|---|---|---|
| 今日状态卡 | checkinRecorder/status_summary | mood、pressure、risk_level → 文案与风险标签 |
| Top3 微建议 | suggestions/micro_suggestions | content、type、task_template → 建议文案和生成任务 |
| 工具箱 | toolHub/entries | name、slug、type（普通或 SOS） |
| 进行中任务 | behavior_tasks/active | title、description、status、source → CTA 文案与按钮态 |
| 个性化资源推送 | resources/recommendations | resource_id、type、recommendation_reason → 资源展示和推送理由 |
| 社区动态 | forum_posts/highlight | title、stats、risk_level |
| 底部导航 | navigation/tabs | active_tab → 选中条与文本高亮 |
该规范直接对应高保真设计稿，可作为今天页视觉还原、组件划分与开发验收的对照依据。
贡献者
Cai Hongyu