電商后臺設計難?搞清這7個點再說(附RP源文件下載)
電商產品的后臺設計較為復雜,考慮的因素有很多。本文通過對具體設計原型的拆解分析,從商城首頁、商品詳情+購物車管理、支付結果、地址管理、訂單管理、紅包管理、后臺等7個方面,全面介紹電商后臺的設計重點,望對你有所幫助。
電商產品功能設計較難的部分是后臺,用戶使用的客戶端會有推薦或千人千面的展示,這些還是依賴后臺算法等。
道長曾電商創(chuàng)業(yè)一年多,APP端的功能設計到后面基本沒什么大的改動,最多的是后端需要配合各種活動去設計,功能及其復雜。另外就是商品庫存管理系統(tǒng)和物流訂單管理系統(tǒng),這里會涉及到商品出入庫和商品退單的核銷在里面,相對比較復雜。
一般小公司自己開發(fā)不劃算,養(yǎng)那么多技術員需要很多錢、項目做起來周期也很長,建議使用第三方的庫存管理系統(tǒng),這里就不廣告了。物流管理一般就直接使用對應物流公司的系統(tǒng),攬件人員通過靶槍掃描就能把物件信息錄入到系統(tǒng),統(tǒng)計每天的單量是很好用的。
OK,本期道長會拿一個我自己主持的電商APP簡易版本出來和大家分享。
一、功能結構
二、商品
1. 商城首頁
商城首頁在規(guī)劃的時候需要結合自己的SKU數(shù)量,如果數(shù)量不夠那么做搜索是沒有必要的,做分類也要想好是否真的需要,道長碰見過商城第一版本運營和客服部門就提出一定要搜索,不然用戶想去搜索自己想要的商品怎么辦,分類一定要,擔心用戶搞不清楚哪個商品是屬于哪個分類。
——這里的思想就是本末倒置的,拿著功能去找需求,需求方完全沒想SKU數(shù)量本來就很少,翻幾頁就到了,另外初期的商城用戶也不知道搜什么,注意兩點:
- 搜索是高級功能,隨著產品版本迭代、品類豐富度夠高、用戶目標足夠明確的時候才會用到;
- 分類也是一種導航,目的是提高查找商品的效率,但帶來便利的同時也增加了使用成本,慎重增加。
2. 商品詳情+購物車管理
2-1 詳情頁面
結構相對簡單,第一部分是頂部的頭圖區(qū)域展示商品的大圖,支持多張圖片來回切換,也可以在這里放短視頻,和圖片配合著使用。頭圖下方的商品基本信息是一個單獨區(qū)域。
第二部分是商品詳細信息,這部分會包含很長的圖文信息,這里產品經理可以規(guī)劃出來有這么個區(qū)域就好了,實現(xiàn)方式上采用H5,告訴開發(fā)的同學這里是個富文本區(qū)域,運營在填寫的時候可以填寫他們需要的內容。
第三部分是最底部常駐操作面板,會有跳轉到購物車的入口、加入購物車和立即購買兩個按鈕,點擊后會跳出截圖里編號2的原型,用戶需要確認商品信息和數(shù)量,才會進入到下一步。
“選好了”點擊跳轉邏輯:
- 操作源:立即購買,跳轉到編號為5的結算頁面;
- 操作源:加入購物車,把剛才對一個的商品加入購物車,并停留在商品詳情頁面。
2-2 購物車頁面
包括截圖里編號3、4的頁面,頁面4是頁面三點擊導航條右上角的“編輯”按鈕的狀態(tài),購物車頁面主要注意的產品邏輯是,用戶沒有結算的商品如果沒有庫存的時候怎么處理?這里有兩個場景要照顧到:
- 場景一:用戶新打開APP,進入該頁面時可以先請求數(shù)據(jù),沒有庫存的商品就直接從列表刪除;
- 場景二:用戶在APP其他頁面點擊進入購物車頁面時,商品狀態(tài)可以在點擊“結算“按鈕時再做一次檢測,如果商品庫存空了則提示用戶沒有庫存的商品,用戶確認后可以繼續(xù)結算。
2-3 優(yōu)惠管理
編號6的頁面就是簡單的優(yōu)惠券管理,這里有兩個產品邏輯需要注意:
- 第一個是不向用戶展示已經失效或該商品不能使用的優(yōu)惠券,失效了和該商品不能使用的優(yōu)惠券展示出來對用戶“結算“這個任務沒有任何幫助;
- 第二個邏輯是優(yōu)先選擇面額最大的那個,這里盡量讓用戶感受到優(yōu)惠力度,讓用戶更容易做購買這個決策。
3. 支付結果
支付結果就成功和失敗兩種:
3-1 支付失敗
用戶取消支付或者是扣款是沒有足夠余額,如截圖里面編號1的原型截圖,頁面需要向用戶展示該訂單的詳細信息,這里有幾個邏輯需要產品經理關注:
第一個是庫存被占用,可以設定一個時間限制,比如24小時內用戶沒有支付則自動把庫存還回去,并且在頁面上告訴用戶這個事情,這里的時間段產品經理可根據(jù)自己的需求設定。
第二個是優(yōu)惠券被占用,如果用戶退出該頁面去支付別的商品,而被占用的優(yōu)惠券在那個商品上也能用,此時就優(yōu)先把優(yōu)惠券用到那邊,這里的產品邏輯主要是考慮訂單履約效率,記住,優(yōu)惠券存在的另一個目的是提高用戶“支付“決策。
3-2 支付成功
支付成功后默認如截圖編號為2的原型,這個頁面用戶停留時間不會很長,我們主要看“發(fā)紅包“功能,發(fā)紅包功能的設計要考慮好兩個產品邏輯,第一個是對用戶來講需要”利己“,自己干這件事背后的動力是我干了有好處,第二個是”被需要“,用戶發(fā)紅包給別人的時候,別人領取到好處后會給發(fā)紅包的人營造一種被需要的心理作用。
跳轉說明:點擊“發(fā)紅包“在當前頁面底部彈出編號3的樣式;
3-3 領取紅包
如截圖里面編號4的原型,這里道長做的頁面比較死板,各位在做自己產品的時候一定要從產品經理的角度出發(fā),這個頁面上出現(xiàn)哪些內容才是正確的,以及這么做的目的是什么?
比如,我們是不是可以把用戶可以領取多少錢顯示出來?如果能領取99元,那肯定效果會比沒有寫明領多少好;
另外頁面底部可以做一個滾動的領取記錄榜,可以用真實的用戶數(shù)據(jù),也或者是造一些比較好看的假數(shù)據(jù)上去。
4. 地址管理
地址管理沒什么重要的產品邏輯,功能邏輯需要注意兩個場景:
4-1 場景一:用戶沒有任何地址
用戶第一次進入或者是把地址全部刪掉的情況,用戶在結算頁面(文章前面第2節(jié)編號5)點擊編輯地址的時候,直接進入編號2的添加地址頁面;
4-2 場景二:用戶有地址
那用戶就會進入編號1的地址管理頁面,可以重新編輯地址和修改默認收件地址,默認收件地址選擇后置頂。點擊地址前面的單選按鈕重新設定默認地址時,如果是從結算頁面過來的,則可以直接跳回到結算頁面;如果是從個人中心的地址管理過來的,則可跳回到個人中心頁面。
5. 訂單管理
訂單管理頁面邏輯就簡單多了,待支付訂單可以支付、待收貨訂單可以查看物流、結算的訂單可以再次購買。這里有幾個功能邏輯需要考慮到:
- 第一個是待支付訂單商品沒有庫存的時候,和前面購物車頁面那里的處理機制一樣;
- 第二個是已結束的訂單,用戶再次購買時,之前購買過的商品下架或者沒有庫存的時候,可以選擇告訴用戶沒有了的商品,留下可再次購買的商品,點擊后直接跳轉到結算頁面,不經過購物車頁面。
6. 紅包管理
好了,比重重要的地方是紅包管理,這個是個很溜的三級分銷工具,特別是拉新效果極其好,百試不爽。需要注意的點有:
6-1 賺和用
需要考慮的產品邏輯有點類似積分,就是用戶賺得爽,花的爽,以前道長創(chuàng)業(yè)的時候在紅包頁面不定期推出可以使用紅包購買的商品,基本是上線就賣空。不用單獨在全站的商品里面做是否可以使用紅包的功能,不做的原因是接下來的第二點。
6-2 被屏蔽風險
多級分銷首先在法律上是行不通的,超過3級就是傳銷,這種發(fā)紅包機制下限沒法限制,限制了效果就不好。這里道長的設計改成只有A分享給BCD、B分享給ACD這樣的策略,效果肯定會比我以前做的三級分銷效果差。
所以這個原型里面我的紅包是可以用在全站的商品里面的,使用該方法的產品經理需要考慮好的功能邏輯是,在發(fā)布商品的時候多一個勾選是否可用紅包、以及最高可以用多少。
(被屏蔽是指微信,一般這種會被判定成誘導分享,另外是同行看見你效果好就會舉報你,也會帶來被屏蔽的風險。我當時創(chuàng)業(yè)做的時候被舉報過,然后微信封了,我們當時的策略是動態(tài)IP地址。另外一家友商,我記得好像有200w+的粉絲,頭一秒鐘還跟我們講他們的胡歌霍建華CP抽北海道機票的效果多好,第二秒鐘就被微信封了公眾號)
7. 后臺
這部分內容看文字沒啥東西,邏輯挺多的,我貼幾張圖這里,伙伴們下載源文件自己看吧。
截圖:
本期到此結束,前面兩期的源文件也會在這一期的文件里面,想穿越回去看前兩期的分析嗎?
相關閱讀
產品經理課程:APP產品經理入門實戰(zhàn)課程(交互、原型、方法論)
……………………………………………… 我是美麗的分界線 ………………………………………………
源文件下載地址:
鏈接: https://pan.baidu.com/s/14Qke2b7iiHG6_T6w7Ghrdw
密碼: 5i4t
如果你想跟我交流原型設計技巧,歡迎加QQ群:159912926
#專欄作家#
芒果道長,人人都是產品經理專欄作家,起點學院特聘導師。騰訊課堂【30天教你做一個APP】作者。
本文獨家首發(fā)于人人都是產品經理,未經本站許可,不得轉載,謝謝合作
題圖來自 Pexels,基于 CC0 協(xié)議
可以也發(fā)我一下嗎?我打不開 ??
親,你有原型么,打不開 ??
我更新了個下載地址:https://share.weiyun.com/oJpndk2j
這篇文章是提供一些思路和借鑒,又不是說全部都是對的、必須要照搬作者的。作者原意分享出來已經很不錯了!為什么那么多事逼。 ?
很高興對你有啟發(fā),謝謝支持!
太棒了,感謝分享!
產品路上加油!
為什么打開了,彈出一個滿是英文的警告窗口,關閉后里面什么內容都沒有呢
可能是軟件版本不兼容的原因,我更新了個下載地址:https://share.weiyun.com/oJpndk2j,你試試
打開了打開了··辛苦辛苦··
哈哈哈 加油加油
為啥源文件打不開啊···
浪費別人時間就是浪費別人生命
哈哈哈哈大兄弟真暴躁 ??
雖然說的很簡略,但思路很清楚了,謝謝
很高興對你有所啟發(fā)
引用“如截圖里面編號4的原型,這里” 應該是編號5呀 你是不是以為我跟你開玩笑的,一天天惹我生氣! ??
引用“跳轉說明:點擊“發(fā)紅包“在當前頁面底部彈出編號3的樣式;”應該是編號4的樣式 你轉載倒是把出處寫出來呀,我之前寫的時候就有這些瑕疵,你倒好,直接將錯誤的給我剪切過去了
引用“頁面4是頁面三點擊導航條右上角的“編輯”按鈕的狀態(tài),” 是不是寫錯了,轉載我的文章 你倒是把錯別字給改過來呀?。?!
親,你說的這個都不是重點,訂單、支付、商品等都說的太簡單了,后臺一個基礎的類目以及類目屬性都沒體現(xiàn)出來,第一點搜索一筆帶過,這樣很容易給人誤區(qū)把東西想簡單化了
很好,會給小白很多啟發(fā)
很高興對你有所啟發(fā)
刷新了我的認知,感覺之前走錯路了,感謝
??? 多點自己的思考哈,我說的不一定對,只希望能對你有點啟發(fā)!
內容非常細非常好,但標題…… ?
這標題,我也覺得不對勁
道長有運營管理的后臺UE設計沒
有的,2021春節(jié)我放假多,我會更新完整的出來
棒棒的,但是文件打開報錯,咋解決哪
我更新了個下載地址:https://share.weiyun.com/oJpndk2j
對于電商,后臺是要區(qū)分商戶后臺和平臺總后臺的吧,否則如何對商戶開放后臺呢?
另外,請問大神,是否可以專門講一下關于后臺的設計?謝謝!
可以的,我今年春節(jié)會多分享完整的東西
請問是RP什么版本的?我的8.0怎么開不了啊?
我更新了個下載地址:https://share.weiyun.com/oJpndk2j
不全,看了眼商品管理,里邊規(guī)格都沒有,有運費管理,但是也沒有看到填寫產品重量的地方。
# 很贊,基本上電商C端主流程都已涉及。
# 后臺是電商平臺的設計難點,想看到更多關于后臺的設計分析。
# 另外想了解你們公司產品經理出交互原型出到這么細嗎,是有跟交互的同學一起輸出嗎?
我一直都在小創(chuàng)業(yè)團隊,沒人教,自學和犯錯得出的經驗
標題黨,只畫原型不講邏輯流程的,都是耍流氓,騙騙小白還可以。
標題黨。大部分都是說前端一眼就能看到的東西, 后臺的細節(jié)完全沒有。
很棒很棒,收藏了
產品路上一起加油呀~
1.我覺得原型太完整,會對設計同學造成一定干擾。
2.另外邏輯方面太少,你這套原型圖畫出來,只對前端和設計同學有幫助。對后端寫邏輯的同事來說,好像沒用。我覺得后端更在乎的是:比如做訂單功能,后端同學更在意的是訂單完整流,訂單過程中的狀態(tài),怎么樣會觸發(fā)那種狀態(tài),用戶和管理后臺的狀態(tài)分別是什么樣的..等
3.另外..如果有些功能/頁面是仿的,我覺得把參考產品貼出來,會更方便技術同學的理解。
邏輯流在原型中只能表達的最基本 同事邏輯流也屬于業(yè)務流的一部分 用流程圖以及詳細文檔說明最好 (個人理解)
第一點深有感觸,也很糾結。原型過于完整,媽的設計師竟然全部照搬;不完整吧,設計師又說你沒有說清楚。我以前做設計也沒有這樣啊,現(xiàn)在做設計的太懶了,就是用sketch排一下版式。PS都不打開了,太懶了,一些效果都不做。
感謝建議!
1. 這個真的看設計的能力,我本身是UI設計師轉的產品經理,我做設計時還是有自己的思考,不會全抄產品原型哈
2. 脫敏導致邏輯很少,小團隊的問題是,明明是個很常規(guī)的事兒,在老板看來都是了不起的,不能分享,所以刪減導致,后期我會避免刪減
3. 對的,我們在實際溝通時會跟技術想講參考的競品
厲害了 支持一波
你支持的“一波”在哪
提取碼錯誤
我更新了下載文件:https://share.weiyun.com/oJpndk2j
辛苦
謝謝
不錯,有詳細的。值得學習!謝謝分享。
希望對你有所啟發(fā)