天貓是一個B2C的電商平臺，跟自營電商內容產出和控制上有巨大的差異點。

尼爾森中國區總經理韋邵曾在尼爾森消費者研究報告中說到：隨著消費者收入遞增，他們越來越希望買到另他們感到愉悅的有品質的商品。

消費升級是今年各大電商平臺都在熱議的的話題，在這個大背景下，作為電商領頭軍的天貓，一直不斷挖掘與迎合消費者的訴求優化產品形態，來更好的契合優質用戶對更好生活追求的意愿。

天貓APP的本次升級就是符合這個大背景下的產品體驗改造的一個開端。

人群消費特征

在改版伊始，我們對目標人群重新進行了定義。天貓APP要更多的服務于品質用戶，追求品牌的年輕消費群體。

通過這些用戶的一系列購買數據的研究發現，他們更喜歡購買B類商品，更注重購買效率，瀏覽更少的商品就可以進行決策購買。

因此，商品的展示形態上就對設計師提出了更高的要求：一方面通過各種個性化等手段，讓用戶更快的定位到自己喜歡的商品；另一方面，通過形式的設計，要幫助天貓商家凸顯售賣商品的商品力，讓目標用戶可以快速get最關鍵的商品信息來判斷是否需要購買。

天貓品牌

5月23日天貓品牌升級發布會盛大召開，天貓slogan正式更名：理想生活上天貓。天貓希望從一個賣貨平臺的形象逐漸升級成為理解方式的倡導者形象。升級后的天貓和目標人群的消費形象特征所匹配，整體的品牌形象定位更國際化，年輕化，品質化。

這對設計師要求也就成為：天貓APP的產品設計表達是天貓品牌和消費者的一個核心溝通媒介，我們要讓用戶在端上的內容消費、購買行為能夠感知天貓帶來的品牌新主張。

電商平臺的品質障礙

天貓是一個B2C的電商平臺，跟自營電商內容產出和控制上有巨大的差異點。即內容的產出根源在商家手中，展示給用戶的商品的信息如商品圖等在之前很長一段時間內都是由商家提供平臺，平臺進行具體展示。商家的設計師水平似乎基本決定了商品展示的最終設計質量。

天貓平臺的設計師也逐漸意識到商品內容本身的設計的重要性（比如商品圖），如果沒有質量強控，對平臺的整體設計品質傷害巨大。我們要提升設計品質，僅僅依賴產品框架設計，是不可能實現的。正視并良好解決商品內容質量的障礙，是這次改版的一個巨大挑戰。各品牌質量要拉到一致水平，并且也不能喪失各品牌的特征是必須堅持的內容處理原則。

以上部分都是改版的背景和現實狀況，我們在本次貓客首頁上分別制定了對應的設計策略。

容器升級

我們認為商品是任何購物性平臺與品牌與消費者之間最原始的鏈接。同時我們也希望能用最簡單的方式來降低用戶認知成本，不再是一層一層的進入入口，而是能直接觸達商品，通過凸顯商品本身優勢屬性，來達到效率購物的目的。

所以在容器升級上主要做了兩件事情：框架扁平化與商品坑位升級。

框架扁平化  

新天貓APP從一級導航開始，每一個tab都聚焦一件事，用戶認知更清晰。

為了加強商品表現力，在容器的信息表達上相較于老版也更加扁平，從復雜錯落的入口變為了坑位的組合，結構極為簡單。利用大數據推薦精選商品，讓用戶與商品直接觸達。

商品坑升級

在簡單易懂的頁面框架下，我們重新思考了商品展現以及組合方式。

我們在商品容器上構建明確的分區，制定出穩定的結構，便于理解和記憶，達到能不斷的透傳商品價值的目的。同時也對商品容器做橫向擴展，去滿足不同業務及場景的需求。

Tmall BRAND強化

大家一起來猜猜哪個是天貓？

（↓從左到右依次為：大眾點評、淘寶、天貓、京東）

在電商APP界面越來越趨同，以及天貓品牌升級的大背景下。

此次貓客首頁改版以“Tmall”為載體一直貫穿，從用戶打開APP開始不斷強調Tmall，同時把Tmall提升到首頁的核心區域并賦予更多情感化及商業化的功能，讓用戶從第一感官以及認知上知道這是天貓。

打開天貓APP，從閃屏到首頁

Doodle的運用

能支持熱點事件營銷，并結合搜索關鍵詞產生商業價值，成為品牌活動的一個新流量陣地：

支持多種格式文件：

內容化設計

為了保證整個天貓平臺最終呈現給用戶的品質，不能僅依賴于產品設計，更應該對內容做優化設計。

以針對商品圖優化為例，我們做了兩件事情：商品圖排版建議與商品打底圖強控&白名單。

商品圖排版建議

商品打底圖強控&白名單

為了避免首頁出現下圖左側情況出現，我們制定了平臺商品圖規范輸入給商家，強控產出：首頁所有的商品都保證有一張白底圖作為打底素材。同時為了保證優質商家品牌調性及平臺豐富度，我們特地組織成了設計師審核小分隊，大家一起來人工篩選出那些商品圖有自己調性，品質高的商家，為他們開通綠色通道，允許不使用白底圖，使用帶有品牌特色的商品主圖。

這樣就不僅保障了平臺商品內容的整體品質，也讓品質商家保留了自己的品牌調性。

實施商品打底圖強控&白名單后首頁圖片質量提升效果：

細節打磨

在設計過程中，我們也挖掘了很多體驗上的小創新，希望能帶給用戶更有品質的小驚喜的體驗感受。下面舉兩個例子分享。

首焦banner視差

在新banner模板基礎上衍生出分層產出即可實現視差及重力感應效果，讓整個產品更生動富有細節。

新人引導

由于此次改版最大亮點在于商品力的表現上，所以在新人引導這塊我們用了輕互動的形式，讓用戶可以通過小游戲的方式，通過滑動信息模塊來感受商品坑每個區塊的含義。

首頁整個從設計到開發上線的過程背負著很大的壓力。就像標題中講的，這次改版可能是天貓app史上的最大的改版，是面向消費升級的第一次大嘗試。在過程中，項目組的每個成員都抱了最壞的打算，即使出現極大的反彈，我們也要堅定的往這個方向走。

上線之后，我們也在各個輿情平臺上聽到了很多用戶聲音。有很多鼓勵的說天貓跟其他電商終于不一樣了，也有批評的說那么多入口有些找不到了。我們一邊聆聽用戶，一邊在加速進行迭代優化。

大家一定能看到越來越好的天貓APP！

希望大家讀完本文，能夠了解到我們的設計過程。也能通過這些設計探索理解天貓App的愿景：做最好的品質購物App。