各位朋友們大家好，在上一篇文章中 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年產品人，歡迎隨時加我討論相關問題！

本文由 @老楊 原創發布于人人都是產品經理?，未經許可，禁止轉載。