電商后臺設計難?搞清這7個點再說(附RP源文件下載)

110 評論 95509 瀏覽 695 收藏 15 分鐘

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

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

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

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

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

一、功能結構

二、商品

1. 商城首頁

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

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

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

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

2-1 詳情頁面

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

第二部分是商品詳細信息,這部分會包含很長的圖文信息,這里產品經理可以規劃出來有這么個區域就好了,實現方式上采用H5,告訴開發的同學這里是個富文本區域,運營在填寫的時候可以填寫他們需要的內容。

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

“選好了”點擊跳轉邏輯:

  1. 操作源:立即購買,跳轉到編號為5的結算頁面;
  2. 操作源:加入購物車,把剛才對一個的商品加入購物車,并停留在商品詳情頁面。

2-2 購物車頁面

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

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

2-3 優惠管理

編號6的頁面就是簡單的優惠券管理,這里有兩個產品邏輯需要注意:

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

3. 支付結果

支付結果就成功和失敗兩種:

3-1 支付失敗

用戶取消支付或者是扣款是沒有足夠余額,如截圖里面編號1的原型截圖,頁面需要向用戶展示該訂單的詳細信息,這里有幾個邏輯需要產品經理關注:

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

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

3-2 支付成功

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

跳轉說明:點擊“發紅包“在當前頁面底部彈出編號3的樣式;

3-3 領取紅包

如截圖里面編號4的原型,這里道長做的頁面比較死板,各位在做自己產品的時候一定要從產品經理的角度出發,這個頁面上出現哪些內容才是正確的,以及這么做的目的是什么?

比如,我們是不是可以把用戶可以領取多少錢顯示出來?如果能領取99元,那肯定效果會比沒有寫明領多少好;

另外頁面底部可以做一個滾動的領取記錄榜,可以用真實的用戶數據,也或者是造一些比較好看的假數據上去。

4. 地址管理

地址管理沒什么重要的產品邏輯,功能邏輯需要注意兩個場景:

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

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

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

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

5. 訂單管理

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

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

6. 紅包管理

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

6-1 賺和用

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

6-2 被屏蔽風險

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

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

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

7. 后臺

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

截圖:

本期到此結束,前面兩期的源文件也會在這一期的文件里面,想穿越回去看前兩期的分析嗎?

相關閱讀

第一期:某社區APP完整原型案例(附源文件下載)

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

產品經理課程:APP產品經理入門實戰課程(交互、原型、方法論)

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

源文件下載地址:

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

密碼: 5i4t

如果你想跟我交流原型設計技巧,歡迎加QQ群:159912926

#專欄作家#

芒果道長,人人都是產品經理專欄作家,起點學院特聘導師。騰訊課堂【30天教你做一個APP】作者。

本文獨家首發于人人都是產品經理,未經本站許可,不得轉載,謝謝合作

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 可以也發我一下嗎?我打不開 ??

    來自浙江 回復
    1. 親,你有原型么,打不開 ??

      來自江蘇 回復
    2. 我更新了個下載地址:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  2. 這篇文章是提供一些思路和借鑒,又不是說全部都是對的、必須要照搬作者的。作者原意分享出來已經很不錯了!為什么那么多事逼。 ?

    來自浙江 回復
    1. 很高興對你有啟發,謝謝支持!

      來自浙江 回復
  3. 太棒了,感謝分享!

    來自北京 回復
    1. 產品路上加油!

      來自浙江 回復
  4. 為什么打開了,彈出一個滿是英文的警告窗口,關閉后里面什么內容都沒有呢

    來自廣東 回復
    1. 可能是軟件版本不兼容的原因,我更新了個下載地址:https://share.weiyun.com/oJpndk2j,你試試

      來自浙江 回復
  5. 打開了打開了··辛苦辛苦··

    來自浙江 回復
    1. 哈哈哈 加油加油

      來自浙江 回復
  6. 為啥源文件打不開啊···

    來自浙江 回復
  7. 浪費別人時間就是浪費別人生命

    來自四川 回復
  8. 哈哈哈哈大兄弟真暴躁 ??

    來自北京 回復
  9. 雖然說的很簡略,但思路很清楚了,謝謝

    來自上海 回復
    1. 很高興對你有所啟發

      來自浙江 回復
  10. 引用“如截圖里面編號4的原型,這里” 應該是編號5呀 你是不是以為我跟你開玩笑的,一天天惹我生氣! ??

    來自廣東 回復
  11. 引用“跳轉說明:點擊“發紅包“在當前頁面底部彈出編號3的樣式;”應該是編號4的樣式 你轉載倒是把出處寫出來呀,我之前寫的時候就有這些瑕疵,你倒好,直接將錯誤的給我剪切過去了

    來自廣東 回復
  12. 引用“頁面4是頁面三點擊導航條右上角的“編輯”按鈕的狀態,” 是不是寫錯了,轉載我的文章 你倒是把錯別字給改過來呀?。。?/p>

    來自廣東 回復
  13. 親,你說的這個都不是重點,訂單、支付、商品等都說的太簡單了,后臺一個基礎的類目以及類目屬性都沒體現出來,第一點搜索一筆帶過,這樣很容易給人誤區把東西想簡單化了

    來自江蘇 回復
  14. 很好,會給小白很多啟發

    來自廣東 回復
    1. 很高興對你有所啟發

      來自浙江 回復
  15. 刷新了我的認知,感覺之前走錯路了,感謝

    來自山東 回復
    1. ?。?多點自己的思考哈,我說的不一定對,只希望能對你有點啟發!

      來自浙江 回復
  16. 內容非常細非常好,但標題…… ?

    來自四川 回復
    1. 這標題,我也覺得不對勁

      來自浙江 回復
  17. 道長有運營管理的后臺UE設計沒

    來自天津 回復
    1. 有的,2021春節我放假多,我會更新完整的出來

      來自浙江 回復
  18. 棒棒的,但是文件打開報錯,咋解決哪

    來自北京 回復
    1. 我更新了個下載地址:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  19. 對于電商,后臺是要區分商戶后臺和平臺總后臺的吧,否則如何對商戶開放后臺呢?
    另外,請問大神,是否可以專門講一下關于后臺的設計?謝謝!

    來自黑龍江 回復
    1. 可以的,我今年春節會多分享完整的東西

      來自浙江 回復
  20. 請問是RP什么版本的?我的8.0怎么開不了啊?

    來自廣西 回復
    1. 我更新了個下載地址:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  21. 不全,看了眼商品管理,里邊規格都沒有,有運費管理,但是也沒有看到填寫產品重量的地方。

    來自北京 回復
  22. # 很贊,基本上電商C端主流程都已涉及。
    # 后臺是電商平臺的設計難點,想看到更多關于后臺的設計分析。
    # 另外想了解你們公司產品經理出交互原型出到這么細嗎,是有跟交互的同學一起輸出嗎?

    來自廣東 回復
    1. 我一直都在小創業團隊,沒人教,自學和犯錯得出的經驗

      來自浙江 回復
  23. 標題黨,只畫原型不講邏輯流程的,都是耍流氓,騙騙小白還可以。

    來自安徽 回復
  24. 標題黨。大部分都是說前端一眼就能看到的東西, 后臺的細節完全沒有。

    來自云南 回復
  25. 很棒很棒,收藏了

    來自浙江 回復
    1. 產品路上一起加油呀~

      來自浙江 回復
  26. 1.我覺得原型太完整,會對設計同學造成一定干擾。
    2.另外邏輯方面太少,你這套原型圖畫出來,只對前端和設計同學有幫助。對后端寫邏輯的同事來說,好像沒用。我覺得后端更在乎的是:比如做訂單功能,后端同學更在意的是訂單完整流,訂單過程中的狀態,怎么樣會觸發那種狀態,用戶和管理后臺的狀態分別是什么樣的..等
    3.另外..如果有些功能/頁面是仿的,我覺得把參考產品貼出來,會更方便技術同學的理解。

    來自江蘇 回復
    1. 邏輯流在原型中只能表達的最基本 同事邏輯流也屬于業務流的一部分 用流程圖以及詳細文檔說明最好 (個人理解)

      來自廣東 回復
    2. 第一點深有感觸,也很糾結。原型過于完整,媽的設計師竟然全部照搬;不完整吧,設計師又說你沒有說清楚。我以前做設計也沒有這樣啊,現在做設計的太懶了,就是用sketch排一下版式。PS都不打開了,太懶了,一些效果都不做。

      來自廣東 回復
    3. 感謝建議!
      1. 這個真的看設計的能力,我本身是UI設計師轉的產品經理,我做設計時還是有自己的思考,不會全抄產品原型哈
      2. 脫敏導致邏輯很少,小團隊的問題是,明明是個很常規的事兒,在老板看來都是了不起的,不能分享,所以刪減導致,后期我會避免刪減
      3. 對的,我們在實際溝通時會跟技術想講參考的競品

      來自浙江 回復
  27. 厲害了 支持一波

    來自河南 回復
    1. 你支持的“一波”在哪

      來自浙江 回復
  28. 提取碼錯誤

    回復
    1. 我更新了下載文件:https://share.weiyun.com/oJpndk2j

      來自浙江 回復
  29. 辛苦

    回復
    1. 謝謝

      來自浙江 回復
  30. 不錯,有詳細的。值得學習!謝謝分享。

    來自廣東 回復
    1. 希望對你有所啟發

      來自浙江 回復