商品卡片是电商平台的C端界面设计中出场率极高的设计形式，不管是实物类商品，还是虚拟类商品，都需要借助商品卡片来进行介绍，方便用户了解相关产品的信息。下面，成都电商设计公司蓝橙视觉就给大家分享一下商品卡片设计的要点。

一、卡片样式

卡片主要有三种样式：首先是全包卡片，有明确的卡片背景，将图片和文本全部包括在内部，比较不常见。然后是半包卡片，图片部分会撑满卡片的边界，而文本依然在卡片内部，比较常见。最后是开放式，没有明确的卡片背景，图+文本自成卡片区域，在设计上通常会让文本两侧较之图片稍微向内缩进一些距离，在让亲密性表现得更舒适。

二、卡片内容

不同类型的商品、不同需求的产品所需要表达的信息是不同的，较为统一的信息有：图片（商品主图）、主标题（活动标签+商品名称）、副标题（销售排名/用户评价数据等）、价格（折后价格/折前价格+销售量）、优惠信息（退换政策/优惠券/满减活动/分期信息）、店铺信息（相关标签+店铺名称）和功能按钮（收藏、加入购物车、搜索相似）。

三、布局方式

1、网格布局

网格布局分为瀑布流和对齐式网格两种形式，瀑布流形式既像瀑布一样无限向下倾泻，内容又如水一样没有固定样式，而对齐则是规则统一的排列。两者相比较而言，瀑布流可以更有效地利用页面空间并充分展示图片内容而不裁切，同时让用户的浏览体验更加沉浸，错落的图片也相对更容易形成有效的视觉引导，引导用户不断向下浏览。在此瀑布流的基础上，严格限制图片、字体内容的话，就成为了对齐式方式。

2、列表布局

列表布局分为图片区和文本区两个区域，一般是左图右文，通常也会保持所有图片尺寸一致，但文本区域需不需要与图片等高，得看具体项目中商品需要露出的信息量，信息量较大时，文本区域就可以超出图片的高度范围。

以上就是本次为大家分享的电商卡片设计要点，目前主流电商平台都是采用的这类商品卡片设计形式，并且提供切换功能，商家在装修自己的电商店铺时，需求提交不同尺寸的配图，才能获取更好的展示效果。