Prototype

在线购物系统原型设计与交互说明

一、页面清单

本次原型共包含 6 个核心页面，覆盖前台与卖家后台全流程：

1. 前台：商品详情页、购买信息填写页
2. 后台：卖家登录页、商品管理页、意向订单页、密码修改页

二、各页面核心元素与交互说明

2.1 商品详情页（前台）

• 核心元素：商品图片、商品名称、商品价格、商品描述、「立即购买」按钮、商品状态标签
• 交互说明：
  • 商品在售时，「立即购买」按钮可点击，状态标签显示「在售」
  • 商品冻结 / 下架时，按钮置灰不可点击，状态标签显示对应状态
  • 点击「立即购买」跳转至购买信息填写页

2.2 购买信息填写页

• 核心元素：商品简要信息、联系人姓名输入框、联系电话输入框、备注输入框、「提交购买」按钮、「返回」按钮
• 交互说明：
  • 必填项为空时，提交按钮置灰
  • 提交成功后提示「购买意向已提交，卖家将联系您」，跳转回商品详情页
  • 点击返回回到商品详情页

2.3 卖家登录页

• 核心元素：账号输入框、密码输入框、「登录」按钮、错误提示区
• 交互说明：
  • 账号密码校验通过，跳转至商品管理页
  • 校验失败，页面显示错误提示信息

2.4 商品管理页（后台）

• 核心元素：当前在售商品卡片、历史商品列表、「发布新商品」按钮、「冻结」操作按钮
• 交互说明：
  • 展示当前商品的状态、基础信息
  • 点击「冻结」可手动将在售商品设置为冻结状态
  • 历史商品列表展示所有已下架、已售出商品
  • 点击「发布新商品」弹出发布表单，提交后上架新商品

2.5 意向订单页（后台）

• 核心元素：订单列表（商品信息、购买人信息、提交时间、订单状态）、「标记成功」按钮、「标记失败」按钮
• 交互说明：
  • 仅待交易状态的订单可操作
  • 点击标记成功 / 失败后，订单状态更新，商品状态同步变更
  • 操作完成后弹出确认提示

2.6 密码修改页

• 核心元素：原密码输入框、新密码输入框、确认密码输入框、「确认修改」按钮
• 交互说明：
  • 原密码校验错误提示对应信息
  • 两次新密码不一致时提示校验失败
  • 修改成功后提示「密码已更新」，自动跳转登录页