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