2020-8-21 資深UI設(shè)計(jì)者
站內(nèi)攻略作為每年大促玩法的預(yù)告者，承擔(dān)了向用戶輸出平臺(tái)節(jié)奏、吸引用戶預(yù)約回流的重要任務(wù)。 不同于著眼于轉(zhuǎn)化的賣貨會(huì)場，或是著眼于分享的互動(dòng)H5，如何能讓用戶更好地了解京東的大促平臺(tái)玩法，便捷用戶的購物旅程，就成為了它的主要任務(wù)。
在開始設(shè)計(jì)之前，我們對(duì)比了2017年至今的所有攻略頁面，發(fā)現(xiàn)往年頁面存在缺乏延續(xù)性、定位不清晰的問題。作為大促信息傳達(dá)的先行軍，往期的攻略反而更多承擔(dān)了轉(zhuǎn)化型的會(huì)場類任務(wù)，對(duì)于優(yōu)惠信息的預(yù)告往往是輕描淡寫地用文案帶過。而每一次的攻略樣式都是「船新版本」，也產(chǎn)生了較大的人力消耗。
然而盡管攻略的任務(wù)是信息傳遞，但作為整體大促鏈路中的一環(huán)，它終究還是需要為大盤GMV服務(wù)。那么應(yīng)該如何平衡二者，以達(dá)成更好的數(shù)據(jù)效果呢？
首先，從攻略存在的核心意義——助力集團(tuán)大盤GMV的提升出發(fā)，它需要達(dá)成以下幾個(gè)目標(biāo)：
然而縱觀大促會(huì)場全局，許多賣貨會(huì)場也可以達(dá)成這些目標(biāo)，那么站內(nèi)攻略和它們相比有具有哪些差異性呢？我們可以從對(duì)內(nèi)和對(duì)外兩個(gè)角度進(jìn)行分析：
對(duì)內(nèi)差異化：從站內(nèi)來看，「我的」和「AI助手」也都承擔(dān)了向用戶進(jìn)行活動(dòng)會(huì)場推薦的功能，但「我的」是圍繞用戶已有的操作展開管理和推薦，是絕對(duì)精準(zhǔn)的量身打造，「AI助手」是理性層級(jí)下的導(dǎo)購，需要用戶先產(chǎn)生「想法」，再指導(dǎo)操作；站內(nèi)攻略則是引導(dǎo)用戶未來行為的指導(dǎo)和說明，先組織、篩選促銷信息，再使用戶產(chǎn)生「想法」，從而產(chǎn)生操作，有一定「逛」的性質(zhì)。
對(duì)外差異化：從站外來看，站內(nèi)攻略的定位與「什么值得買」有些近似。相比之下，站內(nèi)攻略的優(yōu)勢(shì)則在于它能更緊密地圍繞京東用戶的消費(fèi)習(xí)慣進(jìn)行定制化推薦，和近年來以長圖為主的阿里系攻略相比，則提供了更為豐富的操作（如預(yù)約），一定程度上能減少用戶的記憶成本。
基于以上基礎(chǔ)，我們對(duì)往年攻略的用戶畫像進(jìn)行分析，并對(duì)攻略進(jìn)行了橫向與縱向的對(duì)比，總結(jié)出了攻略作為一個(gè)長線產(chǎn)品視角下的迭代思路，并根據(jù)攻略的特性制定了分時(shí)期的北極星指標(biāo)：提升預(yù)熱、專場期的預(yù)約加購率、提升全時(shí)期的活動(dòng)分流以及提升高潮期的商品轉(zhuǎn)化。那么我們又是如何根據(jù)這三個(gè)指標(biāo)來拆解細(xì)分策略的呢？
交互層面：動(dòng)效輔助內(nèi)容聚焦
作為站內(nèi)優(yōu)惠信息的聚集地，如何清晰簡潔傳達(dá)內(nèi)容，一直是交互側(cè)需要重點(diǎn)思考解決的難題。于是在本次攻略中，我們對(duì)比了往期攻略中的預(yù)告樣式，在數(shù)據(jù)表現(xiàn)較好的日歷樣式基礎(chǔ)上，對(duì)頁面的層級(jí)進(jìn)行了進(jìn)一步的簡化，配合動(dòng)效的引導(dǎo)操作，以便用戶能夠更聚焦地瀏覽日歷部分的核心內(nèi)容：
視覺層面：視覺層級(jí)清晰
經(jīng)過對(duì)交互稿的分析理解，以下3個(gè)痛點(diǎn)，對(duì)此次頁面的信息層級(jí)和畫面舒適度是一個(gè)考驗(yàn)：
那么如何通過視覺的手段，讓視覺層級(jí)清晰展示且畫面顏色和諧呢？下面從最基礎(chǔ)的視覺構(gòu)成里的構(gòu)圖和色彩兩方面進(jìn)行分析并落地：
「構(gòu) 圖」整體用方形進(jìn)行構(gòu)圖和內(nèi)容分割
方形是最簡潔的幾何形態(tài)，對(duì)于信息量較大的頁面，方形會(huì)讓設(shè)計(jì)空間利用最大化，并且可以排除形態(tài)上的干擾，結(jié)構(gòu)清晰的展示信息內(nèi)容，讓用戶通順的瀏覽頁面。
簡化視覺層級(jí)
在交互稿上，瓜分京豆模塊和日歷選擇器兩部分內(nèi)容劃分較為明顯，但所留出的空間，會(huì)增加視覺層級(jí)的復(fù)雜度。為了盡量簡化視覺層級(jí)，找交互同學(xué)商量是否可以在保持內(nèi)容劃分清晰的情況下，把瓜分京豆模塊背景和日歷選擇器拉通，同時(shí)，也咨詢了前端同學(xué)，視覺這樣處理在實(shí)現(xiàn)上是否會(huì)有問題。最終，三方達(dá)成一致后，采用了視覺最終呈現(xiàn)的方案。
「顏 色」
為了更好的覆蓋618全時(shí)期，挑選了色環(huán)上三種距離基本相等的色彩進(jìn)行從暖色到冷色的色相漸變。
前端層面：復(fù)雜交互動(dòng)畫與跨平臺(tái)功能適配
關(guān)于選中移動(dòng)動(dòng)畫
日歷選中動(dòng)畫部分我們需要實(shí)現(xiàn)的一種跟隨移動(dòng)的效果，那么我們需要考慮的是在當(dāng)前日期是有可能去到任何一個(gè)可點(diǎn)擊日期的位置。
實(shí)現(xiàn)方式：
用純css方式控制，方塊使用背景圖的方式實(shí)現(xiàn)，通過控制類名移動(dòng)位置，比如.move-[start]-[end]，缺點(diǎn)：需要寫好每個(gè)日期對(duì)應(yīng)到其它日期的位置，不夠靈活
用js控制。把日期看成一個(gè)棋盤格子，每個(gè)格子都占相同的坑位大小。我們把當(dāng)前日期看作a，移動(dòng)至日期看作b。假設(shè)把a(bǔ)移動(dòng)至b的橫向占格子數(shù)設(shè)為n，把a(bǔ)移動(dòng)至b的縱向占格子數(shù)設(shè)為m。那么n=當(dāng)前下標(biāo) % 行個(gè)數(shù)，m=當(dāng)前下標(biāo) / 行個(gè)數(shù)取整。那么a移動(dòng)到b的x = w * n，y = h * m (w為格子寬度，h為格子高度)。
注：寬度獲取使用block.getBoundingClientRect().width；clientWidth會(huì)忽略小數(shù)位
提升篩選效率
福利秘籍專區(qū)作為大促期間福利互動(dòng)活動(dòng)的集中地，承擔(dān)了為互動(dòng)分流，為用戶提供快速查找篩選可參與活動(dòng)的任務(wù)。而互動(dòng)往往存在較為復(fù)雜的規(guī)則，對(duì)用戶而言存在較高的理解成本。此次除了集團(tuán)主推的互動(dòng)，又增加了對(duì)于事業(yè)部互動(dòng)的展示，對(duì)于保證頁面展示效率也帶來了一定的挑戰(zhàn)。通過對(duì)往期迭代內(nèi)容進(jìn)行數(shù)據(jù)對(duì)比，同時(shí)參考其余會(huì)場對(duì)于多信息展示的策略，最終我們采用了BI展示，同時(shí)對(duì)用戶弱相關(guān)的互動(dòng)卡片進(jìn)行折疊的方式提升頁面的效率；而在卡片的信息展示上，選擇重點(diǎn)突出活動(dòng)可得的利益點(diǎn)，讓用戶一眼即可篩選出對(duì)自己最有價(jià)值的互動(dòng)進(jìn)行參與。
視覺創(chuàng)新優(yōu)化
雖然運(yùn)營同學(xué)對(duì)雙11的秘籍視覺比較認(rèn)可，但是仍然提出了希望有秘籍形式感的同時(shí)，能進(jìn)行視覺創(chuàng)新的訴求。經(jīng)思考后，我認(rèn)為運(yùn)營的訴求無法滿足：
于是帶著以上3點(diǎn)找運(yùn)營同學(xué)再次溝通清楚對(duì)方的真正訴求到底是什么，經(jīng)溝通，對(duì)方最重要的訴求是希望有視覺創(chuàng)新，秘籍形式感訴求較弱。接下來針對(duì)重要訴求集中發(fā)力，并結(jié)合此次618視覺概念（光點(diǎn)、光線），找到了視覺創(chuàng)新優(yōu)化的解決方案，并和運(yùn)營達(dá)成了一致。
「構(gòu)圖」
上面提到了方形可以排除形態(tài)上的干擾，考慮到活動(dòng)入口圖數(shù)量較多，且氛圍圖不可把控，左側(cè)以方形構(gòu)成，右側(cè)結(jié)合了618主圖形——光線，把文字和氛圍圖分開，讓各部分信息更加聚焦。
「顏色」
結(jié)合雙11用研結(jié)論——活動(dòng)入口主題不夠鮮明，除了活動(dòng)文案類似的因素，我認(rèn)為顏色也是影響因素之一。所以這次在上部分平臺(tái)級(jí)活動(dòng)入口，采用了2種暖色的近似色交替構(gòu)成，下部分事業(yè)部活動(dòng)入口，統(tǒng)一采用了1種和上部分近似色的冷色構(gòu)成；單個(gè)活動(dòng)入口，文字和氛圍圖的背景進(jìn)行統(tǒng)一色相的明暗深淺變化。從整體樓層來看，從上至下，由暖至冷，不僅活動(dòng)主題有了明顯差異化，而且較好的過渡到下一樓層；從單個(gè)活動(dòng)入口來看，左右深淺顏色的劃分，不僅對(duì)不可把控的氛圍圖適應(yīng)性更強(qiáng)，且主題文案更加明顯。
「表現(xiàn)形式」
整體頁面在按鈕的部分采用新擬態(tài)風(fēng)格，在保證吸引力的同時(shí)，也減少了顏色過多的問題，減少了信息層級(jí)。新擬態(tài)風(fēng)格更適合工具功能類產(chǎn)品，本次只嘗試使用在了頁面的按鈕部分，風(fēng)格上也會(huì)有眼前一亮的感覺。
分時(shí)期變化的樓層策略
針對(duì)高潮期的轉(zhuǎn)化指標(biāo)，我們參考了往期的迭代經(jīng)驗(yàn)，發(fā)現(xiàn)隨著大促節(jié)奏的漸進(jìn)，臨近高潮期時(shí)，頁面的轉(zhuǎn)化模塊表現(xiàn)往往有較大的提升。于是在本次設(shè)計(jì)中，我們針對(duì)這個(gè)數(shù)據(jù)表現(xiàn)，對(duì)樓層順序進(jìn)行了動(dòng)態(tài)調(diào)整，高潮期將轉(zhuǎn)化樓層前置，以更好地匹配不同時(shí)期的用戶需求。
同時(shí)根據(jù)往期的樓層數(shù)據(jù)表現(xiàn)，本次我們也延續(xù)保留了數(shù)據(jù)表現(xiàn)較好的模塊類型，例如增加了榜單的露出，以輔助頁面目標(biāo)的達(dá)成（以下數(shù)據(jù)來自于lan.jd.com)。
樓層整體化、內(nèi)容吸引力包裝
基于之前今日樓層視覺整體感較弱的問題，這次樓層背景色和頁面背景色有所區(qū)分，樓層內(nèi)模塊顏色和樓層背景色同色，較往期此樓層來看更加整體化，又能讓頁面層級(jí)更加清晰。
其中，針對(duì)這次品牌入口和上海美影廠IP形象結(jié)合的策略，為了提升用戶吸引力，且不干擾信息內(nèi)容的前提下，視覺上采用了和用戶共情，且和IP形象契合的元素——老電視機(jī)，同時(shí)按鈕文案也進(jìn)行場景契合的包裝，增加趣味性。
與往期站內(nèi)攻略對(duì)比，本次618站內(nèi)攻略主要在以下方面有較為明顯的提升：
品牌視覺契合及創(chuàng)新
在延續(xù)主視覺元素的同時(shí)，視覺風(fēng)格有所創(chuàng)新，在頁面的按鈕部分采用新擬態(tài)風(fēng)格，減少顏色過多而導(dǎo)致的復(fù)雜信息層級(jí)問題，同時(shí)也保證了視覺吸引力
視覺精致程度
整體頁面顏色較有節(jié)奏，且更加清透舒適
元素細(xì)節(jié)（打光、投影等）的刻畫更加精致
信息層級(jí)清晰度
通過對(duì)顏色的合理規(guī)劃，有主次的文字信息，讓單個(gè)樓層更整體化，各樓層模塊劃分清晰
數(shù)據(jù)表現(xiàn)
根據(jù)上線后的表現(xiàn)，本次福利互動(dòng)模塊的點(diǎn)擊數(shù)據(jù)獲得了顯著的提升，今日模塊的點(diǎn)擊轉(zhuǎn)化率相比往年也獲得了成倍的增長，頁面目標(biāo)基本達(dá)成。
1. 好的經(jīng)驗(yàn)
針對(duì)攻略這類規(guī)律性存在的活動(dòng)會(huì)場，我們可以針對(duì)其主要的功能組成模塊進(jìn)行數(shù)據(jù)導(dǎo)向的設(shè)計(jì)與迭代，來更好地指導(dǎo)后續(xù)的優(yōu)化方向；同時(shí)也可以輔助業(yè)務(wù)側(cè)更加清晰地規(guī)劃會(huì)場定位，提升頁面對(duì)用戶以及大促的整體價(jià)值。
2. 如何溝通
Q：需求方一味的追求熱鬧復(fù)雜的視覺樣式創(chuàng)新，該怎么辦？
A：熱鬧的氛圍對(duì)于大促活動(dòng)來說固然非常重要，但也要根據(jù)頁面類型去判斷（重氛圍or重信息)。設(shè)計(jì)師要傾聽訴求并搞清訴求的根本原因，并用專業(yè)的角度判斷訴求的合理性，以及價(jià)值大與否。熱鬧氛圍塑造的前提是不能影響信息的識(shí)別，否則就會(huì)本末倒置，并且熱鬧氛圍的視覺樣式要和該場景邏輯匹配 。
3. 待優(yōu)化項(xiàng)
雖然本次頁面大部分模塊基于產(chǎn)品化的思路迭代均獲得了一定的正向反饋，但產(chǎn)品的發(fā)展往往是個(gè)曲折上升的過程，活動(dòng)會(huì)場也不例外。結(jié)合上線后反饋，站內(nèi)攻略依然有以下可優(yōu)化點(diǎn)：
日歷操作體驗(yàn)
根據(jù)用研結(jié)果顯示，日歷操作體驗(yàn)問題反饋較多，日歷模塊為滑動(dòng)改變?nèi)掌?，而非點(diǎn)擊跳轉(zhuǎn)日期的操作方式，與用戶的認(rèn)知不符，且首屏動(dòng)效較復(fù)雜，在安卓機(jī)型上體驗(yàn)較為卡頓。后續(xù)如有同樣的交互方式，需優(yōu)化操作體驗(yàn)。
福利互動(dòng)入口主題文案
根據(jù)用研反饋，主題文案描述不直觀，不易理解，導(dǎo)致用戶容易滑過整個(gè)模塊。建議后續(xù)活動(dòng)主題能簡單清晰的描述優(yōu)惠和玩法。
綜上，未來站內(nèi)攻略需要進(jìn)一步探索主要功能模塊對(duì)用戶的價(jià)值，探索其在大促鏈路中獨(dú)特的差異性；同時(shí)保留高用戶價(jià)值模塊并持續(xù)優(yōu)化，以求達(dá)到更好的用戶體驗(yàn)，用設(shè)計(jì)策略為用戶與業(yè)務(wù)帶來更多的價(jià)值。
文章來源：優(yōu)設(shè) 作者：JellyDesign
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com