189 8069 5689
最近的研究发现，电子商务类别页面在搜索中的点击率高于单个类别页面。因此，如果你的电子商务网站设计正在努力吸引顾客和转换他们，你的分类页面（特别是那些在移动设备上）可能需要重新网站设计。
专注于为中小企业提供成都网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业商城免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
对于电子商务设计师来说，很容易专注于设计主页、单个产品页面以及结账体验，因为它们是移动购物者旅程中显而易见的垫脚石。然而，根据以下数据，分类页面也可以发挥作用——作为搜索引擎和电子商务网站设计之间的中介。
JumpFly的SEO总监Jill Kocher Brown在SMX West 2020上分享了以下研究：
SEO Jill Brown分享了电子商务分类页面与产品页面性能的研究。（来源：Slideshare）
在对排名前30位的电子商务网站设计进行评估后，Brown发现产品分类页面在关键词排名和流量方面都优于产品页面。
考虑到有多少顶级的漏斗客户使用移动搜索来找到他们在网上寻找的东西，我们需要把更多的注意力放在为移动设计电子商务类别页面上。
今天将为您提供一些设计移动电子商务类别页面的技巧，这将使您获得更多的搜索访问（因此，转换到现场）。
如何设计电子商务类别网页的移动
让我们开始吧：
1. 只包含页面上的基本元素
这或多或少是我们在为手机设计电子商务类别页面时应该追求的目标：
一个例子wireframe为电子商务类别网页上移动。（来源：用Wireframe.cc创建）
我们需要包含在折叠上的元素是：
导航条（它可以在滚动时消失，也可以停留在页面顶部），
一个描述性的类别页面标题，
类别中的产品总数，
过滤选项，
排序设置，
至少一个或两个匹配的产品。
至于为什么这些元素需要在折叠之上，向您展示一个示例。
根据SEMrush（和谷歌）的说法，“kong dog toys”是一个很受欢迎的搜索词，狗玩具的购买者都在寻找这个词：
SEMrush透露，“kong dog toys”的月搜索量为33，100个。（来源：SEMrush）
搜索词的最匹配结果之一是PetSmart网站上的这个类别/品牌页面：
PetSmart的产品类别页面，用于Kong品牌的狗玩具。（来源：PetSmart）
接下来的四次点击会引导购物者浏览信息区、视频和类似这样的子目录：
PetSmart在分类页面的顶部包含了大量关于Kong品牌的信息。（来源：PetSmart）
问题是这样的：
对于网站上探索宠物产品的访客来说，这些信息很重要，因为它让他们了解了非常受欢迎的Kong品牌。然而，对于那些在谷歌中搜索“金刚狗玩具”的访问者来说，他们并不需要所有这些信息。它只是妨碍了购物体验。
虽然不喜欢百思买在标题上方添加广告，也不喜欢第一次显示的赞助产品，但类别页面顶部的简洁布局做得很好：
百思买的分类页面在细节上很简洁，并能立即显示产品。（来源：百思买）
此外，百思买还提供了额外的分类信息（就像PetSmart一样）。然而，它明智地把这些信息放在搜索结果下面：
百思买在搜索结果下面包含了分类信息。（来源：百思买）
为什么百思买要这么做？你为什么要这么做？
首先，你希望那些刚接触某个产品类别或品牌的购物者仍然能够获得这些信息。考虑到受过良好培训的消费者是如何在线下寻找更多信息的，这在移动设备上是可行的。
此外，这对SEO也很有用。如果没有这个类别的描述，你将不得不把它留给你的元标题和描述来影响页面的排名。通过类似这样的搜索优化信息部分，您可以提高类别页面到达搜索顶部的机会。
2. 展示最具说服力的产品细节
正如你所看到的，我们在这些移动电子商务分类页面上没有太多的空间。因此，当购物者最终得到匹配的产品结果时，您希望让他们尽可能轻松地找到正在寻找的人。
以下是每个产品清单应该包括的细节：
晶莹剔透、引人入胜的产品形象，
产品名称（如果名称/品牌没有拼出它是什么，则提供简短的说明），
价格，
星级和评论的数量。
上面唯一一个可选的元素是评价/评论，只有当你的网站是新的，你不想因为缺少评论而让人厌烦时，才会出现这种情况。
至于向产品清单中添加其他元素，请注意这一点。如果它没有增加任何价值（换句话说，它并没有使从另一个产品中选择一个产品变得更容易），那么就不要使用它。
例如，这个“金刚狗玩具”类别的网页来自Chewy：
耐嚼的类别页和“金刚狗玩具”的结果。（来源：耐嚼）
这个类别页面设计作为一个整体比竞争对手PetSmart处理他们的更简洁。然而，这里有相当多的浪费。也就是说，有两个重复的文本字符串需要去：
“更多选择”下的产品形象；
“免费1 - 2天运输49美元”之间的价格和评级。
免费送货通知可以很容易地出现在网站顶部的一个可删除的粘性栏中。“更多的选择”根本不需要在这里。通过收紧产品细节，移动购物者可以更快地浏览可用的搜索结果。
这里有一个来自BH化妆品公司的产品清单可能会被削减的例子：
BH化妆品在相应的分类页面上显示化妆刷设置。（来源：BH化妆品）
“添加到包”按钮都需要去。除非购物者看到一个产品图片就知道他们需要什么，否则这些按钮在这个页面上是没用的。
个人也认为“XX% OFF”是不必要的。没有理由把这个问题复杂化。原来的价格和新的更低的粉红色价格应该足以引起注意的报价。
这并不是在电子商务网站设计显示库存/选项的唯一方法，因此您必须根据具体情况评估每个产品元素。
所以你可以看到所说的，以下是在Expedia上搜索“圣托里尼希腊酒店”的结果：
在Expedia上搜索“圣托里尼希腊酒店”的结果页面。（来源：Expedia）
在Booking.com上：
在Booking.com上搜索“圣托里尼希腊酒店”的结果页面。（来源：Booking.com）
两者都包含每个清单所需的基本细节。然而，它们包含了额外的细节来帮助用户做出决定。
但是，在显示这些额外信息的方式上有很大的不同。在Expedia上，用户可以看到“含早餐”是最重要的功能之一，只有两个房间的特价。这是有用的信息。然而，在Booking.com网站上，有一大堆绿色的细节显示在价格的正下方。它很难读，我不确定所有的细节都是必要的。
如果有疑问，从最低限度开始。然后，使用A/B测试来确认其他细节是否可以提高点击率和转化率。
3.管理您的移动类别页面大小
在设计电子商务类别页面时，我们需要注意页面大小有两个原因：
由于在这类页面上出现了大量的图像和数据，这可能会严重影响加载时间。
一次展示的产品越多，分析就会越瘫痪
所以，首先要做的是对页面的长度设置一个限制。
虽然你可能会忍不住使用无限滚动或自动加载，显示更多的产品图像，因为游客向下滚动页面，如果你使用的分页链接更好的性能，如沃尔玛所做的：
沃尔玛在其产品类别页面的末尾使用分页。（来源：沃尔玛）
你可以从沃尔玛学到的另一个技巧是它的产品视图设置。默认情况下，产品出现在一个网格的类别页面：
默认情况下，沃尔玛以网格布局显示类别产品。（来源：沃尔玛）
点击“Sort & Filter”左侧按钮，用户可以将对齐方式更改为列表视图：
用户可以调整沃尔玛的分类页面，以在列表布局中显示产品。（来源：沃尔玛）
虽然这更多的是个人喜好的问题，但是您可以看到列表布局实际上一次显示了更多的产品，所以用户可能会发现这种布局的选择对于加速他们的购物体验非常有用。
最后要考虑的一件事：
你不能假设默认的排序方法是所有客户自动喜欢的。例如，丝芙兰的默认分类是“畅销书”：
默认情况下，丝芙兰会根据“最畅销”产品对分类页面进行分类。（来源：丝芙兰）
正如我们所知，消费者在网上购物时还会考虑其他事情。负担能力是其中之一，所以按“价格从低到高”排序可能更有意义。评论和评级是他们寻找的其他东西，所以“最高评级”可能是他们选的排序方法：
丝芙兰的客户可以改变分类页面的排序方式。（来源：丝芙兰）
说到过滤器，不要吝啬。
例如，丝芙兰只允许客户通过两个因素进行筛选：
丝芙兰的客户可以根据品牌和价格范围过滤页面结果。（来源：丝芙兰）
这是假设消费者熟悉美容品牌。对于那些没有这样做的人来说，这可能会严重影响他们找到想要的产品的能力，因为他们需要花更多的时间来考虑所有可用的选项。
相反，您应该使用自己的产品类别和标记为用户提供更全面的过滤选项。毕竟，如果这些数据有助于你更好地组织和销售你的库存，那么它也应该为你的客户做同样的事情。
Ulta在这方面做得很好：
Ulta用户可以根据目的、类型、品牌等对页面结果进行过滤。（来源：Ulta）
这不仅在用户友好性方面是有益的（尽管这是它的一个重要部分）。通过让购物者创建更小的产品列表来阅读，您还可以让他们在选项减少和页面加载时间改进时加快购物体验。
总结
总之，要注意如何设计移动电子商务类别页面。尽管研究表明，这些网页的点击率和搜索引擎的访问量都高于单个产品网页，但糟糕的设计选择会让你的网站设计成为例外。