自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协议