各位朋友们大家好，在上一篇文章中 LY@iPM分享了笔者从1.0.0开始跟的一个项目——乐宠（后改名为「尾巴圈」）的SNS 论坛部分「OmniGraffle原型案例 | 某APP产品原型PDF文件分享」，今天我跟大家分享下 Ta 的B2C电商部分的原型设计。

1、从 App 首页进入商城

App底部 Tab有社区、商城，我们点击「商城」进入「乐宠商城」，下面简称商城。商城采用的是经典的宫格式导航设计（还有普通列表式、和瀑布流列表式、或两者皆有等），主要有搜索栏、Banner 轮播、类目、新品、团购、购物车、秒杀、品牌馆、以及口碑商品。

2、说说那些商品列表

乐宠商城 v1.0.0的列表有6种，分别是，类目、品牌、好评、新品、秒杀、团购，顾名思义不必赘述。

3、搜索商品

点击「商城首页」的搜索栏，输入关键字，即可搜索。搜索结果列表，按照销量排序。如果搜不到，就提示用户重新搜索。

4、商品详情

商品详情页面，除了有商品的大图展示以及全屏浏览模式、收藏和分享功能、商品详细信息以外还有商品评价、添加购物车、数量编辑、智能推荐商品和联系客服功能。

5、购买流程

挑选好心仪的商品之后，选择好购买的数量，就可以将商品添加到购物车中了。进入购物车页面之后，仍然可以调整购买商品的数量。点击「提交订单」后，进入填写订单信息页面，当没有收件人信息的时候，App 会让用户先填写收件人信息，如果有一项或多项收件人信息，App 还支持选择和编辑该信息。填写完成后，点击提交订单，新的订单就生成了，此时在「我的订单」中的待付款订单中就可以看到该订单了。点击「在线支付」按钮，跳进「收银台」界面，该界面展示该订单的单号，应付金额，以及可选的支付方式。支付成功后，提示用户支付成功！新订单的生命周期是30分钟，30分钟内订单若没有被支付，系统将会杀掉该订单，但在订单到期之前10分钟，系统会自动提示用户将有一个订单因未支付而将被取消。

6、我的商城

点击首页右上角的「个人中心」icon进入右抽屉，点击我的商城折叠，可以看到「我的订单」、「我的收藏」、「我的地址」。

7、我的订单

我的订单分为四种状态：待付款、待发货、待收货、已完成（比较特殊）。

其中待付款订单：订单状态是「待付款」，详情页面上有「支付按钮」，订单总额，运费，订单内容，收货人信息，支付方式，配送方式和「取消订单」按钮。

待发货订单，除了在「订单状态」字段上与「待付款」不同之外为「等待发货」，其它字段都基本一致。

而待收货订单，与待发货订单也基本一致，只是多了「确认收货」按钮。

针对，已完成订单，则有三种子状态，「已评价」、「待评价」、「退款中」。

哈哈，说到这儿肯定还有好多细节没有说得特别透彻，不过发现篇幅已经不短了！详细的可以去本文的最后神秘代码继续挖掘，那里有高清的 pdf 噢！

最后，奉上OmniGraffle项目特写照：

神秘代码

链接: http://pan.baidu.com/s/1kUlmSKZ 密码: w2xj

作者：老杨（微信：18515367283），Mac 流产品经理一枚，5年产品人，欢迎随时加我讨论相关问题！

本文由 @老杨 原创发布于人人都是产品经理 ，未经许可，禁止转载。