導(dǎo)語(yǔ)：上一篇文章作者和我們分享了基礎(chǔ)砍價(jià)功能的設(shè)計(jì)邏輯，砍價(jià)是本系列文章里涉及的APP首頁(yè)的區(qū)塊之一。接下來(lái)，作者將和我們分享APP首頁(yè)的常規(guī)商品點(diǎn)擊進(jìn)去的詳情頁(yè)面設(shè)計(jì)邏輯，以及常規(guī)的訂單確認(rèn)等幾個(gè)主頁(yè)面，從中你將了解到商品詳情的設(shè)計(jì)需要關(guān)注哪些核心內(nèi)容。

一、商品詳情核心關(guān)注點(diǎn)是什么

不少電商產(chǎn)品里面，商品詳情頁(yè)是流量最大的頁(yè)面，這個(gè)是個(gè)會(huì)經(jīng)常被忽略掉的事實(shí)。道長(zhǎng)記得2015年創(chuàng)業(yè)做生鮮電商時(shí)，有一天晚上在看后臺(tái)的頁(yè)面漏斗數(shù)據(jù)時(shí)，發(fā)現(xiàn)商品詳情頁(yè)面的流量占全站頁(yè)面的40%多，隨后所有的需求優(yōu)先級(jí)都讓路給商品詳情頁(yè)面的需求。

不過(guò)這個(gè)數(shù)據(jù)可能在其他項(xiàng)目中不具備參考意義，我當(dāng)時(shí)創(chuàng)業(yè)的項(xiàng)目是拼團(tuán)，用戶分享自己開(kāi)的團(tuán)出去時(shí)，別人首先進(jìn)入的是商品詳情頁(yè)面，需要提前講明白這點(diǎn)。

也因?yàn)檫@個(gè)經(jīng)驗(yàn)，后來(lái)經(jīng)歷過(guò)幾個(gè)項(xiàng)目，商品詳情頁(yè)面我會(huì)花更多的精力在上面，在做奢侈品這個(gè)項(xiàng)目時(shí)，商品詳情我優(yōu)先考慮到的是會(huì)員信息、推薦商品兩個(gè)內(nèi)容，我們先來(lái)看一下商品詳情的原型圖。

圖1-商品詳情原型圖及說(shuō)明

我依次從頁(yè)面的頭部向下，分析幾個(gè)功能點(diǎn)的設(shè)計(jì)邏輯：

1. 分享功能

關(guān)于APP的分享功能我個(gè)人覺(jué)得是沒(méi)必要花心思和開(kāi)發(fā)資源在上面，現(xiàn)在的分頂多算是個(gè)標(biāo)配功能而已，想要靠該功能對(duì)商品頁(yè)面進(jìn)行向外分發(fā)、吸引流量是不現(xiàn)實(shí)的，就拿我們自己來(lái)看，有多少商品詳情頁(yè)足夠打動(dòng)你非得要分享給你朋友的呢？

真有那么打動(dòng)你，就算沒(méi)有分享按鈕，也可以截圖通過(guò)微信發(fā)給朋友。更何況，對(duì)接分享功能的各個(gè)SNS渠道都需要去申請(qǐng)、投入部分開(kāi)發(fā)資源進(jìn)去，提供分校給微信好友和微信朋友圈就足夠了，其他的不建議投入。

2. 商品顏色切換查看

該功能相對(duì)來(lái)講有必要的，比如這個(gè)包有兩個(gè)顏色，分別是黑色和紅色，放在這里給用戶切換查看效果，因?yàn)橛谐渥愕膶?duì)比信息，更便于用戶決策是否購(gòu)買(mǎi)，從另一個(gè)角度來(lái)講，是在幫助用戶決定購(gòu)買(mǎi)哪一個(gè)更合適。

3. 價(jià)格區(qū)分會(huì)員身份來(lái)顯示

該原型截圖顯示的是非會(huì)員用戶身份的價(jià)格（該系列文章分享完后我會(huì)把項(xiàng)目axure源文件提供下載，你到時(shí)候?qū)Ρ认聲?huì)更容易理解）。

但實(shí)際上，在規(guī)劃功能時(shí)就需要考慮用戶身份進(jìn)去，如果用戶是會(huì)員，則需要把會(huì)員的價(jià)格顯示出來(lái)，和非會(huì)員的價(jià)格進(jìn)行對(duì)比，時(shí)刻讓用戶覺(jué)得擁有會(huì)員身份是個(gè)很好的購(gòu)物體驗(yàn)，功能里面盡量去凸顯“價(jià)格歧視”的思路。

有對(duì)比才有更多用戶原因購(gòu)買(mǎi)會(huì)員，這個(gè)邏輯的目的很明確，就是要引導(dǎo)用戶開(kāi)通會(huì)員，提供復(fù)購(gòu)和忠誠(chéng)度，這個(gè)重要性產(chǎn)品經(jīng)理需要明白。

4. 會(huì)員卡購(gòu)買(mǎi)入口

非會(huì)員用戶和未登錄的用戶需要顯示會(huì)員卡的購(gòu)買(mǎi)入口，如原型所示，這里在文案上盡量強(qiáng)調(diào)會(huì)員卡的優(yōu)勢(shì)和實(shí)惠，優(yōu)勢(shì)就是省錢(qián)，幫用戶把節(jié)省的錢(qián)算出來(lái)。

而實(shí)惠就是體現(xiàn)在買(mǎi)會(huì)員卡的價(jià)格便宜上，有的平臺(tái)會(huì)把會(huì)員年卡的錢(qián)換算到每天多少錢(qián)，你應(yīng)該有類似的回憶，有的會(huì)員卡顯示的“每天僅需0.5元”類似的文案。

5. 無(wú)限退服務(wù)選項(xiàng)

提前把無(wú)限退的兩個(gè)套餐選項(xiàng)透出來(lái)給用戶選擇，這個(gè)體驗(yàn)比較差，我實(shí)在是說(shuō)服不了決策層。

如果是為了強(qiáng)化此服務(wù)給用戶，那實(shí)現(xiàn)該目標(biāo)的方案還有很多，如果是為了引導(dǎo)用戶購(gòu)買(mǎi)此服務(wù)，也有很多別的方案，在下單決策前的頁(yè)面里面，交互流程應(yīng)該是減少，為什么？

這里我們要的是用戶順順利利的趕緊進(jìn)入到付錢(qián)環(huán)節(jié)，付錢(qián)才是我們?cè)撽P(guān)注的重點(diǎn)，而不是在該環(huán)節(jié)上塞一堆東西給用戶，分?jǐn)偭擞脩舾跺X(qián)的注意力。

6. 同款推薦

推薦商品的模塊要有，我在前面說(shuō)過(guò)，商品詳情頁(yè)面是流量較高的頁(yè)面，用戶到該頁(yè)面后，不下單當(dāng)前商品，也要推薦其他的商品給用戶。但每個(gè)產(chǎn)品的推薦依據(jù)都不太一樣，這需要結(jié)合自己的業(yè)務(wù)來(lái)定。

我們當(dāng)時(shí)的業(yè)務(wù)比較好理解，用戶使用某個(gè)款式的包是為了美化特定的場(chǎng)景，比如夏天去海邊旅游背的是手提包，為了拍更好看的照片，那推薦商品就推同款的就好，不要搞復(fù)雜，你可以看一下原型上的描述，此處我們推薦同品牌、同系列、同俗稱的商品。

這是一個(gè)比較簡(jiǎn)單的商品詳情頁(yè)面的設(shè)計(jì)思路，你可以研究下其他的商品詳情，試圖去理解下商品評(píng)價(jià)系統(tǒng)的目的和設(shè)計(jì)思路，對(duì)你以后設(shè)計(jì)商品詳情頁(yè)面會(huì)大有幫助。

接下來(lái)，我們進(jìn)入到訂單確認(rèn)頁(yè)面。

二、訂單確認(rèn)頁(yè)面真復(fù)雜

訂單確認(rèn)頁(yè)面如果有混合支付、多種優(yōu)惠抵扣的話就會(huì)復(fù)雜些，如果沒(méi)有額外的抵扣發(fā)生，則會(huì)比較簡(jiǎn)單，無(wú)限退這個(gè)項(xiàng)目恰恰是有混合支付，所以訂單確認(rèn)頁(yè)面是真的不省心。

我當(dāng)時(shí)做下來(lái)的感覺(jué)很沒(méi)底，找了幾個(gè)用包的用戶聊方案，直到她們覺(jué)得理解起來(lái)沒(méi)那么費(fèi)力才放心些，一起來(lái)看一下原型。

圖2-訂單確認(rèn)頁(yè)面原型及說(shuō)明

該頁(yè)面上半部分比較簡(jiǎn)單，收件人信息和已選商品信息是標(biāo)準(zhǔn)化的功能。收件人信息那里無(wú)非是需要考慮有地址、無(wú)地址的情況，已選商品信息除了把用戶選擇的商品信息準(zhǔn)確的顯示外，也考慮到會(huì)員身份就把會(huì)員價(jià)顯示出來(lái)。

但接下來(lái)的幾個(gè)點(diǎn)要分別講一下，否則不易理解。

1. 無(wú)限退2個(gè)套餐

無(wú)限退的兩個(gè)套餐分別是“用10天后退貨退款”和“用30天后退貨退款”，兩個(gè)套餐對(duì)應(yīng)的費(fèi)用是明確算好的，并且這個(gè)費(fèi)用過(guò)會(huì)根據(jù)包所在的估計(jì)帶不同而不同。

比如一個(gè)古馳的包估價(jià)處在1萬(wàn)~2萬(wàn)價(jià)格帶，那它的無(wú)限退費(fèi)用就不一樣；而另一個(gè)愛(ài)馬仕的包估價(jià)處在5千~8千的價(jià)格帶，它無(wú)限退的費(fèi)用就會(huì)低一些。

這里不是簡(jiǎn)單的費(fèi)用，還需要根據(jù)包估價(jià)價(jià)格帶來(lái)計(jì)算。并且，我們?cè)谇懊娴奈恼路治鲞^(guò)無(wú)限退加入到會(huì)員權(quán)益里面的產(chǎn)品目的，那么這里就需要根據(jù)用戶是否是會(huì)員來(lái)再次計(jì)算無(wú)限退的費(fèi)用。

2. 服務(wù)費(fèi)抵扣

服務(wù)費(fèi)是個(gè)留資策略做的賬戶，用戶的所有退款都會(huì)退到該賬戶里面，叫做服務(wù)費(fèi)，實(shí)際上只是退了個(gè)數(shù)字進(jìn)去，用戶如果要提現(xiàn)，則需要重新發(fā)起申請(qǐng)，審核過(guò)后財(cái)務(wù)才會(huì)手動(dòng)給用戶打款，目的很簡(jiǎn)單，提高體現(xiàn)門(mén)檻讓用戶把錢(qián)留在平臺(tái)上繼續(xù)消費(fèi)。

既然是繼續(xù)消費(fèi)，那用戶就可以使用自己沒(méi)有體現(xiàn)的錢(qián)來(lái)進(jìn)行支付，所以在訂單確認(rèn)頁(yè)面，用戶還可以選擇是否用服務(wù)費(fèi)來(lái)進(jìn)行抵扣，是原型上“服務(wù)費(fèi)可抵扣￥100”那里的功能。

這里不光要給用戶講清楚，我們?cè)诤笈_(tái)的財(cái)務(wù)流水里面也有很多對(duì)賬和統(tǒng)計(jì)的功能，你如果做類似的功能，請(qǐng)務(wù)必要把財(cái)務(wù)對(duì)賬考慮好，涉及到錢(qián)流通的功能要細(xì)膩。

3. 是否開(kāi)通會(huì)員卡

因?yàn)楫?dāng)時(shí)的運(yùn)營(yíng)指標(biāo)要求比較高，基本上運(yùn)營(yíng)背負(fù)的主要運(yùn)營(yíng)指標(biāo)就是購(gòu)卡用戶數(shù)和售卡總額，所以在訂單確認(rèn)頁(yè)面用戶還可以勾選開(kāi)通會(huì)員卡一并支付掉。

會(huì)員卡在該頁(yè)面文案上體現(xiàn)的就是省錢(qián)，還有個(gè)細(xì)節(jié)是會(huì)員卡勾選和未勾選時(shí)，商品價(jià)格和無(wú)限退服務(wù)費(fèi)用的計(jì)算變動(dòng)，默認(rèn)進(jìn)入該頁(yè)面時(shí)是勾選中的，所有費(fèi)用都已經(jīng)打折了，如果用戶取消勾選，則去掉折扣的計(jì)算和有關(guān)文案。

到此，該頁(yè)面的重點(diǎn)信息就交代清楚了，接下來(lái)我們看支付的幾個(gè)頁(yè)面。

三、支付環(huán)節(jié)逃不掉的幾個(gè)細(xì)節(jié)

支付環(huán)節(jié)主要是收銀臺(tái)頁(yè)面上到底有哪些支付方式，主流的就是微信支付、支付寶支付（包含花唄、花唄分期）和銀行卡，這里我想給你聊的是兩個(gè)網(wǎng)絡(luò)支付方式的優(yōu)劣，我們先看下原型圖。

圖3-訂單支付頁(yè)面有關(guān)原型圖

原型圖中間的一張是收銀臺(tái)，用戶在訂單確認(rèn)頁(yè)面點(diǎn)擊“提交訂單”后進(jìn)入的頁(yè)面，做租賃業(yè)務(wù)的話，選擇支付寶是個(gè)坑，也是較好的機(jī)會(huì)，至少在2019年和2020年我參與租賃業(yè)務(wù)時(shí)，支付寶的手續(xù)費(fèi)是最坑爹的，為什么呢？

同一筆押金，用戶支付進(jìn)入租賃平臺(tái)的商戶賬戶時(shí)支付寶收一道手續(xù)費(fèi)，用戶退貨后租賃平臺(tái)退押金時(shí)，支付寶又向同一筆錢(qián)收一道手續(xù)費(fèi)，不過(guò)聽(tīng)說(shuō)如果業(yè)務(wù)量大的話，可以跟支付寶談降低手續(xù)費(fèi)比例，這也只是聽(tīng)說(shuō)。

但我為什么又說(shuō)支付寶是較好的機(jī)會(huì)呢？

你聽(tīng)說(shuō)過(guò)機(jī)密沒(méi)，租手機(jī)應(yīng)該知道吧，租手機(jī)最大的平臺(tái)他們主要流量就是來(lái)自支付寶，因?yàn)橹Ц秾毜幕▎h可以幫用戶提前墊付押金，特別是很高的押金，用戶拿不出來(lái)，那就花唄支付下，這也是為什么在這張?jiān)蜕蠒?huì)有花唄和花唄分期兩個(gè)支付選項(xiàng)的原因。

反觀微信支付，中規(guī)中矩，手續(xù)費(fèi)只收一次，但也沒(méi)有分期類的支付策略幫用戶墊付，不過(guò)話說(shuō)回來(lái)，我個(gè)人更喜歡微信支付，簡(jiǎn)單些。

四、總結(jié)

本文我們分析了商品詳情和訂單確認(rèn)頁(yè)面等的設(shè)計(jì)邏輯，商品詳情是流量最好的頁(yè)面之一，產(chǎn)品經(jīng)理應(yīng)該在該頁(yè)面上多投入精力，幫助核心業(yè)務(wù)做轉(zhuǎn)換，也考慮提高用戶的使用效率。

而到訂單確認(rèn)頁(yè)面時(shí)，碰到有混合支付和多重優(yōu)惠疊加的參加，需要往縱深去考慮產(chǎn)品功能的邏輯，不要遺漏和財(cái)務(wù)有關(guān)的數(shù)據(jù)信息。

該系列往期文章：

01-奢侈品售賣(mài)退換業(yè)務(wù)回憶解構(gòu)——項(xiàng)目起源

02-用導(dǎo)購(gòu)思維做指導(dǎo)：APP首頁(yè)該放什么內(nèi)容？

03-最有效拉新工具之一的砍價(jià)功能該怎么設(shè)計(jì)

#專欄作家#

芒果道長(zhǎng)，人人都是產(chǎn)品經(jīng)理專欄作家，起點(diǎn)學(xué)院特聘導(dǎo)師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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