可成功获取客户的电商网站产品页设计-第一部分


该死的亚马逊！在上面买睡衣实在是太方便了！不要再从我口袋里抢钱了！

好吧，上面的话有点夸张。其实我很喜欢亚马逊。怎么会有人不喜欢它？

我迷上了网购。如果能足不出户一步到位地买齐我需要的开学物品、杂货和每月必需品，为什么要脱下睡衣出门呢？

网购简化了我的生活，给我带来了数以万计的选择，手指一动就能搞定。

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

电商将继续发展壮大，对商户（比如你）来说将成为不可或缺的竞争力。

这些对你来说有什么启示？

利：你正身处飞跃增长时期（就像当初的淘金潮）。人们的购买和消费欲望超越了人类历史上的任何时期--而且将把更多的钱花在网购上。

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

弊：网络市场的竞争将越来越大。这也意味着你的网络生意需要提供比竞争对手更好的体验。

问问自己这些问题：

你的电商网站是否能从竞争对手中脱颖而出？你的电商网站设计优化是否吸引了客户的兴趣？

如果你的答案是“不确定”或者“没怎么想过”，那么你需要继续阅读这篇文章。

你的电商网站（尤其是产品页）需要好好设计，这样你才能有效地将浏览者转化为购买者。

本文将为你展示创建网站的一些技巧和小窍门，帮助你浏览者转化为客户。这是领先竞争对手的一种方式。


如果你运营的不是一个电商网站的话。

毫无疑问，首页的地位非常重要，无可取代。

但，对一个电商网站来说，你的产品页才是最重要的那个页面。

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

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

如果你只想优化电商网站的一个方面，那就应该是产品页。

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

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

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

第一部分：【你正在看的】可成功获取客户的电商网站产品页设计--电商产品页必须拥有的八个要素

第二部分：可成功获取客户的电商网站产品页设计-瞬间提升电商网站体验

下面来看第一部分


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

是的。

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

我知道这听起来有点像绝地控心术，请允许我解释一下。

比如，有研究表明，橙色对冲动型购物者非常有吸引力，而蓝色和青涩则更容易吸引精打细算的购物者。

你可以为“加入购物车”按钮选择一个适合你想要吸引的客户的颜色。

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

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

实例：

优秀的

Skip Hop的购物车按钮颜色明亮，消费者很容易看到，看起来也并不俗气。

失败的

Whipping Post的购物车按钮很别致，但是跟文字内容没有对比。尽管四周有一个边框，但并不会得到消费者的注意，或者让我想按下这个按钮。

6.展示客户评论与打分

85%的消费者会在购物前查看网络评论。

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

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

公司不愿意展示客户评论的一大原因是害怕有差评。

事实上，如果处理得当，差评也能取得好结果。

那么，如何才能将差评转化为助力？

听说过“善意杀人”吗？这就是处理差评的方法。

    1.不要火上浇油。要用专业、礼貌的态度回复差评。

    2.即使消费者蛮不讲理，也要以解决问题为主旨。

这样，你可以向潜在客户展示你解决问题的能力。这会让消费者相信当他们遇到问题时，你会积极设法帮助他们解决。

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

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

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

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

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

7.说明不确定性

这个网站安全吗？我多久才能拿到买的东西？退货流程复杂吗？

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

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

比如：

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

    2.尺寸问题：在尺码选择旁边添加一个尺码表。

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

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

这些只是常见的问题及应对方法。很简单，但经常被忽略。

解答更多消费者可能关心的问题，你就越有可能做成他们的生意。

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

我希望看到现在页面上没有的退货政策。除了这一点，其他方面都做的不错。

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

8.显示相关及推荐产品

“要配薯条吗？”

这是最常见、最有效的交叉销售方式之一。

交叉销售是指为消费者提供他们可能喜欢的类似商品。比如，当他们在浏览亚洲菜谱相关的书时，可以交叉销售一本亚洲点心菜谱相关的书。

这方面的代表是亚马逊。他们似乎总能预测出我喜欢什么并根据这个预测来推荐商品。

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

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

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

这对于你和消费者来说是一个双赢的局面，所以为什么不添加这一功能呢？


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

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

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

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

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

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

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

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

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

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

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

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

在第二部分，我们将告诉你如何把这些元素融入到产品页面设计中。