一、組件介紹

商品卡片是一個廣泛存在于電商產品中的組件，不管是狹義上的商品，還是廣義上的所有可交易產品 (包括課程、服務、游戲等虛擬商品)，都需要商品卡片來承載它們的關鍵信息，以方便用戶快速了解商品的核心屬性。

往期回顧：

常見的商品卡片有兩種形式，也是電商 App 普遍使用的兩個視圖，即：網格視圖和列表視圖，卡片在這兩種視圖中有著不同的布局，其信息包含能力也有所差異。

我們要學會的，就是針對這兩種視圖，其中的信息該如何排布。

二、設計要點

1. 兩種布局

如 Part.1 種所說，商品卡片通常有兩種布局形式，分別是網格布局和列表布局。

①網格布局

網格布局可以使用瀑布流，所以布局的做法參見瀑布流那篇文章。

只不過圖片的尺寸相對來說會更單一一些，因為需要嚴格控制卡片的錯落程度，不至于過于雜亂。

當然，并不是只能做成瀑布流，完全對齊的網格布局也很常見，只需要嚴格限制圖片和字段的高度，且為有高度差異的字段 (一般是標題) 留出空間即可。

②列表布局

列表布局通常也會保持所有圖片尺寸一致，但文本區域需不需要與圖片等高，得看具體項目中商品需要露出的信息多寡，像京東這種信息非常多的，文本區域就可以超出圖片的高度范圍。

而如果信息量中等，那么等高是一種比較好的選擇。

但如果信息比較少，強行把某一字段與圖片底對齊的做法會導致組件內的間距比組件間的更大，從而影響親密性識別。

這時候可以在兩個商品之間加分割線。

2. 卡片樣式

主要有三種樣式，我稱之為有全包、半包和開放式。

全包：有明確的卡片背景，將圖片和文本全部包括在內部，比較不常見。

半包：圖片部分會撐滿卡片的邊界，而文本依然在卡片內部，比較常見。值得注意的是如果卡片需要做圓角，圖片朝內的兩個角不需要給圓角。

開放式：沒有明確的卡片背景，圖+文本自成卡片區域，在設計上通常會讓文本兩側較之圖片稍微向內縮進一些距離，在讓親密性表現得更舒適。可以兩側縮進，也可以只縮進右側。

3.卡片內容

不同類型的商品、不同需求的產品所需要表達的信息是不同的，但總結來說有以下這幾類：

1. 圖片：商品主圖
2. 主標題：活動標簽+商品名稱
3. 副標題：銷售排名/用戶評價數據等
4. 價格數據：折后價格/折前價格+銷售量
5. 優惠信息：退換政策/優惠券/滿減活動/分期信息
6. 商品規格表：商品核心規格信息
7. 店鋪信息：相關標簽+店鋪名稱
8. 功能按鈕：收藏/購物車

其中，圖片、標題和價格，這三個是最基礎的信息，幾乎每個商品卡片都必不或缺。其余的信息則并不一定每個都要包含在內，不同的 App 會根據自己的展示需求挑選其中幾類排布在卡片內。

信息展示的順序、和權重對比，都會根據實際情況略作調整。例如一些國外的電商 App，會把價格的權重做得比標題更大。

而對于網格布局和列表布局，所展示的信息盡可能保持一致。但因為網格視圖不適合展示的過長，所以如果信息真的非常多，那么網格視圖可以適當省略。例如小米有品是一個典型的例子，網格視圖相比列表視圖只少了商品規格表，因為這個字段實在不適合放在網格視圖展示。

4. 不同的使用場景

之所以會把使用場景放在這里，是因為商品卡片的使用場景會影響它所展示的信息類型。舉個例子，淘寶首頁推薦內的商品卡片內所包含的信息，就比搜索出來的完整商品卡片少了一些。

這是因為推薦中的商品信息務求直擊要害，其導購需求遠遠強于展示需求，同時也考慮到推薦頁應同屏展示更多商品，所以會把其他可能會影響用戶獲取核心信息，且可能造成卡片過長的字段全部隱去了。

同理，商品卡片在購物車中的信息也不一樣，考慮到存在于購物車中的商品都是用戶已經了解過大部份信息的商品，所以設計時要抓住用戶在這種場景下最關注的內容——價格和規格，所以購物車中的卡片會多出一些價格變動、規格重選、數量修改等信息。

總之，商品的使用場景很大程度上會影響展示信息的選擇，最核心的要點是一定要考慮用戶在不用的場景下，最核心的信息訴求是什么，不同 App 對此可能有不同的做法，我在這里也無法一概而論。

5. 不一樣的商品卡片

①Asos/Massimo Dutti

國外的電商 App，尤其是品牌自己的 App，總是會做得非常極簡，一個標題一個價格一張圖片，幾乎做到了商品卡片最簡潔的狀態，這是品牌氣質決定的，也是產品定位決定的。所以國內走出海路線的 App 大多也會是這個風格，比如 Shein。

②馬蜂窩/飛豬

舉這兩個例子并不是因為兩者的組件設計得有多精妙，而是因為它們有著另一種不同的商品，以及所呈現出來的不同的組件——酒店。

我在這里想要說明的是，不同的商品類型可能也會有其特有的字段類型，尤其是服務型商品，不同的服務所呈現出來的組件會有很大不同。

三、樣式拓展

這里收集了一些商品卡片的線上案例，也可以作為設計時的參考：

結尾

商品卡片的組件，今天就介紹到這里了。

歡迎關注作者的微信公眾號：「超人的電話亭」