小纽扣
电商类APP,如何做好卡片的竞品分析?应该从相应竞品的商品卡片入口、内容、具体承载功能进行分析总结,再结合具体功能内容及业务偏重,选择合适的呈现方式。
 

目录

一 项目背景
二 竞品概述
三 竞品目标功能对比

  • ·卡片功能入口
  • ·卡片内容

四 竞品目标功能纵向对比

  • ·淘宝
  • ·天猫
  • ·考拉
  • ·1688

五 竞品重点功能横向对比

  • ·商品单品
  • ·频道
  • ·榜单
  • ·关键词

六 总结

 

项目背景

关于卡片化设计

安卓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

 

原文地址:白鹭漫谈(公众号)

作者:白鹭漫谈

 

转载请注明:学UI网 » 电商类APP:商品卡片竞品分析(附PDF下载)

登录收藏
 
你可能喜欢的:
你必须知道的5个搜索入口的位置你必须知道的5个搜索入口的位置
无限式体验无限式体验
写给前端的弹窗使用指南!(下)写给前端的弹窗使用指南!(下)
用户画像在产品设计中的正确打开方式(附用户画像源文件)用户画像在产品设计中的正确打开方式(附用户画像源文件)
取消与关闭:请在设计上区分差异取消与关闭:请在设计上区分差异
iOS 13 隐秘的细节④:系统组件·下iOS 13 隐秘的细节④:系统组件·下
Material Design OwlMaterial Design Owl
卡片式设计流行的秘密 — 看完这15个案例你就懂了卡片式设计流行的秘密 — 看完这15个案例你就懂了
为什么常见的垂直列表,你却总设计不好为什么常见的垂直列表,你却总设计不好
QQ极简与夜间模式设计QQ极简与夜间模式设计