有效的電子商務產品頁面布局設計剖析 - 您可以復制以立即改進您的在線商店的即用型設計
電子商務產品頁面設計第2部分設計一個客戶喜歡瀏覽的電子商務產品頁面布局,恰好鼓勵他們打開錢包是一項具有挑戰(zhàn)性的任務。
你在哪里或如何開始?
哪些設計適合“我的”客戶?
我怎樣才能從競爭對手中脫穎而出?
如果您對如何為您的在線商店設計獲獎產品頁面的同樣炙手可熱的問題感到困惑,本指南將是您的閃亮盔甲的騎士。
我們經營著自己成功的電子商務商店,并且是真正閱讀分析報告以獲得樂趣的轉化優(yōu)化愛好者 。
我想,當涉及到這類東西時,我們只是極客。
在本指南中,我們將與您分享一些經過現場測試的方法,您可以模仿這些方法來改進產品頁面,這將有助于提高您的業(yè)務銷售額。
我們還在下面創(chuàng)建了幾個現成的電子商務產品頁面設計(基于實踐),您可以立即適應您的在線商店。
如果您還沒有選擇在線商店建設者,請查看下面對比表中我們評價的電子商務平臺:
好的電子商務網站建設者
佳選擇
5 出5
模板設計
5星,滿分5星
便于使用
5星,滿分5星
功能和靈活性
5星,滿分5星
聲望
5星,滿分5星
價錢
5星,滿分5星
免費試用
閱讀我們的完整評論
bigcommerce徽標
佳大型企業(yè)網站建設者
4.5分(滿分5分)
模板設計
4.5顆星,高
便于使用
4.5顆星,高
功能和靈活性
5星,滿分5星
聲望
4顆星,高
價錢
4顆星,高
免費試用
閱讀我們的完整評論
標志 - 威克斯 - 100x100的
適合小型企業(yè)
4.5分(滿分5分)
模板設計
4.5顆星,高
便于使用
5星,滿分5星
功能和靈活性
4顆星,高
聲望
4顆星,高
價錢
5星,滿分5星
免費試用
閱讀我們的完整評論
如果您還沒有閱讀本指南的第1部分,我建議您在進入本文之前先閱讀本文,以便您充分利用本指南。
指南部分
第1部分: 如何設計一個贏得客戶的產品頁面 - 8必須有內容來增加您的在線商店
第2部分:[您在這里] 有效產品頁面布局設計剖析 - 您可以復制以立即改進您的電子商務網站的即用型設計
附注:這些現成的產品頁面設計基于對消費者行為的研究。但是,結果可能因網站和企業(yè)而異。這些設計布局旨在為您提供佳起點,您可以繼續(xù)改進它們。不斷測試不同方法以進一步優(yōu)化您的在線商店始終是一個好習慣。
到第2部分......
第2部分:有效的電子商務產品頁面設計剖析
您可以在電子商務網站中立即采用和使用的設計
在網站建設者專家,我們重視良好的研究和成熟的方法,而不是像天生的設計人才那樣無形的“東西”。
說實話,并不是每個人都天生具有設計和配色技巧,所以我們不會把各種設計理論塞進你的喉嚨。
80/20規(guī)則是從成功的在線商店中學習,了解哪些對他們有用,以及它們如何為您服務。
為什么要重新發(fā)明輪子呢?
以下是第1部分的概述,其中我們重點介紹了所有成功的電子商務產品頁面設計所具有的8個要素。
第1部分:您需要在產品頁面中包含的8件事
1. 驚人的信息產品圖像
2. 有用和有趣的產品描述
3. 使用產品演示視頻
4. 明確定價
5. 清除添加到購物車按鈕
6. 顯示客戶評論和評級
7. 解決不確定性問題
8. 顯示相關和推薦的產品
現在,讓我們了解所有這些內容元素如何在一個良好的產品頁面布局中組合在一起,以便您可以優(yōu)化您的在線商店。
#1如何確定重要產品頁面元素的優(yōu)先級?
有些信息比其他信息更重要,因為它們是購物者關心的,對購買決策過程影響大。
確定哪些信息對您的購物者重要,并確保我們將其放置在您的電子商務產品頁面設計中明顯的位置,這一點非常重要。
那我們該怎么做呢?
基本上,產品頁面的布局分為兩部分:
1. 高于折疊 - 您可以看到的內容在頁面加載時不向下滾動。
2. 低于折疊 - 您只在向下滾動頁面時看到的內容。
100%的訪問者將看到“折疊”內容,因為它會立即顯示在計算機屏幕上。
研究表明,當人們向下滾動頁面時,人們往往不太關注內容。
這就是為什么計劃8個產品頁面項目中的哪一個應該插入上面這么重要的原因。
1.元素高低在上
以下6項可以說是您的客戶關心的問題。
92%的客戶僅根據這6個項目做出購買決定 - 所以要密切關注!
好的電子商務產品頁面設計
資料來源:Nike.com
產品圖片: 由于我們在這里談論在線購物,因此您的產品圖片是在購買之前能夠物理接觸,保持和測試您的產品的下一個佳選擇。由于這對購物者來說非常重要,因此高質量的產品圖像必須是購物者在加載產品頁面時看到的第一件事。
價格: 我們都對價格很敏感,無論我們是購買豪華禮品來對待自己還是只是更便宜的日常用品。無論您的購物者對您的產品有多喜愛,如果產品的價格超出預算,他們就不會購買。好在易于到位的位置顯示價格。當你無法輕易找到價格時,這是非常令人沮喪的。
產品變化(如果有):如果您有許多產品變化(顏色,圖案等),顯示實際產品變化可以使您的銷售額提高58%。不要只列出顏色或圖案選項,顯示它們。購物者是視覺人,所以迎合了這一點。
添加到購物車按鈕:產品頁面的第一項工作是讓購物者點擊“添加到購物車”按鈕。因此,請確保它是您的產品頁面上容易找到的元素之一。
客戶評級: 85%的消費者在購買前閱讀評論。因此,要突出顯示您的評論,以向您的購物者展示其他人對該產品的看法。
解決不確定性: 50%的客戶表示他們沒有在線購買是因為他們有不確定性 - 這款產品能否適合我? - 獲取我的東西需要多長時間? - 回報是否復雜?確保您正面解決這些問題,例如提供尺寸表或顯示運輸和退貨政策的鏈接。
更多詳情: 此處還有很多內容,如果您想對上述6個項目進行更深入的討論,請轉到本指南的第1部分。
讓我們深入了解有關您應該放置在折疊之下的內容的更具體細節(jié)。
之后,我們將向您展示一些您可以模仿以幫助發(fā)展業(yè)務的電子商務產品頁面布局設計。
2.元素低于折疊
有4個內容項目可以為您提供折扣,這可能會讓您失去或贏得銷售。
這4個元素是“支持”元素,旨在幫助推動即將購買的購物者,但需要更有說服力。
佳電子商務產品頁面設計
資料來源:Nike.com
產品描述: 您可以按照自己的方式教育購物者。79%的人都是掃描儀,因此請確保包含較短版本的描述,例如上面的示例 - “多功能和快速” 或“響應式緩沖” - 為您的購物者提供快速的片段,了解該產品為何以及如何使他們受益。對于需要更多信息的消費者,請確保您擁有更長版本的描述,以描述您的產品如何解決他們的問題。
產品演示視頻: 31%的消費者在被產品視頻說服后購買產品。這是讓銷售人員出現在您家門口向您展示產品如何運作的下一個佳選擇。
顧客評論: 85%的消費者在購買前閱讀在線評論。在線購物總是存在不確定性。這就是為什么好評和差評的好集合可以幫助推動購物者購買。當人們在閱讀了利弊后感到被告知時,他們更有可能采取行動。
推薦產品:這是向您的客戶交叉銷售的絕佳方式 - 就像亞馬遜一樣。推薦或類似產品以兩種方式幫助您的購物者; (1)如果購物者不喜歡他們所看到的東西,你可以向他們展示他們可能更喜歡的類似產品; (2)如果他們喜歡他們看到的東西,你可以向他們提供他們可能也想要的類似或補充產品。這對您和您的購物者來說是一個雙贏的局面,那么為什么不將它們包含在您的產品頁面上呢?
更多詳情: 此處還有更多內容,如果您想對上述4個項目進行更深入的討論,請轉到本指南的第1部分。
既然您已經知道應該在電子商務產品頁面中包含哪些內容,那么讓我們探索一下您可以定位這些內容項目的各種方法,以便為潛在客戶創(chuàng)建購物體驗!
#2 有效的電子商務產品頁面布局+您今天可以使用的示例模板
簡單是良好的產品頁面設計的關鍵。
您希望購物者能夠快速,輕松地找到所需信息。因此,重要的是不要 用不必要的細節(jié)過度設計或過度擠壓產品頁面。
如上所述,在設計電子商務產品頁面布局時,您無需重新發(fā)明輪子。
已經有成熟的工作設計,讓我們來探索它們的外觀以及如何為您的業(yè)務使用類似的布局格式。
我們會告訴你:
您應該使用的3種頂級電子商務產品頁面布局設計;
如何確定哪一個適合您的商店; 和
您可以在哪里找到這些產品頁面布局模板,以便立即開始使用。
產品頁面布局#1 - 通用
這種布局非常通用,因此它可以用來銷售幾乎任何產品。
人們傾向于從左到右閱讀,因此當您將產品圖像放在左側時,它會立即吸引購物者的注意力。
如果他們喜歡他們所看到的(第一印象),他們可能會留下來并閱讀更多相關內容。
電子商務產品頁面設計示例
點擊放大此圖片
模板示例:以下是一些具有此類產品頁面布局設計的免費模板。您可以點擊查看,注冊并立即開始使用它們。
確保您訪問他們的演示站點并單擊其產品頁面以研究其布局。
電子商務產品頁面模板設計電子商務產品頁面模板設計
電子商務產品頁面模板設計電子商務產品頁面模板設計
電子商務產品頁面模板設計電子商務產品頁面模板設計
想要查看更多電子商務模板和布局? 這是我們精選的免費電子商務模板集合。
產品頁面布局#2 - 以圖像為中心
此產品頁面布局比其他任何東西更強調產品。
如果您銷售的是創(chuàng)意或以美學為重點的產品,例如家具,珠寶,手工制品等,這是一個有效的產品頁面。
通過在頁面頂部放置一個全寬的產品圖像,這可以引導您的客戶專注于產品的美感。
電子商務產品頁面設計示例
點擊放大此圖片
模板示例:以下是一些具有此類產品頁面布局設計的模板。您可以點擊查看,注冊并立即開始使用它們。
確保您訪問他們的演示站點并單擊其產品頁面以研究其布局。
電子商務產品頁面模板設計電子商務產品頁面模板設計
電子商務產品頁面模板設計電子商務產品頁面模板設計
電子商務產品頁面模板設計
想要查看更多電子商務模板和布局? 這是我們精選的免費電子商務模板集合。
產品頁面布局#3 - 以特色為中心
這種布局適用于專注于規(guī)格和功能而非美學的產品。
一些例子包括軟件,技術設備,機械部件等。
當產品的視覺外觀不如其功能的有效性重要時,您希望您的產品描述和規(guī)格成為中心舞臺。
在這種情況下,您的產品圖片僅用作支持內容,以向客戶展示其外觀,而不是誘使他們購買。
電子商務產品頁面設計示例
點擊放大此圖片
模板示例:以下是一些具有此類產品頁面布局設計的模板。您可以點擊查看,注冊并立即開始使用它們。
確保您訪問他們的演示站點并單擊其產品頁面以研究其布局。
電子商務產品頁面設計示例squarespace電子商務產品頁面設計示例bigcommerce
電子商務產品頁面設計示例bigcommerce
想要查看更多電子商務模板和布局? 這是我們精選的免費電子商務模板集合。
5個令人敬畏的主頁設計布局,你今天可以復制不知道如何好地設計您的主頁?
讓我猜一下 - 你不是一個熟練的網站設計師,你正在建立一個網站,你想讓它變得很棒。
我們將向您展示令人敬畏,精心設計的主頁的解剖結構。我們將在簡單的圖表中展示它們并向您展示實例,以便即使非設計師也能理解 - 并復制!
查看指南
結論并帶走
您今天可以復制的令人敬畏的主頁設計布局我們創(chuàng)建的第一家電子商務商店在2年內從零銷售到低6位數。因此,我們完全理解從頭開始構建在線商店的痛苦和快樂。
我們也不是天生就具有天生的“電子商務”才能,但經過多次失敗后,我們發(fā)現要想成功,通常會有助于研究什么對他人有用。
優(yōu)化產品頁面布局是幫助提高銷售額的快捷方式之一。雖然這不是 你能做的 唯一事情,但它是你應該關注的第一個地方之一。
您的電子商務網站上有無窮無盡的測試和優(yōu)化列表。我們的建議是不要一次在您的網站上測試或更改10到20件事。相反,首先要處理大事,例如優(yōu)化產品頁面設計,制作精美的主頁設計,類別頁面,結帳頁面等。
一旦掌握了基礎知識,您就可以進入更高級的轉換策略。始終一次只更改1或2件事,這樣您就可以輕松地找出哪些有效,哪些無效。