112 lines
2.6 KiB
Markdown
112 lines
2.6 KiB
Markdown
 
|
# 🎨 UI 设计 — 视觉规范与交互流程
|
|||
|
|
|
|||
|
|
> 来源：[Notion 原始文档](https://www.notion.so/36a401dc38a681e2955befd8a352ff48)
|
|||
|
|
|
|||
|
|
## 设计理念
|
|||
|
|
|
|||
|
|
**主题：** 深夜导航仪 — 让用户每晚打开就有"回到指挥中心"的仪式感
|
|||
|
|
|
|||
|
|
**设计关键词：**
|
|||
|
|
- 深色底 (`#0a0e1a`)，星空感
|
|||
|
|
- 温暖金色 (`#f5c542`) 为主强调色
|
|||
|
|
- 可视化优先：SVG 圆形进度环、层级树形图、柱状趋势图
|
|||
|
|
- 中文宋体（Noto Serif SC）增强人文感
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 颜色规范
|
|||
|
|
|
|||
|
|
| 用途 | 颜色 | Hex |
|
|||
|
|
|------|------|-----|
|
|||
|
|
| 主强调色 / 人生目标层 | 金色 | `#f5c542` |
|
|||
|
|
| 年度目标层 | 橙色 | `#f0884a` |
|
|||
|
|
| 月度目标层 | 蓝色 | `#4aabf0` |
|
|||
|
|
| 周目标层 | 绿色 | `#7dd87a` |
|
|||
|
|
| 日目标层 | 紫色 | `#c47af5` |
|
|||
|
|
| 高分指示 | 绿色 | `#7dd87a` |
|
|||
|
|
| 中分指示 | 黄色 | `#f5c542` |
|
|||
|
|
| 低分指示 | 红色 | `#f04a4a` |
|
|||
|
|
| 页面背景 | 深山蓝黑 | `#0a0e1a` |
|
|||
|
|
| 卡片背景 | 半透明白 | `rgba(255,255,255,0.04)` |
|
|||
|
|
| 边框 | 深蓝灯光 | `#1e2535` |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 页面布局
|
|||
|
|
|
|||
|
|
### Header
|
|||
|
|
- 左：项目标题"人生罗盘"+ 当日日期
|
|||
|
|
- 右：今日评分小圆环（未复盘时显示虚线圈）
|
|||
|
|
|
|||
|
|
### 底部 Tab 导航（固定 4 项）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
🌳 目标树 | ✦ 每日复盘 | 📊 历史 | ◈ AI 教练
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 内容区域各 Tab 布局
|
|||
|
|
|
|||
|
|
#### 🌳 目标树
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
[提示文字] 点击文字编辑 · 点击 + 添加子目标
|
|||
|
|
[根节点] 人生—金色左边框
|
|||
|
|
└ [年度] 橙色左边框
|
|||
|
|
└ [月度] 蓝色左边框
|
|||
|
|
└ [周] 绿色左边框
|
|||
|
|
└ [日] 紫色左边框
|
|||
|
|
[层级说明色色块]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### ✦ 每日复盘
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
[ScoreRing 大圈 90px] [评分按钮 1-10]
|
|||
|
|
|
|||
|
|
[文字反思输入框 4行]
|
|||
|
|
|
|||
|
|
[提交复盘 · AI 点评] 按钮
|
|||
|
|
|
|||
|
|
[金色边框卡片] AI 教练点评内容
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 📊 历史
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
[近期评分趋势柱状图]
|
|||
|
|
|
|||
|
|
[复盘卡片列表]
|
|||
|
|
[ScoreRing 52px] [日期 + 反思文字 + AI 摘要]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### ◈ AI 教练
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
[对话气泡流]
|
|||
|
|
右对齐：用户消息（金色渐变）
|
|||
|
|
左对齐：AI 回复（半透明卡片）
|
|||
|
|
|
|||
|
|
[输入框] + [→ 发送] 按钮
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 交互状态设计
|
|||
|
|
|
|||
|
|
| 状态 | 表现 |
|
|||
|
|
|------|------|
|
|||
|
|
| 空默认 | 虚线圈 + 灰色"今日" |
|
|||
|
|
| 已评分未提交 | 圆环点亮 + 评分按钮选中状态 |
|
|||
|
|
| 提交中 | 按钮显示"AI 分析中…" |
|
|||
|
|
| 已完成 | AI 点评卡片展示 + "已保存"标识 |
|
|||
|
|
| 编辑目标 | 节点文字变为 input，回车或失焦保存 |
|
|||
|
|
| 删除确认 | 直接删除（MVP 简化，后续添加 confirm） |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 响应式设计
|
|||
|
|
|
|||
|
|
- 最大内容宽度：600px（在手机和桌面均可用）
|
|||
|
|
- 评分按钮在小屏时自动换行（flex-wrap）
|
|||
|
|
- 导航 Tab 固定底部（Header）
|