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