在為在線商店設計網(wǎng)站的時候，很多人都會把重心放在首頁，因為它是用戶訪問網(wǎng)站時的第一印象。但是，電商網(wǎng)站的最終目標畢竟還是銷售，需要一個出色的產(chǎn)品頁來達到這個目的。

一個有效的產(chǎn)品頁需要正確地體現(xiàn)主打產(chǎn)品的價值，它可以讓消費者看到產(chǎn)品的樣子，向他們展示產(chǎn)品給人帶來的感覺，說服他們購買并擁有這些產(chǎn)品。

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

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

• 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的目標消費者是以女性為主，因為這家商店賣的就是接發(fā)產(chǎn)品。整個網(wǎng)站立馬就給人一種富有女性氣息的感覺，就連瀏覽器上的選項卡都有一個暖暖的愛心表情符。

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

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

該頁面還包含了一些最敏感的放棄購物車指標（指消費者將物品放入購物車后，卻沒有進行結賬付款的行為）：運費與退換貨。很多數(shù)據(jù)都顯示大部分消費者會因為運費過高而放棄付款。

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

2.PooPourri

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

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

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

3.  Rocky Mountain Soap Company

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

我喜歡這個產(chǎn)品頁的理由是它對口碑的大膽運用。在這款南瓜香皂下方，有一條評價的標題是“超......超滋潤?！边@條評價足以讓很多想購買該產(chǎn)品的人印象非常深刻了。

4.  United By Blue 

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

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

產(chǎn)品頁簡單大方的設計讓用戶得以看清產(chǎn)品描述、客戶評價以及一系列相似產(chǎn)品。United By Blue還通過在產(chǎn)品縮略圖下面顯示顏色選項來鼓勵消費者點擊并瀏覽選項。

Rocky Mountain Soap很清楚顧客評價的力量。在Bizrate Insights Survey做過的一項調查研究中，有近四分之一的參與者認為他們在線上購買產(chǎn)品時會一直參考用戶評價，40%的人則認為他們會經(jīng)常這么做。產(chǎn)品下方的社交證據(jù)突出了不少滿意用戶給產(chǎn)品寫的五星評價，可以有效減少其他消費者在從未接觸過該產(chǎn)品時可能產(chǎn)生的顧慮。

5.Sixty-Nine

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

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

整潔的頁面設計可以讓人在購物過程中不易受其它因素的干擾，同時可以讓用戶更清楚且直接地購買產(chǎn)品。

在這家在線商店獲得Ecommerce Design Awards（后來重新定位成Commerce Awards）的榮譽獎之后就被牢牢地記住了。

6.Leesa

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

他們還利用這個機會分享了自己作為企業(yè)的社會責任，即每售出十個床墊他們就會捐出一個，這樣會讓那些潛在消費者在購買時感覺良好。

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

7.  Manitobah Mukluks

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

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

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

用戶可以了解到公司是由印第安人開的，然后在冬靴的鞋底藝術背后的故事。我個人認為頁面最后還需要另一個“添加到購物車”按鈕，這樣人們在購買時就不用一路返回到頁面頂端。

8.Perfect Keto

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

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

9.  Johnny Cupcakes

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

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

另外，當你點擊“立即購買”按鈕時，購物車會從屏幕右側彈出，提醒你可以隨時結賬。這個提醒設計可能不是特別巧妙，你也不用立馬就下單，他們還提供了不同的支付方式。這樣就把產(chǎn)品頁有效地轉為結賬頁，對于提高購買效率的人來講是很不錯的。

10.  WP Standard

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

這個產(chǎn)品頁的一個特別之處在于你可以選擇把自己的姓名首字母印在包上。如果你將要花一大筆錢來購買一款質量如此之高的手包，可能你會想去通過在上面印一下名字的首字母去真正地擁有它。

11.  Master & Dynamic

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

Master & Dynamic的產(chǎn)品頁本身就像是一場體驗。當你在滾動鼠標時，你會了解到耳機設計的很多細節(jié) —— 產(chǎn)品的材質、特色以及如何控制它們。

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

12.  Primal Pit Paste

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

Primal Pit Paste充分利用客戶評價，他們不僅在價格旁邊突出用戶評價，而且你還可以通過點擊頁面最左側一直懸浮的按鈕來查看。他們還在“加入購物車”按鈕旁強調令人心動的原材料和質量（天然、有機、無動物實驗等），用以消除消費者在購買過程中可能產(chǎn)生的顧慮。

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

13.  Love Hair

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

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

14.  Pilgrim

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

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

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

15.  Holstee

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

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

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

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

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