想让用户下单？给你一份专家的商品详情页设计指南！

本文主介绍了设电商商品详页面时需注意的交互设计准则，并给相示例说明商页面在哪些方面做改进，有效帮助户购商并最终促成交易。

线购的客户通过商品页面出购买决策，回答问题、行比较、提供价都可以帮用户推购买过程。

在电子商务网站，商品页网站成功至关要，客户需要有足够信息来做出买决定。

商品页面或商品详情页面，是用户决定是否购买和购买什的地方。该页面必须包含完整的商品息，以直的方式给予和告知用户该商品的息。

在客户无法触摸品、向销售人提问、试穿品或在购买前试用品。当，购买动机强的购物者能订购板来验材料，或者通时聊天（通常是不得已的情况下）提出问题，最勇敢的购物者甚至能愿意尝试虚拟的试穿工具。但是所有具有很高的互成，需要强大的动力和意愿，将大量时间花在应用程序或网站上。

在许多情况，客户想太多时间，因此商页面需要帮助他们尽快获取信息。确保答户的问题，并准确地展示商，这才符合店铺的最大利益。

糟糕的商品页面会导致两主后果，两者都会损害客户与网站的关系：

• 顾客决定商是否符合他们的条件，因此放弃购（总购后遗憾好）。
• 根据不准确的假设，顾客购买了错误的商品，从导致顾客不满意或退（以这种方式被惹恼的人越多，当遇到内较少的商品页面时，他们会加怀疑，并根据场景出反应）。

在分析了数百个例子之后，我们得了如何设计有效商详情页指南，本简要概述了我们的发现和建议。

商品页面中应包含哪些内容

商页面是承担很多责任和工作的，答客户的疑问并促使购物者准备购。因此，重要的是和应程序都正确的做到这一点。

精设的商品页面具以下特点，我们将其归类「必不可少功能」、「添花功能」「花里胡哨功能」（不被「花里胡哨」功能的称所迷惑，如果这些元素不真必或执行得很好，它们可能会分散注意力令人失望）。

预测并回答商品疑问

购物者浏览商页面的目的，是寻他们于商疑问的解答。

我们的研究中，只那些已确切了解该商品的人，不会仔细查看商品页面。即使那些已关注商品的购者，也需通过商品页面确认，找到确的商品。

许多网站提供商品信息不足，用户留下了法回答疑问，也没有足够信息来帮助做出买决策。虽然了解不商品提出所有疑问是件不可能事情，有些网站甚至连基本商品信息也没有提供。

网上购物的一个常见疑问是退货，当网站充描述商品，用户可能会购买正确的商品，并对购买充心，不用担心以后会退货。

的品页面在使用文字和图像描述品时，应该满以下两点。

1. 描述完整，但不要冗长或松散

用户并不是在寻找营销上的混乱，而是想要对品、使用方式、外观和功能有一个靠的描述。

户通在线阅读时会略读本，阅读更多的是在描述的开头，而是在结尾；更多在行首，而是在行尾，要浪商描述的前几行，直截了当地抓住要点。

描述还应该解释用户不太可能知道的所语。例如，Urban Outfitters 网站的一些商品被贴标签 Urban Renewal Recycled。商品详细信息解释了此标签的含义：每件衣服都手翻新的，因此您收到的品的颜色，色调穿都会与图片所示的品所不同。

△ 「Urban Outfitters」网站的商品明包括了一「Urban Renewal Recycled」部分，该部分充分解释了两商品完全一样的。

如何撰写符合要求文案？来看这篇文章：

2. 使用图片或视频解答疑问

商品图片义了用户对商品的望，图片视频应与明一起使用，以便对商品一完整的理解。

个商品图往往是不够，用户更喜欢网站提供多视图或动画视图，括旋转图像、细节、放大图片以及使用或环境商品图像。

eBages 上的一位用户正在根据商品列表页上的图片选购提包。她点击进入完整的商品页面说：「想知道包的内侧长什。」当她商品图片，她说：「哦，在这！这个起来漂亮！它面有个侧袋。」

，她返回列表页继续挑选她喜欢的其他包包，并点击进对应的品详情页，查看包的内部和其他详细图。她在谈到另一个包时说：「它的衬里很，并且有一个方便的面拉链。」

这位户在购手包时并没有读过商说明的任何字信息，仅仅只看了图片，就已经挑好了心仪的商。

△ eBags.com 上的购物者在很大程上依赖于详情图片，确定哪些袋子最适合他们的需求。

帮助用户比较商品

户经较上的商，并希望看到有他们正在考虑的每个商的相同信息。

关可比商品的一致信息关键，信息的显示也影响了比较商品的难易程度。一些网站改变了商品的页面设或可用信息，从迫使用户搜索他们需的信息。

物者需要在以下四个不层上获可靠信息。

1. 商品规格

物者在考虑某商品选择，如大小、颜色或口味时，希望所有规格都能使用相信息。

一名研究参者对 Adagio.com 上关于商品尺寸的不一致息沮丧。

该网站很地告诉用户，根据样量以少杯。而，对更大的尺寸，它却没有样做。相反，它列出每杯的成，样用户就以根据价来评估选项，是有帮助的。

但是，一致会激怒户。她说：「当我订购时，在包说明上，对我有帮助的是，在样面它注明了该包量泡多杯茶。但在他情况，却并没有到多杯，只做个假设。但如果知道可泡多杯，将很有帮助，但它没有。它只在样有注明，他的都没有。」

△ 户表示很欣赏 Adagio 的做法，该指了样可制作多杯茶，但希望它说明他规格可制作多。

2. 商类别

购某种商的顾客，期望该在同牌和号之间显示相似的详细信息。

例如，看衣机的购者希望能够比较关、需占用的空间，以及可用的涤周类型（如精，环保）的信息。对于数据密集的规格，比较表可能展示这类信息的方式。

3. 一致的商品页面

通常，当人们一网站中的页面之间切换时，他们会望页面的视觉保持一致。这用户界面设的十种启发式方法的其中之一。

于商品页，客户希望吸尘页看起来与家用音箱页相似。页上信息量和信息类型可以随商品类型不而变化，是视觉上来说，网站内导航和搜索都应该保持致。

4. 竞争手商品页

努力了解用户可能会在竞争手网站上看到哪些信息，并在您商品页上提供相信息。

例如，户在 TuftAndNeedle.com 和 Casper.com 上比较了床垫，但只有 Casper 的网站在商品页面上调了免费送货。

他释说：「Casper 有 100 试睡，免费退货或取货，并免费送货。因此，Tuft＆Needle 与之间的价差能归结为运费。」

然后，他切换到浏览器查看 Tuft＆Needle 的：「我必须进入 Tuft＆Needle 的购过程，看看他们的送货是否免。当我择 Queen Size，然后添到购物车，哦，原来是免送货。」

△ Casper 的商页面到了免送货，户注意到免送货，并在评估床垫格时将考虑在。

△ 与 Casper 的相反，Tuft&Needle 的要求户在购物车中一个床垫才发现送货是免的。

后，商品页面向购者显示相关或相关商品的建议，这很帮的。

这些议可帮助用户发现他们可能没有想过替代品。即使是类高度相关荐（例如「您可能也喜欢」）或具有社会效应荐（例如「买此商品顾客也时买」），这都会让用户喜欢。请谨慎使用并仅提供高度相关议，为在商品页上显示过多议可能会分散或模糊要商品信息。

展示买家评价，即使是糟糕的体验

即使是最完商品描述，也会留下些用户疑问。来自其他买家或专家评价将为网站带来另声音，从而帮助顾客进步了解商品。

用户经常使用商品评价来收集更多的息，在许多情况下，这些评价回答了用户提出的确切问题，这些问题通常商品的使用有关。商品描述可以描述商品征，但是买家评价可以提供对商品使用的情况。

Fossil.com 上的一位购物者阅读有关智能手表褒贬不一的评价。他说：「有人说表带很难用。还有人说表做得很廉价，就像儿手表一样。但来又有人说材料很。」

最终，尽管这表有差评，但好评足说他继续考虑购。于是他再继续看评，看商特性、规格和商图像的信息。

△ Fossil 移上的一位户发现，对于智手表的混合评很有，中的好评过差评。

的购者，已始望看到包括面负面价，并且能够行速浏览。

我们在不断地观察用户，他们希望首先跳到评，以便了解「该商品最糟糕情况可能是什么」。

以下是商品页面上成功展示买家评价的个重要准则。

1. 确好评和差评

仅仅提供评价是不够的，用户想要并需要查评价摘要，以了解商品的整体质量。用户需要能够快速找正面和负面评价，才能其顾所说的最好和最差是什。对评价进行排序或筛选的工也会经常使用。

2. 提供有关评价者的相关详细息

对于用户来说，了解有关发布评价者的一些息也有帮助。例如，评价者的年龄、体型、商品用途或其相关详细息。

用户不需要查看整个用户个人资料，但是在确定评价是否与用户情况相关且适用时，基信息就派上用场。

Macys.com 上的一位购物者使商评来决定在上购么，她谈到书包的评时说：「我这个，因为作者和我是一样的年纪。我想知道我这个年纪的人是怎么想的，因为他们可有类似的生方式。就像一个 23 岁的年轻人，他们为么要这个包，为么这个包，这中的原因可和我大相同。」

由于一些购者怀疑价者否诚实，因此网站可以通过指示价何时被网站验证帮建立信任。

开始采购过程

商品页面用户决购买商品，并将商品购车的关键区域，用户必须知道他们的商品选项什么，以及如何选择它们。

为了帮助用户开始买过程，商品页必须满足以下三项。

1. 解释个商品变化

用户必须理解个选项含义──论是颜色、大小、内存量是任何其他商品特性。选项也必须很简单，这样用户可以轻松地选择他们想要商品。

2. 说明商品库存

如商品各颜色或尺寸库存不，这尤其要。用户应该知哪些是没有库存物品，而不必等到将物品添加到物后，才发现其缺货或售罄。

3. 将商品添加到物后，提供晰反馈

用户转移到买过程最后步，是将商品放入物。令惊讶是，物者有很多遇到问题，都是为他们不知物是否放了物品。

缺乏反馈会导致许多问题，一些用户认为已经添加了商品，其实并没有。在其情况下，用户没有识已经添加了商品，因此一次一次地添加它，最终在购物车中添加了多个商品。更糟的是，一些用户来购物车，认为它装了想要的商品，结果却发现它是空的，或面有重复的物品，或者只包含了一部想要的商品。

更的方法，是显示一个显眼的持久窗口或通用户该品已添加的图，或将用户带到另一个页面上，该页面确认已成功添加该品。当用户将品添加到购物车时，Chewy.com 将用户移动到渡页面。在此页面上，用户以确认添加的品正确，以继续结帐或查看购物车。渡页还应包含「继续购物」按钮。样，果用户当时不准备结账，则不必使用浏览器的「退」按钮（Chewy.com没有包含样的链接）。

△ 将品添加到购物车，Chewy.com 显示渡页

结语

购物者以在品页面上，确定品是否符合他们的需求。要想取得成功，电网站必须首先进行研究，以确定客户对其品的疑问。

设计师应使描述和图像来答户的疑问，帮助他们较商，并使人们够尽快，轻松地开始购过程。

原文链接：《UX Guidelines for Ecommerce Product Pages》

欢迎关注译者微信公众号：「海设计参考」