PMFans · 电商原型

电商 App 产品规划演示

27 个页面 · 完整功能结构 · PRD 产品备注 · 6 类数据图表 · 果冻开关 / 粒子 / 流体胶囊动效

先走一遍主流程

首页 → 商品详情 → 选规格加购 → 购物车 → 结算 → 支付成功 → 订单。每一步都能点，数据存在本机 localStorage，刷新不丢。

从首页开始 先看 PRD

全部页面 点右上角「?」看每页的产品备注

这套原型里有什么

完整功能结构：发现（首页/分类/搜索）→ 决策（列表/详情）→ 交易（购物车/结算/支付）→ 履约（订单/物流/售后）→ 留存（会员/消息/收藏/优惠券）。
产品备注抽屉：每页 11 个结构化板块 —— 模块目标、用户故事、功能清单、业务规则、数据字段、状态流转、异常边界、埋点事件、核心指标、验收标准、优化建议。
数据分析看板：GMV 折线、订单量柱状、转化漏斗、品类环形、用户增长、复购/放弃率指标卡，每张图配「指标解释卡」。
统一动效系统：4 个动效令牌 + 果冻开关 + Canvas 粒子 + 流体胶囊形变 + 页面转场，全部可一键降级。
真实业务规则：购物车同 SKU 合并、库存上限、券的门槛与互斥、运费规则、订单状态机、15 分钟超时释放库存。
零依赖部署：原生 JS + 内联 SVG 图，无 npm、无构建、无后端，直接上传静态服务器即可。

动效怎么体验

  • · 果冻开关：我的 → 设置，切换暗黑模式看全站换肤，按 Space / Enter 也能操作。
  • · 粒子系统：任意商品加购看飞入购物车；详情页收藏看爱心爆发；支付成功看彩带。
  • · 流体胶囊：底部 Tab 切换看指示器拉伸回弹；筛选 chips、规格胶囊点击有形变。
  • · 页面转场：任意跳转都有顶部进度条 + 淡入上浮，支持 View Transitions API。
  • · 降级验证：系统开启「减少动态效果」或打开省流模式，粒子与形变自动关闭。

怎么改这份原型

改数据
assets/js/data.js（商品、分类、订单、优惠券、看板数据）
改业务规则
assets/js/store.js（购物车合并、券门槛、运费、订单状态机）
改页面文案
tools/content_*.py 或直接改生成的 HTML
改产品备注
assets/js/notes.js（一处修改，抽屉与右侧面板同时生效）
改动效参数
assets/css/*.css 顶部的动效令牌
换部署目录
全局替换 ecommerce 为你的目录名，见 README.md

本项目为产品规划教学演示，所有商品、订单、用户数据均为本地 mock 数据，不涉及真实交易与真实隐私信息。