詳情頁(yè)通常是電商類app流量最大的頁(yè)面，承載決定用戶是否購(gòu)買商品的關(guān)鍵決策信息。該頁(yè)面的功能、布局、交互設(shè)計(jì)對(duì)用戶購(gòu)買轉(zhuǎn)化意義至關(guān)重要。

今天來看看天貓、京東、蘇寧等的電商app詳情頁(yè)是怎么設(shè)計(jì)的。并分析詳情頁(yè)的細(xì)節(jié)設(shè)計(jì)。

一、天貓

布局為頂部快捷導(dǎo)航標(biāo)題區(qū)、核心內(nèi)容區(qū)、底部操作區(qū)。

快捷導(dǎo)航標(biāo)題區(qū)包括內(nèi)容區(qū)切換，購(gòu)物車鏈接（方便用戶隨時(shí)去購(gòu)物車完成后續(xù)購(gòu)買），以及“更多”。分享、刷新、收藏等操作，首頁(yè)、搜索等鏈接，以及一些卡券活動(dòng)、推薦商品都在“更多”里包含。

內(nèi)容區(qū)分三部分。商品、詳情、評(píng)價(jià)三部分。

1，商品，從整體上讓顧客了解商品情況。

第一屏：包括一組大圖（通常是2張整體效果圖，3張局部細(xì)節(jié)大圖，均鋪滿屏幕），價(jià)格與已售賣數(shù)量（顯示歷史價(jià)滿足顧客比價(jià)心理）與售賣時(shí)限（如果有則顯示，有暗示趕快下單否則就沒了的效果）。由于上方分享功能隱藏在了“更多”操作中，此處還顯示“分享”功能。

第二屏：首先是商品參加的活動(dòng)，返積分、可增送的優(yōu)惠券等促銷說明。然后是產(chǎn)品參數(shù)介紹鏈接（放在這里貌似略混亂）、下單選擇鏈接：點(diǎn)擊彈配送區(qū)域、以及型號(hào)、數(shù)量等介紹選擇框。然后是商品評(píng)價(jià)信息的概述。最下是商家的信息與鏈接（大約在第2.5屏）。

在商品部分左滑或繼續(xù)上滑，進(jìn)入圖文詳情部分。

2，圖文詳情：購(gòu)買決策的詳細(xì)專業(yè)信息

天貓的商品圖文詳情頁(yè)首先是三款賣家推薦、可領(lǐng)優(yōu)惠券、店家活動(dòng)。

四、詳情頁(yè)細(xì)節(jié)設(shè)計(jì)分析

下面來分析優(yōu)秀的商品詳情頁(yè)是從哪些方面打動(dòng)用戶刺激用戶購(gòu)買的。

當(dāng)我們?cè)谠O(shè)計(jì)一個(gè)商品詳情頁(yè)時(shí)候，要把用戶當(dāng)成我們的男女朋友來對(duì)待，整個(gè)設(shè)計(jì)流程分為四步：

用戶購(gòu)買商品其實(shí)就是這個(gè)過程，首先認(rèn)識(shí)商品（1米8大個(gè)又帥）隨后信任商品（人品還好）從而產(chǎn)生購(gòu)買價(jià)值（跟他戀愛不錯(cuò)）最終購(gòu)買轉(zhuǎn)化（相守結(jié)婚）！

分析兩個(gè)賣奢侈品的app商品詳情頁(yè)：

用戶認(rèn)識(shí)商品的過程其實(shí)是非常短暫的可能就是幾秒鐘。米蘭的頁(yè)面設(shè)計(jì)，第一眼并沒有讓用戶感知到商品，也沒有突出奢侈品最關(guān)鍵的點(diǎn)，品牌！標(biāo)題字行間距不易閱讀，整體UI界面的設(shè)計(jì)給人很強(qiáng)的淘寶風(fēng)！

寺庫(kù)很好的做了區(qū)別于淘寶京東的差異化設(shè)計(jì)，建立自己的品牌認(rèn)知，首屏高清大圖牢牢抓住用戶，突出了品牌TUPLUS/途加，整體給人信任感?。ㄖ皇且?yàn)樵谌巳褐卸嗫戳四阋谎?，再也不能忘掉你容顏?

用戶快速認(rèn)識(shí)了解商品是遠(yuǎn)遠(yuǎn)不夠的，下面來看兩款產(chǎn)品向上滑動(dòng)屏幕給用戶的信息和感受，這里就要跟用戶建立信任了！

沒錯(cuò)米蘭并沒有評(píng)論和商品詳情，真的要命，滑動(dòng)不夠一屏就推薦相關(guān)產(chǎn)品了，這時(shí)候很多用戶早已逃之夭夭了，沒有建立信任基礎(chǔ)很難有結(jié)果。

評(píng)論功能往往可以創(chuàng)造熱銷的氛圍，根據(jù)從眾效應(yīng)其它用戶的評(píng)價(jià)能夠引導(dǎo)用戶作出判斷，指引用戶的心理和行為。例如一個(gè)女孩子認(rèn)識(shí)一個(gè)男孩子，女孩子身邊的人朋友閨蜜都說這個(gè)男孩子不錯(cuò)！好！值得托付！女孩子可能就會(huì)聽從她們的話，至少能增強(qiáng)對(duì)這個(gè)男孩子的好感！所以追女孩要先搞定她的閨蜜，不然閨蜜說一句“我覺得這個(gè)人不怎么樣”你就完了！握草，有點(diǎn)跑題了！總之評(píng)價(jià)是能夠建立基礎(chǔ)信任感的！

寺庫(kù)的頁(yè)面交互是非常符合用戶心理的，一直向上滑動(dòng)的流程：商品－評(píng)論－詳情－推薦。

評(píng)價(jià)沒有完全打動(dòng)用戶，建立信任，那么詳情頁(yè)就得發(fā)大招了，產(chǎn)品的詳情能不能走進(jìn)用戶心里，了解用戶，解決用戶痛點(diǎn)是非常之關(guān)鍵！

想象一下用戶買奢侈品都會(huì)關(guān)注哪些點(diǎn)，整個(gè)購(gòu)買流程會(huì)有什么擔(dān)憂，當(dāng)然也要突出產(chǎn)品的核心賣點(diǎn)。

TUPLUS/途加這款產(chǎn)品詳情頁(yè)是這樣的流程：介紹此產(chǎn)品斬獲兩項(xiàng)國(guó)際大獎(jiǎng)，之后產(chǎn)品功能細(xì)節(jié)介紹，中間加了購(gòu)買奢侈品形象人群使用場(chǎng)景，（打造一個(gè)好的人像使用場(chǎng)景，會(huì)讓用戶聯(lián)想到自己使用時(shí)形象氣質(zhì)），后面詳細(xì)介紹產(chǎn)品的權(quán)威性，正品保證，資質(zhì)證書，這都能很有力的解決用戶的擔(dān)憂和痛點(diǎn)！

詳情頁(yè)解決用戶的擔(dān)憂和痛點(diǎn)體現(xiàn)產(chǎn)品價(jià)值。商品權(quán)威鑒定詳細(xì)介紹有圖有真相，點(diǎn)擊進(jìn)入“寺庫(kù)鑒定”頁(yè)面，首先視頻介紹，教你怎么辨別產(chǎn)品的真?zhèn)危覀冇袑I(yè)的鑒定產(chǎn)品真?zhèn)螆F(tuán)隊(duì)、團(tuán)隊(duì)發(fā)展歷程、行業(yè)的資質(zhì)證書等等信息都傳遞給用戶，產(chǎn)品的安全保障，是值得購(gòu)買的，這就會(huì)讓用戶從基礎(chǔ)信任到有價(jià)值認(rèn)可。

當(dāng)用戶下單后，用戶會(huì)有“損失規(guī)避”效應(yīng)，（意指人們獲得損失時(shí)產(chǎn)生的痛苦遠(yuǎn)大于獲得收益時(shí)所帶來的快樂），這個(gè)時(shí)候下單成功頁(yè)面如果就提示“購(gòu)買成功”的字樣，用戶就不會(huì)感受到剛剛損失的心理安慰，弄不好用戶意識(shí)到自己沖動(dòng)消費(fèi)，馬上就退單了！

所以這里可以用到一些，一語(yǔ)雙關(guān)的文案，例如：“恭喜你成為第xxx個(gè)有品味的人”，“恭喜你即將擁有給你帶來美好生活的xxxx產(chǎn)品”，總之即說明了我們的產(chǎn)品好，又夸了用戶有品位，或者描繪產(chǎn)品給用戶帶來什么好的體驗(yàn)場(chǎng)景，這樣就大大降低了“損失規(guī)避”效應(yīng)帶來的痛點(diǎn)！

最后總結(jié)一下，設(shè)計(jì)app商品詳情頁(yè)的四個(gè)步驟：

第一讓用戶快速了解認(rèn)識(shí)產(chǎn)品；

第二取得用戶對(duì)產(chǎn)品的信任；

第三讓用戶產(chǎn)生價(jià)值感受（走心、解決用戶痛點(diǎn)與擔(dān)憂）；

第四最終實(shí)現(xiàn)產(chǎn)品購(gòu)買的轉(zhuǎn)化（售后良好體驗(yàn)、形成口碑、促進(jìn)二次購(gòu)買）。