日韩一级一片

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


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

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

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

網購簡化了我的生活，給我帶來了數以萬計的選擇，手指一動就能搞定。

这也意味着，如果你要建设一个電商網站，那么你将获取更多的客户（与实体店相比）。

電商將繼續發展壯大，對商戶（比如你）來說將成爲不可或缺的競爭力。

這些對你來說有什麽啓示？

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

如果你已经有了一个電商網站（或者你正在考虑建一个），那你已经抓住了这个机会。实体店的生意已经受到了冲击。

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

問問自己這些問題：

你的電商網站是否能从竞争对手中脱颖而出？你的電商網站設計优化是否吸引了客户的兴趣？

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

你的電商網站（尤其是産品页）需要好好設計，这样你才能有效地将浏览者转化为购买者。

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


如果你运营的不是一个電商網站的话。

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

但，对一个電商網站来说，你的産品页才是最重要的那个页面。

为什么？因为産品页是将浏览者转化为消费者的载体。

网站所有的页面一起构成了電商網站的整体体验和品牌。而産品页则是消费者决定“就买它了”或者“呃，还是看看其他産品吧”的地方。

如果你只想优化電商網站的一个方面，那就应该是産品页。

那么，如何才能設計出一个能够取得消费者的喜爱（和钱包）的産品页布局呢？

其实并没有你想象的那么难。只要你按照已被领先電商網站证明行之有效的方法和已通过转化专家测试的技巧来做就行。

这并不需要猜测或者复杂的設計理念。只要按照下面的两个部分来設計你的的産品页面布局：

第一部分：【你正在看的】可成功获取客户的電商網站産品页設計--电商産品页必须拥有的八个要素

第二部分：可成功获取客户的電商網站産品页設計-瞬间提升電商網站体验

下面來看第一部分


创建一个对客户来说有用的産品页面布局，与設計技巧并没有什么关联。

是的。

创建一个成功的産品页，关键在于了解怎样的视觉刺激才能帮你吸引目标客户，让他们像你预期的那样做出反应。

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

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

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

这就是为什么設計一个有效的産品页面，实际上并不需要特别过硬的設計技巧。你只需要：

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

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

想要你的産品页吸引你想要的客户并说服他们购买你的産品吗？

當然想，否則你爲什麽要讀這篇文章？

了解如何创建一个高转化率的産品页是一个热门话题。人们进行了无数的研究和测试，以期发现人们决定购买某个商品或者服務的原因。

你可以将这些知识转化为自己的优势，这样你也可以建设一个高转化率的産品页。

机遇这些研究，所有成功的産品页页面布局有一些共同点，下面我們将与你分享这些。

你的産品页必须的八个因素

1.好看的且包含相应信息的産品图片

2.有用且有趣的産品说明

3.産品使用演示视频

4.清晰的價格顯示

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

6.展示客戶評論與打分

7.說明不確定性

8.显示相关及推荐産品

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

#1 Amazing Product Image

#1好看的産品图片

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

爲什麽店方要用這樣的方式來呈現一個已經很華麗的手袋呢？

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

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

在你的電商網站中，産品图片就是实体店中上面有聚光灯的底座。

这也是为什么百分之九十的人认为産品图片和视频资料会影响他们的购物决定。
産品图片的质量直接影响产生销售的能力。

尤其是電商網站的浏览者并不能触摸、试穿或者与商品直接互动。

创建好看的産品图片是你的首要任务，因为它们需要好看到能够弥补浏览者无法触摸、试用産品的缺憾。

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

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

法則1：高質量定制圖片

經驗法則：

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

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

3.所有産品图片应该有统一的大小和风格。

工具提示：不會用Photoshop編輯圖片？其实还有很多免费的图片处理软件可以帮助你修饰産品图片。

法则2：360度全方位展示産品

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

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

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

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

法則3：不同版本圖片

当有多个産品视图时，産品销量增加58%。

如果你的産品有不同的颜色或者材质，请保证每个版本都有图片。

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

这些图案图片完全没用。如果是完整的産品图片会更有用的。

请确保展示産品的各个不同版本，这样消费者才能了解他们要买的到底是什么。

耐克的産品展示做得非常好。他们用缩略图展示这款鞋子的每一个颜色。当你点击一个颜色时，这个颜色的鞋子的全套图片就会显示出来。

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

法則4：細節查看

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

详细的、可缩放的图片可以提供仅次于亲自触摸、感受産品质地的体验。

你的産品图片应该展示足够的细节，这样消费者就无需再去实体店查看商品。

Cole Haan在这方面做得很好，从各个方面展示了小山羊皮的质地和这双雕花鞋的细节。

法則5：有情境的圖片

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

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

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

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

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

産品图片是消费者在无需亲身体验而去感受、触摸、试用你的産品的最好工具

你并不需要成为一个摄影大师来制作精良的産品图片。只要图片质量足够好就可以。

經驗法則：你的産品图片需要对消费者有所帮助。

不管你的産品图片有多漂亮，如果它们不能对消费者有所帮助，那么就完全没有意义。

没有助益的産品图片：很有艺术性，但对于网购者的购买决定毫无帮助。

这张産品图片看起来很有艺术性很漂亮，但对于消费者决定要不要买来说毫无帮助。

这张图片并没有告诉消费者拥有这件産品会怎样，以及这件産品是否会让他们的生活更美好。

經驗教訓：检查一下你的産品图片--它们对消费者有所帮助吗？

2.有用且有趣的産品说明

産品说明是産品页上第二重要的，可以帮助说服消费者下定决心购买你的産品。

産品概述应该有足够的信息，这样消费者才能確定産品是不是适合他们。

怎么样的産品描述才是好的？

1.有幫助且並不“salesy”。清晰永远比说服更有效。你想要消费者清楚地了解他们对産品的预期。永远不要承诺做不到的事情，因为这会带来退款和负面评价。

2.只列出消費者真正關心的信息。不要只是罗列制造商给你的一堆数据！说明和数据是不同的，一定要区分开来。描述你的观点和使用産品的体验。帮助消费者理解这件産品怎样帮助他们。

        (1). 比如，如果你想要买一台iPad，16GB和32GB到底有什么区别？你知道这两个数字代表容量，但你不知道自己需要多大容量。如果说明中告诉你16GB可以存储3840首歌或者250个应用？对普通人来说这是不是比单纯地写上16GB更有帮助？

        (2). 提供长短两个版本的说明。79%的人更习惯快速浏览而不是仔细阅读，所以你需要为这部分人提供一个简明扼要的版本。当然，对于那些喜欢通过阅读来说深入了解産品详情的人，要提供一个扩展的长版本来应对他们的需求。

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

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

如何撰写优秀的电商産品说明？

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

避免長句。长句比较难以消化。避免使用复杂、啰嗦的词句。想象一下你要把産品卖给一个十岁的小孩。

避免老生常談。要专业，避免那些陈词滥调的老生常谈，这些并不提升消费者对産品的了解，所以去掉这些内容吧。

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

經驗教訓：检查一下你的産品说明，看看你能不能按照我們上面的提示修改一下。记住，不要只是列出産品的规格。要写那些能帮助消费者了解你的産品优点的内容。

3.産品展示视频

産品图片很好用，但视频更好！

消费者搜索産品评论的第一个地方是优酷或者土豆。

31%的消费者会被産品视频说服然后决定购买它们。

优秀的産品展示视频不仅能让消费者得到额外的体验，当你把它们上传到视频网站后还能成为流量生成工具。

视频能给你提供一个将産品卖给那些仅靠文字描述无法决定的消费者的机会。

观看视频里的人如何触摸、试用那些産品，并解释産品的优缺点，这是仅次于到实体店听销售人员讲解的体验。

Skip Hop的视频就很好地展示了这款妈咪出行包能够装多少东西。

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

4.清晰的價格顯示

在运营電商網站时，我們真的收到过邮件问産品的价格标在哪里。

虽然一个月只收到了几封这样的邮件，但足够引起我們的重视，所以我們改变了页面布局，让价格更容易被看到。我們并不知道没有发邮件询问我們而直接离开的有多少人，而这又让我們损失了多少订单。

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

不同收入水平的消费者在某种程度上都很精打细算。不管你卖的是10000万美元的奢侈名表还是5.99美元的小狗玩具。不管他们有多喜欢你的産品，如果价格超出了他们的预算，那他们不会出手购买的。

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

怎樣清晰地顯示價格：

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

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

3.放在购买按钮或者産品名称旁边。购买按钮通常比较显眼，所以把价格放在购买按钮上面是一个不错的选择。另一个放大是放在産品名称下面。通常情况下人类的眼睛会很自然地向网页上部看，而标题则是第一或者第二个会被注意的内容。

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

産品页的目标是让消费者点击“添加到购物车”，所以这个按钮是页面上非常重要的元素。

如果消费者决定购买你的産品，你希望他们知道下一步应该怎么做。而一个明显的添加到购物车按钮是指引他们的好方法。

一个清晰的添加到購物車按鈕应该是什么样的？

1. 使用对比按钮色。研究表明，橙色或者绿色的按钮颜色更容易被点击。当然，这些颜色可能跟网站設計不搭。要选择与页面背景色与附近文字颜色对比比较强烈的颜色。

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

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

2. 使用大小合适的按钮和文字。按钮要足够大，使消费者能够注意到，但又不能太大，否则看起来太俗气。如果不能在三秒钟内找到按钮，这说明它不够大。

6.展示客戶評論與打分

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

很多人会在决定要不要买一件産品前查看评论。

尽快开始收集客户的评论和打分吧，然后在産品页上展示。

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

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

那麽，如何才能將差評轉化爲助力？

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

    1.不要火上澆油。要用專業、禮貌的態度回複差評。

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

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

这是我們自己的经验之谈。

我們为强硬处理蛮不讲理的消费者付出了惨痛代价。

一个小小的投诉事件变成了一场社交媒体上的公关噩梦。此事带来的消极影响持续了一年，带来了超出我們预期的恶果。

有了这次教训，我們学会了冷处理自己的怒火，开始学习优秀的客户服務。

自此之后，负面回馈或者客户投诉不再困扰我們。我們发现这是一个向未来客户展示我們的专业能力的机会。

7.說明不確定性

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

消费者在网购时会有很多疑问。因此，优秀的産品页必须能解决这些问题。

把潜在消费者可能有的异议或者不確定性列出来，然后在産品页上直接解释清楚。

比如：

    1.安全性問題：把值得信赖的信用卡logo放在産品页上可以提升信誉度。

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

    3.運輸成本：在産品说明旁边添加运输政策。

    4.退貨流程：在産品说明旁边添加退货政策。

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

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

Forever 21提供了一个正面案例：运输成本、尺寸指导、当前的促销活动（这样消费者不会错过）这些消费者关心的问题都显示在页面上了。

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

提示：如果你总是收到同样的问题，考虑一下把这个问题放到産品页上吧，或者放到FAQ页面上。

8.显示相关及推荐産品

“要配薯條嗎？”

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

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

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

显示相关或推荐産品是向消费者进行直接交叉销售的简单方式。

    1.为他们提供他们可能喜欢更多的産品。

    2.如果他们正在寻找的産品不适合自己，为他们提供类似但不同的産品。

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


設計一个有效的産品页面布局的最简单方法就是使用那些经过验证和实地测试的方法。

你可以随时修改産品页面設計，从客户那里收集更多的数据，以更好地满足他们的特定需求。

到目前为止我們已经讨论了很多内容，在进入到第二部分内容前我們先做一个回顾。

1.好看的且包含相应信息的産品图片。花点时间来制作自己的高质量産品图片。确保包括産品的不同角度、视角和细节的图片。如果有同个産品的不同版本，确保每个版本都有相应的图片。有情境的图片会帮助消费者下定购买的决心。

2.有用且有趣的産品说明。避免简单罗列産品规格。要描述每个産品能为消费者带来什么。给他们需要的信息帮助他们下决定。

3.産品使用演示视频。自己或者员工上阵拍摄産品使用短片，向消费者展示産品的各种细节。还可以讨论産品的一些不能在图片中显示的优点。

4.清晰的價格顯示。在网页上清晰地显示産品价格。使用大号字和/或对比色让它更加显眼。

5.清晰的添加到購物車按鈕。当消费者决定买下某件産品时（点击购买按钮），你需要引导消费者进行下一步动作。大一点的按钮和对比比较强的颜色容易引起他们的注意。

6.展示客戶評論與打分。消费者通常会根据産品评价和客户评论来决定要不要购买。所以，尽快开始收集客户评论吧！如果收到差评，请以专业冷静的态度处理并解决问题。这将为你带来好处。

7.說明不確定性。消费者通常会有很多疑问。请在産品页上解决这些疑问。

8.显示相关及推荐産品。相关産品推荐向消费者交叉销售。这可以提升他们的体验，让你赚的更多。

花时间看看成功的産品页面必须有的八个要素，看看自己的産品页面缺少哪些。

在第二部分，我們将告诉你如何把这些元素融入到産品页面設計中。