商品列表 电商商品列表页调研

很多设计师在设计产品方案的时候，往往会盯着大厂，或者盯着自己一直在用的某个产品，复制下来，却没有仔细思考别人为什么要这么做。我们这样做合适吗？

首先统一名词解释。本文描述的列表是在列表项的样式固定后，按照固定样式依次显示的页面。【主要是区分列表页和活动页】，定制结构的活动页不在本讨论范围内。

一个

商品清单页面的几个常见元素

让我们先来看看几个电子商务应用程序是如何选择页面元素的:

2

顶部区域分析

顶部区域的设计有很大关系:用户的前期行为是怎样的？

如果用户点击某个类别进入，或者搜索，那么用户是有特定的期望的，所以这个时候，就要思考这个时候用户想要什么。

毫无疑问，对于具有方向性的人来说，有筛选、排序、搜索等一系列产品功能，可以缩小用户的范围。

△淘宝搜索“女装”时的列表页面

△JD.COM搜索“女装”时的列表页

如果用户在进入列表页面时没有定向需求，那么此时列表页面应该做的不是满足用户的需求，而是帮助用户发现需求。可以通过切换TAB，提供新的一节等方式解决。

△首页上滑后，中间TAB吸顶，结束后上滑，自动切换到下一个TAB

三

底部区域分析

列表底部区域的设计相对简单。目前有几种方式:

无限列表，永远没有底；

限量列表，上滑切换TAB；

限量列表，上滑到底，提供提示；

受限列表，滑到底后，尾部被其他模块拼接。

如何选择和使用取决于用户需求和业务状态。有几种情况:

1.用户有一定的定向商品需求，但平台上商品不多

这种情况下，无限单直接就过去了，商品不多，无法使用无限单。

△小米商城搜索手机。产品列表结束后，文章模块和其他产品推荐模块拼接，避免尴尬

2.用户有一定的定向商品需求，但平台上有很多产品

在这种情况下，可以考虑无限列表(可以理解为长的有限列表)。当然，需要评估用户平均滑动多少屏幕才能到达列表底部，所以底部可以提供一个简短的提示。

3.用户是否有定向的商品需求，但平台上有很多产品

这种情况下一般使用无限列表，用户处于“购物”的心态。我们倾向于分析用户的偏好，推荐用户可能需要的产品，从而试图让用户购买。

4.用户是否有定向的商品需求，但平台上产品不多

前提是平台上的产品并不多，但是用户经常在没有明确买东西的情况下进入商场，而是带着“购物”的因素来看产品，那么这个时候如何解决这个问题呢？

一般在产品的首页和活动上会遇到这个问题。当平台上产品不多的时候，往往是分类TAB的形式。当用户有滑动行为时，会进行TAB定位，告知用户。

如果绑定在此标签页的产品没有吸引到用户，滑动时会自动切换到下一个标签页，试图通过其他标签页的产品让用户购买，标签页也可以向用户传达一定的认知。

△首页上滑后，中间TAB吸顶，结束后上滑，自动切换到下一个TAB

4.中部地区分析

在我看来，中间区域是最关键的区域，也是事情最好的来源区域。如何先设计中部地区的产品？在我看来，有几个核心原则:

布局突出了用户的需求，并根据不同的产品展示了不同的需求

根据列表页面中商品的数量，设计列表页面的布局

避免用户视觉疲劳

(1)布局突出用户需求，针对不同产品展现不同需求

商品清单页面中间区域主要有两种布局:一种是左右块，一种是单行块。

然后，不知道大家有没有想过什么时候用左右块，什么时候用单行块。

首先，如果一个用户去买衣服，那么多注意图片；如果用户去购买电脑，那么图片实际上对用户的选择参考较少，更多的是取决于产品的参数特性。

从布局来看，如果使用左右块，屏幕区域大部分会被图片占据，用户的视觉焦点明显会集中在图片上。如果采用单行块，左图中的右文字或右图中的左文字，用户会将视线集中在某个固定的区域，可以清楚地看到产品的参数特性，而不用来回移动眼睛。

△典型例子1:淘宝女单页面和淘宝电脑列表页面

当然淘宝也给用户提供了切换布局的功能，但是默认的布局已经可以说明大部分用户的使用习惯了。

但其实对于一个具体的产品列表页面，这样的分析远远不够，还要继续深入挖掘用户进行布局。我们举个例子:假设一个用户买了一台电脑，大多数用户会主要考虑哪些因素？

看看手机厂商的发布会就知道用户关心什么了:屏幕尺寸、边框、照片、电池、价格。很多时候，这就是这些问题大惊小怪的地方。

然后我们来看看如何在列表页面上突出用户关心的信息。

△典型例子2:淘宝搜索手机列表页面和天猫搜索手机列表页面

然后这一步天猫搜索手机列表，突出产品特性，突出大部分用户关心的产品特性。而且更符合用户体验。

(2)根据列表页面上的商品数量，设计列表页面的布局。

从用户的角度来说，可以根据产品对用户的认知做左右布局或者单线布局，但很多时候也要考虑平台的产品构成。假设一个新兴的电商平台没有大量的产品，那么我们也要考虑不同列表布局对用户的感受。

一个明显的点就是数量。假设一个平台上一个列表平均只有不到20个产品(这与平台上产品的定位有很大关系)，如果采用单线布局，用户可能需要滑动5个屏幕，可以在一定程度上降低平台上产品不足的心理认知。

如果采用左右布局，用户会很快滑到底部，此时很难提高用户对平台的信任度，所以通常需要通过文本提示或交互的方式来提示用户。

△典型例子:网易YEATION，因为YEATION的定位，某一个品类的产品确实比较少，但是滑动到底的时候给用户一个文本提示——水平滑动切换分类。

其实有两种方法可以满足这种情况:一种是提示用户水平切换，另一种是直接上滑切换分类，我个人的建议是提示用户水平切换比较合适。

(3)避免用户视觉疲劳

这个很好理解。在列表很长的情况下，假设页面布局单一，容易产生视觉疲劳。很多时候是为了滑动而滑动。很多时候，很容易错过很多好货。在这种情况下，要靠布局来解决视觉疲劳的问题。

一个例子就足以证明这一点，请看:

△典型例子:淘宝女单页面和JD。COM女单页面

四

个案分析

然后我就把想法表达完了。接下来通过几个案例分析商品布局是否合理。

1号店

一号店可以看到商品的分页页面，可以看到商品绝对够用，但是无论是手机电脑，还是服装鞋帽，默认都是单行列表布局。从前面的分析来看，显然不适合。对于服装鞋帽，没有突出的图片，文字占据大部分面积。对于移动电脑来说，他们的产品特点并不突出。

提供给用户的视图切换功能看似人性化，实际上不够全面，过于明显。为什么不多做一步，给出最合适的视图，削弱切换功能？

甘草医生

甘草医生商城有少量的产品，从照片上看也可能走精品路线，但是每个品类大概有10种左右，总共不到40种。有三个主要问题:

第一点:使用列表拼接不同类别的商品列表。进入单子时，不会马上感觉到结束，但如果商品总数不足，整个单子就会很快结束。如果单行版式可以加长整个列表长度，可能会更合适。

第二点:从销售的商品种类来看，商品的图片并不是用户购买的核心驱动力，核心驱动力在于产品的功效。但是左右布局并不能很好的揭示功效，所以采用单行列表+功效标签的形式可能更容易让用户找到满意的产品。

第三点:定位无效。当列表被切换到其他类别时，最上面的类别没有被切换。

品多多

品多多关于手机搜索的产品列表的产品设计方法，给了设计师大部分的工作来满足用户的需求。

感谢看到这里，个人愚见，更多建议~