15個(gè)產(chǎn)品頁(yè)案例，助你打造令人艷羨的在線(xiàn)商店！

在為在線(xiàn)商店設(shè)計(jì)網(wǎng)站的時(shí)候，很多人都會(huì)把重心放在首頁(yè)，因?yàn)樗怯脩?hù)訪(fǎng)問(wèn)網(wǎng)站時(shí)的第一印象。但是，電商網(wǎng)站的最終目標(biāo)畢竟還是銷(xiāo)售，需要一個(gè)出色的產(chǎn)品頁(yè)來(lái)達(dá)到這個(gè)目的。

一個(gè)有效的產(chǎn)品頁(yè)需要正確地體現(xiàn)主打產(chǎn)品的價(jià)值，它可以讓消費(fèi)者看到產(chǎn)品的樣子，向他們展示產(chǎn)品給人帶來(lái)的感覺(jué)，說(shuō)服他們購(gòu)買(mǎi)并擁有這些產(chǎn)品。

在打造產(chǎn)品頁(yè)時(shí)，你可以選擇的主題和內(nèi)容通常都很豐富多樣。接下來(lái)將給大家展示一些產(chǎn)品頁(yè)設(shè)計(jì)，順便介紹一下他們的特色體現(xiàn)在哪里，這樣你或許就可以將其應(yīng)用到自己的產(chǎn)品頁(yè)設(shè)計(jì)中。
 

15個(gè)最佳產(chǎn)品頁(yè)案例

• Luxy Hair
• PooPourri
• Rocky Mountain Soap Company
• United By Blue
• Sixty-Nine
• Leesa
• Manitobah Mukluks
• Perfect Keto
• Johnny Cupcakes
• WP Standard
• Master & Dynamic
• Primal Pit Paste
• Love Hair
• Pilgrim
• Holstee

1.Luxy Hair

你可能很容易就看得出Luxy的目標(biāo)消費(fèi)者是以女性為主，因?yàn)檫@家商店賣(mài)的就是接發(fā)產(chǎn)品。整個(gè)網(wǎng)站立馬就給人一種富有女性氣息的感覺(jué)，就連瀏覽器上的選項(xiàng)卡都有一個(gè)暖暖的愛(ài)心表情符。

因?yàn)檫@款產(chǎn)品有很多種變體，所以用戶(hù)可以通過(guò)體驗(yàn)整個(gè)過(guò)程來(lái)決定哪款最適合他們。首先可以選擇頭發(fā)的厚度，接著就是顏色，然后你會(huì)被引至特定的產(chǎn)品頁(yè)，該頁(yè)面通常包含了你所要尋找的產(chǎn)品。

這里有個(gè)很清晰的用戶(hù)行為號(hào)召（CTA, Call to Action），那就是將產(chǎn)品添加到購(gòu)物袋，但是如果你還是不太確定的話(huà)，你可以在購(gòu)買(mǎi)按鈕上方彈出的提示選擇觀(guān)看一段介紹視頻。

該頁(yè)面還包含了一些最敏感的放棄購(gòu)物車(chē)指標(biāo)（指消費(fèi)者將物品放入購(gòu)物車(chē)后，卻沒(méi)有進(jìn)行結(jié)賬付款的行為）：運(yùn)費(fèi)與退換貨。很多數(shù)據(jù)都顯示大部分消費(fèi)者會(huì)因?yàn)檫\(yùn)費(fèi)過(guò)高而放棄付款。

除此之外，Luxy的客服團(tuán)隊(duì)可以全天候服務(wù)令人感到更加放心，如果對(duì)購(gòu)物有任何疑問(wèn)可以直接聯(lián)系他們。

2.PooPourri

你怎么也想不到有人會(huì)把一款這么無(wú)趣的產(chǎn)品打造得如此直接大膽吧？這款產(chǎn)品的主要亮點(diǎn)是其頗具趣味的文案，這也是你可以用來(lái)吸引用戶(hù)的一個(gè)不錯(cuò)的手段。

“只需在馬桶里的水面噴3至5下，”產(chǎn)品這樣描述到，“你就可以為所欲為了。*打響指*（對(duì)于那些還沒(méi)聽(tīng)說(shuō)過(guò)這款產(chǎn)品的人來(lái)說(shuō)，你可以在上廁所之前先在馬桶里噴一下去除異味。）

這個(gè)產(chǎn)品頁(yè)還告訴用戶(hù)如果他們定期訂閱可以省錢(qián)，達(dá)到了很好的向上銷(xiāo)售的效果。他們提供一個(gè)月、兩個(gè)月或三個(gè)月的訂閱購(gòu)買(mǎi)。他們也不怕將自家的產(chǎn)品展示給大家，還專(zhuān)門(mén)為其制作了一段“如何使用”的視頻。

3.  Rocky Mountain Soap Company

這家天然香皂公司知道那些瀏覽他們家產(chǎn)品頁(yè)的消費(fèi)者會(huì)想知道自己購(gòu)買(mǎi)的是優(yōu)質(zhì)而健康的產(chǎn)品。他們強(qiáng)調(diào)自己所售的產(chǎn)品是100%全天然的，然后在產(chǎn)品描述中列出一大堆天然原材料。你也可以通過(guò)產(chǎn)品菜單瀏覽產(chǎn)品的所有原材料。

我喜歡這個(gè)產(chǎn)品頁(yè)的理由是它對(duì)口碑的大膽運(yùn)用。在這款南瓜香皂下方，有一條評(píng)價(jià)的標(biāo)題是“超......超滋潤(rùn)。”這條評(píng)價(jià)足以讓很多想購(gòu)買(mǎi)該產(chǎn)品的人印象非常深刻了。

4.  United By Blue 

作為所有在線(xiàn)商店中最為綠色環(huán)保的公司之一，United By Blue正致力于從大海和水道中清除垃圾。你可以看到你的購(gòu)買(mǎi)能夠幫他們更快地實(shí)現(xiàn)這一目標(biāo)：“每購(gòu)買(mǎi)一件產(chǎn)品就能幫助清除一磅的垃圾。” 誰(shuí)不想在讓地球變得更干凈的同時(shí)，還能獲得一件漂亮的上衣呢。

一個(gè)尺寸表可以幫助用戶(hù)更好地選擇適合自己的尺寸，這樣一來(lái)還可以減少產(chǎn)品的返還率。

產(chǎn)品頁(yè)簡(jiǎn)單大方的設(shè)計(jì)讓用戶(hù)得以看清產(chǎn)品描述、客戶(hù)評(píng)價(jià)以及一系列相似產(chǎn)品。United By Blue還通過(guò)在產(chǎn)品縮略圖下面顯示顏色選項(xiàng)來(lái)鼓勵(lì)消費(fèi)者點(diǎn)擊并瀏覽選項(xiàng)。

Rocky Mountain Soap很清楚顧客評(píng)價(jià)的力量。在Bizrate Insights Survey做過(guò)的一項(xiàng)調(diào)查研究中，有近四分之一的參與者認(rèn)為他們?cè)诰€(xiàn)上購(gòu)買(mǎi)產(chǎn)品時(shí)會(huì)一直參考用戶(hù)評(píng)價(jià)，40%的人則認(rèn)為他們會(huì)經(jīng)常這么做。產(chǎn)品下方的社交證據(jù)突出了不少滿(mǎn)意用戶(hù)給產(chǎn)品寫(xiě)的五星評(píng)價(jià)，可以有效減少其他消費(fèi)者在從未接觸過(guò)該產(chǎn)品時(shí)可能產(chǎn)生的顧慮。

5.Sixty-Nine

這個(gè)就無(wú)需多說(shuō)了吧，你只要看一眼這個(gè)頁(yè)面就會(huì)立刻被吸引住。與許多其它的電商產(chǎn)品頁(yè)完全不同，出現(xiàn)在你面前的字體好像在盯著你看似的，讓整個(gè)網(wǎng)站和主打產(chǎn)品也以一種全新的方式呈現(xiàn)出來(lái)。

一旦你瀏覽完一樣產(chǎn)品之后，原來(lái)的動(dòng)態(tài)圖變成靜止的圖片出現(xiàn)在一個(gè)整潔的、有許多空白的產(chǎn)品頁(yè)面上。你可以通過(guò)一個(gè)鏈接轉(zhuǎn)至他們的尺寸表，確保所選尺寸符合自己的需求，然后會(huì)有一個(gè)彈出提示提醒轉(zhuǎn)至他們的相應(yīng)地區(qū)商店，以便用當(dāng)?shù)丶釉?gòu)買(mǎi)（例如，你在加拿大，頁(yè)面將跳轉(zhuǎn)至加拿大地區(qū)，你可以用加元付款）。

整潔的頁(yè)面設(shè)計(jì)可以讓人在購(gòu)物過(guò)程中不易受其它因素的干擾，同時(shí)可以讓用戶(hù)更清楚且直接地購(gòu)買(mǎi)產(chǎn)品。

在這家在線(xiàn)商店獲得Ecommerce Design Awards（后來(lái)重新定位成Commerce Awards）的榮譽(yù)獎(jiǎng)之后就被牢牢地記住了。

6.Leesa

Leesa所經(jīng)營(yíng)的產(chǎn)品是可折疊且可運(yùn)輸?shù)拇矇|，幫你避免了需要專(zhuān)門(mén)去床墊商店選購(gòu)的必要。他們家的品牌設(shè)計(jì)清晰和簡(jiǎn)潔，色系方面主要采用白色、藍(lán)綠色和灰色。很多類(lèi)似的床墊公司正在崛起，所以L(fǎng)eesa直入主題，直接強(qiáng)調(diào)為何你應(yīng)該購(gòu)買(mǎi)他們家而不是別人家的產(chǎn)品。

他們還利用這個(gè)機(jī)會(huì)分享了自己作為企業(yè)的社會(huì)責(zé)任，即每售出十個(gè)床墊他們就會(huì)捐出一個(gè)，這樣會(huì)讓那些潛在消費(fèi)者在購(gòu)買(mǎi)時(shí)感覺(jué)良好。

購(gòu)買(mǎi)床墊并不是一件小事，所以你可以了解的內(nèi)容越多，就會(huì)讓你更加堅(jiān)定。你可以看到床墊的內(nèi)部運(yùn)作及其與眾不同的地方。Leesa通過(guò)顯示產(chǎn)品的評(píng)價(jià)讓你知道其他人有多么的滿(mǎn)意和享受。他們還設(shè)計(jì)了一個(gè)FAQ區(qū)域，里面包含了經(jīng)常會(huì)被問(wèn)及的一些關(guān)于產(chǎn)品的問(wèn)題，因此消費(fèi)者無(wú)需離開(kāi)產(chǎn)品頁(yè)面就能獲得全部答案。

7.  Manitobah Mukluks

跟床墊類(lèi)似，一雙Manitobah冬靴成本的價(jià)格也很高，這也就意味著人們?cè)谫?gòu)買(mǎi)時(shí)不會(huì)那么輕易下手。如果某件商品低于20美元，而你又很喜歡它，你會(huì)更有可能去買(mǎi)它。但是這個(gè)價(jià)格點(diǎn)越高，在購(gòu)買(mǎi)時(shí)你可能會(huì)感到越內(nèi)疚。而作為商家，你恰恰不應(yīng)讓前來(lái)的消費(fèi)者感到內(nèi)疚。

這個(gè)產(chǎn)品頁(yè)好像解決了購(gòu)買(mǎi)時(shí)最常見(jiàn)的一些顧慮：在“添加到購(gòu)物車(chē)”按鈕旁有用粗體字強(qiáng)調(diào)“免郵”和“免費(fèi)返還”。這樣就可以讓人們覺(jué)得購(gòu)買(mǎi)并不一定是永不回頭的決定，而且他們所看到的價(jià)格應(yīng)該與最終價(jià)格比較接近。

與Leesa相似，他們鼓勵(lì)那些疑慮型消費(fèi)者在產(chǎn)品頁(yè)面就可以了解更多關(guān)于公司及其使命的信息。

用戶(hù)可以了解到公司是由印第安人開(kāi)的，然后在冬靴的鞋底藝術(shù)背后的故事。我個(gè)人認(rèn)為頁(yè)面最后還需要另一個(gè)“添加到購(gòu)物車(chē)”按鈕，這樣人們?cè)谫?gòu)買(mǎi)時(shí)就不用一路返回到頁(yè)面頂端。

8.Perfect Keto

這個(gè)頁(yè)面具備一個(gè)高轉(zhuǎn)化產(chǎn)品頁(yè)所需要的所有元素，包括優(yōu)質(zhì)的產(chǎn)品攝影，你為何想要使用他們家產(chǎn)品以及“通過(guò)訂閱來(lái)省錢(qián)”這一選項(xiàng)來(lái)告訴人們他們可以在每件商品上省錢(qián)（就算他們所付的總體價(jià)格可能會(huì)稍微多一點(diǎn)），同時(shí)可以達(dá)到向上銷(xiāo)售的效果。

該頁(yè)面還加入了“相關(guān)產(chǎn)品”這一區(qū)域，這樣就算人們對(duì)正在瀏覽的產(chǎn)品不是很確定，他們也可以在相似產(chǎn)品中找到更適合自己的。或者，你可以直接全部購(gòu)買(mǎi)。

9.  Johnny Cupcakes

所有跟甜品相關(guān)的產(chǎn)品都是人的心頭好。Johnny Cupcakes是一個(gè)非常有趣的品牌，它們自稱(chēng)是“世界上第一家T恤烘焙”，強(qiáng)調(diào)所有新的產(chǎn)品都是“新烤出來(lái)的”。這個(gè)主題本身就挺有趣的，而且對(duì)他們來(lái)講也很有效。

他們充分利用產(chǎn)品攝影，通過(guò)高清圖片來(lái)展示他們的服飾及有趣設(shè)計(jì)。而且你又如何能抗拒得了他們家年輕小胖莫名追著紙杯蛋糕的動(dòng)圖呢？

另外，當(dāng)你點(diǎn)擊“立即購(gòu)買(mǎi)”按鈕時(shí)，購(gòu)物車(chē)會(huì)從屏幕右側(cè)彈出，提醒你可以隨時(shí)結(jié)賬。這個(gè)提醒設(shè)計(jì)可能不是特別巧妙，你也不用立馬就下單，他們還提供了不同的支付方式。這樣就把產(chǎn)品頁(yè)有效地轉(zhuǎn)為結(jié)賬頁(yè)，對(duì)于提高購(gòu)買(mǎi)效率的人來(lái)講是很不錯(cuò)的。

10.  WP Standard

我承認(rèn)我選擇這一產(chǎn)品頁(yè)的其中一部分原因是我對(duì)這款產(chǎn)品特別著迷，它實(shí)在是美到驚艷。這個(gè)頁(yè)面的主要亮點(diǎn)就是它的產(chǎn)品攝影。它能夠給你一種身臨其境的感覺(jué)，這樣你就可以真的想象一下自己擁有這件商品時(shí)的樣子。

這個(gè)產(chǎn)品頁(yè)的一個(gè)特別之處在于你可以選擇把自己的姓名首字母印在包上。如果你將要花一大筆錢(qián)來(lái)購(gòu)買(mǎi)一款質(zhì)量如此之高的手包，可能你會(huì)想去通過(guò)在上面印一下名字的首字母去真正地?fù)碛兴?/p>

11.  Master & Dynamic

當(dāng)我剛打開(kāi)Master & Dynamic的網(wǎng)站時(shí)，大膽、優(yōu)雅和高端是它給我的第一印象。耳機(jī)細(xì)節(jié)的特寫(xiě)圖完美地展現(xiàn)了產(chǎn)品的質(zhì)量和精致。它無(wú)時(shí)不在吸引著你用它來(lái)聽(tīng)東西。

Master & Dynamic的產(chǎn)品頁(yè)本身就像是一場(chǎng)體驗(yàn)。當(dāng)你在滾動(dòng)鼠標(biāo)時(shí)，你會(huì)了解到耳機(jī)設(shè)計(jì)的很多細(xì)節(jié) —— 產(chǎn)品的材質(zhì)、特色以及如何控制它們。

但是他們也不完全把設(shè)計(jì)置于轉(zhuǎn)化之上。頁(yè)面頂部懸浮的“加入購(gòu)物袋”按鈕設(shè)計(jì)得恰到好處，既不會(huì)讓人分心，又能夠提醒消費(fèi)者他們可以隨時(shí)擁有這些產(chǎn)品。如果你想要購(gòu)買(mǎi)，你也不用因需要一路返至頁(yè)面頂部去尋找購(gòu)物按鈕而影響體驗(yàn)效果。（更別提網(wǎng)站所提供的那么多顏色選項(xiàng)提醒了。）

12.  Primal Pit Paste

個(gè)人衛(wèi)生可能不是最光鮮艷麗的話(huà)題。對(duì)于那些跟污垢相關(guān)的產(chǎn)品來(lái)講，他們的產(chǎn)品頁(yè)設(shè)計(jì)算是非常干凈的了。背景全白，偶爾出現(xiàn)的一些明亮而簡(jiǎn)潔的顏色很容易讓品牌與產(chǎn)品看起來(lái)更有趣。

Primal Pit Paste充分利用客戶(hù)評(píng)價(jià)，他們不僅在價(jià)格旁邊突出用戶(hù)評(píng)價(jià)，而且你還可以通過(guò)點(diǎn)擊頁(yè)面最左側(cè)一直懸浮的按鈕來(lái)查看。他們還在“加入購(gòu)物車(chē)”按鈕旁強(qiáng)調(diào)令人心動(dòng)的原材料和質(zhì)量（天然、有機(jī)、無(wú)動(dòng)物實(shí)驗(yàn)等），用以消除消費(fèi)者在購(gòu)買(mǎi)過(guò)程中可能產(chǎn)生的顧慮。

你還是有那么點(diǎn)猶豫？那么就請(qǐng)將頁(yè)面繼續(xù)往下拉，深入研究一下原材料以及如何使用一些非傳統(tǒng)的產(chǎn)品。圖片與視覺(jué)設(shè)計(jì)中繼續(xù)保持品牌的有趣性，右下角浮動(dòng)的購(gòu)物車(chē)按鈕讓你隨時(shí)可以跳回購(gòu)物車(chē)進(jìn)行結(jié)賬。

13.  Love Hair

Love Hair是另一個(gè)主要以售賣(mài)清潔產(chǎn)品為主的品牌，他們的產(chǎn)品頁(yè)設(shè)計(jì)非常干凈。白色背景，灰色字體和一些啞光色使人可以把注意力完全集中在產(chǎn)品圖上。他們不僅展示了產(chǎn)品圖，還在產(chǎn)品頁(yè)放一些視頻內(nèi)容。

在視頻下方，Love Hair介紹了產(chǎn)品的更多內(nèi)容以及消費(fèi)者會(huì)從中獲得什么，讓他們有機(jī)會(huì)將目標(biāo)群體的痛點(diǎn)直接表達(dá)出來(lái)。如果你還需要更多的理由才能決定購(gòu)買(mǎi)，“為何要選Love Hair的椰油”會(huì)告訴你更多的產(chǎn)品原材料，以及他們對(duì)環(huán)保的持續(xù)關(guān)注與努力。

14.  Pilgrim

Pilgrim的網(wǎng)站將香薰理療與充滿(mǎn)活力的個(gè)性設(shè)計(jì)完美融合，其產(chǎn)品頁(yè)可在“白天”和“黑夜”之間自由切換，讓你可以更好地感受一下把他們家的產(chǎn)品在放在自己家里的樣子。

除了給人以輕快的動(dòng)感之外，網(wǎng)站的整體設(shè)計(jì)既優(yōu)雅又簡(jiǎn)潔。頁(yè)面設(shè)計(jì)包含了一些”為何選購(gòu)”的必備內(nèi)容 —— 30日無(wú)條件退貨、免郵、一年保質(zhì)期以及五星好評(píng)等。

當(dāng)你將頁(yè)面往下拉的時(shí)候，你會(huì)看到一個(gè)更為動(dòng)人的產(chǎn)品發(fā)現(xiàn)之旅。這里不僅包含了突出產(chǎn)品特色、優(yōu)勢(shì)及其原材料的視覺(jué)設(shè)計(jì)，還有以視頻形式呈現(xiàn)的用戶(hù)自創(chuàng)內(nèi)容，從而讓你更進(jìn)一步地挖掘產(chǎn)品。

15.  Holstee

Holstee這個(gè)品牌既有趣又有個(gè)性，就跟他們的品牌頁(yè)設(shè)計(jì)一樣。一個(gè)簡(jiǎn)單的設(shè)計(jì)，加上幾道明亮的色彩，就足以將你的視線(xiàn)牢牢釘在頁(yè)面上的一些主要元素上：產(chǎn)品、“加入購(gòu)物車(chē)”按鈕、高亮文字 —— 想要通過(guò)折扣價(jià)格讓客戶(hù)訂閱產(chǎn)品的另一例子。

Holstee這個(gè)品牌很注重視覺(jué)性，其產(chǎn)品頁(yè)的其它部分并不像首屏那樣簡(jiǎn)單。將頁(yè)面往下拉，你會(huì)看到更多的照片、視頻以及能讓你深入了解產(chǎn)品的一些內(nèi)容。

你可以在更加詳細(xì)的介紹和規(guī)格、客戶(hù)評(píng)價(jià)、物流和退換貨，以及生態(tài)（表明了品牌追求完美設(shè)計(jì)與優(yōu)質(zhì)產(chǎn)品的決心）之間隨意切換。這就消除了需要一直滾動(dòng)頁(yè)面尋找購(gòu)買(mǎi)按鈕的麻煩，在這里你只需要跳回上一個(gè)區(qū)域即可。

利用Shopify打造產(chǎn)品頁(yè)

你不需要有高超的網(wǎng)站設(shè)計(jì)技能來(lái)打造一個(gè)好看而且又能夠推動(dòng)銷(xiāo)售的產(chǎn)品頁(yè)。通過(guò)Shopify，你可以很輕松地在精美的設(shè)計(jì)與轉(zhuǎn)化優(yōu)先的元素之間找到一個(gè)平衡點(diǎn)。