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

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

你在哪里或如何開始？

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

我怎樣才能從競爭對手中脫穎而出？

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

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

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

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

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

如果您還沒有選擇在線商店建設(shè)者，請查看下面對比表中我們評價的電子商務(wù)平臺：

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

佳選擇

5 出5

模板設(shè)計

5星，滿分5星

便于使用

5星，滿分5星

功能和靈活性

5星，滿分5星

聲望

5星，滿分5星

價錢

5星，滿分5星

免費(fèi)試用

閱讀我們的完整評論

bigcommerce徽標(biāo)

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

4.5分（滿分5分）

模板設(shè)計

4.5顆星，高

便于使用

4.5顆星，高

功能和靈活性

5星，滿分5星

聲望

4顆星，高

價錢

4顆星，高

免費(fèi)試用

閱讀我們的完整評論

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

 適合小型企業(yè)

4.5分（滿分5分）

模板設(shè)計

4.5顆星，高

便于使用

5星，滿分5星

功能和靈活性

4顆星，高

聲望

4顆星，高

價錢

5星，滿分5星

免費(fèi)試用

閱讀我們的完整評論

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

指南部分

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

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

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

到第2部分......

 

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

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

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

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

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

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

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

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

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

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

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

4.  明確定價

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

6.  顯示客戶評論和評級

7.  解決不確定性問題

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

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

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

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

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

那我們該怎么做呢？

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

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

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

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

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

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

 

1.元素高低在上

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

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

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

資料來源：Nike.com

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

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

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

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

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

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

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

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

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

 

2.元素低于折疊

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

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

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

資料來源：Nike.com

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

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

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

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

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

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

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

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

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

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

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

我們會告訴你：

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

如何確定哪一個適合您的商店; 和

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

查看指南

結(jié)論并帶走

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

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

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

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

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

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