订水商城H5实战教程-01需求分析

2023-10-20 20:52

本文主要是介绍订水商城H5实战教程-01需求分析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 1 用户分析
  • 2 模块分析
  • 3 原型设计
    • 3.1 首页
    • 3.2 商城
    • 3.3 一键订购
    • 3.4 我的
    • 3.5 确认订单
    • 3.6 地址管理
    • 3.7 编辑地址
    • 3.8 搜索
    • 3.9 搜索结果
    • 3.10 充值
    • 3.11 我的订单
    • 3.12 开票信息
    • 3.13 优惠券
    • 3.14 我的空桶
    • 3.15 商品详情
    • 3.16 购物车
    • 3.17 门店信息
    • 3.18 订单详情
  • 总结

生活中,我们经常有直饮水的需求。有的老旧小区本身管网比较旧,自来水的口感不太好,有的是因为经常性的断水断电有送水的需求。

原来送水是通过发送小卡片,或者上门推销。有了公众号这个载体后,市民就可以关注公众号来订水。我们本次的实战教程就是围绕网上订水这个实际的生活需求,利用H5的技术来开发一款在线订水工具。既方便市民,也方便送水企业提高营销水平和工作效率。

1 用户分析

我们的订水商城,分为三类角色,分别是市民、企业、送水工

市民登录后可以在线的下单,支付,评价。

企业登录后,可以维护类目,商品,确认订单,选择送水工

送水工可以在线接单,按照目的地和订单内容进行配送。

2 模块分析

我们的商城功能总体分为类目管理、商品管理、订单管理、发票管理、送水工管理、店铺管理、用户管理等几个模块

类目管理由管理员进行维护,可以维护类目的名称和序号。

商品管理由管理员进行维护,可以维护商品的基本信息,包括商品的轮播图、名称、单价、详情、状态等

订单管理,普通用户在移动端完成商品的选购、支付,支付成功后形成订单。管理员可以查看订单信息,选择送水工进行派送。送水完毕后,普通用户可以进行评价

发票管理,普通用户可以提交自己的开票信息,可以在订单上申请开票。管理员在收到开票申请后进行审核,审核通过后将电子发票上传,通过邮箱的形式发送给用户。

送水工管理,管理员可以录入送水工的信息,在派单的时候可以选择人员。

店铺管理,管理员可以维护店铺的基本信息,普通用户可以进行查看。

用户管理,用户首次使用的时候需要进行登录,录入基本信息。

3 原型设计

依据我们的需求,使用原型工具来设计界面

3.1 首页

在这里插入图片描述
首页分成几个部分

  • 第一部分是轮播图,主要是广告,点击广告的时候可以打开公众号的宣传文章
  • 跑马灯主要是一些推荐活动
  • 宫格导航,列出了重要的分类信息,点击分类可以跳转到商城页面,默认选择该分类
  • 热销商品以双列的形式列出热销商品,点击加号可以加入购物车,点击更多跳转到商城页面
  • 底部导航条,列出主要的模块,包括首页、商城、一键订购、我的

3.2 商城

在这里插入图片描述

  • 商城页面以侧边栏导航的形式列出所有的分类,点击分类的时候可以切换
  • 点击某个分类右侧显示该分类的商品,列出商品的图片、名称、价格,点击加号可以加入购物车
  • 优惠的话,点击更多可以跳转到优惠券页面
  • 空桶的话,点击购买可以跳转到空桶列表页面
  • 底部是购物车的功能条,如果点击加号,购物车会出现具体的数字,同时计算总价,点击去结算按钮跳转到确认订单页

3.3 一键订购

在这里插入图片描述

  • 我的水票列出当前可以使用的水票信息,显示可以用的数量,已使用的数量。点击一键订水进入到订单确认页面

3.4 我的

在这里插入图片描述

  • 第一部分显示用户的头像、昵称,点击分享图标可以分享给别人
  • 第二部分列出当前可以使用的水票,点击电子水票打开一键订购页面,看到具体的列表
  • 第三部分列出当前空桶的信息,点击我的空桶进入到具体的页面
  • 点击优惠券进入到优惠券列表页面
  • 第四部分显示用户的余额,点击充值跳转到充值页面
  • 我的订单,列出每种状态下订单的数量,点击状态的名称跳转到我的订单页面
  • 我的信息相当于模块导航,点击某个模块跳转到对应的页面
  • 商户信息列出当前店铺的具体信息

3.5 确认订单

在这里插入图片描述
凡是从购物车页面点击去结算按钮,跳转到该页面,列出选购的商品,显示配送地址,可以在线留言,选择支付方式,选好之后点击去下单。

  • 如果选择线上支付,拉起微信支付
  • 如果选择货到付款,需要送水工最终完成订单
  • 如果选择余额支付,要扣除当前用户的余额,扣除时要计算余额是否充足

3.6 地址管理

在这里插入图片描述

  • 列出当前用户的地址
  • 点击开关按钮可以设置地址为默认地址
  • 点击新增地址跳转到编辑地址页面

3.7 编辑地址

在这里插入图片描述
录入地址的基本信息,点击保存地址跳转到列表页面

3.8 搜索

在这里插入图片描述

  • 首页上点击搜索图标进入该页面
  • 在搜索框里输入关键词进入到搜索结果页面
  • 热门搜索列出常见的搜索词,点击搜索词进入到搜索结果页
  • 历史搜索显示历史输入过的搜索词,点击删除图标清空搜索词

3.9 搜索结果

在这里插入图片描述

  • 以双列的形式展现搜索结果
  • 点击加号加入购物车
  • 底部的购物车功能条,显示商品数量、总价
  • 点击去结算进入到订单确认页面

3.10 充值

在这里插入图片描述

输入充值金额,点击购买累加金额

3.11 我的订单

在这里插入图片描述
以页签的形式列出该状态下的订单信息

3.12 开票信息

在这里插入图片描述
录入开票的基本信息

3.13 优惠券

在这里插入图片描述
列出可以使用的优惠券

3.14 我的空桶

在这里插入图片描述
列出购买的空桶,点击退桶提交申请

3.15 商品详情

在这里插入图片描述
展示商品的详情信息,可以选择购买的数量,点击去结算进入到订单确认页面

3.16 购物车

在这里插入图片描述
点击购物车的图标弹出购物车列表,可以调整数量,点击清空按钮清空购物车,点击去结算跳转到订单确认页面

3.17 门店信息

在这里插入图片描述
在首页点击店铺的名称,跳转到店铺信息页面

3.18 订单详情

在这里插入图片描述
列出订单额详细信息,点击再来一单跳转到商城页面

总结

我们本篇使用原型工具分析了订水商城应该具备的功能,先把功能分析好了,画好图纸才能便于后续的施工,否则边做边想一个是容易返工,有时候也浪费了大量的时间。

这篇关于订水商城H5实战教程-01需求分析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/249666

相关文章

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

MySQL中的LENGTH()函数用法详解与实例分析

《MySQL中的LENGTH()函数用法详解与实例分析》MySQLLENGTH()函数用于计算字符串的字节长度,区别于CHAR_LENGTH()的字符长度,适用于多字节字符集(如UTF-8)的数据验证... 目录1. LENGTH()函数的基本语法2. LENGTH()函数的返回值2.1 示例1:计算字符串

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置:搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

PowerShell中15个提升运维效率关键命令实战指南

《PowerShell中15个提升运维效率关键命令实战指南》作为网络安全专业人员的必备技能,PowerShell在系统管理、日志分析、威胁检测和自动化响应方面展现出强大能力,下面我们就来看看15个提升... 目录一、PowerShell在网络安全中的战略价值二、网络安全关键场景命令实战1. 系统安全基线核查

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien