没有直接进入产品页面的购物者，几乎总会先经过分类页或搜索结果页。在这里，商店要么帮助他们把几百件商品缩小到寥寥几件，要么因为他们点了后退按钮而失去他们。商品列表页设计受到的关注不如首页或结账，却决定着访客是否能找到商品。以下是需要做好的方面：筛选、商品卡片、排序和商店自己的搜索。
商品列表页设计要达到什么目标
好的分类页用户体验帮助访客快速连续完成四件事：
- 定位：看清自己在哪个分类、其中有多少商品，以及涵盖的范围。
- 缩小：按自己关心的属性削减列表。
- 比较：无需逐个打开，就能浏览剩下的商品。
- 继续：打开某件商品，或者返回列表而不丢失位置。
简短的介绍和指向子分类的链接有助于第一步；其余则取决于筛选和商品卡片。分类页是我们在 Figma 中制作原型的模板之一，属于电子商务用户体验设计工作的一部分，同时还有产品页面和结账。
帮助而不是隐藏的电商筛选体验
大多数筛选问题始于数据，而不是设计。筛选只能和背后的商品属性一样好，所以第一个问题是购物者实际上用哪些属性来做选择：服装看尺码和版型，零部件看兼容性，家具看尺寸，工具看功率。人们在您商店搜索框里输入的词，以及您的销售人员听到的问题，是最好的来源。
- 在每个筛选值旁显示数量，并隐藏或禁用不会返回任何结果的值。
- 在结果上方显示已应用的筛选条件，作为可逐个移除的标签，并提供一个“全部清除”。
- 使用顾客的语言：用“适配 2018 至 2023 年款”，而不是内部代码。
- 按有用程度排列筛选，而不是按字母顺序，并且在只有少数属性重要时保持列表简短。
- 保持页面稳定。不重新加载就更新结果是可以的，只要页面不跳动，并且所选筛选条件在点击后退按钮后依然保留。
当数千件商品的属性不一致时，解决办法在于商品数据本身，我们的 ERP 与 PIM 集成服务处理的就是这一方面。
手机端筛选
在手机上，手机端筛选最适合放在全屏面板中，通过位于“排序”旁边的悬浮“筛选”按钮打开。让人们可以选择多个值并一起应用，按钮上显示将剩下多少件商品。应用之后，把他们带回结果顶部，并让已应用的筛选条件在列表上方保持可见。
商品卡片设计
每张卡片都必须在一两秒内回答“值得打开吗？”。有用的商品卡片设计包括：
- 图片比例一致、背景一致，让眼睛比较的是商品，而不是照片。
- 名称包含区分性的细节，例如型号、尺寸或容量，而不只是产品系列。
- 价格，促销价清晰、诚实地显示。
- 一两个决定性的信息：颜色色块、有库存的尺码或送达时间。
- 只有来自真实评价的评分才显示。
把属于产品页面的内容省去。塞满徽章和按钮的卡片会拖慢浏览，而在手机上，每多一行都会把下一件商品挤出屏幕。
排序选项、分页与无限滚动
提供与人们浏览该分类的方式相匹配的排序选项：默认按相关度或热销，价格从低到高和从高到低，时尚和科技类按最新，评价众多时按评分。在访客浏览期间记住他们的选择。
对于分页与无限滚动之争，多数商店有一个实用的答案：“加载更多”按钮。无限滚动让页脚无法到达，也让人在打开商品后很难回到原来的位置，而传统分页在手机上会增加点按次数。“加载更多”按钮让人保持掌控，而且每个加载的区块仍应有自己可被抓取的页面网址，以便搜索引擎能找到每一件商品。
电商站内搜索与无结果页面
使用搜索的访客通常知道自己想要什么，所以电商站内搜索值得像菜单一样用心。它应该容忍拼写错误和复数，理解“沙发”与“长沙发”这类同义词，能按 SKU 和型号查找商品，并在访客输入时推荐商品和分类。每月查看搜索日志：没有返回结果的搜索词，就是一份现成的清单，列出缺失的商品、缺失的同义词和缺失的属性。
无结果页面绝不应成为死胡同。提供拼写纠正、热门分类、几款畅销商品，以及联系真人的方式。搜索过的人是有意向的人，一个有帮助的无结果页面至少能留住其中一部分。
常见问题：商品列表页设计
分类页应该有多少个筛选条件？
购物者实际用来做决定的有多少就有多少，不要更多。按重要性排序，把很少用到的筛选放到“更多筛选”链接后面，而不是删除。
缺货商品应该出现在列表中吗？
通常应该，但排在列表靠后的位置并清楚标注，同时提供隐藏它们的选项。完全移除会破坏链接，并隐藏很快就会回来的商品。
如何知道列表页的改动是否有效？
跟踪筛选的使用情况、没有点击就结束的搜索，以及有多少列表页访问带来了产品页面访问。对于较大的改动，A/B 测试能给出更清晰的答案，这正是我们的转化率优化服务所涵盖的内容。
购物者是否在您的菜单和商品之间迷路了？我们的电子商务 UX 和 UI 设计服务从用户体验审计开始，然后为 WooCommerce、Magento 和 PrestaShop 商店制作分类页、筛选、产品页面和结账的 Figma 原型。请发给我们您的商店地址和最畅销的分类，我们可以建议从哪里开始。
