當(dāng)前位置: 首頁(yè) > 設(shè)計(jì)資訊 > 理論文摘 > 正文

天貓APP 首頁(yè)迎來(lái)史上最大改版,背后的設(shè)計(jì)過(guò)程是這樣的!

2017-11-23 1546 0

天貓是一個(gè)B2C的電商平臺(tái),跟自營(yíng)電商內(nèi)容產(chǎn)出和控制上有巨大的差異點(diǎn)。

尼爾森中國(guó)區(qū)總經(jīng)理韋邵曾在尼爾森消費(fèi)者研究報(bào)告中說(shuō)到:隨著消費(fèi)者收入遞增,他們?cè)絹?lái)越希望買(mǎi)到另他們感到愉悅的有品質(zhì)的商品。

消費(fèi)升級(jí)是今年各大電商平臺(tái)都在熱議的的話(huà)題,在這個(gè)大背景下,作為電商領(lǐng)頭軍的天貓,一直不斷挖掘與迎合消費(fèi)者的訴求優(yōu)化產(chǎn)品形態(tài),來(lái)更好的契合優(yōu)質(zhì)用戶(hù)對(duì)更好生活追求的意愿。

天貓APP的本次升級(jí)就是符合這個(gè)大背景下的產(chǎn)品體驗(yàn)改造的一個(gè)開(kāi)端。

人群消費(fèi)特征

在改版伊始,我們對(duì)目標(biāo)人群重新進(jìn)行了定義。天貓APP要更多的服務(wù)于品質(zhì)用戶(hù),追求品牌的年輕消費(fèi)群體。

通過(guò)這些用戶(hù)的一系列購(gòu)買(mǎi)數(shù)據(jù)的研究發(fā)現(xiàn),他們更喜歡購(gòu)買(mǎi)B類(lèi)商品,更注重購(gòu)買(mǎi)效率,瀏覽更少的商品就可以進(jìn)行決策購(gòu)買(mǎi)。

因此,商品的展示形態(tài)上就對(duì)設(shè)計(jì)師提出了更高的要求:一方面通過(guò)各種個(gè)性化等手段,讓用戶(hù)更快的定位到自己喜歡的商品;另一方面,通過(guò)形式的設(shè)計(jì),要幫助天貓商家凸顯售賣(mài)商品的商品力,讓目標(biāo)用戶(hù)可以快速get最關(guān)鍵的商品信息來(lái)判斷是否需要購(gòu)買(mǎi)。

天貓品牌

5月23日天貓品牌升級(jí)發(fā)布會(huì)盛大召開(kāi),天貓slogan正式更名:理想生活上天貓。天貓希望從一個(gè)賣(mài)貨平臺(tái)的形象逐漸升級(jí)成為理解方式的倡導(dǎo)者形象。升級(jí)后的天貓和目標(biāo)人群的消費(fèi)形象特征所匹配,整體的品牌形象定位更國(guó)際化,年輕化,品質(zhì)化。

這對(duì)設(shè)計(jì)師要求也就成為:天貓APP的產(chǎn)品設(shè)計(jì)表達(dá)是天貓品牌和消費(fèi)者的一個(gè)核心溝通媒介,我們要讓用戶(hù)在端上的內(nèi)容消費(fèi)、購(gòu)買(mǎi)行為能夠感知天貓帶來(lái)的品牌新主張。

電商平臺(tái)的品質(zhì)障礙

天貓是一個(gè)B2C的電商平臺(tái),跟自營(yíng)電商內(nèi)容產(chǎn)出和控制上有巨大的差異點(diǎn)。即內(nèi)容的產(chǎn)出根源在商家手中,展示給用戶(hù)的商品的信息如商品圖等在之前很長(zhǎng)一段時(shí)間內(nèi)都是由商家提供平臺(tái),平臺(tái)進(jìn)行具體展示。商家的設(shè)計(jì)師水平似乎基本決定了商品展示的最終設(shè)計(jì)質(zhì)量。

天貓平臺(tái)的設(shè)計(jì)師也逐漸意識(shí)到商品內(nèi)容本身的設(shè)計(jì)的重要性(比如商品圖),如果沒(méi)有質(zhì)量強(qiáng)控,對(duì)平臺(tái)的整體設(shè)計(jì)品質(zhì)傷害巨大。我們要提升設(shè)計(jì)品質(zhì),僅僅依賴(lài)產(chǎn)品框架設(shè)計(jì),是不可能實(shí)現(xiàn)的。正視并良好解決商品內(nèi)容質(zhì)量的障礙,是這次改版的一個(gè)巨大挑戰(zhàn)。各品牌質(zhì)量要拉到一致水平,并且也不能喪失各品牌的特征是必須堅(jiān)持的內(nèi)容處理原則。

電商平臺(tái)的品質(zhì)障礙.png

以上部分都是改版的背景和現(xiàn)實(shí)狀況,我們?cè)诒敬呜埧褪醉?yè)上分別制定了對(duì)應(yīng)的設(shè)計(jì)策略。

容器升級(jí)

我們認(rèn)為商品是任何購(gòu)物性平臺(tái)與品牌與消費(fèi)者之間最原始的鏈接。同時(shí)我們也希望能用最簡(jiǎn)單的方式來(lái)降低用戶(hù)認(rèn)知成本,不再是一層一層的進(jìn)入入口,而是能直接觸達(dá)商品,通過(guò)凸顯商品本身優(yōu)勢(shì)屬性,來(lái)達(dá)到效率購(gòu)物的目的。

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

容器升級(jí).png

框架扁平化  

新天貓APP從一級(jí)導(dǎo)航開(kāi)始,每一個(gè)tab都聚焦一件事,用戶(hù)認(rèn)知更清晰。

框架扁平化.png

為了加強(qiáng)商品表現(xiàn)力,在容器的信息表達(dá)上相較于老版也更加扁平,從復(fù)雜錯(cuò)落的入口變?yōu)榱丝游坏慕M合,結(jié)構(gòu)極為簡(jiǎn)單。利用大數(shù)據(jù)推薦精選商品,讓用戶(hù)與商品直接觸達(dá)。

框架扁平化1.png

商品坑升級(jí)

在簡(jiǎn)單易懂的頁(yè)面框架下,我們重新思考了商品展現(xiàn)以及組合方式。

我們?cè)谏唐啡萜魃蠘?gòu)建明確的分區(qū),制定出穩(wěn)定的結(jié)構(gòu),便于理解和記憶,達(dá)到能不斷的透?jìng)魃唐穬r(jià)值的目的。同時(shí)也對(duì)商品容器做橫向擴(kuò)展,去滿(mǎn)足不同業(yè)務(wù)及場(chǎng)景的需求。

商品坑升級(jí).png

商品坑升級(jí)1.png

Tmall BRAND強(qiáng)化

大家一起來(lái)猜猜哪個(gè)是天貓?

(↓從左到右依次為:大眾點(diǎn)評(píng)、淘寶、天貓、京東)

Tmall BRAND強(qiáng)化.png

在電商APP界面越來(lái)越趨同,以及天貓品牌升級(jí)的大背景下。

此次貓客首頁(yè)改版以“Tmall”為載體一直貫穿,從用戶(hù)打開(kāi)APP開(kāi)始不斷強(qiáng)調(diào)Tmall,同時(shí)把Tmall提升到首頁(yè)的核心區(qū)域并賦予更多情感化及商業(yè)化的功能,讓用戶(hù)從第一感官以及認(rèn)知上知道這是天貓。

Tmall BRAND強(qiáng)化1.png

打開(kāi)天貓APP,從閃屏到首頁(yè)

打開(kāi)天貓APP,從閃屏到首頁(yè).gif

Doodle的運(yùn)用

Doodle的運(yùn)用.png

能支持熱點(diǎn)事件營(yíng)銷(xiāo),并結(jié)合搜索關(guān)鍵詞產(chǎn)生商業(yè)價(jià)值,成為品牌活動(dòng)的一個(gè)新流量陣地:

熱點(diǎn)事件營(yíng)銷(xiāo).png

支持多種格式文件:

支持多種格式文件.gif

內(nèi)容化設(shè)計(jì)

為了保證整個(gè)天貓平臺(tái)最終呈現(xiàn)給用戶(hù)的品質(zhì),不能僅依賴(lài)于產(chǎn)品設(shè)計(jì),更應(yīng)該對(duì)內(nèi)容做優(yōu)化設(shè)計(jì)。

以針對(duì)商品圖優(yōu)化為例,我們做了兩件事情:商品圖排版建議與商品打底圖強(qiáng)控&白名單。

內(nèi)容化設(shè)計(jì).png

商品圖排版建議

商品圖排版建議.png

商品打底圖強(qiáng)控&白名單

為了避免首頁(yè)出現(xiàn)下圖左側(cè)情況出現(xiàn),我們制定了平臺(tái)商品圖規(guī)范輸入給商家,強(qiáng)控產(chǎn)出:首頁(yè)所有的商品都保證有一張白底圖作為打底素材。同時(shí)為了保證優(yōu)質(zhì)商家品牌調(diào)性及平臺(tái)豐富度,我們特地組織成了設(shè)計(jì)師審核小分隊(duì),大家一起來(lái)人工篩選出那些商品圖有自己調(diào)性,品質(zhì)高的商家,為他們開(kāi)通綠色通道,允許不使用白底圖,使用帶有品牌特色的商品主圖。

這樣就不僅保障了平臺(tái)商品內(nèi)容的整體品質(zhì),也讓品質(zhì)商家保留了自己的品牌調(diào)性。

商品打底圖強(qiáng)控&白名單.png

實(shí)施商品打底圖強(qiáng)控&白名單后首頁(yè)圖片質(zhì)量提升效果:

實(shí)施商品打底圖強(qiáng)控&白名單后首頁(yè)圖片質(zhì)量提升效果.png

細(xì)節(jié)打磨

在設(shè)計(jì)過(guò)程中,我們也挖掘了很多體驗(yàn)上的小創(chuàng)新,希望能帶給用戶(hù)更有品質(zhì)的小驚喜的體驗(yàn)感受。下面舉兩個(gè)例子分享。

首焦banner視差

在新banner模板基礎(chǔ)上衍生出分層產(chǎn)出即可實(shí)現(xiàn)視差及重力感應(yīng)效果,讓整個(gè)產(chǎn)品更生動(dòng)富有細(xì)節(jié)。

首焦banner視差.gif

新人引導(dǎo)

由于此次改版最大亮點(diǎn)在于商品力的表現(xiàn)上,所以在新人引導(dǎo)這塊我們用了輕互動(dòng)的形式,讓用戶(hù)可以通過(guò)小游戲的方式,通過(guò)滑動(dòng)信息模塊來(lái)感受商品坑每個(gè)區(qū)塊的含義。

新人引導(dǎo).gif

首頁(yè)整個(gè)從設(shè)計(jì)到開(kāi)發(fā)上線的過(guò)程背負(fù)著很大的壓力。就像標(biāo)題中講的,這次改版可能是天貓app史上的最大的改版,是面向消費(fèi)升級(jí)的第一次大嘗試。在過(guò)程中,項(xiàng)目組的每個(gè)成員都抱了最壞的打算,即使出現(xiàn)極大的反彈,我們也要堅(jiān)定的往這個(gè)方向走。

上線之后,我們也在各個(gè)輿情平臺(tái)上聽(tīng)到了很多用戶(hù)聲音。有很多鼓勵(lì)的說(shuō)天貓跟其他電商終于不一樣了,也有批評(píng)的說(shuō)那么多入口有些找不到了。我們一邊聆聽(tīng)用戶(hù),一邊在加速進(jìn)行迭代優(yōu)化。

大家一定能看到越來(lái)越好的天貓APP!

希望大家讀完本文,能夠了解到我們的設(shè)計(jì)過(guò)程。也能通過(guò)這些設(shè)計(jì)探索理解天貓App的愿景:做最好的品質(zhì)購(gòu)物App。



14
評(píng)論區(qū)(0)
正在加載評(píng)論...