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

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

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

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

OK，本期道長會拿一個我自己主持的電商APP簡易版本出來和大家分享。

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

二、商品

1. 商城首頁

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

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

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

2. 商品詳情+購物車管理

2-1 詳情頁面

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

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

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

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

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

2-2 購物車頁面

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

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

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

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

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

3. 支付結(jié)果

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

3-1 支付失敗

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

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

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

3-2 支付成功

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

跳轉(zhuǎn)說明：點擊“發(fā)紅包“在當前頁面底部彈出編號3的樣式；

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

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

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

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

4. 地址管理

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

4-1 場景一：用戶沒有任何地址

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

4-2 場景二：用戶有地址

那用戶就會進入編號1的地址管理頁面，可以重新編輯地址和修改默認收件地址，默認收件地址選擇后置頂。點擊地址前面的單選按鈕重新設(shè)定默認地址時，如果是從結(jié)算頁面過來的，則可以直接跳回到結(jié)算頁面；如果是從個人中心的地址管理過來的，則可跳回到個人中心頁面。

5. 訂單管理

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

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

6. 紅包管理

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

6-1 賺和用

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

6-2 被屏蔽風險

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

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

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

7. 后臺

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

截圖：

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

相關(guān)閱讀

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

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

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

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

源文件下載地址：

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

密碼: 5i4t

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

#專欄作家#

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

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

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