sunct
3c3bf53ae4
- 新增「简记memo」一体化小程序产品原型设计文档 - 新增简记memo完整版UI视觉设计规范和界面细节 - 添加IDEA项目配置文件.gitignore - 创建404页面HTML文件，包含响应式布局和错误提示 - 添加关于页面HTML文件，展示品牌介绍和团队信息 - 实现AES加解密工具函数，支持请求体加密 - 添加用户协议页面基础框架
5.1 KiB
5.1 KiB
「简记 · 事与钱」小程序 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 变量
/* 浅色模式 */
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;
}
}
如果你需要，我可以下一步直接一次性输出完整可开发内容：
- 小程序项目目录结构（pages + components + utils + app.js）
- 4 个页面完整
WXML + WXSS + JS骨架代码 - 云数据库创建 JSON 脚本
- 日期格式化、金额计算、统计、增删改查工具函数
- 全局 app.wxss 统一样式
需要我直接把可马上开发的完整技术原型全部给你吗？