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

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

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

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

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

第一種：網(wǎng)格布局

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

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

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

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

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