我們知道，一款A(yù)PP的產(chǎn)品詳情頁是呈現(xiàn)產(chǎn)品內(nèi)容的最重要的模塊，它要生收益的價(jià)值。不同產(chǎn)品APP的產(chǎn)品詳情頁設(shè)計(jì)都不一樣，但都有著相同點(diǎn)。本文探討的是如何設(shè)計(jì)一款高效的產(chǎn)品詳情頁給用戶。

如下圖：

這里“高效”的含義，就是“提升產(chǎn)品的效率”。

app產(chǎn)品都有各自不同呈現(xiàn)目標(biāo)，比如：淘寶就是賣商品的、喜馬拉雅賣語音、微信賣溝通鏈接、愛奇藝賣視頻、QQ音樂賣音樂、58同城什么都賣。

這些“賣”都有共同的目標(biāo)——實(shí)現(xiàn)盈利，包括直線和曲線的方式。

所謂“直線”，就是你在我平臺(tái)買賣，我收“平臺(tái)費(fèi)、交易費(fèi)…”銷售額提個(gè)點(diǎn)就是很龐大數(shù)字了。

下廚房app

在行app

閑魚app

所謂“曲線”，就是指那些專門賣“內(nèi)容”的app，吸引流量然后賣廣告、做電商。比如：下面說到的這款app——下廚房，就是重點(diǎn)探討的。

不妨來對(duì)比下幾款app產(chǎn)品，各自選一個(gè)角度，我們剖析它？

然后就知道大概是怎么回事了：

• 下廚房APP；
• 在行APP；
• 閑魚APP。

我們可以把三個(gè)app的產(chǎn)品詳情頁的結(jié)構(gòu)做個(gè)拆分：

如上圖所示：

三個(gè)app其實(shí)代表了不同的領(lǐng)域：

1. 下廚房APP-菜譜詳情頁（內(nèi)容/做菜教程/免費(fèi)）
2. 在行APP-約見詳情頁（經(jīng)驗(yàn)/線上成交線下約見/付費(fèi)）
3. 閑魚APP-詳情頁（電商/閑置品/付費(fèi)）

先看下廚房的產(chǎn)品詳情頁信息架構(gòu)：

在行APP約見詳情頁的信息架構(gòu)：

閑魚APP詳情頁信息架構(gòu)：

做個(gè)對(duì)比如何呢？

我們發(fā)現(xiàn)：這代表三個(gè)不同領(lǐng)域里的app詳情頁，有相同的地方，有不同的地方。

• 基本上，相同的地方是：作者介紹/標(biāo)題/產(chǎn)品圖文介紹/服務(wù)介紹/留言評(píng)論/收藏..
• 基本上，各自也有不同的地方，比如：以上紅色的標(biāo)準(zhǔn)的模塊。

下廚房APP：詳情頁多了推薦語

菜譜的高質(zhì)內(nèi)容，帶動(dòng)用戶整體量的增長，實(shí)現(xiàn)其通過電商的盈利目的。高質(zhì)量內(nèi)容是?帶動(dòng)流量的盈利點(diǎn)。

在行APP：詳情頁多了地點(diǎn)位置

通過持續(xù)的符合更多用戶需求的行家推薦，獲得平臺(tái)提成。因此，成交率成為了重要的盈利參考點(diǎn)。

閑魚APP：詳情頁多了價(jià)格

盤活閑置資源，帶動(dòng)更多用戶進(jìn)行交換，價(jià)格是最敏感的要素之一。

紅色文字所標(biāo)準(zhǔn)的模塊，都是在頁面權(quán)重非常高的地方，我把紅色文字稱之為“特別要素”。這個(gè)要素，指的是根據(jù)產(chǎn)品形式的不同，多采用特定的要素進(jìn)行展示。

比如：電商對(duì)時(shí)間，價(jià)格有比較高的要求。新鮮度很重要，用戶對(duì)價(jià)格敏感度也很重要。但對(duì)作者的地點(diǎn)不太關(guān)心，而行家的約見受到了地理限制，這點(diǎn)要求較高。

對(duì)比了這三款產(chǎn)品，似乎就這么多了。產(chǎn)品詳情頁就只有這些東西了嗎？

仔細(xì)分析會(huì)知道，其實(shí)并非如此。

問題思考

下面幾個(gè)問題，你能否答出來呢？

1. 有哪些APP在產(chǎn)品詳情頁里，并沒有介紹所服務(wù)的產(chǎn)品詳情，你知道為什么嗎？
2. 閑魚的產(chǎn)品詳情頁和京東的詳情頁有哪些不同？為什么造成這些差異？
3. 產(chǎn)品二次確認(rèn)頁時(shí)什么？為什么會(huì)增加這個(gè)路徑，難道用戶在購買時(shí)不多點(diǎn)擊了一步嗎？意義是什么？

第一個(gè)問題

在行的詳情頁里，把行家的服務(wù)內(nèi)容列表化，點(diǎn)擊列表進(jìn)入單個(gè)產(chǎn)品的詳情頁。這個(gè)其實(shí)相當(dāng)于折疊了產(chǎn)品，簡(jiǎn)化了其縱向的信息結(jié)構(gòu)，為何不在此頁面介紹每個(gè)產(chǎn)品呢？

綜合行家的定位，我們發(fā)現(xiàn)“約見”成功的效率是平臺(tái)實(shí)現(xiàn)盈利的重要考慮點(diǎn)，用戶對(duì)行家的要求并不在其服務(wù)列表上的單個(gè)產(chǎn)品（這些單個(gè)產(chǎn)品都有類似的地方），而在于行家的title，行家個(gè)人介紹的經(jīng)驗(yàn)、用戶的評(píng)價(jià)，這才是重要的背書。

劃重點(diǎn)：你牛逼，我就信你。

這個(gè)折疊頁，其實(shí)就是確認(rèn)頁。這個(gè)跟第三個(gè)問題有關(guān)。稍后，請(qǐng)往下看。

第二個(gè)問題

我們知道閑魚是一款閑置品app，其功能規(guī)格型號(hào)性能并沒有那么高要求，而京東出售的產(chǎn)品、型號(hào)、外觀、重量、尺寸等都非常多的要求。評(píng)論和詳情內(nèi)容非常多，前者是用戶自定義的，后者是商家自定義的。結(jié)果都是賣，但賣的方式不同。

我們先看看這兩者的產(chǎn)品詳情頁的信息架構(gòu)：

閑魚的詳情頁：

京東的詳情頁：

結(jié)果非常清楚了，京東的每一款產(chǎn)的信息體量很大，如果使用一個(gè)頁面下來。用戶看都看不完，還要ta買？

所以，采用的是橫向羅列的信息架構(gòu)，非縱向。因此，模塊間切換快，直達(dá)商品的速率提高了。

畫出重點(diǎn)：用戶了解產(chǎn)品的效率提升了。

而閑魚上的產(chǎn)品圖文和文字都是用戶一個(gè)字一個(gè)字碼出來的，要求沒有那么高，信息量少，所以一個(gè)頁面就展示完畢了，根本不需要橫向信息架構(gòu)。

第三個(gè)問題

第二次確認(rèn)頁確實(shí)是增加了用戶點(diǎn)擊的路徑損耗，除了行家詳情頁有確認(rèn)頁，哪里還有呢？

閑魚上的詳情頁，你仔細(xì)看就發(fā)現(xiàn)：沒有購買按鈕，京東也沒有（京東的是‘加入購物車’），有的是“我想要”按鈕，點(diǎn)擊進(jìn)入之后，進(jìn)入跟賣家實(shí)時(shí)聊天。還有該產(chǎn)品置頂?shù)馁徺I按鈕，也就是說：這才是購買頁。

為什么購買頁（二次確認(rèn)）不是跟詳情頁在一起呢？

理由我們也能猜的出來，閑魚上的介紹只是作者的自問自答?！伴e置品有哪些缺陷沒說的？”“能不能砍價(jià)”“物流用菜鳥還是順豐？”用戶一概不知。因此，這個(gè)實(shí)時(shí)聊天頁，就是為了讓買賣雙方提升信任度，更多了解產(chǎn)品。

劃重點(diǎn)：二次確認(rèn)頁，提升了產(chǎn)品的交易效率。

“我想要”、“拼團(tuán)”、“加入購物車”…在產(chǎn)品詳情頁上的這些按鈕，并沒有直接購買的作用。但其實(shí)就是一個(gè)“漏斗”，這個(gè)叫做“效率”的漏斗。雖然增加頁面路徑，用戶會(huì)多此一舉，但提升了“效率”，就是“提升產(chǎn)品的效率”。

以下是針對(duì)不同詳情頁的信息框架擴(kuò)展模式：

縱向架構(gòu)：

橫向架構(gòu):

綜上所述，如何設(shè)計(jì)高效的產(chǎn)品詳情頁呢？

模型如下：

寫了這么多字，其實(shí)我們有時(shí)根本不需要記這么多條條框框。其實(shí)，產(chǎn)品詳情頁，就是為產(chǎn)品的目標(biāo)而服務(wù)的。問問你的產(chǎn)品目標(biāo)是什么，你就知道該怎么做了。

作者：yixiang ，開發(fā)者、產(chǎn)品人。公眾號(hào)：產(chǎn)品學(xué)君（ ID : tntproduct）

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

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