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

原来送水是通过发送小卡片，或者上门推销。有了公众号这个载体后，市民就可以关注公众号来订水。我们本次的实战教程就是围绕网上订水这个实际的生活需求，利用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 订单详情

列出订单额详细信息，点击再来一单跳转到商城页面

总结

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