sunct
3c3bf53ae4
- 新增「简记memo」一体化小程序产品原型设计文档 - 新增简记memo完整版UI视觉设计规范和界面细节 - 添加IDEA项目配置文件.gitignore - 创建404页面HTML文件，包含响应式布局和错误提示 - 添加关于页面HTML文件，展示品牌介绍和团队信息 - 实现AES加解密工具函数，支持请求体加密 - 添加用户协议页面基础框架
217 lines
5.3 KiB
Markdown
217 lines
5.3 KiB
Markdown
# 简记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 代码**吗？ |