產品卡片是廣泛存在于電商APP中的一個組件，不管是狹義上的，還是廣義上的所有可交易產品 (包括但不限于電子書、音樂、游戲賬號等非真實存在的產品)，這些都需要產品卡片組件作為載具來承載產品自身的關鍵信息，才可以方便用戶快速了解產品的核心屬性。

當下的常見產品卡片主要分為兩種，也就是電商 App 最常用的兩種視圖，即“網格視圖”和“列表視圖”，產品卡片因視圖的布局不同，所展示的信息內容在里面也不一樣。

比如淘寶中就存在兩種不同的視圖可以根據用戶的個人喜好進行切換：

本篇文章所要講的，就是針對這兩種排版不一樣的視圖，其中的信息，應該如何排布才能做到效果最大化。

如上面所說，產品卡片通常有兩種布局形式，分別是網格和列表的布局；兩種布局的內容排列都各不相同。

第一種：網格布局

網格布局可以使用瀑布流的排列方式，只不過相對來說圖片的尺寸會更加單一，因為瀑布流的排列方式特點是多列的布局形式，列與列之間保持固定寬度，內容按照發布時間或者權重等因素排列，形成像瀑布一樣的流式布局。產品排列需要嚴格控制卡片的錯落程度才不會顯得過于雜亂。

當然，產品卡片并不是只能做成瀑布流，完全對齊的網格布局也是很常見一種樣式，只需要嚴格限制圖片和字段的高度，同時為有高度差異的字段 (一般情況下是指標題) 留出足夠的空間即可。

列表布局：通常情況下也會保持所有圖片尺寸一致、間隔距離一致，但文本區域需不需要做到與圖片等高，需要具體看項目中的產品要表達的信息數量，根據數量來決定文本區域的高度，例如像京東這種，文本信息非常多，那么文本區域的高度就可以超出圖片的高度范圍而不必強求與圖片對齊。

如果產品需要展示出來的信息量不是特別多，那么等高就是一種比較好的選擇。

假如信息量比較少的情況下，強行把文本區域與圖片高度對齊，這種做法會導致組件內的間距比組件之間的間距更大，進而影響親密性識別；這時候可以在兩個產品的文本區域之間加分割線，將兩個不同的產品文本通過分割線進行分割開來。