从 14 年谷歌这一设计概念推出之后，卡片化设计逐渐风靡，也被引入 IOS 设计之中，如 今已经成为各类 APP 表现层的常态，电商 APP 商品卡片化就是其中一种。 目录： 一 项目背景 二 竞品概述 三 竞品目标功能对比 ·卡片功能入口 ·卡片内容 四 竞品目标功能纵向对比 ·淘宝 ·天猫 ·考 拉 ·1688 五 竞品重点功能横向对比 ·商品单品 ·频道 ·榜单 ·关键词 六 总结 项目背景 1. 关于卡片化设计 安卓 5.0Lillipop 提出了 MD 设计语言，其中最重要的就是魔法纸片的概念——把真实物 理世界中承载信息的“纸张”概念带入屏幕中，它拥有现实中的厚度、惯性和反馈。 魔法纸片是卡片化设计的前身，卡片的优势毋庸置疑：它可以将内容固定为不同的区块， 统一容器，便于理解和记忆；又利于一稿适配不同尺寸的适配；而在卡片内可以搭建不同 的内容，去满足各种的商业和业务需求。 从 14 年谷歌这一设计概念推出之后，卡片化设计逐渐风靡，也被引入 IOS 设计之中，如 今已经成为各类 APP 表现层的常态，电商 APP 商品卡片化就是其中一种。 2. 我们为什么要做卡片化？ 为了在原有商品 feed 流的基础上，丰富运营维度。借助卡片这一容器，承载除了商品之 外的更多内容，给用户提供场景化推荐信息，比如搭配推荐、关键词细分、运营活动、榜 单等。 目标：吸引用户在浏览中二次跳转，给其他页面引流，增加用户的使用时长和参与度，减 少页面流失。 竞品概述 在竞品选择上，我们依旧选择淘宝、京东、拼多多、天猫这几款流量顶级的产品，以及 1688、当当、唯品会、盒马生鲜、严选、考拉、咸鱼、转转等垂直类电商的产品。 经过进一步的分析，京东、拼多多、严选、唯品会并没有对商品卡片做多样化设计，依旧 是常规的的单品卡片，因为此次不列入分析。 竞品目标功能 1. 卡片功能入口 电商类商品卡片形式丰富，常见于 APP 首页瀑布流、品类页、搜索结果页、为你推荐等 等，此类卡片通常为竖版，基本结构为图片+商品信息。 当然除了常规商品卡片之外，还有秒杀、拼团、导购类商品卡片，第二类卡片不在此次分 析范围内。 2. 卡片内容 通过对比和分析竞品的商品卡片，探索卡片具体可以承载的内容和信息。 根据分析，除了承载常规的商品之外，卡片还可以承载产品内部的频道、主题，各个榜单 ，搜索关键词，品牌，类目以及各种运营内容，具体见下图表格： 竞品目标功能纵向对比 1. 淘宝 淘宝的商品卡片在常规单品卡片的基础上，增加了： 搭配推荐：相关商品 9 宫格展示，点击进入搭配推荐页 相关频道推荐：ifashion、咸鱼、 小黑盒、全球购、聚划算等频道，点击进入频道页 淘宝经验：可查看相关商品(左滑更多 ，点击进入商详页、点击底部切入淘宝经验 tab 关键词筛选，点击进入关键词搜索结果页。 2. 天猫 天猫的商品卡片样式非常丰富，在首页商品瀑布流里，卡片包含推荐文案；而在天猫超市 、天猫国际的频道里，商品卡片包含加入购物车按钮。 除此以外，卡片内容还包含店铺推荐： 推荐商品相关店铺：点击后直接进入店铺页； 榜单推荐为热销榜单：点击进入榜单页； 品牌推荐：商品品牌筛选结果页。 3. 考拉 考拉的单品卡片有两种：一种常规卡片、第二种包含实时用户评论。 必买清单和正在热议为社区内 UGC 或者 PGC 的内容，榜单为 PGC 或者 OGC 内容：点 击后为文章类榜单列表页；分类推荐：点击后为筛选搜索结果页。 可能感兴趣则根据用户浏览数据，推荐 3 种类别。 4. 1688 1688 首页 FEED 流和搜索结果页 feed 流的卡片整体结构虽然一致（图片+标题+介绍+ 按钮），但是设计风格差异比较大。 前者延续了淘宝的设计风格，在主题市场推荐和榜单推荐卡片中，都采用了轻量化、大圆 角风格；而搜索结果页里，榜单和主题市场视觉上更加突出，单品卡片则展示更多的信息 ，优惠标签、发货地、回头率。