有效的電商產品頁麵布局設計剖析--可直接使用的好用的設計以提升你的電商網站
設計消費者喜歡的並且讓他們有消費欲望的電商產品頁麵布局是一件非常有挑戰的事情。
我應該從哪裏開始?
怎樣的設計對“我的消費者”來說才是最好的?
怎樣才能從眾多競爭者中脫穎而出?
如果你也有同樣的困擾,本文將為你解答這些疑問。
我們有自己的電商網站,在轉化最優化方麵非常有經驗。
本文中,我們將與你分享一些已經經過試驗的方法,你可以借鑒來改進自己的產品頁,提升銷售量。
我們還開發了幾種現成的電商產品頁設計,你可以立即用到自己的電商網站中。
如果你還沒有閱讀本文的第一部分,那麼我建議你先去讀一下,這樣才能更好地理解本篇的內容。
可成功獲取客戶的電商網站產品頁設計--電商產品頁必須擁有的八個要素
附注:這(zhe)些(xie)現(xian)成(cheng)的(de)產(chan)品(pin)頁(ye)麵(mian)設(she)計(ji)是(shi)基(ji)於(yu)對(dui)消(xiao)費(fei)者(zhe)行(xing)為(wei)的(de)研(yan)究(jiu)而(er)形(xing)成(cheng)的(de)。當(dang)然(ran)不(bu)同(tong)的(de)網(wang)站(zhan)和(he)不(bu)同(tong)的(de)業(ye)務(wu)類(lei)型(xing)可(ke)能(neng)導(dao)致(zhi)結(jie)果(guo)有(you)所(suo)不(bu)同(tong)。這(zhe)份(fen)列(lie)表(biao)隻(zhi)是(shi)給(gei)你(ni)一(yi)個(ge)起(qi)點(dian),你(ni)可(ke)以(yi)在(zai)此(ci)基(ji)礎(chu)上(shang)改(gai)善(shan)自(zi)己(ji)的(de)網(wang)站(zhan)。你(ni)可(ke)以(yi)不(bu)斷(duan)測(ce)試(shi)不(bu)同(tong)的(de)方(fang)法(fa)來(lai)進(jin)一(yi)步(bu)優(you)化(hua)你(ni)的(de)網(wang)站(zhan)。
下麵正式進入第二部分的內容。
第二部分:有效的電商產品頁麵布局設計剖析
你可以立即拿來使用的設計
我們更看重好的科研與和行之有效的方法,而不是無形的所謂的天才設計。
說實話,並不是每個人都天生就有設計和色彩搭配技巧,所以我們也不會為你強塞各種設計理論。
80/20法則是學習成功電商網站的經驗,了解對方成功的原因,並思考對自己有哪些啟發。
既然已經有了好的示範,為什麼還要從零開始呢?
我們先來回顧一下第一部分內容中提到的成功的電商產品頁設計必須具備的八個因素。
1.好看的且包含相應信息的產品圖片
2.有用且有趣的產品說明
3.產品使用演示視頻
4.清晰的價格顯示
5.清晰的添加到購物車按鈕
6.展示客戶評論與打分
7.說明不確定性
8.顯示相關及推薦產品
下麵我們來看如何將這些元素成功地融入到產品頁麵布局中,以達到優化你的電商網站的目的。
#1.如何按照重要性排序
有的信息比其他信息更重要,因為它是消費者最關心的內容,對他們的購物決定有非常大的影響。
確認哪些信息對消費者來說更重要並把它們放在產品頁上最顯眼的位置,是非常重要的。
那麼我們應該怎麼做?
基本上,產品頁布局可以分為兩部分:
首屏顯示--頁麵加載完畢後無需向下滾動即可看到的內容。
非首屏顯示--頁麵加載完畢後需向下滾動才可看到的內容。
100%的訪問者會看到首屏顯示內容,因為這些內容是直接顯示在屏幕上的。
研究表明,人們在向下滾動頁麵時對相應的內容關注較少。
因此,決定這八個因素中的哪些應該放在首屏顯示內容中是非常重要的一步。
1.首屏顯示的因素
以下的六個因素毫無疑問是你的消費者最關心的問題。
92%的消費者在購買某件產品時是基於以下六個因素決定的--所以一定要注意!
1.產品圖片:既然我們討論的是網購,你的產品圖片是你能提供給消費者的僅次於親自觸摸、試用產品的體驗。高質量的圖片必須是消費者打開產品頁之後第一眼看到的東西。
2.價格:不bu管guan是shi給gei自zi己ji買mai昂ang貴gui的de禮li物wu還hai是shi便bian宜yi的de日ri用yong品pin,我wo們men對dui於yu價jia格ge都dou是shi敏min感gan的de。不bu管guan消xiao費fei者zhe多duo喜xi歡huan你ni的de產chan品pin,如ru果guo超chao出chu預yu算suan,他ta們men是shi不bu會hui買mai的de。最zui好hao把ba你ni的de產chan品pin價jia格ge放fang在zai顯xian眼yan的de位wei置zhi。如ru果guo沒mei法fa一yi眼yan看kan到dao價jia格ge,那na真zhen是shi太tai糟zao心xin了le。
3.不同版本產品展示(如果有的話):如果你的產品有很多不同的版本(顏色、圖案等),展示這些不同的版本會讓你的銷售上漲58%。不要隻是簡單地羅列顏色或者圖案選項。消費者都是視覺動物,記住這一點。
4.添加到購物車按鈕:產品頁的第一大任務是讓消費者點擊添加到購物車按鈕。一定要確保它是頁麵上最顯眼的元素之一。
5.客戶打分:85%的消費者會在購物前閱讀客戶評價。快快在明顯的地方展示客戶評價吧。
6.說明不確定性:50%的消費者表示,他們不網購是因為他們有很多疑問--這件產品適合我嗎?--物流要走多久?--退貨流程複雜嗎?一定要把這些問題的解答都顯示在首屏內容中,比如提供一個尺碼表或者一個直達物流和退貨政策的鏈接。
更多細節:這裏還有更多的內容可以展開講,如果想更深入地了解相關內容,請轉至本文第一部分。
下麵我們來詳細分析一下應該放在非首屏顯示的內容。
隨後,我們會展示一些電子商務產品頁麵布局設計,你可以借鑒來幫助你的業務增長。
2.不在首屏顯示的因素
以下四個因素可以不在首屏顯示,但也會對你的銷售造成影響。
這四個因素是“配角”,可以幫助拿下那些還在猶豫到底要不要買、隻差臨門一腳的消費者。
2.產品展示視頻:31%的消費者會被產品視頻說服而去購買相關產品。這是僅次於讓銷售人員到你家門口為你演示應該如何使用產品的體驗。
3.客戶評價:85%的de消xiao費fei者zhe在zai購gou物wu前qian會hui閱yue讀du評ping價jia。網wang購gou總zong會hui伴ban隨sui著zhe各ge種zhong各ge樣yang的de疑yi問wen。這zhe是shi為wei什shen麼me認ren真zhen收shou集ji好hao評ping和he差cha評ping能neng夠gou幫bang助zhu消xiao費fei者zhe下xia定ding決jue定ding購gou物wu。當dang人ren們men覺jiao得de從cong評ping論lun中zhong得de到dao了le足zu夠gou的de信xin息xi,他ta們men一yi般ban會hui采cai取qu相xiang應ying的de行xing動dong。
4.推薦產品:這是交叉銷售其他產品的好方法--比如亞馬遜在這方麵做得非常好。推薦或類似產品能從兩方麵幫助消費者:(1)如果消費者不喜歡正在查看的產品,你可以為他們展示類似的他們可能真正在尋找的產品;(2)如果他們喜歡正在查看的產品,你可以為他們提供更多類似或者互補的產品。這對於你和你的消費者來說是一個雙贏的局麵。
更多細節:這裏還有更多的內容可以展開講,如果想更深入地了解相關內容,請轉至本文第一部分。
現在你已經了解了產品頁應該包括哪些內容,下麵我們來學習一下這些因素應該怎樣放置才能為潛在消費者帶來更好的購物體驗。
#2. 有效的電子商務產品頁麵布局+隨時可用的示例模板
簡約是優秀的產品頁設計的關鍵。
想要消費者快速準確地找到他們想要的信息,過度設計和過度擁擠是產品頁設計中一定要避免的。
像前麵提到的,既然已經有了好的示範,為什麼還要從零開始呢?
下麵是一些經過實踐的優秀的設計範例,讓我們來看看它們到底優秀在哪裏,思考一下對你自己的電商網站有哪些啟示。
我們將為你展示:
1.三大你應該使用的電商產品頁麵布局設計
2.決定哪一種最適合你的店鋪
3.從哪裏能找到這些模板並立刻使用
產品頁布局#1--普遍適用版
這個布局設計是普遍適用的,可以用來銷售很多產品。
人們的閱讀習慣是從左到右,圖片放在左邊的話能立即抓住消費者的注意力。
如果留下了良好的第一印象,他們很大可能會繼續停留在頁麵上閱讀更多內容。
產品頁布局#2--專注於圖片
這個產品頁布局強調的無疑是產品。
如果你銷售的是創意類或者是很有美感的產品--比如家具、珠寶、手工製品等,這個設計非常合適。
在頁麵上方放置一幅全寬產品圖片,會將消費者的注意力集中到產品的美上 。
產品頁布局#--專注於性能
這個布局設計適用於那些專注細節和功能的產品。
比如軟件、技術涉筆、機械零件等。
當產品的功能性比外觀更重要時,產品說明和規格是非常重要的。
這種情況下,你的產品圖片隻是輔助內容,其作用是向消費者展示它的外觀,而不是說服他們買下它。
我們的第一個電商網站從零銷售額到六位數,隻用了兩年。所以我們完全理解從零開始建設電商網站的酸甜苦辣。
我們並不是生來就有“電商”方麵的經驗,但在失敗了無數次後,我們發現,要成功,就要從別人那裏學習。
優化你的產品頁布局是提升銷售的最快方法之一。這並不是你能做的唯一的事情,卻是你最應該首先做的事情之一。
可以拿來測試和優化電商網站的方法有很多。我們建議不要一次性測試或者改變10個或者20個網站元素。相反,我們建議你先關注重要的事情,比如優化產品頁設計,創建一個優秀的主頁、分類頁、付款頁等。
yidannizuohaolezhexiejichudeshiqing,nijiukeyijixuyanjiuzhuanhuacelvexiangguandeshiqingle。jizhu,yicizhigaibianyiliangchujike,zheyangcainengqingsongfaxiannachugaidongyouyong、哪處沒用。












