很多设计师在设计产品方案的时候,往往会盯着大厂,或者盯着自己一直在用的某个产品,复制下来,却没有仔细思考别人为什么要这么做。我们这样做合适吗?
首先统一名词解释。本文描述的列表是在列表项的样式固定后,按照固定样式依次显示的页面。【主要是区分列表页和活动页】,定制结构的活动页不在本讨论范围内。
一个
商品清单页面的几个常见元素
让我们先来看看几个电子商务应用程序是如何选择页面元素的:
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种。有三个主要问题:
第一点:使用列表拼接不同类别的商品列表。进入单子时,不会马上感觉到结束,但如果商品总数不足,整个单子就会很快结束。如果单行版式可以加长整个列表长度,可能会更合适。
第二点:从销售的商品种类来看,商品的图片并不是用户购买的核心驱动力,核心驱动力在于产品的功效。但是左右布局并不能很好的揭示功效,所以采用单行列表+功效标签的形式可能更容易让用户找到满意的产品。
第三点:定位无效。当列表被切换到其他类别时,最上面的类别没有被切换。
品多多
品多多关于手机搜索的产品列表的产品设计方法,给了设计师大部分的工作来满足用户的需求。
感谢看到这里,个人愚见,更多建议~
1.《商品列表 电商商品列表页调研》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。
2.《商品列表 电商商品列表页调研》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/junshi/1245682.html