先来介绍一下江苏泛渠道产品「智慧门店+」小程序，它是由江苏移动打造的新一代门店线上线下立体式协同支撑体系，实现门店数字化、多元化转型升级的平台。经过复盘总结，目前的商品列表存在以下问题：
1. 商品卡片排版形式单一
2. 商品标签待丰富，标签位置及形式待整合
3. 商品列表布局形式单一
4. 商品卡片的购物车按钮是否冗余
5. 商品文字冗余及缺乏情感
要想改变现有商品列表设计中的痛点，我们就必须对商品列表的原理及竞品设计做一次综合的分析和梳理。
商品列表是用户挑选商品，决定是否购买或使用的关键页面，合理、人性化、个性化的布局方案、不仅能提升用户的视觉体验，同时还能提高用户的操作、购物体验。如果把商品列表看成一段分子式，商品卡片就是一个个原子，列表的排列形式就是分子的组成结构，他们都很重要，我们也将从这两个部分着手，来看看商品列表的设计如何提升购物体验。
首先，卡片作为一个独立的容器，可以在内容上进行良好的布局组织，将信息分块，突出重点，让用户快速找到感兴趣的内容，避免在繁杂的信息集中浪费时间。通过对标竞品分析，电商除了商品卡片之外，还可以承载商品的频道、主题，榜单，关键词，品牌，类目以及各种运营内容等，但其他的卡片种类在我们的小程序产品中还不存在，因此我们今天只单纯的从商品卡片来整理分析。
那么一个电商商品卡片上都有哪些元素呢？我们对标大量竞品，罗列出以下内容：
「 商品图片、品牌标签、国家、产地、标题、副标（介绍）、服务标签、促销标签、发货地、好评率、价格、原价、划线价、会员价、销售量、购物车icon、更多icon、看相似、推荐理由 」等。
将它们按重要性组织布局，组成一个友好且连贯、整齐且统一的内容体，并可以随着分类导航栏目的切换，变化其内容和形式，才能给用户更加人性化的购物导向及体验上的新鲜感。下面让我们把这些元素按照关联性进行分组分析。
A 商品图片
电商类的APP，由于图片直接决定用户的点击量，虽然图片的尺寸不尽相同，但往往都会采用1 : 1的这种可将图片展示最大化的方式。
B 商品卡片元素的排版
这就要说到视觉动线了，视觉动线作为我们控制用户的移动模型，作为设计师我们需要通过设计元素的摆放位置，来刻意引导用户浏览的动线，从而达到刺激购物的目的。我们今天讨论其中的两种视觉动线：F型和Z型。
△ Z型视觉动线
「Z型」顾名思义，从左上角开始到右上角，保留着从左到右的习惯，眼睛会寻找到最后部分，寻找到页面的底部。
△ F型视觉动线
上图是由尼尔森诺曼研究发现的「F型」视觉动线，发现用户倾向于一种 F 模式去查看网站。在移动端，屏幕要小的多，每个产品的内容和形式都不一样，但是用户都是做着同样的事情，甚至在小到一个商品卡片的范围内，所以在做设计时候，我们就需要去思考如何运用用户这种习惯去构建设计结构。
按照这种视觉动线，撇除商品图片，我们对标各大电商的竖版商品卡片也得出一个大致的模型：
△ 各大电商竖版商品卡片视觉动线 1. F型
第1行：品牌标签+商品名称
第2行：促销标签，如满减、限时购、秒杀、特价、免息等。
第3行：价格+更多icon / 看相似icon，icon一般设为灰色
2. Z型
第3行：价格+购物车icon，一般用突出的主色调颜色来着重强调，刺激购物欲。
更多附带的信息则可能会往下继续另起一行，或者附属在这些信息之后，例如榜单信息或划线价等等。重要的信息一般都摆放在这几个关键位置。
3. 特殊Z型
特殊Z型，也相当于我们一般排版形式中最普遍的居中排版，是非常稳定的一种设计结构，一般用于交替的电商购物节等活动分栏目的排版。
总结一下：基于以上的模型，在不同的场景，不同的栏目分类里，我们仍需要根据用户的购物需求来定位哪一种元素该排在上面，例如在没有品牌标签的普通栏目里，则放的是最希望用户看到的标签，如：购物节活动标签、推荐等商品标签。根据不同的类目，第2行的促销标签，在没有促销活动时，也会换成卖点标签、销售量、属性标签等。在活动节排版中，最后一行可能不放购物icon，而是具体满减折扣等。我们通过组织与排版各种形式标签，来实现智慧选品、智能供货、导购推荐，提升用户的购物体验。
C 商品卡片元素的设计样式
除了商品图片外，根据关联性，我们可以将其他元素大致分为3类：标签、购物车 | 看相似 | 更多icon、价格&销量，下面将从这几个范围来进行分析。
1. 不同种类的标签设计样式
目前的商品标签可以分为以下几种：a 品牌标签、b 活动级标签、c 促销标签、d 属性级标签，这些标签在每个电商产品中都有各自的一套设计体系，对标竞品电商后发现有一些规律可循。
① 品牌标签与活动标签一般采用有强烈底色，文字反白的形式。而活动标签一般使用重新设计后的艺术字以作区分。
② 促销标签一般使用有主题色的线框包起来的文字展现。
③ 属性级标签的形式不一，有直接文字展现，有的以不影响整体色调的灰色线框+文字展现。这种标签一般在用户有强目的性，对比购物时起到提醒作用，因此以较弱形式展现。
△ 京东、淘宝、苏宁易购标签样式对标
2. 购物车 | 看相似 | 更多icon的使用场景及设计样式
① 三种按钮的使用场景
视栏目情况而定，一般电商主页的默认栏目“精选推荐”等都是一个大杂烩一般的存在，在这里，任何品类任何价格的产品都有可能出现，因此给出最普适的“看相似”按钮或不添加按钮是最为恰当的选择，也可以帮助用户更快速的找到自己想要的东西。而京东的产品列表右上角的“小叉叉”，淘宝右下角的“点点点”，都是用户在看到不喜欢的商品时，可以关掉该商品推荐，或是像淘宝直接出交互弹屏，给出更多选择的功能，这同时也是一种获取用户喜好个性的方式。
从消费者心理来说，一般人们对价格高的商品抱有更谨慎的购买态度，只有这样低价的商品，消费者才可能会在列表页就做购物决策。对标淘宝、京东等，也只是在便宜好货、超值优惠等分类下的商品卡片，或者是京东优惠、盒马生鲜、苏宁小店等所有商品价格本身就低廉的卡片中，右下角才会是购物车icon。而像手机这种需要比对参数，仔细选购的商品，除非消费者对手机数码商品十分了解，或者价格过分优惠，一般都要点击商品详情页才能下购物决定。
② 设计的样式
由于放购物车icon的目的，就是刺激购物下单，用主色调打底的面图标始终是最普遍的选择，在卡片的视觉动线中，也可成为一个视觉的重心和着落点，有效引导用户。而更多icon与看相似一般都是以不影响整体效果的灰色并简化设计。
3. 不同购物场景下的价格&销量是如何设计的？
这是个读图的时代，只看商品主图往往已经能对商品了然于心，名称只是起到辅助的作用，但价格永远是消费者最关注的点，特别是在以超值的价格作为主要卖点的栏目中，销量、价格越是会重点突出设计。
以淘宝举例来说，如下图，卡片1是淘宝精选栏目，卡片2是便宜好货栏目，卡片3是最新一次更新后的便宜淘货栏目，价格元素也是一再强调，从原有的36px变成了42px，从中黑变成加粗，最后还做了面图标形式的反白效果。而销售量标签从原来的灰色24号，排列在卡片最底部的视觉盲区，调整到了商品名称下的视觉中点，文字上也从原有的xx人付款调整成已售xx件这种更能刺激购物欲的语言。
△ 淘宝销量与价格各栏目对标 
说完了细节，我们来从宏观的布局形式上来扒一扒什么样的布局更适合电商列表呢？
电商商品列表一般分成 [ 列表布局 ] 和 [网格布局 ] 两种表现形式，其中网格布局的形式中，又分成 双列网格布局、单栏网格布局，那么我们就来聊一聊这几者的区别在哪里，各自的利弊又在哪里，具体什么场景用横版什么时候用竖版。
△列表布局&网格布局
A 列表布局
列表布局也就是我们常见的图文列表，垂直呈现多个连续的横向行元素。一般分为左图右文或左文右图的形式。
优势
列表布局遵循自上而下的阅读模式，有利于商品信息的对比；
同时一屏可展示产品数最多，信息密度最高。
缺点
重在文本内容，因此图片尺寸较小，图片细节展示不丰富；
趣味性和新鲜感较差，浏览时间过长会出现视觉疲劳。
什么时候使用？
当商品图片质量不高，商品数量较多，对图片不敏感的商品，需要通过优惠信息、价格参数等来进行对比。另外对界面效果要求较低时，我们可以采用横版列表布局。适用于型号参数等文字描述为主要选择因素的品类，比如手机，以规格型号参数为主要决策因素。
B 网格布局
1. 单栏网格布局
单栏网格，也就是指一行只展示一张图片，用户可直接根据图片进行商品对比。最常见的使用场景就是以图片为主的APP推荐列表。
优势
图片有最大的展示空间，细节清晰展现，体现精致感；
扩展性强，不需要所有商品一致，不会有混乱感。
缺点
由于其图片占比较大，因此往往一屏只能展示1到2张，信息密度最低。
什么时候使用？
一般用于商品数量较少时，或用于强调主推单品，适合服装饰品等以图片视觉为卖点来引导用户消费的场景，或个性化推荐。
2. 两列网格布局
两列网格布局也就是将屏幕一分为二，上图下文的双栏网格式，用户的视觉动线形成一个Z字，因此产品都能均衡的被用户看到。
优势
图片占比较高，从产品细节展示来说，比列表布局更丰富；
相比于大图展示，一屏可展示更多的商品，有利于信息的对比，信息密度较高；
除了单品，电商还会在布局中加入各种营销分类入口形式的卡片，趣味性和新鲜感较强。
缺点
不利于需要重点了解或对比商品信息。
什么时候使用？
如果产品是以图片对比为主，同时又不需要大图展示，或用户目标不明确的品类，因此一般电商的主页商品列表都采用这种形式，应用最为广泛。
C 两种列表布局如何选择？
通过多次的布局测试表明：在主页和类别页面中，其中大多数参与者在浏览和查看他们可能想要的商品详情时，更喜欢用网格视图，这又是为什么呢？还记得我们上文所说的视觉动线吗？Z字视觉动线有一个特殊的变异结构，这种特殊Z布局叫「之」字型布局，我们可以理解为 Z 的重复排序，有一些的 Z型布局出现，用户的路线，从左到右，再开始从左到右，这种有一个 Z 运动的浏览奇观我们叫做之字型动线。两列网格正好制造出Z字型视觉动线，有利于用户的长时间浏览。
△「之」字型布局
同时网格视图更突出图像本身，首先通过对图像的了解，再查看其它更详细的信息，是用户在电商产品中的主要使用习惯。与其相反，列表视图用于搜索结果展示页更受用户的欢迎，很多电商APP也都会根据用户习惯，在搜索页提供在这两种形式之间进行切换。
总而言之，针对不同的分类模块，我们需要在相关页面给出更加合理的视图才能够有效的提示购物体验。如盒马生鲜中，用户对时令水果的筛选主要来源于文字信息上的差别，较少通过图片来判断，故而采用了左图右文的形式，而进口水果，由于优质水果图片的吸引力更大，因此采用的是上图下文的形式。
以江苏泛渠道小程序产品为例，热销、新品、爆款、5G这些商品级标签，在原有版本中由于标签过少，为了不让整体页面显得“空空荡荡”，都设计成大图标打在左上角。
但对标淘宝、京东，这些标签都是在文字区单独做为一个标签展示，并没有放到主图的左上角或右上角（如下图）。除了自营品牌，商品图片可以自己统一设计，更多的则是由各个商家自行设计上传的，也会受到节日的促销等因素的影响变得十分繁杂。这一点与智慧门店+小程序产品十分相像，我们的商品主图不确定性很多，考虑到日后产品的扩展性，如果再将这些商品标签打在主图上，则会影响商品图片的视觉效果，用户也无法直接get到商品，又如何能愉快的购物呢？
△ 淘宝、京东属性、新品、热销标签对标
并且在加入了“限时购”、“预售”、“拼团”等活动标签后，我们商品卡片的标签展示形式也急需一次统一的整理和收拢。
基于上文的竞品分析与理论探索，此次改版我们做了以下调整：
1. 所有的商品标签“爆款”、“热销”、“新品”、“5G”统一收拢到商品名称的左侧。
2. 活动标签是会对产品的价格产生影响的元素，跟价格最好打包出现，因此统一显示在价格后。
3. 划线价与销售量排在一行，如无划线价，则只展示销量，文字也由无感情色彩的“销量”改具更煽动力的“已售”。
4. 对右侧将购物车按钮也做了优化，原来的按钮购物车图标不明显，调整后更加清晰，而拼团则是改为中间有“拼”字的购物袋样式图标，预售则换成有“去预定”字样的图标。图标的色系也与各自的主页色系相统一，让用户能更好的联系和对应，从而提升购物体验。
5. 针对限时购和预售，设计了对应的商品主图，增加活动商品在整体商品列表中的曝光率。
整体而言，商品与活动标签的数量与种类增加了，文字区的卡片空间却从原有的204px缩减到170px，增加了利用率，从而展示更多的商品。
结语：
一种商品卡片设计走天下的思维已经不能满足现有电商丰富多样化的商品分类与运营需求，精细化的用户定位+个性化的商品列表设计=高效精准的用户引流，从而将用户想要的东西传递到他的面前，帮助引导用户做购物决策、提升购物体验、促进用户买单。
参考文献：《人人都是产品经理》
参考产品截图：京东、淘宝、苏宁易购、网易严选、京喜小程序、京东购物小程序
Powered by Froala Editor
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册