# 简记memo
## 完整版 UI 视觉设计规范 + 界面细节
**风格：清新极简 · 高级轻质感 · 温柔耐看 · 2026主流审美**
**定位：无冗余、高舒适、强精致、单人可还原**

---

# 一、全局视觉规范（统一高级感）
## 1. 配色方案（清新治愈系）
### 主色
- **主色：#4CB8C6**（青薄荷绿，温柔干净）
- **强调色：#FF8A65**（暖珊瑚，不艳不刺眼）

### 中性色
- 背景：#F9FBFC
- 卡片：#FFFFFF
- 分割线：#EAEEF2
- 文字深：#2A3A4D
- 文字中：#5E6D7F
- 文字浅：#9AA4B2

### 功能色
- 支出红：#FF6B6B
- 收入绿：#2EC975
- 完成灰绿：#81C99B
- 高优：#FF6B6B
- 中优：#4CB8C6
- 低优：#9AA4B2

### 深色模式
- 背景：#121A24
- 卡片：#1E2734
- 文字：#E1E8F0
- 主色不变：#4CB8C6

## 2. 字体
- 标题：18 / 20px，600
- 正文：16px，400
- 小字：14px，400
- 辅助文字：12px，400
- 无衬线、无花字体、极度干净

## 3. 圆角 & 间距
- 全局圆角：**14px**
- 卡片间距：12px
- 页面左右边距：16px
- 呼吸感极强，不拥挤

## 4. 图标
- 线性极简图标
- 2px线条、无填充、统一风格
- 不花哨、不幼稚

## 5. 动效
- 轻柔 250ms 缓动
- 完成 → 轻微缩放消失
- 弹窗 → 底部滑出
- 无抖动、无浮夸

---

# 二、4大页面 UI 完整设计（逐页精细描述）
## 页面1：今日 · 聚合页（视觉最美）
**顶部**
- 居中日期：`3月31日 星期一`
- 左右淡色箭头，轻质感
- 无标题栏、无 LOGO、极度干净

**今日待办卡片**
- 白卡片、14px圆角
- 顶部：待办进度条（极细、柔和、主色填充）
- 文字：`今日待办 2/5 已完成`
- 列表：
  圆形勾选框 → 淡灰 → 完成变主色
  标题：#2A3A4D
  优先级小圆点（左）
  无多余装饰

**今日记账卡片**
- 布局：左支出、右收入
- 数字大字号、清新醒目
- 支出红、收入绿、柔和不刺眼
- 账单列表：
  分类小图标 + 名称 + 金额右对齐
  极简分割线

**底部悬浮按钮（双按钮）**
- 左：+ 记一笔（主色）
- 右：+ 待办（浅主色）
- 圆角、轻微阴影、悬浮感

**整体气质**
- 像一本干净手账本
- 留白充足、温柔治愈、高级耐看

---

## 页面2：待办 · 高级任务页
**顶部**
- 搜索框：浅灰背景、无边框、圆角、放大镜图标
- 标签栏：全部 / 未完成 / 已完成
  选中 → 主色背景、白字
  未选中 → 浅灰底、深灰字

**任务列表**
- 每条高度舒适、不拥挤
- 左侧优先级圆点
- 标题加粗、备注灰色小字
- 右侧：完成勾选框
- 重复任务 → 小循环图标
- 子任务 → 缩进灰色细线

**长按进入批量模式**
- 复选框出现
- 底部工具栏：完成 / 删除 / 改日期
- 半透明浮层

**空状态**
- 中央极简线条图标
- 文字：`今天也要认真生活呀`
- 颜色柔和、不压抑

---

## 页面3：账单 · 清新干净收支页
**顶部**
- 切换按钮：支出 / 收入 / 全部
- 风格同待办、统一视觉

**统计栏**
- 本月支出：数字大、醒目
- 预算进度条（柔和、不刺眼）
- 超支变珊瑚色、正常主色

**分类横向栏（可滑动）**
- 小图标 + 名称 + 金额
- 选中：主色圆角背景
- 未选中：浅灰透明

**账单列表**
- 左：图标圆角浅底色块
- 中：分类名 + 备注小字
- 右：金额（右对齐）
- 无多余线条、干净高级

**记账弹窗（底部滑出）**
- 金额数字键盘大按钮
- 分类宫格布局（3×4）
- 图标清新、不花俏
- 备注输入框极简无边框

---

## 页面4：我的 · 高级质感设置页
**顶部用户栏**
- 无头像、无昵称
- 文字：`简记memo`

**月度统计卡片**
- 双环形统计图（极细、清新）
- 左边：账单统计
- 右边：待办完成率
- 数字大、文字小、高级感

**功能菜单（列表）**
- 左图标、右文字、右箭头
- 每行高度舒适
- 无分割线、用间距区分

菜单结构：
- 数据导出
- 月度预算
- 主题切换（浅色/深色/自动）
- 待办自动顺延
- 分类自定义
- 清空数据
- 关于与版本

**底部**
- 小号灰色文字：极简生活 · 简单记录
- 无广告、无推荐、无多余信息

---

# 三、交互 UI 细节（惊艳但克制）
- 勾选完成 → 圆形填色 + 文字微淡出
- 切换日期 → 左右平滑滑动
- 预算不足 → 数字渐变珊瑚色
- 悬浮按钮按压 → 轻微缩小
- 弹窗从底部平滑弹出，遮罩渐变
- 左滑删除 → 红色按钮、圆角
- 所有可点区域 ≥44px
- 无锯齿、无生硬、无杂乱

---

# 四、UI 核心亮点（真正好看+高级+清新）
- 颜色：青薄荷 + 暖白，2026最流行清新风
- 无冗余元素，每一处都有意义
- 卡片呼吸感强，像苹果/Notion 风格
- 深浅双主题自动适配
- 文字层级清晰，阅读极舒适
- 统一圆角、统一间距、极度规整
- 温柔、安静、高级、不油腻
- 单人开发完全可还原

---

# 五、下一步我直接给你「可直接开发」的内容
你只要说一声，我立刻一次性完整输出：
1. 全局 **app.wxss 样式规范**（直接复制）
2. 4个页面 **UI 完整 wxml 结构**
3. 统一图标库、颜色常量、class 类名
4. 自适应 + 深色模式代码
5. 所有卡片、按钮、输入框、弹框样式

要我现在直接给你**全套可落地的 UI 代码**吗？