可成功獲取客戶的電商網站產品頁設計-第一部分


該死的亞馬遜！在上面買睡衣實在是太方便了！不要再從我口袋里搶錢了！

好吧，上面的話有點夸張。其實我很喜歡亞馬遜。怎么會有人不喜歡它？

我迷上了網購。如果能足不出戶一步到位地買齊我需要的開學物品、雜貨和每月必需品，為什么要脫下睡衣出門呢？

網購簡化了我的生活，給我?guī)砹藬?shù)以萬計的選擇，手指一動就能搞定。

這也意味著，如果你要建設一個電商網站，那么你將獲取更多的客戶（與實體店相比）。

電商將繼續(xù)發(fā)展壯大，對商戶（比如你）來說將成為不可或缺的競爭力。

這些對你來說有什么啟示？

利：你正身處飛躍增長時期（就像當初的淘金潮）。人們的購買和消費欲望超越了人類歷史上的任何時期--而且將把更多的錢花在網購上。

如果你已經有了一個電商網站（或者你正在考慮建一個），那你已經抓住了這個機會。實體店的生意已經受到了沖擊。

弊：網絡市場的競爭將越來越大。這也意味著你的網絡生意需要提供比競爭對手更好的體驗。

問問自己這些問題：

你的電商網站是否能從競爭對手中脫穎而出？你的電商網站設計優(yōu)化是否吸引了客戶的興趣？

如果你的答案是“不確定”或者“沒怎么想過”，那么你需要繼續(xù)閱讀這篇文章。

你的電商網站（尤其是產品頁）需要好好設計，這樣你才能有效地將瀏覽者轉化為購買者。

本文將為你展示創(chuàng)建網站的一些技巧和小竅門，幫助你瀏覽者轉化為客戶。這是領先競爭對手的一種方式。


如果你運營的不是一個電商網站的話。

毫無疑問，首頁的地位非常重要，無可取代。

但，對一個電商網站來說，你的產品頁才是最重要的那個頁面。

為什么？因為產品頁是將瀏覽者轉化為消費者的載體。

網站所有的頁面一起構成了電商網站的整體體驗和品牌。而產品頁則是消費者決定“就買它了”或者“呃，還是看看其他產品吧”的地方。

如果你只想優(yōu)化電商網站的一個方面，那就應該是產品頁。

那么，如何才能設計出一個能夠取得消費者的喜愛（和錢包）的產品頁布局呢？

其實并沒有你想象的那么難。只要你按照已被領先電商網站證明行之有效的方法和已通過轉化專家測試的技巧來做就行。

這并不需要猜測或者復雜的設計理念。只要按照下面的兩個部分來設計你的的產品頁面布局：

第一部分：【你正在看的】可成功獲取客戶的電商網站產品頁設計--電商產品頁必須擁有的八個要素

第二部分：可成功獲取客戶的電商網站產品頁設計-瞬間提升電商網站體驗

下面來看第一部分


創(chuàng)建一個對客戶來說有用的產品頁面布局，與設計技巧并沒有什么關聯(lián)。

是的。

創(chuàng)建一個成功的產品頁，關鍵在于了解怎樣的視覺刺激才能幫你吸引目標客戶，讓他們像你預期的那樣做出反應。

我知道這聽起來有點像絕地控心術，請允許我解釋一下。

比如，有研究表明，橙色對沖動型購物者非常有吸引力，而藍色和青澀則更容易吸引精打細算的購物者。

你可以為“加入購物車”按鈕選擇一個適合你想要吸引的客戶的顏色。

這就是為什么設計一個有效的產品頁面，實際上并不需要特別過硬的設計技巧。你只需要：

1.搞清楚你想吸引的客戶的類型

2.使用成熟的、經過測試的視覺刺激元素準確定位這些客戶（后面會詳細講述）

想要你的產品頁吸引你想要的客戶并說服他們購買你的產品嗎？

當然想，否則你為什么要讀這篇文章？

了解如何創(chuàng)建一個高轉化率的產品頁是一個熱門話題。人們進行了無數(shù)的研究和測試，以期發(fā)現(xiàn)人們決定購買某個商品或者服務的原因。

你可以將這些知識轉化為自己的優(yōu)勢，這樣你也可以建設一個高轉化率的產品頁。

機遇這些研究，所有成功的產品頁頁面布局有一些共同點，下面我們將與你分享這些。

你的產品頁必須的八個因素

1.好看的且包含相應信息的產品圖片

2.有用且有趣的產品說明

3.產品使用演示視頻

4.清晰的價格顯示

5.清晰的添加到購物車按鈕

6.展示客戶評論與打分

7.說明不確定性

8.顯示相關及推薦產品

附注：本列表是基于對消費者行為的研究而形成的。當然不同的網站和不同的業(yè)務類型可能導致結果有所不同。這份列表只是給你一個起點，你可以在此基礎上改善自己的網站。你可以不斷測試不同的方法來進一步優(yōu)化你的網站。

#1 Amazing Product Image

#1好看的產品圖片

當你進到一個高端精品商店時，你會看到一個華麗的手袋放在一個閃閃發(fā)光的底座上，上方還亮著一排聚光燈。

為什么店方要用這樣的方式來呈現(xiàn)一個已經很華麗的手袋呢？

因為這樣會使手袋看起來更好看！

向顧客銷售商品最核心的就是展示。當你的商品看起來更好、更合意、質量更好，那么人們會更愿意購買它。

在你的電商網站中，產品圖片就是實體店中上面有聚光燈的底座。

這也是為什么百分之九十的人認為產品圖片和視頻資料會影響他們的購物決定。
產品圖片的質量直接影響產生銷售的能力。

尤其是電商網站的瀏覽者并不能觸摸、試穿或者與商品直接互動。

創(chuàng)建好看的產品圖片是你的首要任務，因為它們需要好看到能夠彌補瀏覽者無法觸摸、試用產品的缺憾。

不知道怎樣的圖片才叫好看？

沒問題。記住下面的五個黃金法則就好。

法則1：高質量定制圖片

經驗法則：

1.永遠試用高質量圖片。避免使用模糊的（看起來很便宜）或者太小的圖片，以免無法看清細節(jié)。

2.條件允許的話，使用定制圖片，可以更好地展示圖片，使自己的品牌更具特色。有高質量攝像頭的手機就可以做到（比如最新款的iPhone）。

3.所有產品圖片應該有統(tǒng)一的大小和風格。

工具提示：不會用Photoshop編輯圖片？其實還有很多免費的圖片處理軟件可以幫助你修飾產品圖片。

法則2：360度全方位展示產品

不確定性和信息缺失是人們決定不購買某件商品的最大原因。

通過360度全方位、不同角度地展示產品，可以解決部分不確定性因素。

向消費者提供更多信息永遠好過提供很少信息。

耐克從每一個角度向顧客展示他們的運動鞋，確保沒有遺漏。

法則3：不同版本圖片

當有多個產品視圖時，產品銷量增加58%。

如果你的產品有不同的顏色或者材質，請保證每個版本都有圖片。

只有一個小小的色彩展示框，根本無法決定到底要不要買??！

這些圖案圖片完全沒用。如果是完整的產品圖片會更有用的。

請確保展示產品的各個不同版本，這樣消費者才能了解他們要買的到底是什么。

耐克的產品展示做得非常好。他們用縮略圖展示這款鞋子的每一個顏色。當你點擊一個顏色時，這個顏色的鞋子的全套圖片就會顯示出來。

是的，耐克沒有遺漏任何一個要點，并盡可能地消除一些疑問，讓消費者有足夠的信心在網上直接購買。

法則4：細節(jié)查看

不熱衷網購的人群中，55%是因為他們無法親自檢查商品。

詳細的、可縮放的圖片可以提供僅次于親自觸摸、感受產品質地的體驗。

你的產品圖片應該展示足夠的細節(jié)，這樣消費者就無需再去實體店查看商品。

Cole Haan在這方面做得很好，從各個方面展示了小山羊皮的質地和這雙雕花鞋的細節(jié)。

法則5：有情境的圖片

“這個包對我來說會不會太大？”

“當然這很適合六英尺高的纖瘦模特，但是我只有五英尺四英寸，身材一般。我穿上會好看嗎？”

這些問題都可以由情境圖片解答。當你向消費者展示你的商品在實際生活中的應用時，消費者就能想象自己是如何使用它們的。

案例1：你賣的是泳衣。你可以展示不同體型和身高的模特穿同一件泳衣的圖片。注明模特的體型、身高、三圍等，這樣消費者就能更好地想象泳衣在他們身上是什么樣子的。

案例2：你賣的是信使包。包的大小在圖片上看起來不太明顯。如果圖片上有一些日常物品做對比，那么消費者就能比較容易地得知包的大小。你還可以展示可以裝進暴力的物品，這樣消費者可以了解包的容量對他們來說夠不夠。

產品圖片是消費者在無需親身體驗而去感受、觸摸、試用你的產品的最好工具

你并不需要成為一個攝影大師來制作精良的產品圖片。只要圖片質量足夠好就可以。

經驗法則：你的產品圖片需要對消費者有所幫助。

不管你的產品圖片有多漂亮，如果它們不能對消費者有所幫助，那么就完全沒有意義。

沒有助益的產品圖片：很有藝術性，但對于網購者的購買決定毫無幫助。

這張產品圖片看起來很有藝術性很漂亮，但對于消費者決定要不要買來說毫無幫助。

這張圖片并沒有告訴消費者擁有這件產品會怎樣，以及這件產品是否會讓他們的生活更美好。

經驗教訓：檢查一下你的產品圖片--它們對消費者有所幫助嗎？

2.有用且有趣的產品說明

產品說明是產品頁上第二重要的，可以幫助說服消費者下定決心購買你的產品。

產品概述應該有足夠的信息，這樣消費者才能確定產品是不是適合他們。

怎么樣的產品描述才是好的？

1.有幫助且并不“salesy”。清晰永遠比說服更有效。你想要消費者清楚地了解他們對產品的預期。永遠不要承諾做不到的事情，因為這會帶來退款和負面評價。

2.只列出消費者真正關心的信息。不要只是羅列制造商給你的一堆數(shù)據！說明和數(shù)據是不同的，一定要區(qū)分開來。描述你的觀點和使用產品的體驗。幫助消費者理解這件產品怎樣幫助他們。

        (1). 比如，如果你想要買一臺iPad，16GB和32GB到底有什么區(qū)別？你知道這兩個數(shù)字代表容量，但你不知道自己需要多大容量。如果說明中告訴你16GB可以存儲3840首歌或者250個應用？對普通人來說這是不是比單純地寫上16GB更有幫助？

        (2). 提供長短兩個版本的說明。79%的人更習慣快速瀏覽而不是仔細閱讀，所以你需要為這部分人提供一個簡明扼要的版本。當然，對于那些喜歡通過閱讀來說深入了解產品詳情的人，要提供一個擴展的長版本來應對他們的需求。

知道寫什么是成功的一半，而另一半則是知道怎么寫。

你得把這些信息以清晰、易讀的方式呈現(xiàn)出來，這樣消費者才能正確地理解。

如何撰寫優(yōu)秀的電商產品說明？

下面是撰寫簡單易懂的說明的一些技巧：

避免長句。長句比較難以消化。避免使用復雜、啰嗦的詞句。想象一下你要把產品賣給一個十歲的小孩。

避免老生常談。要專業(yè)，避免那些陳詞濫調的老生常談，這些并不提升消費者對產品的了解，所以去掉這些內容吧。

避免復雜的詞匯。像給朋友推薦物品那樣寫說明。你不是在寫論文，所以不要用那些復雜的詞匯來彰顯你的智慧。有研究表明，能寫出容易理解的文章的寫作水平在5到7分之間。

經驗教訓：檢查一下你的產品說明，看看你能不能按照我們上面的提示修改一下。記住，不要只是列出產品的規(guī)格。要寫那些能幫助消費者了解你的產品優(yōu)點的內容。

3.產品展示視頻

產品圖片很好用，但視頻更好！

消費者搜索產品評論的第一個地方是優(yōu)酷或者土豆。

31%的消費者會被產品視頻說服然后決定購買它們。

優(yōu)秀的產品展示視頻不僅能讓消費者得到額外的體驗，當你把它們上傳到視頻網站后還能成為流量生成工具。

視頻能給你提供一個將產品賣給那些僅靠文字描述無法決定的消費者的機會。

觀看視頻里的人如何觸摸、試用那些產品，并解釋產品的優(yōu)缺點，這是僅次于到實體店聽銷售人員講解的體驗。

Skip Hop的視頻就很好地展示了這款媽咪出行包能夠裝多少東西。

對于那些想知道這款包是否足夠大的媽媽來說，這個視頻直接解了這個疑惑。視頻還指出了一個很多人可能會忽視的一個亮點：這款包重量很輕。

4.清晰的價格顯示

在運營電商網站時，我們真的收到過郵件問產品的價格標在哪里。

雖然一個月只收到了幾封這樣的郵件，但足夠引起我們的重視，所以我們改變了頁面布局，讓價格更容易被看到。我們并不知道沒有發(fā)郵件詢問我們而直接離開的有多少人，而這又讓我們損失了多少訂單。

你得把價格放在非常顯眼的位置。

不同收入水平的消費者在某種程度上都很精打細算。不管你賣的是10000萬美元的奢侈名表還是5.99美元的小狗玩具。不管他們有多喜歡你的產品，如果價格超出了他們的預算，那他們不會出手購買的。

你得讓消費者一眼看到價格，讓他們判斷自己愿不愿意花這份錢。

怎樣清晰地顯示價格：

1.使用大號字。價格使用的應該是頁面上最大號的字。

2.使用對比色。選擇一個能使價格突出于周圍內容的顏色。

3.放在購買按鈕或者產品名稱旁邊。購買按鈕通常比較顯眼，所以把價格放在購買按鈕上面是一個不錯的選擇。另一個放大是放在產品名稱下面。通常情況下人類的眼睛會很自然地向網頁上部看，而標題則是第一或者第二個會被注意的內容。

5.清晰的添加到購物車按鈕

產品頁的目標是讓消費者點擊“添加到購物車”，所以這個按鈕是頁面上非常重要的元素。

如果消費者決定購買你的產品，你希望他們知道下一步應該怎么做。而一個明顯的添加到購物車按鈕是指引他們的好方法。

一個清晰的添加到購物車按鈕應該是什么樣的？

1. 使用對比按鈕色。研究表明，橙色或者綠色的按鈕顏色更容易被點擊。當然，這些顏色可能跟網站設計不搭。要選擇與頁面背景色與附近文字顏色對比比較強烈的顏色。

    例1，如果背景色是海軍藍，文字是白色，奶油色和和米色對添加到購物車按鈕來說是不錯的選擇。

    例2，如果背景色是淺灰色，文字是黑色，那么任何明亮的顏色都可以選擇。

2. 使用大小合適的按鈕和文字。按鈕要足夠大，使消費者能夠注意到，但又不能太大，否則看起來太俗氣。如果不能在三秒鐘內找到按鈕，這說明它不夠大。

6.展示客戶評論與打分

85%的消費者會在購物前查看網絡評論。

很多人會在決定要不要買一件產品前查看評論。

盡快開始收集客戶的評論和打分吧，然后在產品頁上展示。

公司不愿意展示客戶評論的一大原因是害怕有差評。

事實上，如果處理得當，差評也能取得好結果。

那么，如何才能將差評轉化為助力？

聽說過“善意殺人”嗎？這就是處理差評的方法。

    1.不要火上澆油。要用專業(yè)、禮貌的態(tài)度回復差評。

    2.即使消費者蠻不講理，也要以解決問題為主旨。

這樣，你可以向潛在客戶展示你解決問題的能力。這會讓消費者相信當他們遇到問題時，你會積極設法幫助他們解決。

這是我們自己的經驗之談。

我們?yōu)閺娪蔡幚硇U不講理的消費者付出了慘痛代價。

一個小小的投訴事件變成了一場社交媒體上的公關噩夢。此事帶來的消極影響持續(xù)了一年，帶來了超出我們預期的惡果。

有了這次教訓，我們學會了冷處理自己的怒火，開始學習優(yōu)秀的客戶服務。

自此之后，負面回饋或者客戶投訴不再困擾我們。我們發(fā)現(xiàn)這是一個向未來客戶展示我們的專業(yè)能力的機會。

7.說明不確定性

這個網站安全嗎？我多久才能拿到買的東西？退貨流程復雜嗎？

消費者在網購時會有很多疑問。因此，優(yōu)秀的產品頁必須能解決這些問題。

把潛在消費者可能有的異議或者不確定性列出來，然后在產品頁上直接解釋清楚。

比如：

    1.安全性問題：把值得信賴的信用卡logo放在產品頁上可以提升信譽度。

    2.尺寸問題：在尺碼選擇旁邊添加一個尺碼表。

    3.運輸成本：在產品說明旁邊添加運輸政策。

    4.退貨流程：在產品說明旁邊添加退貨政策。

這些只是常見的問題及應對方法。很簡單，但經常被忽略。

解答更多消費者可能關心的問題，你就越有可能做成他們的生意。

Forever 21提供了一個正面案例：運輸成本、尺寸指導、當前的促銷活動（這樣消費者不會錯過）這些消費者關心的問題都顯示在頁面上了。

我希望看到現(xiàn)在頁面上沒有的退貨政策。除了這一點，其他方面都做的不錯。

提示：如果你總是收到同樣的問題，考慮一下把這個問題放到產品頁上吧，或者放到FAQ頁面上。

8.顯示相關及推薦產品

“要配薯條嗎？”

這是最常見、最有效的交叉銷售方式之一。

交叉銷售是指為消費者提供他們可能喜歡的類似商品。比如，當他們在瀏覽亞洲菜譜相關的書時，可以交叉銷售一本亞洲點心菜譜相關的書。

這方面的代表是亞馬遜。他們似乎總能預測出我喜歡什么并根據這個預測來推薦商品。

顯示相關或推薦產品是向消費者進行直接交叉銷售的簡單方式。

    1.為他們提供他們可能喜歡更多的產品。

    2.如果他們正在尋找的產品不適合自己，為他們提供類似但不同的產品。

這對于你和消費者來說是一個雙贏的局面，所以為什么不添加這一功能呢？


設計一個有效的產品頁面布局的最簡單方法就是使用那些經過驗證和實地測試的方法。

你可以隨時修改產品頁面設計，從客戶那里收集更多的數(shù)據，以更好地滿足他們的特定需求。

到目前為止我們已經討論了很多內容，在進入到第二部分內容前我們先做一個回顧。

1.好看的且包含相應信息的產品圖片。花點時間來制作自己的高質量產品圖片。確保包括產品的不同角度、視角和細節(jié)的圖片。如果有同個產品的不同版本，確保每個版本都有相應的圖片。有情境的圖片會幫助消費者下定購買的決心。

2.有用且有趣的產品說明。避免簡單羅列產品規(guī)格。要描述每個產品能為消費者帶來什么。給他們需要的信息幫助他們下決定。

3.產品使用演示視頻。自己或者員工上陣拍攝產品使用短片，向消費者展示產品的各種細節(jié)。還可以討論產品的一些不能在圖片中顯示的優(yōu)點。

4.清晰的價格顯示。在網頁上清晰地顯示產品價格。使用大號字和/或對比色讓它更加顯眼。

5.清晰的添加到購物車按鈕。當消費者決定買下某件產品時（點擊購買按鈕），你需要引導消費者進行下一步動作。大一點的按鈕和對比比較強的顏色容易引起他們的注意。

6.展示客戶評論與打分。消費者通常會根據產品評價和客戶評論來決定要不要購買。所以，盡快開始收集客戶評論吧！如果收到差評，請以專業(yè)冷靜的態(tài)度處理并解決問題。這將為你帶來好處。

7.說明不確定性。消費者通常會有很多疑問。請在產品頁上解決這些疑問。

8.顯示相關及推薦產品。相關產品推薦向消費者交叉銷售。這可以提升他們的體驗，讓你賺的更多。

花時間看看成功的產品頁面必須有的八個要素，看看自己的產品頁面缺少哪些。

在第二部分，我們將告訴你如何把這些元素融入到產品頁面設計中。