可成功獲取客戶的電商網站產品頁設計-第一部分
2016.09.18
可成功獲取客戶的電商網站產品頁設計-第一部分
該死的亞馬遜！在上麵買睡衣實在是太方便了！不要再從我口袋裏搶錢了！
好吧，上麵的話有點誇張。其實我很喜歡亞馬遜。怎麼會有人不喜歡它？
我迷上了網購。如果能足不出戶一步到位地買齊我需要的開學物品、雜貨和每月必需品，為什麼要脫下睡衣出門呢？
網購簡化了我的生活，給我帶來了數以萬計的選擇，手指一動就能搞定。
這也意味著，如果你要建設一個電商網站，那麼你將獲取更多的客戶（與實體店相比）。
這些對你來說有什麼啟示？
利：你正身處飛躍增長時期（就像當初的淘金潮）。人們的購買和消費欲望超越了人類曆史上的任何時期--而且將把更多的錢花在網購上。
如果你已經有了一個電商網站（或者你正在考慮建一個），那你已經抓住了這個機會。實體店的生意已經受到了衝擊。
弊：網絡市場的競爭將越來越大。這也意味著你的網絡生意需要提供比競爭對手更好的體驗。
問問自己這些問題：
你的電商網站是否能從競爭對手中脫穎而出？你的電商網站設計優化是否吸引了客戶的興趣？
如果你的答案是“不確定”或者“沒怎麼想過”，那麼你需要繼續閱讀這篇文章。
你的電商網站（尤其是產品頁）需要好好設計，這樣你才能有效地將瀏覽者轉化為購買者。
本文將為你展示創建網站的一些技巧和小竅門，幫助你瀏覽者轉化為客戶。這是領先競爭對手的一種方式。
如果你運營的不是一個電商網站的話。
毫無疑問，首頁的地位非常重要，無可取代。
但，對一個電商網站來說，你的產品頁才是最重要的那個頁麵。
為什麼？因為產品頁是將瀏覽者轉化為消費者的載體。
網站所有的頁麵一起構成了電商網站的整體體驗和品牌。而產品頁則是消費者決定“就買它了”或者“呃，還是看看其他產品吧”的地方。
如果你隻想優化電商網站的一個方麵，那就應該是產品頁。
那麼，如何才能設計出一個能夠取得消費者的喜愛（和錢包）的產品頁布局呢？
其實並沒有你想象的那麼難。隻要你按照已被領先電商網站證明行之有效的方法和已通過轉化專家測試的技巧來做就行。
這並不需要猜測或者複雜的設計理念。隻要按照下麵的兩個部分來設計你的的產品頁麵布局：
第一部分：【你正在看的】可成功獲取客戶的電商網站產品頁設計--電商產品頁必須擁有的八個要素
第二部分：可成功獲取客戶的電商網站產品頁設計-瞬間提升電商網站體驗
下麵來看第一部分
創建一個對客戶來說有用的產品頁麵布局，與設計技巧並沒有什麼關聯。
是的。
創建一個成功的產品頁，關鍵在於了解怎樣的視覺刺激才能幫你吸引目標客戶，讓他們像你預期的那樣做出反應。
我知道這聽起來有點像絕地控心術，請允許我解釋一下。
比如，有研究表明，橙色對衝動型購物者非常有吸引力，而藍色和青澀則更容易吸引精打細算的購物者。
你可以為“加入購物車”按鈕選擇一個適合你想要吸引的客戶的顏色。
這就是為什麼設計一個有效的產品頁麵，實際上並不需要特別過硬的設計技巧。你隻需要：
1.搞清楚你想吸引的客戶的類型
2.使用成熟的、經過測試的視覺刺激元素準確定位這些客戶（後麵會詳細講述）
想要你的產品頁吸引你想要的客戶並說服他們購買你的產品嗎？
當然想，否則你為什麼要讀這篇文章？
了le解jie如ru何he創chuang建jian一yi個ge高gao轉zhuan化hua率lv的de產chan品pin頁ye是shi一yi個ge熱re門men話hua題ti。人ren們men進jin行xing了le無wu數shu的de研yan究jiu和he測ce試shi，以yi期qi發fa現xian人ren們men決jue定ding購gou買mai某mou個ge商shang品pin或huo者zhe服fu務wu的de原yuan因yin。
你可以將這些知識轉化為自己的優勢，這樣你也可以建設一個高轉化率的產品頁。
機遇這些研究，所有成功的產品頁頁麵布局有一些共同點，下麵我們將與你分享這些。
你的產品頁必須的八個因素
1.好看的且包含相應信息的產品圖片
2.有用且有趣的產品說明
3.產品使用演示視頻
4.清晰的價格顯示
5.清晰的添加到購物車按鈕
6.展示客戶評論與打分
7.說明不確定性
8.顯示相關及推薦產品
附注：本(ben)列(lie)表(biao)是(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)。
#1 Amazing Product Image
#1好看的產品圖片
因為這樣會使手袋看起來更好看！
向顧客銷售商品最核心的就是展示。當你的商品看起來更好、更合意、質量更好，那麼人們會更願意購買它。
在你的電商網站中，產品圖片就是實體店中上麵有聚光燈的底座。
這也是為什麼百分之九十的人認為產品圖片和視頻資料會影響他們的購物決定。
產品圖片的質量直接影響產生銷售的能力。
尤其是電商網站的瀏覽者並不能觸摸、試穿或者與商品直接互動。
創建好看的產品圖片是你的首要任務，因為它們需要好看到能夠彌補瀏覽者無法觸摸、試用產品的缺憾。
不知道怎樣的圖片才叫好看？
沒問題。記住下麵的五個黃金法則就好。
法則1：高質量定製圖片
經驗法則：
1.永遠試用高質量圖片。避免使用模糊的（看起來很便宜）或者太小的圖片，以免無法看清細節。
2.條件允許的話，使用定製圖片，可以更好地展示圖片，使自己的品牌更具特色。有高質量攝像頭的手機就可以做到（比如最新款的iPhone）。
工具提示：不會用Photoshop編輯圖片？其實還有很多免費的圖片處理軟件可以幫助你修飾產品圖片。
法則2：360度全方位展示產品
不確定性和信息缺失是人們決定不購買某件商品的最大原因。
通過360度全方位、不同角度地展示產品，可以解決部分不確定性因素。
法則3：不同版本圖片
當有多個產品視圖時，產品銷量增加58%。
如果你的產品有不同的顏色或者材質，請保證每個版本都有圖片。
是的，耐克沒有遺漏任何一個要點，並盡可能地消除一些疑問，讓消費者有足夠的信心在網上直接購買。
法則4：細節查看
不熱衷網購的人群中，55%是因為他們無法親自檢查商品。
詳細的、可縮放的圖片可以提供僅次於親自觸摸、感受產品質地的體驗。
Cole Haan在這方麵做得很好，從各個方麵展示了小山羊皮的質地和這雙雕花鞋的細節。
法則5：有情境的圖片
“這個包對我來說會不會太大？”
“當然這很適合六英尺高的纖瘦模特，但是我隻有五英尺四英寸，身材一般。我穿上會好看嗎？”
這些問題都可以由情境圖片解答。當你向消費者展示你的商品在實際生活中的應用時，消費者就能想象自己是如何使用它們的。
產品圖片是消費者在無需親身體驗而去感受、觸摸、試用你的產品的最好工具
你並不需要成為一個攝影大師來製作精良的產品圖片。隻要圖片質量足夠好就可以。
經驗法則：你的產品圖片需要對消費者有所幫助。
這張產品圖片看起來很有藝術性很漂亮，但對於消費者決定要不要買來說毫無幫助。
這張圖片並沒有告訴消費者擁有這件產品會怎樣，以及這件產品是否會讓他們的生活更美好。
經驗教訓：檢查一下你的產品圖片--它們對消費者有所幫助嗎？
2.有用且有趣的產品說明
產品說明是產品頁上第二重要的，可以幫助說服消費者下定決心購買你的產品。
怎麼樣的產品描述才是好的？
1.有幫助且並不“salesy”。清晰永遠比說服更有效。你想要消費者清楚地了解他們對產品的預期。永遠不要承諾做不到的事情，因為這會帶來退款和負麵評價。
2.隻列出消費者真正關心的信息。不要隻是羅列製造商給你的一堆數據！說明和數據是不同的，一定要區分開來。描述你的觀點和使用產品的體驗。幫助消費者理解這件產品怎樣幫助他們。
(1). 比如，如果你想要買一台iPad，16GB和32GB到底有什麼區別？你知道這兩個數字代表容量，但你不知道自己需要多大容量。如果說明中告訴你16GB可以存儲3840首歌或者250個應用？對普通人來說這是不是比單純地寫上16GB更有幫助？
(2). 提供長短兩個版本的說明。79%的(de)人(ren)更(geng)習(xi)慣(guan)快(kuai)速(su)瀏(liu)覽(lan)而(er)不(bu)是(shi)仔(zai)細(xi)閱(yue)讀(du)，所(suo)以(yi)你(ni)需(xu)要(yao)為(wei)這(zhe)部(bu)分(fen)人(ren)提(ti)供(gong)一(yi)個(ge)簡(jian)明(ming)扼(e)要(yao)的(de)版(ban)本(ben)。當(dang)然(ran)，對(dui)於(yu)那(na)些(xie)喜(xi)歡(huan)通(tong)過(guo)閱(yue)讀(du)來(lai)說(shuo)深(shen)入(ru)了(le)解(jie)產(chan)品(pin)詳(xiang)情(qing)的(de)人(ren)，要(yao)提(ti)供(gong)一(yi)個(ge)擴(kuo)展(zhan)的(de)長(chang)版(ban)本(ben)來(lai)應(ying)對(dui)他(ta)們(men)的(de)需(xu)求(qiu)。
知道寫什麼是成功的一半，而另一半則是知道怎麼寫。
你得把這些信息以清晰、易讀的方式呈現出來，這樣消費者才能正確地理解。
如何撰寫優秀的電商產品說明？
下麵是撰寫簡單易懂的說明的一些技巧：
避免長句。長句比較難以消化。避免使用複雜、囉嗦的詞句。想象一下你要把產品賣給一個十歲的小孩。
避免老生常談。要專業，避免那些陳詞濫調的老生常談，這些並不提升消費者對產品的了解，所以去掉這些內容吧。
避免複雜的詞彙。xianggeipengyoutuijianwupinnayangxieshuoming。nibushizaixielunwen，suoyibuyaoyongnaxiefuzadecihuilaizhangxiannidezhihui。youyanjiubiaoming，nengxiechurongyilijiedewenzhangdexiezuoshuipingzai5到7分之間。
經驗教訓：檢jian查zha一yi下xia你ni的de產chan品pin說shuo明ming，看kan看kan你ni能neng不bu能neng按an照zhao我wo們men上shang麵mian的de提ti示shi修xiu改gai一yi下xia。記ji住zhu，不bu要yao隻zhi是shi列lie出chu產chan品pin的de規gui格ge。要yao寫xie那na些xie能neng幫bang助zhu消xiao費fei者zhe了le解jie你ni的de產chan品pin優you點dian的de內nei容rong。
3.產品展示視頻
產品圖片很好用，但視頻更好！
消費者搜索產品評論的第一個地方是優酷或者土豆。
31%的消費者會被產品視頻說服然後決定購買它們。
優秀的產品展示視頻不僅能讓消費者得到額外的體驗，當你把它們上傳到視頻網站後還能成為流量生成工具。
視頻能給你提供一個將產品賣給那些僅靠文字描述無法決定的消費者的機會。
Skip Hop的視頻就很好地展示了這款媽咪出行包能夠裝多少東西。
對於那些想知道這款包是否足夠大的媽媽來說，這個視頻直接解了這個疑惑。視頻還指出了一個很多人可能會忽視的一個亮點：這款包重量很輕。
4.清晰的價格顯示
在運營電商網站時，我們真的收到過郵件問產品的價格標在哪裏。
雖sui然ran一yi個ge月yue隻zhi收shou到dao了le幾ji封feng這zhe樣yang的de郵you件jian，但dan足zu夠gou引yin起qi我wo們men的de重zhong視shi，所suo以yi我wo們men改gai變bian了le頁ye麵mian布bu局ju，讓rang價jia格ge更geng容rong易yi被bei看kan到dao。我wo們men並bing不bu知zhi道dao沒mei有you發fa郵you件jian詢xun問wen我wo們men而er直zhi接jie離li開kai的de有you多duo少shao人ren，而er這zhe又you讓rang我wo們men損sun失shi了le多duo少shao訂ding單dan。
你得把價格放在非常顯眼的位置。
不同收入水平的消費者在某種程度上都很精打細算。不管你賣的是10000萬美元的奢侈名表還是5.99美元的小狗玩具。不管他們有多喜歡你的產品，如果價格超出了他們的預算，那他們不會出手購買的。
你得讓消費者一眼看到價格，讓他們判斷自己願不願意花這份錢。
怎樣清晰地顯示價格：
1.使用大號字。價格使用的應該是頁麵上最大號的字。
2.使用對比色。選擇一個能使價格突出於周圍內容的顏色。
3.放在購買按鈕或者產品名稱旁邊。購gou買mai按an鈕niu通tong常chang比bi較jiao顯xian眼yan，所suo以yi把ba價jia格ge放fang在zai購gou買mai按an鈕niu上shang麵mian是shi一yi個ge不bu錯cuo的de選xuan擇ze。另ling一yi個ge放fang大da是shi放fang在zai產chan品pin名ming稱cheng下xia麵mian。通tong常chang情qing況kuang下xia人ren類lei的de眼yan睛jing會hui很hen自zi然ran地di向xiang網wang頁ye上shang部bu看kan，而er標biao題ti則ze是shi第di一yi或huo者zhe第di二er個ge會hui被bei注zhu意yi的de內nei容rong。
5.清晰的添加到購物車按鈕
產品頁的目標是讓消費者點擊“添加到購物車”，所以這個按鈕是頁麵上非常重要的元素。
如果消費者決定購買你的產品，你希望他們知道下一步應該怎麼做。而一個明顯的添加到購物車按鈕是指引他們的好方法。
一個清晰的添加到購物車按鈕應該是什麼樣的？
1. 使用對比按鈕色。研(yan)究(jiu)表(biao)明(ming)，橙(cheng)色(se)或(huo)者(zhe)綠(lv)色(se)的(de)按(an)鈕(niu)顏(yan)色(se)更(geng)容(rong)易(yi)被(bei)點(dian)擊(ji)。當(dang)然(ran)，這(zhe)些(xie)顏(yan)色(se)可(ke)能(neng)跟(gen)網(wang)站(zhan)設(she)計(ji)不(bu)搭(da)。要(yao)選(xuan)擇(ze)與(yu)頁(ye)麵(mian)背(bei)景(jing)色(se)與(yu)附(fu)近(jin)文(wen)字(zi)顏(yan)色(se)對(dui)比(bi)比(bi)較(jiao)強(qiang)烈(lie)的(de)顏(yan)色(se)。
例1，如果背景色是海軍藍，文字是白色，奶油色和和米色對添加到購物車按鈕來說是不錯的選擇。
例2，如果背景色是淺灰色，文字是黑色，那麼任何明亮的顏色都可以選擇。
2. 使(shi)用(yong)大(da)小(xiao)合(he)適(shi)的(de)按(an)鈕(niu)和(he)文(wen)字(zi)。按(an)鈕(niu)要(yao)足(zu)夠(gou)大(da)，使(shi)消(xiao)費(fei)者(zhe)能(neng)夠(gou)注(zhu)意(yi)到(dao)，但(dan)又(you)不(bu)能(neng)太(tai)大(da)，否(fou)則(ze)看(kan)起(qi)來(lai)太(tai)俗(su)氣(qi)。如(ru)果(guo)不(bu)能(neng)在(zai)三(san)秒(miao)鍾(zhong)內(nei)找(zhao)到(dao)按(an)鈕(niu)，這(zhe)說(shuo)明(ming)它(ta)不(bu)夠(gou)大(da)。
6.展示客戶評論與打分
85%的消費者會在購物前查看網絡評論。
很多人會在決定要不要買一件產品前查看評論。
盡快開始收集客戶的評論和打分吧，然後在產品頁上展示。
公司不願意展示客戶評論的一大原因是害怕有差評。
事實上，如果處理得當，差評也能取得好結果。
那麼，如何才能將差評轉化為助力？
聽說過“善意殺人”嗎？這就是處理差評的方法。
1.不要火上澆油。要用專業、禮貌的態度回複差評。
2.即使消費者蠻不講理，也要以解決問題為主旨。
這樣，你可以向潛在客戶展示你解決問題的能力。這會讓消費者相信當他們遇到問題時，你會積極設法幫助他們解決。
這是我們自己的經驗之談。
我們為強硬處理蠻不講理的消費者付出了慘痛代價。
一個小小的投訴事件變成了一場社交媒體上的公關噩夢。此事帶來的消極影響持續了一年，帶來了超出我們預期的惡果。
有了這次教訓，我們學會了冷處理自己的怒火，開始學習優秀的客戶服務。
自此之後，負麵回饋或者客戶投訴不再困擾我們。我們發現這是一個向未來客戶展示我們的專業能力的機會。
7.說明不確定性
這個網站安全嗎？我多久才能拿到買的東西？退貨流程複雜嗎？
消費者在網購時會有很多疑問。因此，優秀的產品頁必須能解決這些問題。
把潛在消費者可能有的異議或者不確定性列出來，然後在產品頁上直接解釋清楚。
比如：
1.安全性問題：把值得信賴的信用卡logo放在產品頁上可以提升信譽度。
2.尺寸問題：在尺碼選擇旁邊添加一個尺碼表。
3.運輸成本：在產品說明旁邊添加運輸政策。
4.退貨流程：在產品說明旁邊添加退貨政策。
這些隻是常見的問題及應對方法。很簡單，但經常被忽略。
Forever 21提供了一個正麵案例：運輸成本、尺寸指導、當前的促銷活動（這樣消費者不會錯過）這些消費者關心的問題都顯示在頁麵上了。
我希望看到現在頁麵上沒有的退貨政策。除了這一點，其他方麵都做的不錯。
提示：如果你總是收到同樣的問題，考慮一下把這個問題放到產品頁上吧，或者放到FAQ頁麵上。
8.顯示相關及推薦產品
“要配薯條嗎？”
這是最常見、最有效的交叉銷售方式之一。
交(jiao)叉(cha)銷(xiao)售(shou)是(shi)指(zhi)為(wei)消(xiao)費(fei)者(zhe)提(ti)供(gong)他(ta)們(men)可(ke)能(neng)喜(xi)歡(huan)的(de)類(lei)似(si)商(shang)品(pin)。比(bi)如(ru)，當(dang)他(ta)們(men)在(zai)瀏(liu)覽(lan)亞(ya)洲(zhou)菜(cai)譜(pu)相(xiang)關(guan)的(de)書(shu)時(shi)，可(ke)以(yi)交(jiao)叉(cha)銷(xiao)售(shou)一(yi)本(ben)亞(ya)洲(zhou)點(dian)心(xin)菜(cai)譜(pu)相(xiang)關(guan)的(de)書(shu)。
顯示相關或推薦產品是向消費者進行直接交叉銷售的簡單方式。
1.為他們提供他們可能喜歡更多的產品。
2.如果他們正在尋找的產品不適合自己，為他們提供類似但不同的產品。
這對於你和消費者來說是一個雙贏的局麵，所以為什麼不添加這一功能呢？
設計一個有效的產品頁麵布局的最簡單方法就是使用那些經過驗證和實地測試的方法。
你可以隨時修改產品頁麵設計，從客戶那裏收集更多的數據，以更好地滿足他們的特定需求。
到目前為止我們已經討論了很多內容，在進入到第二部分內容前我們先做一個回顧。
1.好看的且包含相應信息的產品圖片。花點時間來製作自己的高質量產品圖片。確保包括產品的不同角度、視角和細節的圖片。如果有同個產品的不同版本，確保每個版本都有相應的圖片。有情境的圖片會幫助消費者下定購買的決心。
2.有用且有趣的產品說明。避免簡單羅列產品規格。要描述每個產品能為消費者帶來什麼。給他們需要的信息幫助他們下決定。
3.產品使用演示視頻。自己或者員工上陣拍攝產品使用短片，向消費者展示產品的各種細節。還可以討論產品的一些不能在圖片中顯示的優點。
4.清晰的價格顯示。在網頁上清晰地顯示產品價格。使用大號字和/或對比色讓它更加顯眼。
5.清晰的添加到購物車按鈕。當消費者決定買下某件產品時（點擊購買按鈕），你需要引導消費者進行下一步動作。大一點的按鈕和對比比較強的顏色容易引起他們的注意。
6.展示客戶評論與打分。消費者通常會根據產品評價和客戶評論來決定要不要購買。所以，盡快開始收集客戶評論吧！如果收到差評，請以專業冷靜的態度處理並解決問題。這將為你帶來好處。
7.說明不確定性。消費者通常會有很多疑問。請在產品頁上解決這些疑問。
8.顯示相關及推薦產品。相關產品推薦向消費者交叉銷售。這可以提升他們的體驗，讓你賺的更多。
花時間看看成功的產品頁麵必須有的八個要素，看看自己的產品頁麵缺少哪些。
在第二部分，我們將告訴你如何把這些元素融入到產品頁麵設計中。
電商產品頁必須擁有的八個要素
該死的亞馬遜！在上麵買睡衣實在是太方便了！不要再從我口袋裏搶錢了！
好吧，上麵的話有點誇張。其實我很喜歡亞馬遜。怎麼會有人不喜歡它？
我迷上了網購。如果能足不出戶一步到位地買齊我需要的開學物品、雜貨和每月必需品，為什麼要脫下睡衣出門呢？
網購簡化了我的生活，給我帶來了數以萬計的選擇，手指一動就能搞定。
這也意味著，如果你要建設一個電商網站，那麼你將獲取更多的客戶（與實體店相比）。
電商將繼續發展壯大，對商戶（比如你）來說將成為不可或缺的競爭力。
這些對你來說有什麼啟示？
利：你正身處飛躍增長時期（就像當初的淘金潮）。人們的購買和消費欲望超越了人類曆史上的任何時期--而且將把更多的錢花在網購上。
如果你已經有了一個電商網站（或者你正在考慮建一個），那你已經抓住了這個機會。實體店的生意已經受到了衝擊。
弊：網絡市場的競爭將越來越大。這也意味著你的網絡生意需要提供比競爭對手更好的體驗。
問問自己這些問題：
你的電商網站是否能從競爭對手中脫穎而出？你的電商網站設計優化是否吸引了客戶的興趣？
如果你的答案是“不確定”或者“沒怎麼想過”，那麼你需要繼續閱讀這篇文章。
你的電商網站（尤其是產品頁）需要好好設計，這樣你才能有效地將瀏覽者轉化為購買者。
本文將為你展示創建網站的一些技巧和小竅門，幫助你瀏覽者轉化為客戶。這是領先競爭對手的一種方式。
如何設計電商網站才能將瀏覽者轉化為購買者
如果你運營的不是一個電商網站的話。
毫無疑問，首頁的地位非常重要，無可取代。
但，對一個電商網站來說，你的產品頁才是最重要的那個頁麵。
為什麼？因為產品頁是將瀏覽者轉化為消費者的載體。
網站所有的頁麵一起構成了電商網站的整體體驗和品牌。而產品頁則是消費者決定“就買它了”或者“呃，還是看看其他產品吧”的地方。
如果你隻想優化電商網站的一個方麵，那就應該是產品頁。
那麼，如何才能設計出一個能夠取得消費者的喜愛（和錢包）的產品頁布局呢？
其實並沒有你想象的那麼難。隻要你按照已被領先電商網站證明行之有效的方法和已通過轉化專家測試的技巧來做就行。
這並不需要猜測或者複雜的設計理念。隻要按照下麵的兩個部分來設計你的的產品頁麵布局：
第一部分：【你正在看的】可成功獲取客戶的電商網站產品頁設計--電商產品頁必須擁有的八個要素
第二部分：可成功獲取客戶的電商網站產品頁設計-瞬間提升電商網站體驗
下麵來看第一部分
第一部分：產品頁應該包括哪些內容？
創建一個對客戶來說有用的產品頁麵布局，與設計技巧並沒有什麼關聯。
是的。
創建一個成功的產品頁，關鍵在於了解怎樣的視覺刺激才能幫你吸引目標客戶，讓他們像你預期的那樣做出反應。
我知道這聽起來有點像絕地控心術，請允許我解釋一下。
比如，有研究表明，橙色對衝動型購物者非常有吸引力，而藍色和青澀則更容易吸引精打細算的購物者。
你可以為“加入購物車”按鈕選擇一個適合你想要吸引的客戶的顏色。
這就是為什麼設計一個有效的產品頁麵，實際上並不需要特別過硬的設計技巧。你隻需要：
1.搞清楚你想吸引的客戶的類型
2.使用成熟的、經過測試的視覺刺激元素準確定位這些客戶（後麵會詳細講述）
想要你的產品頁吸引你想要的客戶並說服他們購買你的產品嗎？
當然想，否則你為什麼要讀這篇文章？
了le解jie如ru何he創chuang建jian一yi個ge高gao轉zhuan化hua率lv的de產chan品pin頁ye是shi一yi個ge熱re門men話hua題ti。人ren們men進jin行xing了le無wu數shu的de研yan究jiu和he測ce試shi，以yi期qi發fa現xian人ren們men決jue定ding購gou買mai某mou個ge商shang品pin或huo者zhe服fu務wu的de原yuan因yin。
你可以將這些知識轉化為自己的優勢，這樣你也可以建設一個高轉化率的產品頁。
機遇這些研究，所有成功的產品頁頁麵布局有一些共同點，下麵我們將與你分享這些。
你的產品頁必須的八個因素
1.好看的且包含相應信息的產品圖片
2.有用且有趣的產品說明
3.產品使用演示視頻
4.清晰的價格顯示
5.清晰的添加到購物車按鈕
6.展示客戶評論與打分
7.說明不確定性
8.顯示相關及推薦產品
附注：本(ben)列(lie)表(biao)是(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)。
#1 Amazing Product Image
#1好看的產品圖片
當你進到一個高端精品商店時，你會看到一個華麗的手袋放在一個閃閃發光的底座上，上方還亮著一排聚光燈。
為什麼店方要用這樣的方式來呈現一個已經很華麗的手袋呢？因為這樣會使手袋看起來更好看！
向顧客銷售商品最核心的就是展示。當你的商品看起來更好、更合意、質量更好，那麼人們會更願意購買它。
在你的電商網站中，產品圖片就是實體店中上麵有聚光燈的底座。
這也是為什麼百分之九十的人認為產品圖片和視頻資料會影響他們的購物決定。
尤其是電商網站的瀏覽者並不能觸摸、試穿或者與商品直接互動。
創建好看的產品圖片是你的首要任務，因為它們需要好看到能夠彌補瀏覽者無法觸摸、試用產品的缺憾。
不知道怎樣的圖片才叫好看？
沒問題。記住下麵的五個黃金法則就好。
法則1：高質量定製圖片
經驗法則：
1.永遠試用高質量圖片。避免使用模糊的（看起來很便宜）或者太小的圖片，以免無法看清細節。
2.條件允許的話，使用定製圖片，可以更好地展示圖片，使自己的品牌更具特色。有高質量攝像頭的手機就可以做到（比如最新款的iPhone）。
3.所有產品圖片應該有統一的大小和風格。
工具提示：不會用Photoshop編輯圖片？其實還有很多免費的圖片處理軟件可以幫助你修飾產品圖片。
法則2：360度全方位展示產品
不確定性和信息缺失是人們決定不購買某件商品的最大原因。
通過360度全方位、不同角度地展示產品，可以解決部分不確定性因素。
向消費者提供更多信息永遠好過提供很少信息。
法則3：不同版本圖片
當有多個產品視圖時，產品銷量增加58%。
如果你的產品有不同的顏色或者材質，請保證每個版本都有圖片。
隻有一個小小的色彩展示框，根本無法決定到底要不要買啊！
這些圖案圖片完全沒用。如果是完整的產品圖片會更有用的。
請確保展示產品的各個不同版本，這樣消費者才能了解他們要買的到底是什麼。
耐nai克ke的de產chan品pin展zhan示shi做zuo得de非fei常chang好hao。他ta們men用yong縮suo略lve圖tu展zhan示shi這zhe款kuan鞋xie子zi的de每mei一yi個ge顏yan色se。當dang你ni點dian擊ji一yi個ge顏yan色se時shi，這zhe個ge顏yan色se的de鞋xie子zi的de全quan套tao圖tu片pian就jiu會hui顯xian示shi出chu來lai。
是的，耐克沒有遺漏任何一個要點，並盡可能地消除一些疑問，讓消費者有足夠的信心在網上直接購買。
法則4：細節查看
不熱衷網購的人群中，55%是因為他們無法親自檢查商品。
詳細的、可縮放的圖片可以提供僅次於親自觸摸、感受產品質地的體驗。
你的產品圖片應該展示足夠的細節，這樣消費者就無需再去實體店查看商品。
Cole Haan在這方麵做得很好，從各個方麵展示了小山羊皮的質地和這雙雕花鞋的細節。
法則5：有情境的圖片
“這個包對我來說會不會太大？”
“當然這很適合六英尺高的纖瘦模特，但是我隻有五英尺四英寸，身材一般。我穿上會好看嗎？”
這些問題都可以由情境圖片解答。當你向消費者展示你的商品在實際生活中的應用時，消費者就能想象自己是如何使用它們的。
案例1：你賣的是泳衣。你可以展示不同體型和身高的模特穿同一件泳衣的圖片。注明模特的體型、身高、三圍等，這樣消費者就能更好地想象泳衣在他們身上是什麼樣子的。
案例2：你(ni)賣(mai)的(de)是(shi)信(xin)使(shi)包(bao)。包(bao)的(de)大(da)小(xiao)在(zai)圖(tu)片(pian)上(shang)看(kan)起(qi)來(lai)不(bu)太(tai)明(ming)顯(xian)。如(ru)果(guo)圖(tu)片(pian)上(shang)有(you)一(yi)些(xie)日(ri)常(chang)物(wu)品(pin)做(zuo)對(dui)比(bi)，那(na)麼(me)消(xiao)費(fei)者(zhe)就(jiu)能(neng)比(bi)較(jiao)容(rong)易(yi)地(di)得(de)知(zhi)包(bao)的(de)大(da)小(xiao)。你(ni)還(hai)可(ke)以(yi)展(zhan)示(shi)可(ke)以(yi)裝(zhuang)進(jin)暴(bao)力(li)的(de)物(wu)品(pin)，這(zhe)樣(yang)消(xiao)費(fei)者(zhe)可(ke)以(yi)了(le)解(jie)包(bao)的(de)容(rong)量(liang)對(dui)他(ta)們(men)來(lai)說(shuo)夠(gou)不(bu)夠(gou)。
產品圖片是消費者在無需親身體驗而去感受、觸摸、試用你的產品的最好工具
你並不需要成為一個攝影大師來製作精良的產品圖片。隻要圖片質量足夠好就可以。
經驗法則：你的產品圖片需要對消費者有所幫助。
不管你的產品圖片有多漂亮，如果它們不能對消費者有所幫助，那麼就完全沒有意義。
這張產品圖片看起來很有藝術性很漂亮，但對於消費者決定要不要買來說毫無幫助。
這張圖片並沒有告訴消費者擁有這件產品會怎樣，以及這件產品是否會讓他們的生活更美好。
經驗教訓：檢查一下你的產品圖片--它們對消費者有所幫助嗎？
2.有用且有趣的產品說明
產品說明是產品頁上第二重要的，可以幫助說服消費者下定決心購買你的產品。
產品概述應該有足夠的信息，這樣消費者才能確定產品是不是適合他們。
怎麼樣的產品描述才是好的？
1.有幫助且並不“salesy”。清晰永遠比說服更有效。你想要消費者清楚地了解他們對產品的預期。永遠不要承諾做不到的事情，因為這會帶來退款和負麵評價。
2.隻列出消費者真正關心的信息。不要隻是羅列製造商給你的一堆數據！說明和數據是不同的，一定要區分開來。描述你的觀點和使用產品的體驗。幫助消費者理解這件產品怎樣幫助他們。
(1). 比如，如果你想要買一台iPad，16GB和32GB到底有什麼區別？你知道這兩個數字代表容量，但你不知道自己需要多大容量。如果說明中告訴你16GB可以存儲3840首歌或者250個應用？對普通人來說這是不是比單純地寫上16GB更有幫助？
(2). 提供長短兩個版本的說明。79%的(de)人(ren)更(geng)習(xi)慣(guan)快(kuai)速(su)瀏(liu)覽(lan)而(er)不(bu)是(shi)仔(zai)細(xi)閱(yue)讀(du)，所(suo)以(yi)你(ni)需(xu)要(yao)為(wei)這(zhe)部(bu)分(fen)人(ren)提(ti)供(gong)一(yi)個(ge)簡(jian)明(ming)扼(e)要(yao)的(de)版(ban)本(ben)。當(dang)然(ran)，對(dui)於(yu)那(na)些(xie)喜(xi)歡(huan)通(tong)過(guo)閱(yue)讀(du)來(lai)說(shuo)深(shen)入(ru)了(le)解(jie)產(chan)品(pin)詳(xiang)情(qing)的(de)人(ren)，要(yao)提(ti)供(gong)一(yi)個(ge)擴(kuo)展(zhan)的(de)長(chang)版(ban)本(ben)來(lai)應(ying)對(dui)他(ta)們(men)的(de)需(xu)求(qiu)。
知道寫什麼是成功的一半，而另一半則是知道怎麼寫。
你得把這些信息以清晰、易讀的方式呈現出來，這樣消費者才能正確地理解。
如何撰寫優秀的電商產品說明？
下麵是撰寫簡單易懂的說明的一些技巧：
避免長句。長句比較難以消化。避免使用複雜、囉嗦的詞句。想象一下你要把產品賣給一個十歲的小孩。
避免老生常談。要專業，避免那些陳詞濫調的老生常談，這些並不提升消費者對產品的了解，所以去掉這些內容吧。
避免複雜的詞彙。xianggeipengyoutuijianwupinnayangxieshuoming。nibushizaixielunwen，suoyibuyaoyongnaxiefuzadecihuilaizhangxiannidezhihui。youyanjiubiaoming，nengxiechurongyilijiedewenzhangdexiezuoshuipingzai5到7分之間。
經驗教訓：檢jian查zha一yi下xia你ni的de產chan品pin說shuo明ming，看kan看kan你ni能neng不bu能neng按an照zhao我wo們men上shang麵mian的de提ti示shi修xiu改gai一yi下xia。記ji住zhu，不bu要yao隻zhi是shi列lie出chu產chan品pin的de規gui格ge。要yao寫xie那na些xie能neng幫bang助zhu消xiao費fei者zhe了le解jie你ni的de產chan品pin優you點dian的de內nei容rong。
3.產品展示視頻
產品圖片很好用，但視頻更好！
消費者搜索產品評論的第一個地方是優酷或者土豆。
31%的消費者會被產品視頻說服然後決定購買它們。
優秀的產品展示視頻不僅能讓消費者得到額外的體驗，當你把它們上傳到視頻網站後還能成為流量生成工具。
視頻能給你提供一個將產品賣給那些僅靠文字描述無法決定的消費者的機會。
觀看視頻裏的人如何觸摸、試用那些產品，並解釋產品的優缺點，這是僅次於到實體店聽銷售人員講解的體驗。
Skip Hop的視頻就很好地展示了這款媽咪出行包能夠裝多少東西。
對於那些想知道這款包是否足夠大的媽媽來說，這個視頻直接解了這個疑惑。視頻還指出了一個很多人可能會忽視的一個亮點：這款包重量很輕。
4.清晰的價格顯示
在運營電商網站時，我們真的收到過郵件問產品的價格標在哪裏。
雖sui然ran一yi個ge月yue隻zhi收shou到dao了le幾ji封feng這zhe樣yang的de郵you件jian，但dan足zu夠gou引yin起qi我wo們men的de重zhong視shi，所suo以yi我wo們men改gai變bian了le頁ye麵mian布bu局ju，讓rang價jia格ge更geng容rong易yi被bei看kan到dao。我wo們men並bing不bu知zhi道dao沒mei有you發fa郵you件jian詢xun問wen我wo們men而er直zhi接jie離li開kai的de有you多duo少shao人ren，而er這zhe又you讓rang我wo們men損sun失shi了le多duo少shao訂ding單dan。
你得把價格放在非常顯眼的位置。
不同收入水平的消費者在某種程度上都很精打細算。不管你賣的是10000萬美元的奢侈名表還是5.99美元的小狗玩具。不管他們有多喜歡你的產品，如果價格超出了他們的預算，那他們不會出手購買的。
你得讓消費者一眼看到價格，讓他們判斷自己願不願意花這份錢。
怎樣清晰地顯示價格：
1.使用大號字。價格使用的應該是頁麵上最大號的字。
2.使用對比色。選擇一個能使價格突出於周圍內容的顏色。
3.放在購買按鈕或者產品名稱旁邊。購gou買mai按an鈕niu通tong常chang比bi較jiao顯xian眼yan，所suo以yi把ba價jia格ge放fang在zai購gou買mai按an鈕niu上shang麵mian是shi一yi個ge不bu錯cuo的de選xuan擇ze。另ling一yi個ge放fang大da是shi放fang在zai產chan品pin名ming稱cheng下xia麵mian。通tong常chang情qing況kuang下xia人ren類lei的de眼yan睛jing會hui很hen自zi然ran地di向xiang網wang頁ye上shang部bu看kan，而er標biao題ti則ze是shi第di一yi或huo者zhe第di二er個ge會hui被bei注zhu意yi的de內nei容rong。
5.清晰的添加到購物車按鈕
產品頁的目標是讓消費者點擊“添加到購物車”，所以這個按鈕是頁麵上非常重要的元素。
如果消費者決定購買你的產品，你希望他們知道下一步應該怎麼做。而一個明顯的添加到購物車按鈕是指引他們的好方法。
一個清晰的添加到購物車按鈕應該是什麼樣的？
1. 使用對比按鈕色。研(yan)究(jiu)表(biao)明(ming)，橙(cheng)色(se)或(huo)者(zhe)綠(lv)色(se)的(de)按(an)鈕(niu)顏(yan)色(se)更(geng)容(rong)易(yi)被(bei)點(dian)擊(ji)。當(dang)然(ran)，這(zhe)些(xie)顏(yan)色(se)可(ke)能(neng)跟(gen)網(wang)站(zhan)設(she)計(ji)不(bu)搭(da)。要(yao)選(xuan)擇(ze)與(yu)頁(ye)麵(mian)背(bei)景(jing)色(se)與(yu)附(fu)近(jin)文(wen)字(zi)顏(yan)色(se)對(dui)比(bi)比(bi)較(jiao)強(qiang)烈(lie)的(de)顏(yan)色(se)。
例1，如果背景色是海軍藍，文字是白色，奶油色和和米色對添加到購物車按鈕來說是不錯的選擇。
例2，如果背景色是淺灰色，文字是黑色，那麼任何明亮的顏色都可以選擇。
2. 使(shi)用(yong)大(da)小(xiao)合(he)適(shi)的(de)按(an)鈕(niu)和(he)文(wen)字(zi)。按(an)鈕(niu)要(yao)足(zu)夠(gou)大(da)，使(shi)消(xiao)費(fei)者(zhe)能(neng)夠(gou)注(zhu)意(yi)到(dao)，但(dan)又(you)不(bu)能(neng)太(tai)大(da)，否(fou)則(ze)看(kan)起(qi)來(lai)太(tai)俗(su)氣(qi)。如(ru)果(guo)不(bu)能(neng)在(zai)三(san)秒(miao)鍾(zhong)內(nei)找(zhao)到(dao)按(an)鈕(niu)，這(zhe)說(shuo)明(ming)它(ta)不(bu)夠(gou)大(da)。
6.展示客戶評論與打分
85%的消費者會在購物前查看網絡評論。
很多人會在決定要不要買一件產品前查看評論。
盡快開始收集客戶的評論和打分吧，然後在產品頁上展示。
公司不願意展示客戶評論的一大原因是害怕有差評。
事實上，如果處理得當，差評也能取得好結果。
那麼，如何才能將差評轉化為助力？
聽說過“善意殺人”嗎？這就是處理差評的方法。
1.不要火上澆油。要用專業、禮貌的態度回複差評。
2.即使消費者蠻不講理，也要以解決問題為主旨。
這樣，你可以向潛在客戶展示你解決問題的能力。這會讓消費者相信當他們遇到問題時，你會積極設法幫助他們解決。
這是我們自己的經驗之談。
我們為強硬處理蠻不講理的消費者付出了慘痛代價。
一個小小的投訴事件變成了一場社交媒體上的公關噩夢。此事帶來的消極影響持續了一年，帶來了超出我們預期的惡果。
有了這次教訓，我們學會了冷處理自己的怒火，開始學習優秀的客戶服務。
自此之後，負麵回饋或者客戶投訴不再困擾我們。我們發現這是一個向未來客戶展示我們的專業能力的機會。
7.說明不確定性
這個網站安全嗎？我多久才能拿到買的東西？退貨流程複雜嗎？
消費者在網購時會有很多疑問。因此，優秀的產品頁必須能解決這些問題。
把潛在消費者可能有的異議或者不確定性列出來，然後在產品頁上直接解釋清楚。
比如：
1.安全性問題：把值得信賴的信用卡logo放在產品頁上可以提升信譽度。
2.尺寸問題：在尺碼選擇旁邊添加一個尺碼表。
3.運輸成本：在產品說明旁邊添加運輸政策。
4.退貨流程：在產品說明旁邊添加退貨政策。
這些隻是常見的問題及應對方法。很簡單，但經常被忽略。
解答更多消費者可能關心的問題，你就越有可能做成他們的生意。
Forever 21提供了一個正麵案例：運輸成本、尺寸指導、當前的促銷活動（這樣消費者不會錯過）這些消費者關心的問題都顯示在頁麵上了。
我希望看到現在頁麵上沒有的退貨政策。除了這一點，其他方麵都做的不錯。
提示：如果你總是收到同樣的問題，考慮一下把這個問題放到產品頁上吧，或者放到FAQ頁麵上。
8.顯示相關及推薦產品
“要配薯條嗎？”
這是最常見、最有效的交叉銷售方式之一。
交(jiao)叉(cha)銷(xiao)售(shou)是(shi)指(zhi)為(wei)消(xiao)費(fei)者(zhe)提(ti)供(gong)他(ta)們(men)可(ke)能(neng)喜(xi)歡(huan)的(de)類(lei)似(si)商(shang)品(pin)。比(bi)如(ru)，當(dang)他(ta)們(men)在(zai)瀏(liu)覽(lan)亞(ya)洲(zhou)菜(cai)譜(pu)相(xiang)關(guan)的(de)書(shu)時(shi)，可(ke)以(yi)交(jiao)叉(cha)銷(xiao)售(shou)一(yi)本(ben)亞(ya)洲(zhou)點(dian)心(xin)菜(cai)譜(pu)相(xiang)關(guan)的(de)書(shu)。
這方麵的代表是亞馬遜。他們似乎總能預測出我喜歡什麼並根據這個預測來推薦商品。
顯示相關或推薦產品是向消費者進行直接交叉銷售的簡單方式。
1.為他們提供他們可能喜歡更多的產品。
2.如果他們正在尋找的產品不適合自己，為他們提供類似但不同的產品。
這對於你和消費者來說是一個雙贏的局麵，所以為什麼不添加這一功能呢？
經驗教訓：八種方式提升你的產品頁
設計一個有效的產品頁麵布局的最簡單方法就是使用那些經過驗證和實地測試的方法。
你可以隨時修改產品頁麵設計，從客戶那裏收集更多的數據，以更好地滿足他們的特定需求。
到目前為止我們已經討論了很多內容，在進入到第二部分內容前我們先做一個回顧。
1.好看的且包含相應信息的產品圖片。花點時間來製作自己的高質量產品圖片。確保包括產品的不同角度、視角和細節的圖片。如果有同個產品的不同版本，確保每個版本都有相應的圖片。有情境的圖片會幫助消費者下定購買的決心。
2.有用且有趣的產品說明。避免簡單羅列產品規格。要描述每個產品能為消費者帶來什麼。給他們需要的信息幫助他們下決定。
3.產品使用演示視頻。自己或者員工上陣拍攝產品使用短片，向消費者展示產品的各種細節。還可以討論產品的一些不能在圖片中顯示的優點。
4.清晰的價格顯示。在網頁上清晰地顯示產品價格。使用大號字和/或對比色讓它更加顯眼。
5.清晰的添加到購物車按鈕。當消費者決定買下某件產品時（點擊購買按鈕），你需要引導消費者進行下一步動作。大一點的按鈕和對比比較強的顏色容易引起他們的注意。
6.展示客戶評論與打分。消費者通常會根據產品評價和客戶評論來決定要不要購買。所以，盡快開始收集客戶評論吧！如果收到差評，請以專業冷靜的態度處理並解決問題。這將為你帶來好處。
7.說明不確定性。消費者通常會有很多疑問。請在產品頁上解決這些疑問。
8.顯示相關及推薦產品。相關產品推薦向消費者交叉銷售。這可以提升他們的體驗，讓你賺的更多。
花時間看看成功的產品頁麵必須有的八個要素，看看自己的產品頁麵缺少哪些。
在第二部分，我們將告訴你如何把這些元素融入到產品頁麵設計中。
