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

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

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

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

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

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

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

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

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

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

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