sunct
3c3bf53ae4
- 新增「简记memo」一体化小程序产品原型设计文档 - 新增简记memo完整版UI视觉设计规范和界面细节 - 添加IDEA项目配置文件.gitignore - 创建404页面HTML文件，包含响应式布局和错误提示 - 添加关于页面HTML文件，展示品牌介绍和团队信息 - 实现AES加解密工具函数，支持请求体加密 - 添加用户协议页面基础框架
160 lines
5.1 KiB
Markdown
160 lines
5.1 KiB
Markdown
# 「简记 · 事与钱」小程序 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 统一样式
|
||
|
||
需要我直接把**可马上开发的完整技术原型**全部给你吗？ |