從14年穀歌這一設計概念推出之後，卡片化設計逐漸風靡，也被引入IOS設計之中，如今已經成為各類APP表現層的常態，電商APP商品卡片化就是其中一種。
目錄：
一 項目背景
二 競品概述
三 競品目標功能對比
·卡片功能入口
·卡片內容
四 競品目標功能縱向對比
·淘寶
·天貓
·考拉
·1688 五 競品重點功能橫向對比
·商品單品
·頻道
·榜單
·關鍵詞
六 總結
項目背景
1. 關於卡片化設計
安卓5.0Lillipop提出了MD設計語言，其中最重要的就是魔法紙片的概念——把真實物理世界中承載信息的“紙張”概念帶入屏幕中，它擁有現實中的厚度、慣性和反饋。
魔法紙片是卡片化設計的前身，卡片的優勢毋庸置疑：它可以將內容固定為不同的區塊，統一容器，便於理解和記憶；又利於一稿適配不同尺寸的適配；而在卡片內可以搭建不同的內容，去滿足各種的商業和業務需求。
從14年穀歌這一設計概念推出之後，卡片化設計逐漸風靡，也被引入IOS設計之中，如今已經成為各類APP表現層的常態，電商APP商品卡片化就是其中一種。
2. 我們為什麼要做卡片化？
為了在原有商品feed流的基礎上，豐富運營維度。藉助卡片這一容器，承載除了商品之外的更多內容，給用戶提供場景化推薦信息，比如搭配推薦、關鍵詞細分、運營活動、榜單等。
目標：吸引用戶在瀏覽中二次跳轉，給其他頁面引流，增加用戶的使用時長和參與度，減少頁面流失。
競品概述
在競品選擇上，我們依舊選擇淘寶、京東、拼多多、天貓這幾款流量頂級的產品，以及1688、噹噹、唯品會、盒馬生鮮、嚴選、考拉、鹹魚、轉轉等垂直類電商的產品。
經過進一步的分析，京東、拼多多、嚴選、唯品會並沒有對商品卡片做多樣化設計，依舊是常規的的單品卡片，因為此次不列入分析。
競品目標功能
1. 卡片功能入口
電商類商品卡片形式豐富，常見於APP首頁瀑布流、品類頁、搜索結果頁、為你推薦等等，此類卡片通常為豎版，基本結構為圖片+商品信息。
當然除了常規商品卡片之外，還有秒殺、拼團、導購類商品卡片，第二類卡片不在此次分析範圍內。
2. 卡片內容
通過對比和分析競品的商品卡片，探索卡片具體可以承載的內容和信息。
根據分析，除了承載常規的商品之外，卡片還可以承載產品內部的頻道、主題，各個榜單，搜索關鍵詞，品牌，類目以及各種運營內容，具體見下圖表格：
競品目標功能縱向對比
1. 淘寶
淘寶的商品卡片在常規單品卡片的基礎上，增加了：
- 搭配推薦：相關商品9宮格展示，點擊進入搭配推薦頁
- 相關頻道推薦：ifashion、鹹魚、小黑盒、全球購、聚划算等頻道，點擊進入頻道頁
- 淘寶經驗：可查看相關商品(左滑更多，點擊進入商詳頁、點擊底部切入淘寶經驗tab
關鍵詞篩選，點擊進入關鍵詞搜索結果頁。
2. 天貓
天貓的商品卡片樣式非常豐富，在首頁商品瀑布流裡，卡片包含推薦文案；而在天貓超市、天貓國際的頻道里，商品卡片包含加入購物車按鈕。
除此以外，卡片內容還包含店鋪推薦：
- 推薦商品相關店鋪：點擊後直接進入店鋪頁；
- 榜單推薦為熱銷榜單：點擊進入榜單頁；
- 品牌推薦：商品品牌篩選結果頁。
3. 考拉
考拉的單品卡片有兩種：一種常規卡片、第二種包含實時用戶評論。
必買清單和正在熱議為社區內UGC或者PGC的內容，榜單為PGC或者OGC內容：點擊後為文章類榜單列表頁；分類推薦：點擊後為篩選搜索結果頁。
可能感興趣則根據用戶瀏覽數據，推薦3種類別。
4. 1688
1688首頁FEED流和搜索結果頁feed流的卡片整體結構雖然一致（圖片+標題+介紹+按鈕），但是設計風格差異比較大。
前者延續了淘寶的設計風格，在主題市場推薦和榜單推薦卡片中，都採用了輕量化、大圓角風格；而搜索結果頁裡，榜單和主題市場視覺上更加突出，單品卡片則展示更多的信息，優惠標籤、發貨地、回頭率。
重點功能橫向對比
1. 商品單品
單品是商品卡片最基本、最基礎的內容構成，這個我們就不多說了。商品卡片最基礎內容——商品圖片、標題、價格。
商品卡片通常有豎版卡片和橫版列表兩種表現形式，很多APP都可以根據用戶習慣在這兩種形式之間進行切換，比如：淘寶、京東。
也有一些產品是隻有豎版卡片的，此類對圖片有更大的展示空間，適合服裝飾品等以圖片視覺為賣點的商品，比如主打穿搭的蘑菇街、主營水果蔬菜的每日優鮮。而橫版列表可以展示更多的文字介紹信息，適合標品，或者說對圖片不敏感的商品，比如叮噹快藥的藥品、京東得電子產品、美妝日化等。
一個很典型的案例就是天貓搜索服裝和美妝，搜索結果頁裡商品卡片有明顯的區別。當然因為本司產品的定位為第一種，我們此次分析只聚焦於豎版卡片。
2. 頻道
卡片承載頻道功能，適合綜合型電商類、產品體量龐大且品類豐富的產品。通過競品分析我們可以看到，只有淘寶系的三款產品——淘寶、天貓、1688擁有此功能。
頻道功能通常在搜索結果頁feed流中出現，比如淘寶就根據搜索詞推薦各種相關導購頻道，如ifashion、小黑盒、天貓國際、天天特賣、極有家、每日好店等。
而在表現層上，淘寶和1688的卡片基本與常規商品卡片保持一致，均為單張商品圖+文本信息的結構。相比而言，天貓的頻道功能從視覺上看卻更加突出，純色漸變背景、1個or3個商品、點擊按鈕……這些設計上的視覺引導都體現出天貓頻道功能有更高的權重。
3. 榜單
榜單也是商品運營維度中的一種，點擊後進入榜單列表頁，常見的榜單有熱銷榜、人氣榜、趨勢榜、好評榜等，也可以根據品類製作各種細分榜單。榜單類卡片的基礎是榜單名稱、介紹等基礎信息，除此以外，還會通過按鈕等CTA的設計，引導用戶點擊。
通過對競品的分析對比，榜單卡片通常展示3-4個商品，給用戶以內容豐富的預期；包含排名的角標，強化傳遞“榜單”這一信息，可以說是利用從眾心理去激起用戶想要了解的慾望，比如天貓和考拉。
也有產品顯示單張商品圖的、比如1688，卡片顯示單個商品能夠與其他商品卡片保持更好的一致性，當然缺點也是在此了，因為過強的一致性而不夠突出。
具體選擇單個還是三四個圖顯示，需要我們根據產品各個功能的優先級去衡量具體的表現方式。
4. 關鍵詞
關鍵詞推薦是各個競品中使用率比較高的一個功能，主要使用在APP首頁的feed流中以及搜索結果頁feed流中。
在首頁feed流，關鍵詞根據用戶的歷史瀏覽、購買記錄等推薦相應的品類，點擊後進入該詞的搜索結果頁，比如1688和轉轉、盒馬都是如此；而在搜索結果頁feed流中，關鍵詞功能有兩種，一種是篩選，比如淘寶會根據篩選裡的分類，隨機推薦各種篩選，比如價格區間、品牌、風格、參數等，點擊後進入篩選結果頁，關閉篩選詞可退出。
第二種是添加搜索詞，點擊後依舊是搜索結果頁，多個關鍵詞組合後更精細搜索。比較適合商品品類、種類豐富的平臺，比如淘寶和1688。
總結
本次報告主要對相應競品的商品卡片入口、卡片內容、具體承載功能進行分析和總結。
建議結合具體功能內容及業務偏重，選擇適合的呈現方式。如榜單推薦、店鋪推薦類以入口展示為主，可以增加視覺吸引力，使用多個產品圖模式展示；具體商品和以內容及價格展示為主，需要偏重瀏覽效率及內容完整性，使用單張圖列表模式展示。
除此之外，建議以上模塊加入CTA按鈕，吸引潛在客戶的注意力，誘使他們點擊跳轉、進入下一個階段。
作者：白露漫談，公眾號：白鷺漫談
本文由 @白露漫談 翻譯發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議