如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

2020-8-21    資深UI設(shè)計者

項目背景

站內(nèi)攻略作為每年大促玩法的預(yù)告者,承擔(dān)了向用戶輸出平臺節(jié)奏、吸引用戶預(yù)約回流的重要任務(wù)。 不同于著眼于轉(zhuǎn)化的賣貨會場,或是著眼于分享的互動H5,如何能讓用戶更好地了解京東的大促平臺玩法,便捷用戶的購物旅程,就成為了它的主要任務(wù)。

設(shè)計思路&設(shè)計執(zhí)行

1. 產(chǎn)品化思路與定位

在開始設(shè)計之前,我們對比了2017年至今的所有攻略頁面,發(fā)現(xiàn)往年頁面存在缺乏延續(xù)性、定位不清晰的問題。作為大促信息傳達(dá)的先行軍,往期的攻略反而更多承擔(dān)了轉(zhuǎn)化型的會場類任務(wù),對于優(yōu)惠信息的預(yù)告往往是輕描淡寫地用文案帶過。而每一次的攻略樣式都是「船新版本」,也產(chǎn)生了較大的人力消耗。

然而盡管攻略的任務(wù)是信息傳遞,但作為整體大促鏈路中的一環(huán),它終究還是需要為大盤GMV服務(wù)。那么應(yīng)該如何平衡二者,以達(dá)成更好的數(shù)據(jù)效果呢?

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

首先,從攻略存在的核心意義——助力集團大盤GMV的提升出發(fā),它需要達(dá)成以下幾個目標(biāo):

  • 讓用戶愿意逛:讓用戶明白京東大促的節(jié)奏和玩法、并且在了解后有意愿參與;
  • 讓用戶愿意買:提供能提升用戶購物欲望的決策信息;
  • 讓用戶養(yǎng)成習(xí)慣:當(dāng)攻略持續(xù)為用戶產(chǎn)生了用戶價值后,就可以養(yǎng)成用戶「來京東購物前先看攻略」的心智,從而更好地引導(dǎo)用戶進行操作。

然而縱觀大促會場全局,許多賣貨會場也可以達(dá)成這些目標(biāo),那么站內(nèi)攻略和它們相比有具有哪些差異性呢?我們可以從對內(nèi)和對外兩個角度進行分析:

對內(nèi)差異化:從站內(nèi)來看,「我的」和「AI助手」也都承擔(dān)了向用戶進行活動會場推薦的功能,但「我的」是圍繞用戶已有的操作展開管理和推薦,是絕對精準(zhǔn)的量身打造,「AI助手」是理性層級下的導(dǎo)購,需要用戶先產(chǎn)生「想法」,再指導(dǎo)操作;站內(nèi)攻略則是引導(dǎo)用戶未來行為的指導(dǎo)和說明,先組織、篩選促銷信息,再使用戶產(chǎn)生「想法」,從而產(chǎn)生操作,有一定「逛」的性質(zhì)。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

對外差異化:從站外來看,站內(nèi)攻略的定位與「什么值得買」有些近似。相比之下,站內(nèi)攻略的優(yōu)勢則在于它能更緊密地圍繞京東用戶的消費習(xí)慣進行定制化推薦,和近年來以長圖為主的阿里系攻略相比,則提供了更為豐富的操作(如預(yù)約),一定程度上能減少用戶的記憶成本。

基于以上基礎(chǔ),我們對往年攻略的用戶畫像進行分析,并對攻略進行了橫向與縱向的對比,總結(jié)出了攻略作為一個長線產(chǎn)品視角下的迭代思路,并根據(jù)攻略的特性制定了分時期的北極星指標(biāo):提升預(yù)熱、專場期的預(yù)約加購率、提升全時期的活動分流以及提升高潮期的商品轉(zhuǎn)化。那么我們又是如何根據(jù)這三個指標(biāo)來拆解細(xì)分策略的呢?

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

2. 提升預(yù)約加購——日歷優(yōu)化

交互層面:動效輔助內(nèi)容聚焦

作為站內(nèi)優(yōu)惠信息的聚集地,如何清晰簡潔傳達(dá)內(nèi)容,一直是交互側(cè)需要重點思考解決的難題。于是在本次攻略中,我們對比了往期攻略中的預(yù)告樣式,在數(shù)據(jù)表現(xiàn)較好的日歷樣式基礎(chǔ)上,對頁面的層級進行了進一步的簡化,配合動效的引導(dǎo)操作,以便用戶能夠更聚焦地瀏覽日歷部分的核心內(nèi)容:

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

視覺層面:視覺層級清晰

經(jīng)過對交互稿的分析理解,以下3個痛點,對此次頁面的信息層級和畫面舒適度是一個考驗:

  • 內(nèi)容信息較多:為了提升預(yù)約吸引力,這次在單日預(yù)告內(nèi)露出了更多的BI單品,同時增加了預(yù)約瓜分京豆的玩法,所以這次首屏的內(nèi)容信息和雙11相較而言,是有所增的。
  • 日歷展示狀態(tài)增加:日歷嘗試了新的交互樣式,有展開和收起兩種狀態(tài)。
  • 卡片顏色多:為了讓用戶感知到每日主題的差異,日歷卡片的顏色會根據(jù)每日主會場的主題顏色相呼應(yīng)。

那么如何通過視覺的手段,讓視覺層級清晰展示且畫面顏色和諧呢?下面從最基礎(chǔ)的視覺構(gòu)成里的構(gòu)圖和色彩兩方面進行分析并落地:

「構(gòu) 圖」整體用方形進行構(gòu)圖和內(nèi)容分割

方形是最簡潔的幾何形態(tài),對于信息量較大的頁面,方形會讓設(shè)計空間利用最大化,并且可以排除形態(tài)上的干擾,結(jié)構(gòu)清晰的展示信息內(nèi)容,讓用戶通順的瀏覽頁面。

簡化視覺層級

在交互稿上,瓜分京豆模塊和日歷選擇器兩部分內(nèi)容劃分較為明顯,但所留出的空間,會增加視覺層級的復(fù)雜度。為了盡量簡化視覺層級,找交互同學(xué)商量是否可以在保持內(nèi)容劃分清晰的情況下,把瓜分京豆模塊背景和日歷選擇器拉通,同時,也咨詢了前端同學(xué),視覺這樣處理在實現(xiàn)上是否會有問題。最終,三方達(dá)成一致后,采用了視覺最終呈現(xiàn)的方案。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

「顏 色」

為了更好的覆蓋618全時期,挑選了色環(huán)上三種距離基本相等的色彩進行從暖色到冷色的色相漸變。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

  • 頭圖運用了較為清透的黃色至紅色的暖色漸變,適用于618全時期,體現(xiàn)了大促的熱鬧氛圍;
  • 頭圖過渡到日歷選擇器,則是運用了從頭圖的紅色漸變至紫藍(lán)色,這樣既能讓選擇器的文字信息清晰識別,也能將頭圖和日歷選擇器兩部分內(nèi)容進行自然的分割,減少了線面分割所帶來的復(fù)雜層級關(guān)系;
  • 瓜分京豆模塊的顏色則選用了偏中性的黃色,這樣一來和每日不同顏色的卡片搭配和諧,二來和頭圖有所呼應(yīng),整體畫面色彩保持平衡。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

前端層面:復(fù)雜交互動畫與跨平臺功能適配

關(guān)于選中移動動畫

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

日歷選中動畫部分我們需要實現(xiàn)的一種跟隨移動的效果,那么我們需要考慮的是在當(dāng)前日期是有可能去到任何一個可點擊日期的位置。

實現(xiàn)方式:

用純css方式控制,方塊使用背景圖的方式實現(xiàn),通過控制類名移動位置,比如.move-[start]-[end],缺點:需要寫好每個日期對應(yīng)到其它日期的位置,不夠靈活

用js控制。把日期看成一個棋盤格子,每個格子都占相同的坑位大小。我們把當(dāng)前日期看作a,移動至日期看作b。假設(shè)把a移動至b的橫向占格子數(shù)設(shè)為n,把a移動至b的縱向占格子數(shù)設(shè)為m。那么n=當(dāng)前下標(biāo) % 行個數(shù),m=當(dāng)前下標(biāo) / 行個數(shù)取整。那么a移動到b的x = w * n,y = h * m (w為格子寬度,h為格子高度)。

注:寬度獲取使用block.getBoundingClientRect().width;clientWidth會忽略小數(shù)位

  • 關(guān)于展開收起動畫,半圓實現(xiàn):
  • 可以使用clip-path
  • 我的實現(xiàn)方法為使用border-radius+height實現(xiàn),半圓的弧度使用兩倍大圓取其部分圓弧顯示,展開收起實現(xiàn)使用高度修改:在低端機會略卡,因為每次使用會引起頁面重繪(有待探討優(yōu)化)
  • 使用svg,canvas等
  • 關(guān)于app預(yù)約,小程序預(yù)約
  • app預(yù)約采用的是京東app日歷預(yù)約,用戶開啟手機日歷(寫入)權(quán)限后,預(yù)約就會寫入用戶的手機日歷,在活動開始前會以日歷提醒的方式提醒用戶。
  • 小程序預(yù)約走的是微信大賬號提醒流程,預(yù)約需要分三步進行:預(yù)約-> 授權(quán) -> 上報授權(quán)狀態(tài)。進行完上述步驟后,用戶會在活動開始前10分鐘左右通過大賬號(已關(guān)注用戶)或服務(wù)通知(未關(guān)注用戶)收到消息

2. 提升活動分流——福利秘籍

提升篩選效率

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

福利秘籍專區(qū)作為大促期間福利互動活動的集中地,承擔(dān)了為互動分流,為用戶提供快速查找篩選可參與活動的任務(wù)。而互動往往存在較為復(fù)雜的規(guī)則,對用戶而言存在較高的理解成本。此次除了集團主推的互動,又增加了對于事業(yè)部互動的展示,對于保證頁面展示效率也帶來了一定的挑戰(zhàn)。通過對往期迭代內(nèi)容進行數(shù)據(jù)對比,同時參考其余會場對于多信息展示的策略,最終我們采用了BI展示,同時對用戶弱相關(guān)的互動卡片進行折疊的方式提升頁面的效率;而在卡片的信息展示上,選擇重點突出活動可得的利益點,讓用戶一眼即可篩選出對自己最有價值的互動進行參與。

視覺創(chuàng)新優(yōu)化

雖然運營同學(xué)對雙11的秘籍視覺比較認(rèn)可,但是仍然提出了希望有秘籍形式感的同時,能進行視覺創(chuàng)新的訴求。經(jīng)思考后,我認(rèn)為運營的訴求無法滿足:

  • 視覺風(fēng)格和618大促整體風(fēng)格保持統(tǒng)一;
  • 能體現(xiàn)秘籍感的視覺表現(xiàn)手法有限;
  • 視覺創(chuàng)新的前提是要保證信息清晰的展示給用戶;

于是帶著以上3點找運營同學(xué)再次溝通清楚對方的真正訴求到底是什么,經(jīng)溝通,對方最重要的訴求是希望有視覺創(chuàng)新,秘籍形式感訴求較弱。接下來針對重要訴求集中發(fā)力,并結(jié)合此次618視覺概念(光點、光線),找到了視覺創(chuàng)新優(yōu)化的解決方案,并和運營達(dá)成了一致。

「構(gòu)圖」

上面提到了方形可以排除形態(tài)上的干擾,考慮到活動入口圖數(shù)量較多,且氛圍圖不可把控,左側(cè)以方形構(gòu)成,右側(cè)結(jié)合了618主圖形——光線,把文字和氛圍圖分開,讓各部分信息更加聚焦。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

「顏色」

結(jié)合雙11用研結(jié)論——活動入口主題不夠鮮明,除了活動文案類似的因素,我認(rèn)為顏色也是影響因素之一。所以這次在上部分平臺級活動入口,采用了2種暖色的近似色交替構(gòu)成,下部分事業(yè)部活動入口,統(tǒng)一采用了1種和上部分近似色的冷色構(gòu)成;單個活動入口,文字和氛圍圖的背景進行統(tǒng)一色相的明暗深淺變化。從整體樓層來看,從上至下,由暖至冷,不僅活動主題有了明顯差異化,而且較好的過渡到下一樓層;從單個活動入口來看,左右深淺顏色的劃分,不僅對不可把控的氛圍圖適應(yīng)性更強,且主題文案更加明顯。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

「表現(xiàn)形式」

整體頁面在按鈕的部分采用新擬態(tài)風(fēng)格,在保證吸引力的同時,也減少了顏色過多的問題,減少了信息層級。新擬態(tài)風(fēng)格更適合工具功能類產(chǎn)品,本次只嘗試使用在了頁面的按鈕部分,風(fēng)格上也會有眼前一亮的感覺。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

3. 提升商品轉(zhuǎn)化——今日導(dǎo)購

分時期變化的樓層策略

針對高潮期的轉(zhuǎn)化指標(biāo),我們參考了往期的迭代經(jīng)驗,發(fā)現(xiàn)隨著大促節(jié)奏的漸進,臨近高潮期時,頁面的轉(zhuǎn)化模塊表現(xiàn)往往有較大的提升。于是在本次設(shè)計中,我們針對這個數(shù)據(jù)表現(xiàn),對樓層順序進行了動態(tài)調(diào)整,高潮期將轉(zhuǎn)化樓層前置,以更好地匹配不同時期的用戶需求。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

同時根據(jù)往期的樓層數(shù)據(jù)表現(xiàn),本次我們也延續(xù)保留了數(shù)據(jù)表現(xiàn)較好的模塊類型,例如增加了榜單的露出,以輔助頁面目標(biāo)的達(dá)成(以下數(shù)據(jù)來自于lan.jd.com)。

樓層整體化、內(nèi)容吸引力包裝

基于之前今日樓層視覺整體感較弱的問題,這次樓層背景色和頁面背景色有所區(qū)分,樓層內(nèi)模塊顏色和樓層背景色同色,較往期此樓層來看更加整體化,又能讓頁面層級更加清晰。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

其中,針對這次品牌入口和上海美影廠IP形象結(jié)合的策略,為了提升用戶吸引力,且不干擾信息內(nèi)容的前提下,視覺上采用了和用戶共情,且和IP形象契合的元素——老電視機,同時按鈕文案也進行場景契合的包裝,增加趣味性。

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

項目成果

與往期站內(nèi)攻略對比,本次618站內(nèi)攻略主要在以下方面有較為明顯的提升:

品牌視覺契合及創(chuàng)新

在延續(xù)主視覺元素的同時,視覺風(fēng)格有所創(chuàng)新,在頁面的按鈕部分采用新擬態(tài)風(fēng)格,減少顏色過多而導(dǎo)致的復(fù)雜信息層級問題,同時也保證了視覺吸引力

視覺精致程度

整體頁面顏色較有節(jié)奏,且更加清透舒適

元素細(xì)節(jié)(打光、投影等)的刻畫更加精致

信息層級清晰度

通過對顏色的合理規(guī)劃,有主次的文字信息,讓單個樓層更整體化,各樓層模塊劃分清晰

如何讓用戶愿意逛愿意買?來看618站內(nèi)攻略項目總結(jié)

數(shù)據(jù)表現(xiàn)

根據(jù)上線后的表現(xiàn),本次福利互動模塊的點擊數(shù)據(jù)獲得了顯著的提升,今日模塊的點擊轉(zhuǎn)化率相比往年也獲得了成倍的增長,頁面目標(biāo)基本達(dá)成。

項目沉淀

1. 好的經(jīng)驗

針對攻略這類規(guī)律性存在的活動會場,我們可以針對其主要的功能組成模塊進行數(shù)據(jù)導(dǎo)向的設(shè)計與迭代,來更好地指導(dǎo)后續(xù)的優(yōu)化方向;同時也可以輔助業(yè)務(wù)側(cè)更加清晰地規(guī)劃會場定位,提升頁面對用戶以及大促的整體價值。

2. 如何溝通

Q:需求方一味的追求熱鬧復(fù)雜的視覺樣式創(chuàng)新,該怎么辦?

A:熱鬧的氛圍對于大促活動來說固然非常重要,但也要根據(jù)頁面類型去判斷(重氛圍or重信息)。設(shè)計師要傾聽訴求并搞清訴求的根本原因,并用專業(yè)的角度判斷訴求的合理性,以及價值大與否。熱鬧氛圍塑造的前提是不能影響信息的識別,否則就會本末倒置,并且熱鬧氛圍的視覺樣式要和該場景邏輯匹配 。

3. 待優(yōu)化項

雖然本次頁面大部分模塊基于產(chǎn)品化的思路迭代均獲得了一定的正向反饋,但產(chǎn)品的發(fā)展往往是個曲折上升的過程,活動會場也不例外。結(jié)合上線后反饋,站內(nèi)攻略依然有以下可優(yōu)化點:

日歷操作體驗

根據(jù)用研結(jié)果顯示,日歷操作體驗問題反饋較多,日歷模塊為滑動改變?nèi)掌冢屈c擊跳轉(zhuǎn)日期的操作方式,與用戶的認(rèn)知不符,且首屏動效較復(fù)雜,在安卓機型上體驗較為卡頓。后續(xù)如有同樣的交互方式,需優(yōu)化操作體驗。

福利互動入口主題文案

根據(jù)用研反饋,主題文案描述不直觀,不易理解,導(dǎo)致用戶容易滑過整個模塊。建議后續(xù)活動主題能簡單清晰的描述優(yōu)惠和玩法。

綜上,未來站內(nèi)攻略需要進一步探索主要功能模塊對用戶的價值,探索其在大促鏈路中獨特的差異性;同時保留高用戶價值模塊并持續(xù)優(yōu)化,以求達(dá)到更好的用戶體驗,用設(shè)計策略為用戶與業(yè)務(wù)帶來更多的價值。

文章來源:優(yōu)設(shè)    作者:JellyDesign

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


分享本文至:

日歷

鏈接

個人資料

存檔