产品卡片是广泛存在于电商APP中的一个组件，不管是狭义上的，还是广义上的所有可交易产品 (包括但不限于电子书、音乐、游戏账号等非真实存在的产品)，这些都需要产品卡片组件作为载具来承载产品自身的关键信息，才可以方便用户快速了解产品的核心属性。
当下的常见产品卡片主要分为两种，也就是电商 App 最常用的两种视图，即“网格视图”和“列表视图”，产品卡片因视图的布局不同，所展示的信息内容在里面也不一样。
比如淘宝中就存在两种不同的视图可以根据用户的个人喜好进行切换：
本篇文章所要讲的，就是针对这两种排版不一样的视图，其中的信息，应该如何排布才能做到效果最大化。
如上面所说，产品卡片通常有两种布局形式，分别是网格和列表的布局；两种布局的内容排列都各不相同。
第一种：网格布局
网格布局可以使用瀑布流的排列方式，只不过相对来说图片的尺寸会更加单一，因为瀑布流的排列方式特点是多列的布局形式，列与列之间保持固定宽度，内容按照发布时间或者权重等因素排列，形成像瀑布一样的流式布局。产品排列需要严格控制卡片的错落程度才不会显得过于杂乱。
当然，产品卡片并不是只能做成瀑布流，完全对齐的网格布局也是很常见一种样式，只需要严格限制图片和字段的高度，同时为有高度差异的字段 (一般情况下是指标题) 留出足够的空间即可。
列表布局：通常情况下也会保持所有图片尺寸一致、间隔距离一致，但文本区域需不需要做到与图片等高，需要具体看项目中的产品要表达的信息数量，根据数量来决定文本区域的高度，例如像京东这种，文本信息非常多，那么文本区域的高度就可以超出图片的高度范围而不必强求与图片对齐。
如果产品需要展示出来的信息量不是特别多，那么等高就是一种比较好的选择。
假如信息量比较少的情况下，强行把文本区域与图片高度对齐，这种做法会导致组件内的间距比组件之间的间距更大，进而影响亲密性识别；这时候可以在两个产品的文本区域之间加分割线，将两个不同的产品文本通过分割线进行分割开来。
