关于卡片化设计

安卓5.0Lillipop提出了MD设计语言，其中最重要的就是魔法纸片的概念——把真实物理世界中承载信息的“纸张”概念带入屏幕中，它拥有现实中的厚度、惯性和反馈。

魔法纸片是卡片化设计的前身，卡片的优势毋庸置疑：它可以将内容固定为不同的区块，统一容器，便于理解和记忆；又利于一稿适配不同尺寸的适配；而在卡片内可以搭建不同的内容，去满足各种的商业和业务需求。

从14年谷歌这一设计概念推出之后，卡片化设计逐渐风靡，也被引入IOS设计之中，如今已经成为各类APP表现层的常态，电商APP商品卡片化就是其中一种。

我们为什么要做卡片化？

为了在原有商品feed流的基础上，丰富运营维度。借助卡片这一容器，承载除了商品之外的更多内容，给用户提供场景化推荐信息，比如搭配推荐、关键词细分、运营活动、榜单等

目标：吸引用户在浏览中二次跳转，给其他页面引流，增加用户的使用时长和参与度，减少页面流失。

在竞品选择上，我们依旧选择淘宝、京东、拼多多、天猫这几款流量顶级的产品，以及1688、当当、唯品会、盒马生鲜、严选、考拉、咸鱼、转转等垂直类电商的产品。

经过进一步的分析，京东、拼多多、严选、唯品会并没有对商品卡片做多样化设计，依旧是常规的的单品卡片，因为此次不列入分析。

卡片功能入口

电商类商品卡片形式丰富，常见于APP首页瀑布流、品类页、搜索结果页、为你推荐等等，此类卡片通常为竖版，基本结构为图片+商品信息。

当然除了常规商品卡片之外，还有秒杀、拼团、导购类商品卡片，第二类卡片不在此次分析范围内。

卡片内容

通过对比和分析竞品的商品卡片，探索卡片具体可以承载的内容和信息。

根据分析，除了承载常规的商品之外，卡片还可以承载产品内部的频道、主题，各个榜单，搜索关键词，品牌，类目以及各种运营内容，具体见下图表格：

淘宝

淘宝的商品卡片在常规单品卡片的基础上，增加了

搭配推荐：相关商品9宫格展示，点击进入搭配推荐页

相关频道推荐：ifashion、咸鱼、小黑盒、全球购、聚划算等频道，点击进入频道页

淘宝经验：可查看相关商品(左滑更多，点击进入商详页、点击底部切入淘宝经验tab

关键词筛选，点击进入关键词搜索结果页

天猫

天猫的商品卡片样式非常丰富，在首页商品瀑布流里，卡片包含推荐文案；而在天猫超市、天猫国际的频道里，商品卡片包含加入购物车按钮。

除此以外，卡片内容还包含店铺推荐：推荐商品相关店铺，点击后直接进入店铺页

榜单推荐为热销榜单：点击进入榜单页

品牌推荐：商品品牌筛选结果页

考拉

考拉的单品卡片有两种，一种常规卡片、第二种包含实时用户评论。

必买清单和正在热议为社区内UGC或者PGC的内容，

榜单：为PGC或者OGC内容，点击后为文章类榜单列表页

分类推荐：点击后为筛选搜索结果页

可能感兴趣则根据用户浏览数据，推荐3种类别

1688

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

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

商品单品

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

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

也有一些产品是只有竖版卡片的，此类对图片有更大的展示空间，适合服装饰品等以图片视觉为卖点的商品，比如主打穿搭的蘑菇街、主营水果蔬菜的每日优鲜。

而横版列表可以展示更多的文字介绍信息，适合标品，或者说对图片不敏感的商品，比如叮当快药的药品、京东得电子产品、美妆日化等。

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

频道

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

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

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

 榜单

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

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

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

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

关键词

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

在首页feed流，关键词根据用户的历史浏览、购买记录等推荐相应的品类，点击后进入该词的搜索结果页，比如1688和转转、盒马都是如此；

而在搜索结果页feed流中，关键词功能有两种，一种是筛选，比如淘宝会根据筛选里的分类，随机推荐各种筛选，比如价格区间、品牌、风格、参数等，点击后进入筛选结果页，关闭筛选词可退出；

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

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

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

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

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

提取码：m5vd