編輯導(dǎo)語：不知道有沒有細心的朋友發(fā)現(xiàn)最近天貓首頁的新變化，本文作者今天針對天貓的變化，為我們分析了其的設(shè)計小細節(jié)并且總結(jié)了設(shè)計特點。

最近發(fā)現(xiàn)天貓首頁改版了，整個頁面變成了大卡流的信息結(jié)構(gòu)，內(nèi)容和視覺表現(xiàn)更加簡潔，產(chǎn)品語言更加符合品牌定位。今天我們就分析總結(jié)天貓首頁改版的細節(jié)，總結(jié)下大卡流的設(shè)計特點。

主要內(nèi)容包括3個方面：

1. 天貓首頁為什么要改版
2. 為什么采用大卡流信息框架
3. 大卡流的應(yīng)用場景

01 為什么要改版？

1. 塑造差異化

一直以來淘寶、天貓都是兩個相對獨立的品牌，天貓品牌定位更加高端，更強調(diào)品牌和品質(zhì)。但是在產(chǎn)品體驗上，淘寶和天貓并沒有明顯的差異，特別是頁面布局和視覺呈現(xiàn)上，天貓都缺少獨特的品牌特色。

2. 強化商品和內(nèi)容曝光

2020年淘寶首頁重大改版，核心目標是精簡內(nèi)容、強化用戶觸達商品和內(nèi)容的效率，這種產(chǎn)品設(shè)計理念也必然影響到了天貓。

改版后天貓首頁弱化了信息分發(fā)的作用，取消了Banner 資源位，商品分類調(diào)整為文字按鈕入口，與搜索框合并展示。原有的頻道欄目縮略圖卡片壓縮為5個icon入口。內(nèi)容精簡和整合，保證了用戶在首屏就可以觸達品牌和商品。

02 為什么采用大卡流信息框架？

此次改版最大的特點就是采用了大卡流的信息框架，大卡流有什么優(yōu)勢和不足呢？

1. 優(yōu)勢分析

1）提升瀏覽體驗

在現(xiàn)實生活中，超市和商場的購物體驗有著明顯的差別。超市商品琳瑯滿目，商品密度更高，用戶需要在一排排貨架中去尋找自己所需要的商品。商場空間大，信息密度低，色彩更加素白，更加突出品牌信息，用戶的購物體驗相對要更加輕松。

這種線下購物體驗的差異化也映射到了線上產(chǎn)品。新版天貓首頁采用了“大卡流”，信息密度更低，空間感更強，用戶認知負荷更輕。仿佛在逛商場專柜，商品猶如單獨陳列的精品，營造出價值感和品質(zhì)感。

2）信息曝光效率更高，更好的激起用戶的點擊欲望

大卡片空間尺寸優(yōu)勢明顯，可以展現(xiàn)更多的信息內(nèi)容，有利于品牌和商品的曝光。

例如舊版的排行榜中，用戶只能看到一個個榜單入口，單個商品圖片可能無法引起用戶的注意和興趣。而新版的排行榜將榜單商品直接平鋪展開，用戶看到的是商品和價格，更能夠激起用戶的點擊欲望。

品牌旗艦店是天貓非常重要的資源，高清大圖有利于品牌商品運營，用戶觸達的不再是Banner廣告位，而是突出的品牌信息和商品圖片，信息的體驗感知更強。

3）提升商品品質(zhì)感

商品圖片是大卡片流絕對的核心內(nèi)容，幾乎占據(jù)了卡片的全部空間。大圖可以展現(xiàn)出更多的細節(jié)，感染力更強。

天貓首頁商品主要是白底圖，去除了背景氛圍影響，突出商品本身的品質(zhì)和細節(jié)。圖片還可以組合展示，豐富了商品的表現(xiàn)力。另外卡片中增加了“立即購買”的行動按鈕，引導(dǎo)性更強。

2.?不足之處及應(yīng)對措施

雖然大卡流提升了瀏覽體驗，但是相比雙列流存在著明顯的“屏效”短板。用戶瀏覽效率降低，必然會影響頁面底部的商品曝光，因此必須要增大空間的利用率，提高瀏覽效率。

1）拓展橫向空間，建立十字交互方式

例如天貓首頁“品牌上新”、“618榜單”等內(nèi)容，增加了橫向滑動的交互方式，從而承載更多內(nèi)容。

2）增強圖片的信息承載能力

為了提高卡片內(nèi)容的承載量，還需要拓展圖片的信息維度，增強信息傳遞效率。

天貓商品卡片中增加了品牌、品類、賣點等關(guān)鍵標簽，圖文結(jié)合更加緊密，用戶在圖片瀏覽過程中就可以完成商品信息的獲取，認知效率更高。并且標簽增加了跳轉(zhuǎn)功能，可以直達店鋪頁面或者商品集合頁面，從而提高了用戶行為效率。

03 大卡流的應(yīng)用場景總結(jié)

大卡流的形式其實在其他平臺早有應(yīng)用，例如微信讀書“發(fā)現(xiàn)”和App Store“今日”頁面都是采用的大卡流布局形式。

微信讀書“發(fā)現(xiàn)”頁面以書籍推薦為主，采用了少而精的策略，每次推薦1本或6本，通過“換一批”功能擴展推薦數(shù)量。下方則是利用社交關(guān)系和從眾心理為用戶推薦書籍卡片以及運營活動坑位。整體而言，微信讀書發(fā)現(xiàn)頁面屬于內(nèi)容相對簡單的場景。

App Store“今日”頁面是展示了近一周的應(yīng)用推薦，每天包含了6個大卡片，內(nèi)容相對固定，包括主推應(yīng)用、App榜單等。除了圖片之外，大卡片中還可以嵌入視頻增強App的表現(xiàn)力，讓用戶可以更好的了解App。

另外站酷這類以作品展示為主的產(chǎn)品，更強調(diào)圖片的表現(xiàn)力，便于用戶瀏覽和決策，因此大卡片信息流也是非常好的選擇。

大卡流布局在電商中應(yīng)用案例并不多。

天貓App中應(yīng)用較多，例如天貓“小黑盒”開盒有喜、“新品直降”以及“尖叫來了”等頁面都是采用的大卡流布局模式，1號會員店“發(fā)現(xiàn)”頁面也是大卡流布局。

大卡片商品尺寸更大，單屏內(nèi)信息更加聚焦，更有利于用戶的瀏覽和決策。

淘寶新增的微詳情頁，采用大卡流聚類展示，商品展示更加充分，增加了用戶二次決策機會，相比較首頁直接跳轉(zhuǎn)到商詳頁瀏覽后，返回再查找選擇下一個同類商品，減少了用戶行為成本。

04 寫在最后

總體來看，大卡流框架優(yōu)點和缺點非常鮮明，因為承載內(nèi)容有限，不利于信息分發(fā)，更適合應(yīng)用在內(nèi)容不多，強調(diào)價值感的場景中。

以上就是我對大卡流形式的總結(jié)，歡迎評論交流~

#專欄作家#

子牧先生。公眾號：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗設(shè)計師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗，擅長體驗設(shè)計思維、設(shè)計方法論、交互設(shè)計研究。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 unsplash，基于CC0協(xié)議