# 「简记 · 事与钱」小程序 UI 设计规范
## 清新唯美配色方案 + 全局视觉规范
整体风格：**清透柔和、低饱和高级、留白充足、温柔治愈**，适配深浅双主题，兼顾极简与质感。

---

# 一、全局清新唯美主配色
## 1. 浅色模式（主视觉·清新唯美）
| 用途 | 色值 | 视觉说明 |
|------|------|----------|
| 主品牌色 | `#A3D8D3` | 薄荷青，温柔干净，代表简洁、治愈、高效 |
| 辅助色1 | `#F8C8DC` | 淡樱花粉，点缀温馨，不艳俗 |
| 辅助色2 | `#B5D8FE` | 浅天青蓝，提升清爽感 |
| 收入色 | `#87D0A0` | 柔和薄荷绿，不刺眼 |
| 支出色 | `#F2A3A0` | 淡豆沙红，温和警示 |
| 优先级高 | `#F69999` | 浅红提醒 |
| 优先级中 | `#F5D090` | 浅黄温和提示 |
| 优先级低 | `#A0D9E0` | 浅蓝默认 |
| 背景底色 | `#FAFDFF` | 极浅冷白，护眼不惨白 |
| 卡片底色 | `#FFFFFF` | 纯白卡片，轻微阴影 |
| 分割线 | `#E8EEF2` | 极浅灰，弱化边界 |
| 主文字 | `#3A4A54` | 深灰蓝，柔和不黑 |
| 次级文字 | `#83959F` | 中性灰 |
| 提示文字 | `#B5C2C9` | 淡灰 |

## 2. 深色模式（护眼·低饱和唯美）
| 用途 | 色值 |
|------|------|
| 主品牌色 | `#82BFB8` |
| 收入色 | `#70B887` |
| 支出色 | `#D98885` |
| 背景底色 | `#1C2528` |
| 卡片底色 | `#2A353A` |
| 分割线 | `#3A474F` |
| 主文字 | `#EDF3F5` |
| 次级文字 | `#9FB1B9` |
| 提示文字 | `#6B7B83` |

---

# 二、全局视觉规范
## 1. 字体
- 标题：`font-weight: 600`，大小 `32rpx ~ 36rpx`
- 正文：`font-weight: 400`，大小 `28rpx`
- 备注/次要：`24rpx`
- 金额数字：`font-weight: 500`，清晰易读

## 2. 间距与圆角
- 页面边距：`32rpx`
- 卡片内边距：`32rpx`
- 卡片圆角：`16rpx`（统一柔和大圆角）
- 按钮圆角：`12rpx`
- 列表项高度：`96rpx ~ 112rpx`

## 3. 阴影与质感
- 卡片阴影：`0 4rpx 20rpx rgba(163,216,211,0.08)`
- 悬浮按钮：轻微上浮阴影，柔和不重
- 无描边、少边框，靠阴影与留白区分层级

---

# 三、四 Tab 页面 UI 布局设计
## Page 1：今日（聚合页 · 核心首页）
- 顶部日期栏：浅薄荷青小字，左右箭头淡灰，切换开关用 `#A3D8D3`
- 今日待办卡片：
    - 进度条主色 `#A3D8D3`，背景浅灰
    - 列表项：优先级小圆点 + 标题 + 勾选框
    - 空态：淡灰图标 + `#83959F` 文字
- 今日记账卡片：
    - 金额数字突出，支出淡红、收入柔和绿
    - 列表横向紧凑，分类图标小而精致
- 底部双悬浮按钮：
    - 左记账：`#B5D8FE` 浅蓝
    - 右加任务：`#A3D8D3` 薄荷青
    - 均为圆形、轻微阴影、极简图标

## Page 2：待办（任务管理页）
- 顶部搜索框：浅灰背景 `#F3F7F9`，圆角大
- 筛选标签：选中态 `#A3D8D3` 背景+白字，未选中淡灰边框
- 任务列表：
    - 每条卡片式，优先级色块前置
    - 标题粗体，备注折叠淡灰色
    - 日期、重复标记居右小文字
- 批量选择：勾选框用主色，背景轻微遮罩
- 右下角悬浮添加按钮：主色圆形 + 白色 + 号

## Page 3：账单（收支管理页）
- 顶部切换按钮：支出/收入/全部，选中主色填充
- 统计条：大数字突出，结余用主色强调
- 分类横向滚动：小图标 + 分类名 + 金额，当前分类高亮主色
- 账单列表：
    - 分类图标统一圆形底色
    - 金额右对齐，支出红、收入绿
    - 备注折叠，日期居右下
- 记账弹窗：
    - 数字键盘干净简洁
    - 分类宫格布局，图标柔和配色
    - 保存按钮主色填充

## Page 4：我的（个人中心）
- 月度统计卡片：
    - 环形统计图主色 `#A3D8D3`
    - 任务完成率、收支数据清晰排布
- 功能列表：
    - 图标统一线性风格
    - 每项右侧箭头淡灰
    - 开关控件主色
- 底部版本、关于：浅灰色小字，极简排版

---

# 四、交互动效（清新不花哨）
- 完成任务：轻微缩放 + 主色闪烁
- 滑动删除/完成：平滑位移，不卡顿
- 弹窗出现：淡入 + 轻微上浮
- 切换主题：渐变过渡
- 数据加载：极简转圈 `#A3D8D3`
- 点击反馈：轻微按压变暗

---

# 五、可直接复制使用的 WXSS 变量
```css
/* 浅色模式 */
page {
  --main: #A3D8D3;
  --income: #87D0A0;
  --expend: #F2A3A0;
  --bg: #FAFDFF;
  --card: #FFFFFF;
  --text: #3A4A54;
  --text-secondary: #83959F;
  --line: #E8EEF2;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  page {
    --main: #82BFB8;
    --income: #70B887;
    --expend: #D98885;
    --bg: #1C2528;
    --card: #2A353A;
    --text: #EDF3F5;
    --text-secondary: #9FB1B9;
    --line: #3A474F;
  }
}
```

---

如果你需要，我可以**下一步直接一次性输出完整可开发内容**：
1. 小程序项目目录结构（pages + components + utils + app.js）
2. 4 个页面完整 `WXML + WXSS + JS` 骨架代码
3. 云数据库创建 JSON 脚本
4. 日期格式化、金额计算、统计、增删改查工具函数
5. 全局 app.wxss 统一样式

需要我直接把**可马上开发的完整技术原型**全部给你吗？