電商產(chǎn)品的后臺(tái)設(shè)計(jì)較為復(fù)雜，考慮的因素有很多。本文通過(guò)對(duì)具體設(shè)計(jì)原型的拆解分析，從商城首頁(yè)、商品詳情+購(gòu)物車管理、支付結(jié)果、地址管理、訂單管理、紅包管理、后臺(tái)等7個(gè)方面，全面介紹電商后臺(tái)的設(shè)計(jì)重點(diǎn)，望對(duì)你有所幫助。

電商產(chǎn)品功能設(shè)計(jì)較難的部分是后臺(tái)，用戶使用的客戶端會(huì)有推薦或千人千面的展示，這些還是依賴后臺(tái)算法等。

道長(zhǎng)曾電商創(chuàng)業(yè)一年多，APP端的功能設(shè)計(jì)到后面基本沒(méi)什么大的改動(dòng)，最多的是后端需要配合各種活動(dòng)去設(shè)計(jì)，功能及其復(fù)雜。另外就是商品庫(kù)存管理系統(tǒng)和物流訂單管理系統(tǒng)，這里會(huì)涉及到商品出入庫(kù)和商品退單的核銷在里面，相對(duì)比較復(fù)雜。

一般小公司自己開發(fā)不劃算，養(yǎng)那么多技術(shù)員需要很多錢、項(xiàng)目做起來(lái)周期也很長(zhǎng)，建議使用第三方的庫(kù)存管理系統(tǒng)，這里就不廣告了。物流管理一般就直接使用對(duì)應(yīng)物流公司的系統(tǒng)，攬件人員通過(guò)靶槍掃描就能把物件信息錄入到系統(tǒng)，統(tǒng)計(jì)每天的單量是很好用的。

OK，本期道長(zhǎng)會(huì)拿一個(gè)我自己主持的電商APP簡(jiǎn)易版本出來(lái)和大家分享。

一、功能結(jié)構(gòu)

二、商品

1. 商城首頁(yè)

商城首頁(yè)在規(guī)劃的時(shí)候需要結(jié)合自己的SKU數(shù)量，如果數(shù)量不夠那么做搜索是沒(méi)有必要的，做分類也要想好是否真的需要，道長(zhǎng)碰見過(guò)商城第一版本運(yùn)營(yíng)和客服部門就提出一定要搜索，不然用戶想去搜索自己想要的商品怎么辦，分類一定要，擔(dān)心用戶搞不清楚哪個(gè)商品是屬于哪個(gè)分類。

——這里的思想就是本末倒置的，拿著功能去找需求，需求方完全沒(méi)想SKU數(shù)量本來(lái)就很少，翻幾頁(yè)就到了，另外初期的商城用戶也不知道搜什么，注意兩點(diǎn)：

1. 搜索是高級(jí)功能，隨著產(chǎn)品版本迭代、品類豐富度夠高、用戶目標(biāo)足夠明確的時(shí)候才會(huì)用到；
2. 分類也是一種導(dǎo)航，目的是提高查找商品的效率，但帶來(lái)便利的同時(shí)也增加了使用成本，慎重增加。

2. 商品詳情+購(gòu)物車管理

2-1 詳情頁(yè)面

結(jié)構(gòu)相對(duì)簡(jiǎn)單，第一部分是頂部的頭圖區(qū)域展示商品的大圖，支持多張圖片來(lái)回切換，也可以在這里放短視頻，和圖片配合著使用。頭圖下方的商品基本信息是一個(gè)單獨(dú)區(qū)域。

第二部分是商品詳細(xì)信息，這部分會(huì)包含很長(zhǎng)的圖文信息，這里產(chǎn)品經(jīng)理可以規(guī)劃出來(lái)有這么個(gè)區(qū)域就好了，實(shí)現(xiàn)方式上采用H5，告訴開發(fā)的同學(xué)這里是個(gè)富文本區(qū)域，運(yùn)營(yíng)在填寫的時(shí)候可以填寫他們需要的內(nèi)容。

第三部分是最底部常駐操作面板，會(huì)有跳轉(zhuǎn)到購(gòu)物車的入口、加入購(gòu)物車和立即購(gòu)買兩個(gè)按鈕，點(diǎn)擊后會(huì)跳出截圖里編號(hào)2的原型，用戶需要確認(rèn)商品信息和數(shù)量，才會(huì)進(jìn)入到下一步。

“選好了”點(diǎn)擊跳轉(zhuǎn)邏輯：

1. 操作源：立即購(gòu)買，跳轉(zhuǎn)到編號(hào)為5的結(jié)算頁(yè)面；
2. 操作源：加入購(gòu)物車，把剛才對(duì)一個(gè)的商品加入購(gòu)物車，并停留在商品詳情頁(yè)面。

2-2 購(gòu)物車頁(yè)面

包括截圖里編號(hào)3、4的頁(yè)面，頁(yè)面4是頁(yè)面三點(diǎn)擊導(dǎo)航條右上角的“編輯”按鈕的狀態(tài)，購(gòu)物車頁(yè)面主要注意的產(chǎn)品邏輯是，用戶沒(méi)有結(jié)算的商品如果沒(méi)有庫(kù)存的時(shí)候怎么處理？這里有兩個(gè)場(chǎng)景要照顧到：

• 場(chǎng)景一：用戶新打開APP，進(jìn)入該頁(yè)面時(shí)可以先請(qǐng)求數(shù)據(jù)，沒(méi)有庫(kù)存的商品就直接從列表刪除；
• 場(chǎng)景二：用戶在APP其他頁(yè)面點(diǎn)擊進(jìn)入購(gòu)物車頁(yè)面時(shí)，商品狀態(tài)可以在點(diǎn)擊“結(jié)算“按鈕時(shí)再做一次檢測(cè)，如果商品庫(kù)存空了則提示用戶沒(méi)有庫(kù)存的商品，用戶確認(rèn)后可以繼續(xù)結(jié)算。

2-3 優(yōu)惠管理

編號(hào)6的頁(yè)面就是簡(jiǎn)單的優(yōu)惠券管理，這里有兩個(gè)產(chǎn)品邏輯需要注意：

• 第一個(gè)是不向用戶展示已經(jīng)失效或該商品不能使用的優(yōu)惠券，失效了和該商品不能使用的優(yōu)惠券展示出來(lái)對(duì)用戶“結(jié)算“這個(gè)任務(wù)沒(méi)有任何幫助；
• 第二個(gè)邏輯是優(yōu)先選擇面額最大的那個(gè)，這里盡量讓用戶感受到優(yōu)惠力度，讓用戶更容易做購(gòu)買這個(gè)決策。

3. 支付結(jié)果

支付結(jié)果就成功和失敗兩種：

3-1 支付失敗

用戶取消支付或者是扣款是沒(méi)有足夠余額，如截圖里面編號(hào)1的原型截圖，頁(yè)面需要向用戶展示該訂單的詳細(xì)信息，這里有幾個(gè)邏輯需要產(chǎn)品經(jīng)理關(guān)注：

第一個(gè)是庫(kù)存被占用，可以設(shè)定一個(gè)時(shí)間限制，比如24小時(shí)內(nèi)用戶沒(méi)有支付則自動(dòng)把庫(kù)存還回去，并且在頁(yè)面上告訴用戶這個(gè)事情，這里的時(shí)間段產(chǎn)品經(jīng)理可根據(jù)自己的需求設(shè)定。

第二個(gè)是優(yōu)惠券被占用，如果用戶退出該頁(yè)面去支付別的商品，而被占用的優(yōu)惠券在那個(gè)商品上也能用，此時(shí)就優(yōu)先把優(yōu)惠券用到那邊，這里的產(chǎn)品邏輯主要是考慮訂單履約效率，記住，優(yōu)惠券存在的另一個(gè)目的是提高用戶“支付“決策。

3-2 支付成功

支付成功后默認(rèn)如截圖編號(hào)為2的原型，這個(gè)頁(yè)面用戶停留時(shí)間不會(huì)很長(zhǎng)，我們主要看“發(fā)紅包“功能，發(fā)紅包功能的設(shè)計(jì)要考慮好兩個(gè)產(chǎn)品邏輯，第一個(gè)是對(duì)用戶來(lái)講需要”利己“，自己干這件事背后的動(dòng)力是我干了有好處，第二個(gè)是”被需要“，用戶發(fā)紅包給別人的時(shí)候，別人領(lǐng)取到好處后會(huì)給發(fā)紅包的人營(yíng)造一種被需要的心理作用。

跳轉(zhuǎn)說(shuō)明：點(diǎn)擊“發(fā)紅包“在當(dāng)前頁(yè)面底部彈出編號(hào)3的樣式；

3-3 領(lǐng)取紅包

如截圖里面編號(hào)4的原型，這里道長(zhǎng)做的頁(yè)面比較死板，各位在做自己產(chǎn)品的時(shí)候一定要從產(chǎn)品經(jīng)理的角度出發(fā)，這個(gè)頁(yè)面上出現(xiàn)哪些內(nèi)容才是正確的，以及這么做的目的是什么？

比如，我們是不是可以把用戶可以領(lǐng)取多少錢顯示出來(lái)？如果能領(lǐng)取99元，那肯定效果會(huì)比沒(méi)有寫明領(lǐng)多少好；

另外頁(yè)面底部可以做一個(gè)滾動(dòng)的領(lǐng)取記錄榜，可以用真實(shí)的用戶數(shù)據(jù)，也或者是造一些比較好看的假數(shù)據(jù)上去。

4. 地址管理

地址管理沒(méi)什么重要的產(chǎn)品邏輯，功能邏輯需要注意兩個(gè)場(chǎng)景：

4-1 場(chǎng)景一：用戶沒(méi)有任何地址

用戶第一次進(jìn)入或者是把地址全部刪掉的情況，用戶在結(jié)算頁(yè)面（文章前面第2節(jié)編號(hào)5）點(diǎn)擊編輯地址的時(shí)候，直接進(jìn)入編號(hào)2的添加地址頁(yè)面；

4-2 場(chǎng)景二：用戶有地址

那用戶就會(huì)進(jìn)入編號(hào)1的地址管理頁(yè)面，可以重新編輯地址和修改默認(rèn)收件地址，默認(rèn)收件地址選擇后置頂。點(diǎn)擊地址前面的單選按鈕重新設(shè)定默認(rèn)地址時(shí)，如果是從結(jié)算頁(yè)面過(guò)來(lái)的，則可以直接跳回到結(jié)算頁(yè)面；如果是從個(gè)人中心的地址管理過(guò)來(lái)的，則可跳回到個(gè)人中心頁(yè)面。

5. 訂單管理

訂單管理頁(yè)面邏輯就簡(jiǎn)單多了，待支付訂單可以支付、待收貨訂單可以查看物流、結(jié)算的訂單可以再次購(gòu)買。這里有幾個(gè)功能邏輯需要考慮到：

• 第一個(gè)是待支付訂單商品沒(méi)有庫(kù)存的時(shí)候，和前面購(gòu)物車頁(yè)面那里的處理機(jī)制一樣；
• 第二個(gè)是已結(jié)束的訂單，用戶再次購(gòu)買時(shí)，之前購(gòu)買過(guò)的商品下架或者沒(méi)有庫(kù)存的時(shí)候，可以選擇告訴用戶沒(méi)有了的商品，留下可再次購(gòu)買的商品，點(diǎn)擊后直接跳轉(zhuǎn)到結(jié)算頁(yè)面，不經(jīng)過(guò)購(gòu)物車頁(yè)面。

6. 紅包管理

好了，比重重要的地方是紅包管理，這個(gè)是個(gè)很溜的三級(jí)分銷工具，特別是拉新效果極其好，百試不爽。需要注意的點(diǎn)有：

6-1 賺和用

需要考慮的產(chǎn)品邏輯有點(diǎn)類似積分，就是用戶賺得爽，花的爽，以前道長(zhǎng)創(chuàng)業(yè)的時(shí)候在紅包頁(yè)面不定期推出可以使用紅包購(gòu)買的商品，基本是上線就賣空。不用單獨(dú)在全站的商品里面做是否可以使用紅包的功能，不做的原因是接下來(lái)的第二點(diǎn)。

6-2 被屏蔽風(fēng)險(xiǎn)

多級(jí)分銷首先在法律上是行不通的，超過(guò)3級(jí)就是傳銷，這種發(fā)紅包機(jī)制下限沒(méi)法限制，限制了效果就不好。這里道長(zhǎng)的設(shè)計(jì)改成只有A分享給BCD、B分享給ACD這樣的策略，效果肯定會(huì)比我以前做的三級(jí)分銷效果差。

所以這個(gè)原型里面我的紅包是可以用在全站的商品里面的，使用該方法的產(chǎn)品經(jīng)理需要考慮好的功能邏輯是，在發(fā)布商品的時(shí)候多一個(gè)勾選是否可用紅包、以及最高可以用多少。

（被屏蔽是指微信，一般這種會(huì)被判定成誘導(dǎo)分享，另外是同行看見你效果好就會(huì)舉報(bào)你，也會(huì)帶來(lái)被屏蔽的風(fēng)險(xiǎn)。我當(dāng)時(shí)創(chuàng)業(yè)做的時(shí)候被舉報(bào)過(guò)，然后微信封了，我們當(dāng)時(shí)的策略是動(dòng)態(tài)IP地址。另外一家友商，我記得好像有200w+的粉絲，頭一秒鐘還跟我們講他們的胡歌霍建華CP抽北海道機(jī)票的效果多好，第二秒鐘就被微信封了公眾號(hào)）

7. 后臺(tái)

這部分內(nèi)容看文字沒(méi)啥東西，邏輯挺多的，我貼幾張圖這里，伙伴們下載源文件自己看吧。

截圖：

本期到此結(jié)束，前面兩期的源文件也會(huì)在這一期的文件里面，想穿越回去看前兩期的分析嗎？

相關(guān)閱讀

第一期：某社區(qū)APP完整原型案例（附源文件下載）

某社區(qū)APP完整原型案例-第二期（附源文件下載）

產(chǎn)品經(jīng)理課程：APP產(chǎn)品經(jīng)理入門實(shí)戰(zhàn)課程（交互、原型、方法論）

……………………………………………… 我是美麗的分界線 ………………………………………………

源文件下載地址：

鏈接: https://pan.baidu.com/s/14Qke2b7iiHG6_T6w7Ghrdw

密碼: 5i4t

如果你想跟我交流原型設(shè)計(jì)技巧，歡迎加QQ群：159912926

#專欄作家#

芒果道長(zhǎng)，人人都是產(chǎn)品經(jīng)理專欄作家，起點(diǎn)學(xué)院特聘導(dǎo)師。騰訊課堂【30天教你做一個(gè)APP】作者。

本文獨(dú)家首發(fā)于人人都是產(chǎn)品經(jīng)理，未經(jīng)本站許可，不得轉(zhuǎn)載，謝謝合作

題圖來(lái)自 Pexels，基于 CC0 協(xié)議