有效的電子商務(wù)產(chǎn)品頁面布局設(shè)計(jì)剖析 - 您可以復(fù)制以立即改進(jìn)您的在線商店的即用型設(shè)計(jì)

電子商務(wù)產(chǎn)品頁面設(shè)計(jì)第2部分設(shè)計(jì)一個(gè)客戶喜歡瀏覽的電子商務(wù)產(chǎn)品頁面布局，恰好鼓勵(lì)他們打開錢包是一項(xiàng)具有挑戰(zhàn)性的任務(wù)。

你在哪里或如何開始？

哪些設(shè)計(jì)適合“我的”客戶？

我怎樣才能從競(jìng)爭(zhēng)對(duì)手中脫穎而出？

如果您對(duì)如何為您的在線商店設(shè)計(jì)獲獎(jiǎng)產(chǎn)品頁面的同樣炙手可熱的問題感到困惑，本指南將是您的閃亮盔甲的騎士。

我們經(jīng)營(yíng)著自己成功的電子商務(wù)商店，并且是真正閱讀分析報(bào)告以獲得樂趣的轉(zhuǎn)化優(yōu)化愛好者  。

我想，當(dāng)涉及到這類東西時(shí)，我們只是極客。

在本指南中，我們將與您分享一些經(jīng)過現(xiàn)場(chǎng)測(cè)試的方法，您可以模仿這些方法來改進(jìn)產(chǎn)品頁面，這將有助于提高您的業(yè)務(wù)銷售額。

我們還在下面創(chuàng)建了幾個(gè)現(xiàn)成的電子商務(wù)產(chǎn)品頁面設(shè)計(jì)（基于實(shí)踐），您可以立即適應(yīng)您的在線商店。

如果您還沒有選擇在線商店建設(shè)者，請(qǐng)查看下面對(duì)比表中我們?cè)u(píng)價(jià)的電子商務(wù)平臺(tái)：

 好的電子商務(wù)網(wǎng)站建設(shè)者

佳選擇

5 出5

模板設(shè)計(jì)

5星，滿分5星

便于使用

5星，滿分5星

功能和靈活性

5星，滿分5星

聲望

5星，滿分5星

價(jià)錢

5星，滿分5星

免費(fèi)試用

閱讀我們的完整評(píng)論

bigcommerce徽標(biāo)

 佳大型企業(yè)網(wǎng)站建設(shè)者

4.5分（滿分5分）

模板設(shè)計(jì)

4.5顆星，高

便于使用

4.5顆星，高

功能和靈活性

5星，滿分5星

聲望

4顆星，高

價(jià)錢

4顆星，高

免費(fèi)試用

閱讀我們的完整評(píng)論

標(biāo)志 - 威克斯 -  100x100的

 適合小型企業(yè)

4.5分（滿分5分）

模板設(shè)計(jì)

4.5顆星，高

便于使用

5星，滿分5星

功能和靈活性

4顆星，高

聲望

4顆星，高

價(jià)錢

5星，滿分5星

免費(fèi)試用

閱讀我們的完整評(píng)論

如果您還沒有閱讀本指南的第1部分，我建議您在進(jìn)入本文之前先閱讀本文，以便您充分利用本指南。

指南部分

第1部分： 如何設(shè)計(jì)一個(gè)贏得客戶的產(chǎn)品頁面 - 8必須有內(nèi)容來增加您的在線商店

第2部分：[您在這里]  有效產(chǎn)品頁面布局設(shè)計(jì)剖析 - 您可以復(fù)制以立即改進(jìn)您的電子商務(wù)網(wǎng)站的即用型設(shè)計(jì)

附注：這些現(xiàn)成的產(chǎn)品頁面設(shè)計(jì)基于對(duì)消費(fèi)者行為的研究。但是，結(jié)果可能因網(wǎng)站和企業(yè)而異。這些設(shè)計(jì)布局旨在為您提供佳起點(diǎn)，您可以繼續(xù)改進(jìn)它們。不斷測(cè)試不同方法以進(jìn)一步優(yōu)化您的在線商店始終是一個(gè)好習(xí)慣。

到第2部分......

 

第2部分：有效的電子商務(wù)產(chǎn)品頁面設(shè)計(jì)剖析

您可以在電子商務(wù)網(wǎng)站中立即采用和使用的設(shè)計(jì)

在網(wǎng)站建設(shè)者專家，我們重視良好的研究和成熟的方法，而不是像天生的設(shè)計(jì)人才那樣無形的“東西”。

說實(shí)話，并不是每個(gè)人都天生具有設(shè)計(jì)和配色技巧，所以我們不會(huì)把各種設(shè)計(jì)理論塞進(jìn)你的喉嚨。

80/20規(guī)則是從成功的在線商店中學(xué)習(xí)，了解哪些對(duì)他們有用，以及它們?nèi)绾螢槟�服�?wù)。

為什么要重新發(fā)明輪子呢？

以下是第1部分的概述，其中我們重點(diǎn)介紹了所有成功的電子商務(wù)產(chǎn)品頁面設(shè)計(jì)所具有的8個(gè)要素。

第1部分：您需要在產(chǎn)品頁面中包含的8件事

1.  驚人的信息產(chǎn)品圖像

2.  有用和有趣的產(chǎn)品描述

3.  使用產(chǎn)品演示視頻

4.  明確定價(jià)

5.  清除添加到購物車按鈕

6.  顯示客戶評(píng)論和評(píng)級(jí)

7.  解決不確定性問題

8.  顯示相關(guān)和推薦的產(chǎn)品

現(xiàn)在，讓我們了解所有這些內(nèi)容元素如何在一個(gè)良好的產(chǎn)品頁面布局中組合在一起，以便您可以優(yōu)化您的在線商店。

＃1如何確定重要產(chǎn)品頁面元素的優(yōu)先級(jí)？

有些信息比其他信息更重要，因?yàn)樗鼈兪琴徫镎哧P(guān)心的，對(duì)購買決策過程影響大。

確定哪些信息對(duì)您的購物者重要，并確保我們將其放置在您的電子商務(wù)產(chǎn)品頁面設(shè)計(jì)中明顯的位置，這一點(diǎn)非常重要。

那我們?cè)撛趺醋瞿兀?/p>

基本上，產(chǎn)品頁面的布局分為兩部分：

1. 高于折疊 - 您可以看到的內(nèi)容在頁面加載時(shí)不向下滾動(dòng)。

2. 低于折疊 - 您只在向下滾動(dòng)頁面時(shí)看到的內(nèi)容。

100％的訪問者將看到“折疊”內(nèi)容，因?yàn)樗鼤?huì)立即顯示在計(jì)算機(jī)屏幕上。

研究表明，當(dāng)人們向下滾動(dòng)頁面時(shí)，人們往往不太關(guān)注內(nèi)容。

這就是為什么計(jì)劃8個(gè)產(chǎn)品頁面項(xiàng)目中的哪一個(gè)應(yīng)該插入上面這么重要的原因。

 

1.元素高低在上

以下6項(xiàng)可以說是您的客戶關(guān)心的問題。

92％的客戶僅根據(jù)這6個(gè)項(xiàng)目做出購買決定 - 所以要密切關(guān)注！

好的電子商務(wù)產(chǎn)品頁面設(shè)計(jì)

資料來源：Nike.com

產(chǎn)品圖片：   由于我們?cè)谶@里談?wù)撛诰�購物，因此您的產(chǎn)品圖片是在購買之前能夠物理接觸，保持和測(cè)試您的產(chǎn)品的下一個(gè)佳選擇。由于這對(duì)購物者來說非常重要，因此高質(zhì)量的產(chǎn)品圖像必須是購物者在加載產(chǎn)品頁面時(shí)看到的第一件事。

價(jià)格： 我們都對(duì)價(jià)格很敏感，無論我們是購買豪華禮品來對(duì)待自己還是只是更便宜的日常用品。無論您的購物者對(duì)您的產(chǎn)品有多喜愛，如果產(chǎn)品的價(jià)格超出預(yù)算，他們就不會(huì)購買。好在易于到位的位置顯示價(jià)格。當(dāng)你無法輕易找到價(jià)格時(shí)，這是非常令人沮喪的。

產(chǎn)品變化（如果有）：如果您有許多產(chǎn)品變化（顏色，圖案等），顯示實(shí)際產(chǎn)品變化可以使您的銷售額提高58％。不要只列出顏色或圖案選項(xiàng)，顯示它們。購物者是視覺人，所以迎合了這一點(diǎn)。

添加到購物車按鈕：產(chǎn)品頁面的第一項(xiàng)工作是讓購物者點(diǎn)擊“添加到購物車”按鈕。因此，請(qǐng)確保它是您的產(chǎn)品頁面上容易找到的元素之一。

客戶評(píng)級(jí)：  85％的消費(fèi)者在購買前閱讀評(píng)論。因此，要突出顯示您的評(píng)論，以向您的購物者展示其他人對(duì)該產(chǎn)品的看法。

解決不確定性：  50％的客戶表示他們沒有在線購買是因?yàn)樗麄冇胁淮_定性 -  這款產(chǎn)品能否適合我？ - 獲取我的東西需要多長(zhǎng)時(shí)間？ - 回報(bào)是否復(fù)雜？確保您正面解決這些問題，例如提供尺寸表或顯示運(yùn)輸和退貨政策的鏈接。

更多詳情：  此處還有很多內(nèi)容，如果您想對(duì)上述6個(gè)項(xiàng)目進(jìn)行更深入的討論，請(qǐng)轉(zhuǎn)到本指南的第1部分。

讓我們深入了解有關(guān)您應(yīng)該放置在折疊之下的內(nèi)容的更具體細(xì)節(jié)。

之后，我們將向您展示一些您可以模仿以幫助發(fā)展業(yè)務(wù)的電子商務(wù)產(chǎn)品頁面布局設(shè)計(jì)。

 

2.元素低于折疊

有4個(gè)內(nèi)容項(xiàng)目可以為您提供折扣，這可能會(huì)讓您失去或贏得銷售。

這4個(gè)元素是“支持”元素，旨在幫助推動(dòng)即將購買的購物者，但需要更有說服力。 

佳電子商務(wù)產(chǎn)品頁面設(shè)計(jì)

資料來源：Nike.com

產(chǎn)品描述： 您可以按照自己的方式教育購物者。79％的人都是掃描儀，因此請(qǐng)確保包含較短版本的描述，例如上面的示例 - “多功能和快速”  或“響應(yīng)式緩沖” - 為您的購物者提供快速的片段，了解該產(chǎn)品為何以及如何使他們受益。對(duì)于需要更多信息的消費(fèi)者，請(qǐng)確保您擁有更長(zhǎng)版本的描述，以描述您的產(chǎn)品如何解決他們的問題。

產(chǎn)品演示視頻：  31％的消費(fèi)者在被產(chǎn)品視頻說服后購買產(chǎn)品。這是讓銷售人員出現(xiàn)在您家門口向您展示產(chǎn)品如何運(yùn)作的下一個(gè)佳選擇。

顧客評(píng)論：  85％的消費(fèi)者在購買前閱讀在線評(píng)論。在線購物總是存在不確定性。這就是為什么好評(píng)和差評(píng)的好集合可以幫助推動(dòng)購物者購買。當(dāng)人們?cè)陂喿x了利弊后感到被告知時(shí)，他們更有可能采取行動(dòng)。

推薦產(chǎn)品：這是向您的客戶交叉銷售的絕佳方式 - 就像亞馬遜一樣。推薦或類似產(chǎn)品以兩種方式幫助您的購物者; （1）如果購物者不喜歡他們所看到的東西，你可以向他們展示他們可能更喜歡的類似產(chǎn)品; （2）如果他們喜歡他們看到的東西，你可以向他們提供他們可能也想要的類似或補(bǔ)充產(chǎn)品。這對(duì)您和您的購物者來說是一個(gè)雙贏的局面，那么為什么不將它們包含在您的產(chǎn)品頁面上呢？

更多詳情：  此處還有更多內(nèi)容，如果您想對(duì)上述4個(gè)項(xiàng)目進(jìn)行更深入的討論，請(qǐng)轉(zhuǎn)到本指南的第1部分。

既然您已經(jīng)知道應(yīng)該在電子商務(wù)產(chǎn)品頁面中包含哪些內(nèi)容，那么讓我們探索一下您可以定位這些內(nèi)容項(xiàng)目的各種方法，以便為潛在客戶創(chuàng)建購物體驗(yàn)！

＃2  有效的電子商務(wù)產(chǎn)品頁面布局+您今天可以使用的示例模板

簡(jiǎn)單是良好的產(chǎn)品頁面設(shè)計(jì)的關(guān)鍵。

您希望購物者能夠快速，輕松地找到所需信息。因此，重要的是不要 用不必要的細(xì)節(jié)過度設(shè)計(jì)或過度擠壓產(chǎn)品頁面。

如上所述，在設(shè)計(jì)電子商務(wù)產(chǎn)品頁面布局時(shí)，您無需重新發(fā)明輪子。

已經(jīng)有成熟的工作設(shè)計(jì)，讓我們來探索它們的外觀以及如何為您的業(yè)務(wù)使用類似的布局格式。

我們會(huì)告訴你：

您應(yīng)該使用的3種頂級(jí)電子商務(wù)產(chǎn)品頁面布局設(shè)計(jì);

如何確定哪一個(gè)適合您的商店; 和

您可以在哪里找到這些產(chǎn)品頁面布局模板，以便立即開始使用。

產(chǎn)品頁面布局＃1 - 通用

這種布局非常通用，因此它可以用來銷售幾乎任何產(chǎn)品。

人們傾向于從左到右閱讀，因此當(dāng)您將產(chǎn)品圖像放在左側(cè)時(shí)，它會(huì)立即吸引購物者的注意力。

如果他們喜歡他們所看到的（第一印象），他們可能會(huì)留下來并閱讀更多相關(guān)內(nèi)容。

電子商務(wù)產(chǎn)品頁面設(shè)計(jì)示例

點(diǎn)擊放大此圖片

 

模板示例：以下是一些具有此類產(chǎn)品頁面布局設(shè)計(jì)的免費(fèi)模板。您可以點(diǎn)擊查看，注冊(cè)并立即開始使用它們。

確保您訪問他們的演示站點(diǎn)并單擊其產(chǎn)品頁面以研究其布局。

電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)

電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)

電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)

 

想要查看更多電子商務(wù)模板和布局？  這是我們精選的免費(fèi)電子商務(wù)模板集合。

產(chǎn)品頁面布局＃2 - 以圖像為中心

此產(chǎn)品頁面布局比其他任何東西更強(qiáng)調(diào)產(chǎn)品。

如果您銷售的是創(chuàng)意或以美學(xué)為重點(diǎn)的產(chǎn)品，例如家具，珠寶，手工制品等，這是一個(gè)有效的產(chǎn)品頁面。

通過在頁面頂部放置一個(gè)全寬的產(chǎn)品圖像，這可以引導(dǎo)您的客戶專注于產(chǎn)品的美感。

電子商務(wù)產(chǎn)品頁面設(shè)計(jì)示例

點(diǎn)擊放大此圖片

 

模板示例：以下是一些具有此類產(chǎn)品頁面布局設(shè)計(jì)的模板。您可以點(diǎn)擊查看，注冊(cè)并立即開始使用它們。

確保您訪問他們的演示站點(diǎn)并單擊其產(chǎn)品頁面以研究其布局。

電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)

電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)

    電子商務(wù)產(chǎn)品頁面模板設(shè)計(jì)    

想要查看更多電子商務(wù)模板和布局？  這是我們精選的免費(fèi)電子商務(wù)模板集合。

產(chǎn)品頁面布局＃3 - 以特色為中心

這種布局適用于專注于規(guī)格和功能而非美學(xué)的產(chǎn)品。

一些例子包括軟件，技術(shù)設(shè)備，機(jī)械部件等。

當(dāng)產(chǎn)品的視覺外觀不如其功能的有效性重要時(shí)，您希望您的產(chǎn)品描述和規(guī)格成為中心舞臺(tái)。

在這種情況下，您的產(chǎn)品圖片僅用作支持內(nèi)容，以向客戶展示其外觀，而不是誘使他們購買。

電子商務(wù)產(chǎn)品頁面設(shè)計(jì)示例

點(diǎn)擊放大此圖片

 

模板示例：以下是一些具有此類產(chǎn)品頁面布局設(shè)計(jì)的模板。您可以點(diǎn)擊查看，注冊(cè)并立即開始使用它們。

確保您訪問他們的演示站點(diǎn)并單擊其產(chǎn)品頁面以研究其布局。

電子商務(wù)產(chǎn)品頁面設(shè)計(jì)示例squarespace電子商務(wù)產(chǎn)品頁面設(shè)計(jì)示例bigcommerce

    電子商務(wù)產(chǎn)品頁面設(shè)計(jì)示例bigcommerce    

想要查看更多電子商務(wù)模板和布局？  這是我們精選的免費(fèi)電子商務(wù)模板集合。

5個(gè)令人敬畏的主頁設(shè)計(jì)布局，你今天可以復(fù)制不知道如何好地設(shè)計(jì)您的主頁？

讓我猜一下 - 你不是一個(gè)熟練的網(wǎng)站設(shè)計(jì)師，你正在建立一個(gè)網(wǎng)站，你想讓它變得很棒。

我們將向您展示令人敬畏，精心設(shè)計(jì)的主頁的解剖結(jié)構(gòu)。我們將在簡(jiǎn)單的圖表中展示它們并向您展示實(shí)例，以便即使非設(shè)計(jì)師也能理解 - 并復(fù)制！

查看指南

結(jié)論并帶走

您今天可以復(fù)制的令人敬畏的主頁設(shè)計(jì)布局我們創(chuàng)建的第一家電子商務(wù)商店在2年內(nèi)從零銷售到低6位數(shù)。因此，我們完全理解從頭開始構(gòu)建在線商店的痛苦和快樂。

我們也不是天生就具有天生的“電子商務(wù)”才能，但經(jīng)過多次失敗后，我們發(fā)現(xiàn)要想成功，通常會(huì)有助于研究什么對(duì)他人有用。

優(yōu)化產(chǎn)品頁面布局是幫助提高銷售額的快捷方式之一。雖然這不是 你能做的  唯一事情，但它是你應(yīng)該關(guān)注的第一個(gè)地方之一。

您的電子商務(wù)網(wǎng)站上有無窮無盡的測(cè)試和優(yōu)化列表。我們的建議是不要一次在您的網(wǎng)站上測(cè)試或更改10到20件事。相反，首先要處理大事，例如優(yōu)化產(chǎn)品頁面設(shè)計(jì)，制作精美的主頁設(shè)計(jì)，類別頁面，結(jié)帳頁面等。

一旦掌握了基礎(chǔ)知識(shí)，您就可以進(jìn)入更高級(jí)的轉(zhuǎn)換策略。始終一次只更改1或2件事，這樣您就可以輕松地找出哪些有效，哪些無效。

上篇文章：棗莊網(wǎng)絡(luò)的尖端營(yíng)銷
下篇文章：英特公司2019年五一放假通知