可成功獲取客戶的電商網(wǎng)站產(chǎn)品頁設(shè)計-第一部分


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

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

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

網(wǎng)購簡化了我的生活，給我?guī)�來了�?shù)以萬計的選擇，手指一動就能搞定。

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

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

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

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

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

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

問問自己這些問題：

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

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

你的電商網(wǎng)站（尤其是產(chǎn)品頁）需要好好設(shè)計，這樣你才能有效地將瀏覽者轉(zhuǎn)化為購買者。

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


如果你運營的不是一個電商網(wǎng)站的話。

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

但，對一個電商網(wǎng)站來說，你的產(chǎn)品頁才是最重要的那個頁面。

為什么？因為產(chǎn)品頁是將瀏覽者轉(zhuǎn)化為消費者的載體。

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

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

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

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

這并不需要猜測或者復(fù)雜的設(shè)計理念。只要按照下面的兩個部分來設(shè)計你的的產(chǎn)品頁面布局：

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

第二部分：可成功獲取客戶的電商網(wǎng)站產(chǎn)品頁設(shè)計-瞬間提升電商網(wǎng)站體驗

下面來看第一部分


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

是的。

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

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

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

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

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

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

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

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

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

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

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

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

你的產(chǎn)品頁必須的八個因素

1.好看的且包含相應(yīng)信息的產(chǎn)品圖片

2.有用且有趣的產(chǎn)品說明

3.產(chǎn)品使用演示視頻

4.清晰的價格顯示

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

6.展示客戶評論與打分

7.說明不確定性

8.顯示相關(guān)及推薦產(chǎn)品

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

#1 Amazing Product Image

#1好看的產(chǎn)品圖片

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

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

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

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

在你的電商網(wǎng)站中，產(chǎn)品圖片就是實體店中上面有聚光燈的底座。

這也是為什么百分之九十的人認為產(chǎn)品圖片和視頻資料會影響他們的購物決定。

產(chǎn)品圖片的質(zhì)量直接影響產(chǎn)生銷售的能力。

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

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

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

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

法則1：高質(zhì)量定制圖片

經(jīng)驗法則：

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

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

3.所有產(chǎn)品圖片應(yīng)該有統(tǒng)一的大小和風(fēng)格。

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

法則2：360度全方位展示產(chǎn)品

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

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

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

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

法則3：不同版本圖片

當有多個產(chǎn)品視圖時，產(chǎn)品銷量增加58%。

如果你的產(chǎn)品有不同的顏色或者材質(zhì)，請保證每個版本都有圖片。

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

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

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

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

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

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

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

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

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

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

法則5：有情境的圖片

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

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

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

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

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

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

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

經(jīng)驗法則：你的產(chǎn)品圖片需要對消費者有所幫助。

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

沒有助益的產(chǎn)品圖片：很有藝術(shù)性，但對于網(wǎng)購者的購買決定毫無幫助。

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

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

經(jīng)驗教訓(xùn)：檢查一下你的產(chǎn)品圖片--它們對消費者有所幫助嗎？

2.有用且有趣的產(chǎn)品說明

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

產(chǎn)品概述應(yīng)該有足夠的信息，這樣消費者才能確定產(chǎn)品是不是適合他們。

怎么樣的產(chǎn)品描述才是好的？

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

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

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

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

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

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

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

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

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

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

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

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

3.產(chǎn)品展示視頻

產(chǎn)品圖片很好用，但視頻更好！

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

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

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

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

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

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

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

4.清晰的價格顯示

在運營電商網(wǎng)站時，我們真的收到過郵件問產(chǎn)品的價格標在哪里。

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

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

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

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

怎樣清晰地顯示價格：

1.使用大號字。價格使用的應(yīng)該是頁面上最大號的字。

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

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

實例：

優(yōu)秀的

大號字很好地抓住了我的注意力。盡管價格沒有使用明亮的顏色，但是與下方的亮橙色形成了比較好的對比。

失敗的

價格所在的按鈕并不大，顏色也不夠鮮亮。我得花費一點精力才能找到價格和按鈕，這有點麻煩。

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

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

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

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

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

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

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

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

實例：

優(yōu)秀的

Skip Hop的購物車按鈕顏色明亮，消費者很容易看到，看起來也并不俗氣。

失敗的

Whipping Post的購物車按鈕很別致，但是跟文字內(nèi)容沒有對比。盡管四周有一個邊框，但并不會得到消費者的注意，或者讓我想按下這個按鈕。

6.展示客戶評論與打分

85%的消費者會在購物前查看網(wǎng)絡(luò)評論。

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

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

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

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

那么，如何才能將差評轉(zhuǎn)化為助力？

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

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

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

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

這是我們自己的經(jīng)驗之談。

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

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

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

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

7.說明不確定性

這個網(wǎng)站安全嗎？我多久才能拿到買的東西？退貨流程復(fù)雜嗎？

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

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

比如：

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

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

    3.運輸成本：在產(chǎn)品說明旁邊添加運輸政策。

    4.退貨流程：在產(chǎn)品說明旁邊添加退貨政策。

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

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

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

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

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

8.顯示相關(guān)及推薦產(chǎn)品

“要配薯條嗎？”

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

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

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

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

    1.為他們提供他們可能喜歡更多的產(chǎn)品。

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

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


設(shè)計一個有效的產(chǎn)品頁面布局的最簡單方法就是使用那些經(jīng)過驗證和實地測試的方法。

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

到目前為止我們已經(jīng)討論了很多內(nèi)容，在進入到第二部分內(nèi)容前我們先做一個回顧。

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

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

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

4.清晰的價格顯示。在網(wǎng)頁上清晰地顯示產(chǎn)品價格。使用大號字和/或?qū)Ρ壬�讓它更加顯眼。

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

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

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

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

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

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