各位朋友們大家好，在上一篇文章中 LY@iPM分享了筆者從1.0.0開(kāi)始跟的一個(gè)項(xiàng)目——樂(lè)寵（后改名為「尾巴圈」）的SNS 論壇部分「OmniGraffle原型案例 | 某APP產(chǎn)品原型PDF文件分享」，今天我跟大家分享下 Ta 的B2C電商部分的原型設(shè)計(jì)。

1、從 App 首頁(yè)進(jìn)入商城

App底部 Tab有社區(qū)、商城，我們點(diǎn)擊「商城」進(jìn)入「樂(lè)寵商城」，下面簡(jiǎn)稱商城。商城采用的是經(jīng)典的宮格式導(dǎo)航設(shè)計(jì)（還有普通列表式、和瀑布流列表式、或兩者皆有等），主要有搜索欄、Banner 輪播、類目、新品、團(tuán)購(gòu)、購(gòu)物車、秒殺、品牌館、以及口碑商品。

2、說(shuō)說(shuō)那些商品列表

樂(lè)寵商城 v1.0.0的列表有6種，分別是，類目、品牌、好評(píng)、新品、秒殺、團(tuán)購(gòu)，顧名思義不必贅述。

3、搜索商品

點(diǎn)擊「商城首頁(yè)」的搜索欄，輸入關(guān)鍵字，即可搜索。搜索結(jié)果列表，按照銷量排序。如果搜不到，就提示用戶重新搜索。

4、商品詳情

商品詳情頁(yè)面，除了有商品的大圖展示以及全屏瀏覽模式、收藏和分享功能、商品詳細(xì)信息以外還有商品評(píng)價(jià)、添加購(gòu)物車、數(shù)量編輯、智能推薦商品和聯(lián)系客服功能。

5、購(gòu)買流程

挑選好心儀的商品之后，選擇好購(gòu)買的數(shù)量，就可以將商品添加到購(gòu)物車中了。進(jìn)入購(gòu)物車頁(yè)面之后，仍然可以調(diào)整購(gòu)買商品的數(shù)量。點(diǎn)擊「提交訂單」后，進(jìn)入填寫(xiě)訂單信息頁(yè)面，當(dāng)沒(méi)有收件人信息的時(shí)候，App 會(huì)讓用戶先填寫(xiě)收件人信息，如果有一項(xiàng)或多項(xiàng)收件人信息，App 還支持選擇和編輯該信息。填寫(xiě)完成后，點(diǎn)擊提交訂單，新的訂單就生成了，此時(shí)在「我的訂單」中的待付款訂單中就可以看到該訂單了。點(diǎn)擊「在線支付」按鈕，跳進(jìn)「收銀臺(tái)」界面，該界面展示該訂單的單號(hào)，應(yīng)付金額，以及可選的支付方式。支付成功后，提示用戶支付成功！新訂單的生命周期是30分鐘，30分鐘內(nèi)訂單若沒(méi)有被支付，系統(tǒng)將會(huì)殺掉該訂單，但在訂單到期之前10分鐘，系統(tǒng)會(huì)自動(dòng)提示用戶將有一個(gè)訂單因未支付而將被取消。

6、我的商城

點(diǎn)擊首頁(yè)右上角的「?jìng)€(gè)人中心」icon進(jìn)入右抽屜，點(diǎn)擊我的商城折疊，可以看到「我的訂單」、「我的收藏」、「我的地址」。

7、我的訂單

我的訂單分為四種狀態(tài)：待付款、待發(fā)貨、待收貨、已完成（比較特殊）。

其中待付款訂單：訂單狀態(tài)是「待付款」，詳情頁(yè)面上有「支付按鈕」，訂單總額，運(yùn)費(fèi)，訂單內(nèi)容，收貨人信息，支付方式，配送方式和「取消訂單」按鈕。

待發(fā)貨訂單，除了在「訂單狀態(tài)」字段上與「待付款」不同之外為「等待發(fā)貨」，其它字段都基本一致。

而待收貨訂單，與待發(fā)貨訂單也基本一致，只是多了「確認(rèn)收貨」按鈕。

針對(duì)，已完成訂單，則有三種子狀態(tài)，「已評(píng)價(jià)」、「待評(píng)價(jià)」、「退款中」。

哈哈，說(shuō)到這兒肯定還有好多細(xì)節(jié)沒(méi)有說(shuō)得特別透徹，不過(guò)發(fā)現(xiàn)篇幅已經(jīng)不短了！詳細(xì)的可以去本文的最后神秘代碼繼續(xù)挖掘，那里有高清的 pdf 噢！

最后，奉上OmniGraffle項(xiàng)目特寫(xiě)照：

神秘代碼

鏈接: http://pan.baidu.com/s/1kUlmSKZ 密碼: w2xj

作者：老楊（微信：18515367283），Mac 流產(chǎn)品經(jīng)理一枚，5年產(chǎn)品人，歡迎隨時(shí)加我討論相關(guān)問(wèn)題！

本文由 @老楊 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。