OmniGraffle原型案例 | 某APP产品原型PDF文件分享之二

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

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

yuanxignfenxiang

1、从 App 首页进入商城

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

1

2、说说那些商品列表

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

6

3、搜索商品

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

4

4、商品详情

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

5

5、购买流程

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

8

6、我的商城

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

3

7、我的订单

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

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

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

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

12

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

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

最后,奉上OmniGraffle项目特写照:

12

神秘代码

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

 

作者:老杨(微信:18515367283),Mac 流产品经理一枚,5年产品人,欢迎随时加我讨论相关问题!

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

您的赞赏,是对我创作的最大鼓励。

评论( 6

登录后参与评论
  1. 高端大气上档次的赶脚

    回复
    1. 回复

      谢谢支持

  2. :lol: :razz:

    回复
  3. 请教 原型是用什么做的?

    回复
    1. 回复

      是用 Mac 平台下的 OmniGraffle 做的

  4. 回复
加载中