有效的電子商務(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件事,這樣您就可以輕松地找出哪些有效,哪些無效。