宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

自14年引入谷歌的设计理念以来，基于卡片的设计逐渐流行起来，并被引入到IOS设计中。现在已经成为各类APP性能层的常态，电商APP产品基于卡片的设计就是其中之一。

目录：

一.项目背景

竞争产品概述

三种竞争产品的目标函数比较

卡片功能入口

卡片内容

四种竞争产品目标功能的纵向比较

淘宝网

天猫

树袋熊

1688五种竞争产品关键功能的横向比较

商品单一产品

频道

目录

关键词

不及物动词摘要

项目背景

10-1010 Android 5.0 llipop提出了MD设计语言，其中最重要的是魔纸3354的概念，将现实物理世界中承载信息的“纸”概念带到了屏幕上，具有现实中的厚度、惯性和反馈。

幻纸是卡片式设计的前身，卡片的优点毋庸置疑：可以将内容固定成不同的块，统一容器，便于理解和记忆；也有利于一稿多投适应不同尺寸；卡内可以内置不同的内容，满足各种业务和业务需求。

自14年引入谷歌的设计理念以来，基于卡片的设计逐渐流行起来，并被引入到IOS设计中。现在已经成为各类APP性能层的常态，电商APP产品基于卡片的设计就是其中之一。

1. 关于卡片化设计

以便在原始商品进料流的基础上丰富操作维度。借助容器卡，承载商品之外的更多内容，为用户提供基于场景的推荐信息，如匹配推荐、关键词切分、运营活动、列表等。

目的：吸引用户在浏览时跳两次，引流其他页面，增加用户使用时间和参与度，减少页面流失。

00-1010在竞品的选择上，我们还是选择了排名靠前的淘宝、JD.COM、拼多多、天猫，以及垂直电商的1688、当当、唯品会、博夏生鲜、YEATION、考拉、咸鱼、转专的产品。

经过进一步分析，JD.COM、拼多多、YEATION、Vipshop并没有对商品卡进行多元化设计，仍然是常规的单品卡，因为这次没有纳入分析。

00-101010

2. 我们为什么要做卡片化？

电商商品卡形式丰富，常见于瀑布流、品类页面、搜索结果页面、为你推荐等。这些卡片通常是垂直的，基本结构是图片商品信息。

当然，除了常规的商品卡，还有扣球、团战、导购等其他商品卡，第二类卡不在本次分析范围内。

00-1010通过对比分析竞争产品卡片，探究卡片能够承载的具体内容和信息。

据分析，该卡除了承载常规商品外，还可以承载产品内的渠道、主题、列表、搜索关键词、品牌、品类以及各种运营内容，如下表所示：

00-101010

竞品概述

淘宝的商品卡在常规单品卡的基础上增加了以下项目：

匹配推荐：相关产品将以9格展示。点击进入匹配推荐页面相关渠道推荐：ifashion、咸鱼、小黑盒、全球购、保利性价比等渠道。点击进入渠道页面淘宝体验：可以查看相关产品多向左滑动，点击进入业务详情页，点击进入底部淘宝体验选项卡关键词过滤，点击进入关键词搜索结果页面。

竞品目标功能

天猫的商品卡款式非常丰富。在首页的商品瀑布中，卡片包含推荐文案；在天猫超市和天猫国际的渠道中，产品卡包含加入购物车的按钮。

此外，卡片内容还包含店铺推荐：

推荐商品相关店铺：点击直接进入店铺页面；推荐列表为热门列表：点击进入列表页面；品牌推荐：产品品牌筛选结果页面。

1. 卡片功能入口

考拉的单卡有两种：一种是普通卡，另一种包含实时用户评论。

作为大学教育资助委员会或PGC在社区中被热烈讨论的必购清单和内容。列表为PGC或OGC内容：点击文章列表的列表页面；类别：点击t

rom=pc”>

4. 1688

1688首页FEED流和搜索结果页feed流的卡片整体结构虽然一致（图片+标题+介绍+按钮），但是设计风格差异比较大。

前者延续了淘宝的设计风格，在主题市场推荐和榜单推荐卡片中，都采用了轻量化、大圆角风格；而搜索结果页里，榜单和主题市场视觉上更加突出，单品卡片则展示更多的信息，优惠标签、发货地、回头率。

重点功能横向对比

1. 商品单品

单品是商品卡片最基本、最基础的内容构成，这个我们就不多说了。商品卡片最基础内容——商品图片、标题、价格。

商品卡片通常有竖版卡片和横版列表两种表现形式，很多APP都可以根据用户习惯在这两种形式之间进行切换，比如：淘宝、京东。

也有一些产品是只有竖版卡片的，此类对图片有更大的展示空间，适合服装饰品等以图片视觉为卖点的商品，比如主打穿搭的蘑菇街、主营水果蔬菜的每日优鲜。而横版列表可以展示更多的文字介绍信息，适合标品，或者说对图片不敏感的商品，比如叮当快药的药品、京东得电子产品、美妆日化等。

一个很典型的案例就是天猫搜索服装和美妆，搜索结果页里商品卡片有明显的区别。当然因为本司产品的定位为第一种，我们此次分析只聚焦于竖版卡片。

2. 频道

卡片承载频道功能，适合综合型电商类、产品体量庞大且品类丰富的产品。通过竞品分析我们可以看到，只有淘宝系的三款产品——淘宝、天猫、1688拥有此功能。

频道功能通常在搜索结果页feed流中出现，比如淘宝就根据搜索词推荐各种相关导购频道，如ifashion、小黑盒、天猫国际、天天特卖、极有家、每日好店等。

而在表现层上，淘宝和1688的卡片基本与常规商品卡片保持一致，均为单张商品图+文本信息的结构。相比而言，天猫的频道功能从视觉上看却更加突出，纯色渐变背景、1个or3个商品、点击按钮……这些设计上的视觉引导都体现出天猫频道功能有更高的权重。

3. 榜单

榜单也是商品运营维度中的一种，点击后进入榜单列表页，常见的榜单有热销榜、人气榜、趋势榜、好评榜等，也可以根据品类制作各种细分榜单。榜单类卡片的基础是榜单名称、介绍等基础信息，除此以外，还会通过按钮等CTA的设计，引导用户点击。

通过对竞品的分析对比，榜单卡片通常展示3-4个商品，给用户以内容丰富的预期；包含排名的角标，强化传递“榜单”这一信息，可以说是利用从众心理去激起用户想要了解的欲望，比如天猫和考拉。

也有产品显示单张商品图的、比如1688，卡片显示单个商品能够与其他商品卡片保持更好的一致性，当然缺点也是在此了，因为过强的一致性而不够突出。

具体选择单个还是三四个图显示，需要我们根据产品各个功能的优先级去衡量具体的表现方式。

4. 关键词

关键词推荐是各个竞品中使用率比较高的一个功能，主要使用在APP首页的feed流中以及搜索结果页feed流中。

在首页feed流，关键词根据用户的历史浏览、购买记录等推荐相应的品类，点击后进入该词的搜索结果页，比如1688和转转、盒马都是如此；而在搜索结果页feed流中，关键词功能有两种，一种是筛选，比如淘宝会根据筛选里的分类，随机推荐各种筛选，比如价格区间、品牌、风格、参数等，点击后进入筛选结果页，关闭筛选词可退出。

第二种是添加搜索词，点击后依旧是搜索结果页，多个关键词组合后更精细搜索。比较适合商品品类、种类丰富的平台，比如淘宝和1688。

总结

本次报告主要对相应竞品的商品卡片入口、卡片内容、具体承载功能进行分析和总结。

建议结合具体功能内容及业务偏重，选择适合的呈现方式。如榜单推荐、店铺推荐类以入口展示为主，可以增加视觉吸引力，使用多个产品图模式展示；具体商品和以内容及价格展示为主，需要偏重浏览效率及内容完整性，使用单张图列表模式展示。

除此之外，建议以上模块加入CTA按钮，吸引潜在客户的注意力，诱使他们点击跳转、进入下一个阶段。

作者：白露漫谈，公众号：白鹭漫谈

本文由 @白露漫谈 翻译发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议