8.1 KiB
8.1 KiB
用户端 App 最新参考产品设计
本版本保留早期逐稿确认记录。用户已于 2026-09-05 将流程调整为“每种页面类型生成一张并直接保存”；完整页面清单与当前规则请查看
产品设计说明_用户端APP_v1.1.md。
1. 设计目标
- 以
doc/用户端APP-产品设计中的业务功能和页面流程为基础逐类优化，不删除后续规划功能。 - 视觉与现有用户端 Design System 保持一致，主色使用
#2563EB，背景使用#F7F8FA。 - 界面采用正式移动 App 的信息层级、间距和交互组件，不使用紫色、渐变、Emoji、玻璃拟态、三维装饰或夸张 AI 风格元素。
- 每类页面先生成三个独立候选，仅保存用户明确选定的版本。
2. 已选页面
| 序号 | 页面类型 | 来源参考 | 入选文件 | 状态 |
|---|---|---|---|---|
| 01 | 登录页 | ../用户端APP-产品设计/1.jpg |
01-登录页.png |
已选择方案 1 |
| 02 | 智能角阀功能介绍 | ../用户端APP-产品设计/2.jpg、3.jpg |
02-智能角阀功能介绍.png |
已选择方案 1 |
| 03 | 首页与设备概览 | 当前真实首页、../用户端APP-产品设计/4.jpg、4-1.jpg |
03-首页.png |
已选择方案 1 并完成公告区优化 |
| 04 | 智能角阀设备详情与控制 | 03-首页.png、../用户端APP-产品设计/4.jpg、4-6.jpg |
04-智能角阀控制.png |
已选择方案 1 |
| 05 | 一键报修 | 04-智能角阀控制.png、../用户端APP-产品设计/4-3.jpg、4-4.jpg |
05-一键报修.png |
已选择方案 2 |
| 06-1 | 扫码添加确认 | 03-首页.png、../用户端APP-产品设计/4-5.jpg |
06-1-扫码添加确认.png |
添加设备必需流程 |
| 06-2 | 蓝牙连接设备 | 03-首页.png、../用户端APP-产品设计/4-7.jpg |
06-2-蓝牙连接设备.png |
添加设备必需流程 |
| 06-3 | 手动输入设备码 | 03-首页.png、../用户端APP-产品设计/4-5.jpg、4-7.jpg |
06-3-手动输入设备码.png |
添加设备必需流程 |
3. 产品设计依据
新版产品设计必须同时合并三类依据，任何一类已有能力都不得因视觉改版被删除：
- 原产品设计图：
doc/用户端APP-产品设计中的完整页面和交互流程。 - 当前真实用户端：
apps/user_app已实现的登录、首页、商城、订单和个人中心能力。 - 正式需求文档：
docs/03-用户端App需求.md中已明确的首期功能和后续迭代能力。
3.1 当前已实现能力
- 登录、注册、会话恢复和登录后返回原目标页。
- 首页安全内容、安全公告、内容详情和当前服务归属；服务归属分别展示所属气站与服务配送点。
- 商城商品列表、购买确认、地址选择、订单创建和余额支付。
- 商城订单、供气订单、退款记录、服务工单，以及支付宝、微信支付和退款申请入口。
- 个人资料、头像、钱包余额、地址管理、供气合同、钱包流水、申请维修和退出登录。
3.2 原设计及需求文档保留能力
- 智能角阀列表、设备详情、在线/离线、开关状态、电量、环境压力、温度、自动关阀时间、燃气检测和最后更新时间。
- 扫码添加、手动输入、蓝牙连接、设备校验、安装地址、设备昵称和重复绑定校验。
- 单设备开关阀、操作确认、命令回执、失败/超时状态，以及高风险事件禁止开阀。
- 厨房、热水器、暖气等设备分组，全开、全关、编辑、删除和逐设备失败明细。
- 气瓶规格、钢瓶号、充装日期、充装单位、充装数量、有效期、制造厂和异常提示。
- 可燃气体报警器列表、最近告警、安全提示、触发报警、紧急电话、一键报修和处理进度。
- 报修类型、故障描述、语音输入、联系人、地址、当前位置和最多三张现场照片。
- 商城分类、搜索、收藏、数量调整、商品详情、购物车、库存、配送费、预约时段和支付方式。
- 订单状态、配送轨迹、确认收货、售后、退款、评价和电子发票。
- 钱包、押金、消息、用气统计、收藏、客服、紧急联系人、家庭共享、通知与通用设置。
3.3 导航与页面组织原则
- 保留当前真实 App 的“首页、商城、订单、我的”四栏结构，避免底部导航过度拥挤。
- 智能角阀作为首页核心设备模块及独立详情流程；收藏放入商城和“我的”，不因取消独立底栏入口而删除功能。
- 当前已实现功能在设计稿中按真实可用状态呈现；后续能力按完整交互流程设计，但开发时必须等待真实接口，不使用静态成功结果冒充上线能力。
4. 登录页功能范围
- 手机号输入。
- 验证码登录与获取验证码。
- 密码登录切换。
- 记住登录状态。
- 忘记密码。
- 用户协议与隐私政策入口。
5. 设计规范
- 品牌主色：
#2563EB。 - 成功色：
#16875D。 - 警告色：
#B86400。 - 危险色：
#C7352A。 - 页面背景：
#F7F8FA。 - 最小触控区域：48dp。
- 常规按钮高度：52dp。
- 间距使用 4dp 基础网格。
- 圆角优先使用 10dp、12dp、16dp。
5.1 智能角阀功能介绍
- 保留功能介绍、安全案例、法律法规和气价信息四类内容入口。
- 功能介绍保留远程开关阀门、实时状态监控、安全报警提醒和定时关阀设置。
- 使用统一线性图标，移除 Emoji、浏览器浮层、系统状态栏和截图侧边控件。
5.2 首页与设备概览
- 保留“当前服务归属”，分别显示所属气站与服务配送点。
- 首页增加厨房智能角阀概览，展示在线状态、开关状态、电量、环境压力、温度、可燃气体状态和最后更新时间。
- 提供扫码添加、蓝牙连接、分组控制和一键报修快捷入口。
- 提供安全记录、最近告警和气瓶信息入口，高风险开阀操作进入设备详情后执行。
- 安全公告使用圆角描边列表卡，展示真实中文摘要、日期和“查看全部”入口。
- 保留当前“首页、商城、订单、我的”四栏底部导航。
5.3 智能角阀设备详情与控制
- 展示在线状态、当前开关状态、设备状态说明和最后更新时间。
- 展示电量、环境压力、温度、可燃气体、关阀时间和使用气瓶六项设备数据。
- 开阀前明确校验设备在线、燃气泄漏和传感器状态，不允许绕过安全检查。
- 以单一主按钮执行开阀操作，并提示现场通风和远离明火。
- 保留安全记录、气瓶详情和一键报修入口；设备命令开发时必须展示最终回执或超时待确认状态。
5.4 一键报修
- 使用“故障信息、联系与地址、确认提交”三步引导，减少长表单一次性填写压力。
- 支持燃气泄漏、阀门故障、报警器故障和其他问题四类故障。
- 支持故障描述、语音输入和最多三张现场照片，照片记录拍摄时间及当前位置。
- 保留脱敏联系电话、报修地址、定位状态和紧急电话入口。
- 报修提交结果以服务端工单为准，失败时保留已填写内容，避免用户重复录入。
5.5 添加设备
- 扫码添加、手动输入和蓝牙连接是三种并存的必需方式，不作为互相替代的视觉候选。
- 扫码识别后展示设备编号、设备昵称、安装地址、安装位置和校验结果，再由用户确认绑定。
- 蓝牙连接展示附近设备、信号强度、连接状态、重新搜索、权限开启和连接帮助。
- 手动输入提供设备编号格式提示、编号位置示例、校验失败处理和其他添加方式入口。
- 绑定前统一校验设备归属、激活状态、服务区域和重复绑定；权限失败不得阻塞手动输入。
6. 后续流程
其余页面继续按“原始产品设计图 → 同一功能内容的三个布局候选 → 用户选择 → 保存入选稿”的顺序推进。不同业务方式或流程状态必须分别保留，不得作为互斥候选。全部视觉方案完成后，再据此更新 Flutter 用户端界面和相关功能。