OmniGraffle原型案例

人人都是产品经理 • 8年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

各位朋友们大家好，在上一篇文章中 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分钟，系统会自动提示用户将有一个订单因未支付而将被取消。