起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識電商類商品詳情頁和訂單確認(rèn)頁面有哪些講究？
導(dǎo)語：上一篇文章作者和我們分享了基礎(chǔ)砍價功能的設(shè)計(jì)邏輯，砍價是本系列文章里涉及的APP首頁的區(qū)塊之一。接下來，作者將和我們分享APP首頁的常規(guī)商品點(diǎn)擊進(jìn)去的詳情頁面設(shè)計(jì)邏輯，以及常規(guī)的訂單確認(rèn)等幾個主頁面，從中你將了解到商品詳情的設(shè)計(jì)需要關(guān)注哪些核心內(nèi)容。
一、商品詳情核心關(guān)注點(diǎn)是什么
不少電商產(chǎn)品里面，商品詳情頁是流量最大的頁面，這個是個會經(jīng)常被忽略掉的事實(shí)。道長記得2015年創(chuàng)業(yè)做生鮮電商時，有一天晚上在看后臺的頁面漏斗數(shù)據(jù)時，發(fā)現(xiàn)商品詳情頁面的流量占全站頁面的40%多，隨后所有的需求優(yōu)先級都讓路給商品詳情頁面的需求。
不過這個數(shù)據(jù)可能在其他項(xiàng)目中不具備參考意義，我當(dāng)時創(chuàng)業(yè)的項(xiàng)目是拼團(tuán)，用戶分享自己開的團(tuán)出去時，別人首先進(jìn)入的是商品詳情頁面，需要提前講明白這點(diǎn)。
也因?yàn)檫@個經(jīng)驗(yàn)，后來經(jīng)歷過幾個項(xiàng)目，商品詳情頁面我會花更多的精力在上面，在做奢侈品這個項(xiàng)目時，商品詳情我優(yōu)先考慮到的是會員信息、推薦商品兩個內(nèi)容，我們先來看一下商品詳情的原型圖。
圖1-商品詳情原型圖及說明
我依次從頁面的頭部向下，分析幾個功能點(diǎn)的設(shè)計(jì)邏輯：
1. 分享功能
關(guān)于APP的分享功能我個人覺得是沒必要花心思和開發(fā)資源在上面，現(xiàn)在的分頂多算是個標(biāo)配功能而已，想要靠該功能對商品頁面進(jìn)行向外分發(fā)、吸引流量是不現(xiàn)實(shí)的，就拿我們自己來看，有多少商品詳情頁足夠打動你非得要分享給你朋友的呢？
真有那么打動你，就算沒有分享按鈕，也可以截圖通過微信發(fā)給朋友。更何況，對接分享功能的各個SNS渠道都需要去申請、投入部分開發(fā)資源進(jìn)去，提供分校給微信好友和微信朋友圈就足夠了，其他的不建議投入。
2. 商品顏色切換查看
該功能相對來講有必要的，比如這個包有兩個顏色，分別是黑色和紅色，放在這里給用戶切換查看效果，因?yàn)橛谐渥愕膶Ρ刃畔?，更便于用戶決策是否購買，從另一個角度來講，是在幫助用戶決定購買哪一個更合適。
3. 價格區(qū)分會員身份來顯示
該原型截圖顯示的是非會員用戶身份的價格（該系列文章分享完后我會把項(xiàng)目axure源文件提供下載，你到時候?qū)Ρ认聲菀桌斫猓?/p>
但實(shí)際上，在規(guī)劃功能時就需要考慮用戶身份進(jìn)去，如果用戶是會員，則需要把會員的價格顯示出來，和非會員的價格進(jìn)行對比，時刻讓用戶覺得擁有會員身份是個很好的購物體驗(yàn)，功能里面盡量去凸顯“價格歧視”的思路。
有對比才有更多用戶原因購買會員，這個邏輯的目的很明確，就是要引導(dǎo)用戶開通會員，提供復(fù)購和忠誠度，這個重要性產(chǎn)品經(jīng)理需要明白。
4. 會員卡購買入口
非會員用戶和未登錄的用戶需要顯示會員卡的購買入口，如原型所示，這里在文案上盡量強(qiáng)調(diào)會員卡的優(yōu)勢和實(shí)惠，優(yōu)勢就是省錢，幫用戶把節(jié)省的錢算出來。
而實(shí)惠就是體現(xiàn)在買會員卡的價格便宜上，有的平臺會把會員年卡的錢換算到每天多少錢，你應(yīng)該有類似的回憶，有的會員卡顯示的“每天僅需0.5元”類似的文案。
5. 無限退服務(wù)選項(xiàng)
提前把無限退的兩個套餐選項(xiàng)透出來給用戶選擇，這個體驗(yàn)比較差，我實(shí)在是說服不了決策層。
如果是為了強(qiáng)化此服務(wù)給用戶，那實(shí)現(xiàn)該目標(biāo)的方案還有很多，如果是為了引導(dǎo)用戶購買此服務(wù)，也有很多別的方案，在下單決策前的頁面里面，交互流程應(yīng)該是減少，為什么？
這里我們要的是用戶順順利利的趕緊進(jìn)入到付錢環(huán)節(jié)，付錢才是我們該關(guān)注的重點(diǎn)，而不是在該環(huán)節(jié)上塞一堆東西給用戶，分?jǐn)偭擞脩舾跺X的注意力。
6. 同款推薦
推薦商品的模塊要有，我在前面說過，商品詳情頁面是流量較高的頁面，用戶到該頁面后，不下單當(dāng)前商品，也要推薦其他的商品給用戶。但每個產(chǎn)品的推薦依據(jù)都不太一樣，這需要結(jié)合自己的業(yè)務(wù)來定。
我們當(dāng)時的業(yè)務(wù)比較好理解，用戶使用某個款式的包是為了美化特定的場景，比如夏天去海邊旅游背的是手提包，為了拍更好看的照片，那推薦商品就推同款的就好，不要搞復(fù)雜，你可以看一下原型上的描述，此處我們推薦同品牌、同系列、同俗稱的商品。
這是一個比較簡單的商品詳情頁面的設(shè)計(jì)思路，你可以研究下其他的商品詳情，試圖去理解下商品評價系統(tǒng)的目的和設(shè)計(jì)思路，對你以后設(shè)計(jì)商品詳情頁面會大有幫助。
接下來，我們進(jìn)入到訂單確認(rèn)頁面。
二、訂單確認(rèn)頁面真復(fù)雜
訂單確認(rèn)頁面如果有混合支付、多種優(yōu)惠抵扣的話就會復(fù)雜些，如果沒有額外的抵扣發(fā)生，則會比較簡單，無限退這個項(xiàng)目恰恰是有混合支付，所以訂單確認(rèn)頁面是真的不省心。
我當(dāng)時做下來的感覺很沒底，找了幾個用包的用戶聊方案，直到她們覺得理解起來沒那么費(fèi)力才放心些，一起來看一下原型。
圖2-訂單確認(rèn)頁面原型及說明
該頁面上半部分比較簡單，收件人信息和已選商品信息是標(biāo)準(zhǔn)化的功能。收件人信息那里無非是需要考慮有地址、無地址的情況，已選商品信息除了把用戶選擇的商品信息準(zhǔn)確的顯示外，也考慮到會員身份就把會員價顯示出來。
但接下來的幾個點(diǎn)要分別講一下，否則不易理解。
1. 無限退2個套餐
無限退的兩個套餐分別是“用10天后退貨退款”和“用30天后退貨退款”，兩個套餐對應(yīng)的費(fèi)用是明確算好的，并且這個費(fèi)用過會根據(jù)包所在的估計(jì)帶不同而不同。
比如一個古馳的包估價處在1萬~2萬價格帶，那它的無限退費(fèi)用就不一樣；而另一個愛馬仕的包估價處在5千~8千的價格帶，它無限退的費(fèi)用就會低一些。
這里不是簡單的費(fèi)用，還需要根據(jù)包估價價格帶來計(jì)算。并且，我們在前面的文章分析過無限退加入到會員權(quán)益里面的產(chǎn)品目的，那么這里就需要根據(jù)用戶是否是會員來再次計(jì)算無限退的費(fèi)用。
2. 服務(wù)費(fèi)抵扣
服務(wù)費(fèi)是個留資策略做的賬戶，用戶的所有退款都會退到該賬戶里面，叫做服務(wù)費(fèi)，實(shí)際上只是退了個數(shù)字進(jìn)去，用戶如果要提現(xiàn)，則需要重新發(fā)起申請，審核過后財(cái)務(wù)才會手動給用戶打款，目的很簡單，提高體現(xiàn)門檻讓用戶把錢留在平臺上繼續(xù)消費(fèi)。
既然是繼續(xù)消費(fèi)，那用戶就可以使用自己沒有體現(xiàn)的錢來進(jìn)行支付，所以在訂單確認(rèn)頁面，用戶還可以選擇是否用服務(wù)費(fèi)來進(jìn)行抵扣，是原型上“服務(wù)費(fèi)可抵扣￥100”那里的功能。
這里不光要給用戶講清楚，我們在后臺的財(cái)務(wù)流水里面也有很多對賬和統(tǒng)計(jì)的功能，你如果做類似的功能，請務(wù)必要把財(cái)務(wù)對賬考慮好，涉及到錢流通的功能要細(xì)膩。
3. 是否開通會員卡
因?yàn)楫?dāng)時的運(yùn)營指標(biāo)要求比較高，基本上運(yùn)營背負(fù)的主要運(yùn)營指標(biāo)就是購卡用戶數(shù)和售卡總額，所以在訂單確認(rèn)頁面用戶還可以勾選開通會員卡一并支付掉。
會員卡在該頁面文案上體現(xiàn)的就是省錢，還有個細(xì)節(jié)是會員卡勾選和未勾選時，商品價格和無限退服務(wù)費(fèi)用的計(jì)算變動，默認(rèn)進(jìn)入該頁面時是勾選中的，所有費(fèi)用都已經(jīng)打折了，如果用戶取消勾選，則去掉折扣的計(jì)算和有關(guān)文案。
到此，該頁面的重點(diǎn)信息就交代清楚了，接下來我們看支付的幾個頁面。
三、支付環(huán)節(jié)逃不掉的幾個細(xì)節(jié)
支付環(huán)節(jié)主要是收銀臺頁面上到底有哪些支付方式，主流的就是微信支付、支付寶支付（包含花唄、花唄分期）和銀行卡，這里我想給你聊的是兩個網(wǎng)絡(luò)支付方式的優(yōu)劣，我們先看下原型圖。
圖3-訂單支付頁面有關(guān)原型圖
原型圖中間的一張是收銀臺，用戶在訂單確認(rèn)頁面點(diǎn)擊“提交訂單”后進(jìn)入的頁面，做租賃業(yè)務(wù)的話，選擇支付寶是個坑，也是較好的機(jī)會，至少在2019年和2020年我參與租賃業(yè)務(wù)時，支付寶的手續(xù)費(fèi)是最坑爹的，為什么呢？
同一筆押金，用戶支付進(jìn)入租賃平臺的商戶賬戶時支付寶收一道手續(xù)費(fèi)，用戶退貨后租賃平臺退押金時，支付寶又向同一筆錢收一道手續(xù)費(fèi)，不過聽說如果業(yè)務(wù)量大的話，可以跟支付寶談降低手續(xù)費(fèi)比例，這也只是聽說。
但我為什么又說支付寶是較好的機(jī)會呢？
你聽說過機(jī)密沒，租手機(jī)應(yīng)該知道吧，租手機(jī)最大的平臺他們主要流量就是來自支付寶，因?yàn)橹Ц秾毜幕▎h可以幫用戶提前墊付押金，特別是很高的押金，用戶拿不出來，那就花唄支付下，這也是為什么在這張?jiān)蜕蠒谢▎h和花唄分期兩個支付選項(xiàng)的原因。
反觀微信支付，中規(guī)中矩，手續(xù)費(fèi)只收一次，但也沒有分期類的支付策略幫用戶墊付，不過話說回來，我個人更喜歡微信支付，簡單些。
四、總結(jié)
本文我們分析了商品詳情和訂單確認(rèn)頁面等的設(shè)計(jì)邏輯，商品詳情是流量最好的頁面之一，產(chǎn)品經(jīng)理應(yīng)該在該頁面上多投入精力，幫助核心業(yè)務(wù)做轉(zhuǎn)換，也考慮提高用戶的使用效率。
而到訂單確認(rèn)頁面時，碰到有混合支付和多重優(yōu)惠疊加的參加，需要往縱深去考慮產(chǎn)品功能的邏輯，不要遺漏和財(cái)務(wù)有關(guān)的數(shù)據(jù)信息。
該系列往期文章：
01-奢侈品售賣退換業(yè)務(wù)回憶解構(gòu)——項(xiàng)目起源
02-用導(dǎo)購思維做指導(dǎo)：APP首頁該放什么內(nèi)容？
03-最有效拉新工具之一的砍價功能該怎么設(shè)計(jì)
#專欄作家#
芒果道長，人人都是產(chǎn)品經(jīng)理專欄作家，起點(diǎn)學(xué)院特聘導(dǎo)師。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unspalsh，基于 CC0 協(xié)議。
在提交訂單，由于用戶在頁面停留較長時間，點(diǎn)擊【提交訂單】，訂單中，部分商品出現(xiàn)下架、售罄、不符合起售數(shù)量等，應(yīng)該如何做交付提示？
提示某SKU庫存不足，比較順暢的做法是直接自動拆單，彈窗要求用戶確認(rèn)，確認(rèn)的話自動去掉該SKU生成訂單。歡迎探討
對勁！
有一個問題我比較關(guān)注，但是改文章沒有講到。
就是在確認(rèn)訂單頁，是否需要再次確認(rèn)訂單內(nèi)商品信息與參與的活動信息內(nèi)容是否發(fā)生變更？什么情況下需要校驗(yàn)，什么情況下不需要？
好問題。點(diǎn)擊“提交訂單”的時候需要判斷的。
【場景1】用戶在確認(rèn)訂單頁面過久，導(dǎo)致庫存SKU庫存、價格信息變動，這里需要去校驗(yàn)的，并且，如果用戶購買數(shù)量超過當(dāng)前最新庫存，則彈窗提示用戶庫存不足的信息，用戶可按照當(dāng)前所剩庫存下單；
# 甚至還要考慮商品售罄、商品下架的情況。
【場景2】優(yōu)惠過期，若用戶在該頁面停留過久，導(dǎo)致優(yōu)惠券最后的使用時間過期，則需要在優(yōu)惠信息的附近提示用戶過期的情況，以及接下來該訂單還可以使用的優(yōu)惠；
【場景3】校驗(yàn)配送地址，用戶在購物車或商品詳情點(diǎn)擊立即購買按鈕進(jìn)入該頁面時，提交訂單需要校驗(yàn)商品發(fā)貨范圍是否支持，若不支持則需要告知用戶重新選擇（所以京東、瑞幸咖啡、外賣等產(chǎn)品的處理方式是在選品時就引導(dǎo)用戶先選收件地址）