sunct
3c3bf53ae4
- 新增「简记memo」一体化小程序产品原型设计文档 - 新增简记memo完整版UI视觉设计规范和界面细节 - 添加IDEA项目配置文件.gitignore - 创建404页面HTML文件，包含响应式布局和错误提示 - 添加关于页面HTML文件，展示品牌介绍和团队信息 - 实现AES加解密工具函数，支持请求体加密 - 添加用户协议页面基础框架
5.3 KiB
5.3 KiB
简记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 风格
- 深浅双主题自动适配
- 文字层级清晰，阅读极舒适
- 统一圆角、统一间距、极度规整
- 温柔、安静、高级、不油腻
- 单人开发完全可还原
五、下一步我直接给你「可直接开发」的内容
你只要说一声，我立刻一次性完整输出：
- 全局 app.wxss 样式规范（直接复制）
- 4个页面 UI 完整 wxml 结构
- 统一图标库、颜色常量、class 类名
- 自适应 + 深色模式代码
- 所有卡片、按钮、输入框、弹框样式
要我现在直接给你全套可落地的 UI 代码吗？