傳統會場在大促中的作用
每次為了讓消費者在大促時能更快挑選到商品和進行平臺的營銷互動，都會有一個頁面來承載大促的核心內容和主要的營銷要素，我們稱之為主會場。 以前主會場開發，都是前端通過頁面搭建系統或者通過原始碼方式製作PC頁面和H5頁面，且主會場素材圖片都來源於官方素材。系統根據一定業務規則決定誰在坑位裡展示，而使用者需要從一個樹形結構一級一級進行瀏覽到最後的寶貝頁面。通過以前主會場的資料對比，無線主會場結構的跳失率較高且效能不如PC頁面。
無線主會場目標
在無線成為主流的趨勢下，需要提高無線的主會場的效能，技術和業務上需要解決兩個問題:
在移動端讓使用者能夠更快的找到自己感興趣的內容，提高流量的匹配和高效分發，減少使用者跳失率，從而提高轉化率
業務層面，可以應對任何業務變化，可以按照不同需求進行調整從而保障大促進行
應對方法
針對以上目標，從以下幾個方面來解:
極致的瀏覽體驗，主要從效能和體驗做到最優
通過千人千面將使用者感興趣的內容優先呈現，打破樹形結構的瀏覽方式，減少跳失率
通過首圖一致提高轉化率
針對業務靈活性要求，通過動態可配置業務框架、流量調配規則來進行保障
為了提升我們的瀏覽體驗以及減少跳失率，本次會場採用了一系列的全新設計和方案，主要包含了一個可複用的會場框架和一套完整的合圖機制。
可複用的會場框架
為了將使用者的瀏覽體驗做到極致，我們本次拋棄了傳統H5主會場，採用一個native頁面會場。從技術上來看，無線主會場面臨的主要挑戰:
在端側，主要涉及版本釋出、變更成本、個性化效能保障、離線快取&同步策略、端側監控
在雲端，主要是流量調配和穩定性，要保證端到端的穩定性、容災策略
素材來源的多樣性，保障雲端素材處理能力、個性化實時計算能力、首圖一致性鏈路透傳
從端到雲的全方位監控體系
面對這些挑戰，我們從以下幾個主要模組來滿足這些能力:
靈活的框架容器和多策略調整
為了更好的使用者體驗，整個會場被包含在一個會場框架中，整體會場框架由動態渲染區域和框架容器組成，針對會場內容區域，通過WEEX(WEEX是阿里無線提供的一套將html5在客戶端跨平臺解釋生成native體驗的全新移動開發平臺)渲染引擎滿足動態性，基於WEB技術開發，無需要發版同時具備native體驗。框架容器用來控制頂部和底部tab部分，目標是設計實現一個標準通用化的會場框架，且端側展現元素和行為可通過配置靈活調整，滿足雙11、雙12、年中促等不同階段大促活動需求。整個主會場結構拆解如下:
針對會場框架容器，雲端配置控制客戶端上各導航動作及響應處理，端側基於雲端配置後設資料，靈活渲染導航TAB數量及視覺樣式和響應行為。同時考慮不同終端裝置使用者體驗相容性，以更細粒度控制容器內各內容頁行為，會場框架的策略中心可根據使用者相關資訊(如：app版本、機型、os版本等)來進行多種策略的變更和定向使用者群體生效。
框架容器內的動態頁面(WEEX)資料獲取，類似傳統靜態H5頁面。從使用者體驗角度考慮，基於資料就近使用者原則，預設頁面資源直接部署CDN節點;考慮頁面內容涉及個性化，區域性資料需實時請求動態獲取。本方案採用頁面框架及靜態資料靜態化部署至CDN，區域性動態內容，直接呼叫雲端服務非同步填充。設計階段同步考慮了極端情況下拉取靜態檔案失敗的情況，雲端同時需具備相容支撐此類少量流量，以返回全頁面資料。綜上整體會場框架資料鏈路及渲染流程如下：
個性化資料由使用者進入頁面主動拉取，如何能讓使用者覺得是跟從就近的地方獲取的內容是一樣的體驗呢? 動態個性化資料非同步渲染提升頁面開啟速度，但在使用者視覺體驗上，動靜態資料分離並非同步渲染，會導致頁面區域性區域資料載入和展示滯後與靜態頁面開啟。低端機型下螢幕閃爍或重新整理頓挫感明顯。為實現極致使用者體驗，兼顧頁面載入速度及頁面資料完整性，藉助富客戶端能力，會場框架採用端側預熱技術來保障更好的使用者體驗。
對比傳統頁面依賴客戶端主動向服務端拉取資料，端側預熱技術藉助移動端資料推送服務，在使用者訪問頁面並渲染時優先讀取端上預快取內容，既對服務端請求量起到消峰作用，又保障全頁面載入渲染的使用者體驗。會場框架的資料推送服務採用手淘自主研發的ACDS(Ali Cloud Data Service)SDK，實現端側資料讀取、雲端同步、資料融合及遠端過程呼叫的透明化服務，極大降低客戶端處理複雜度，提升開發效率。會場框架同時藉助雲端控制策略，實現雲推送和端拉取兩種模式靈活切換。大致流程如下：
上述模組能力基礎之上，考慮大促活動的造勢、預熱、正式、結束整體生命週期，運營所需的頁面/模組定時或實時切換能力，需在框架層面對會場全域性URL攔截策略進行統一管控、實時調配。針對此類特性，會場框架採用自定義攔截規則，基於雲端控制下發url策略的方式，支援不同時段、不同目標請求被監控並攔截至會場框架內對應TAB處理，並可根據不同大促和目標地址按需配置。基於時間的攔截規則整體處理流程如下:
最後，個性化場景下，當上億使用者基於攔截規則進入對應訪問頁面時，還需按業務策略將整體流量與頁面各資源和內容進行靈活配比，即能嚴格保障業務在流量比例和總量的需求，又要保障使用者始終能看到適合的商品/營銷內容並更高效完成轉化。為此，首先來看下所謂的個性化內容區域：
其中幾個主要概念：圖中的男裝表示是一個樓層，一個樓層有7個坑位。千人千面(個性化)就是針對不同使用者，按其偏好結合大資料預測，分別展示不同內容和樓層順序。因此，對不同使用者，同一資源位下曝光的品牌、店鋪、商品、賣點資訊均可能不同，且展示的圖片素材會針對使用者偏好組合同一品牌下不同商品和賣點，從而不同使用者看到的同一品牌商品可能不同，甚至同一商品賣點不同。為此，需提前準備大量素材及原始營銷資訊，由演算法和大資料處理引擎動態處理，後面會有單獨章節相應介紹。
在個性化基礎上，考慮不同樓層的運營管控策略，可能個別樓層針對部分使用者不輸出個性內容，僅投放運營人工填充的固定資料，此類資料和樓層被稱為非個性化資料。基於靈活性考慮，需能夠針對不同樓層個性化進行實時流量管控，允許對某樓層的個性化與非個性化流量比例進行控制；同時，各樓層順序同樣可設定是否個性化以及個性化排序的比例，從而靈活應對業務的多變性和變更穩定性。
最後，為進一步提高使用者選品效率，提升點選效果，本次會場延展實現了首圖一致性。即使用者在資源位入口看到引導素材(通暢為某個商品)產生興趣，點選進入承載頁後，能在該頁面列表內第一時間看到所點選的內容(基於頁面製作者內容推廣和引流策略，對應的商品可能不在首屏)。以此對使用者點選轉化和選品體驗均達到最佳。因此會場整體個性化鏈路同步實現了下一跳承接頁對應此前入口的首圖一致處理。
穩定性保障
基於以上會場框架設計，基本滿足了各類大促業務場景下的流量匹配和使用者體驗多維需求。接下來，重點在於保障整體架構的穩定性。首當其衝，需完善會場整體鏈路的監控能力，對線上執行的客戶端版本和對應服務端邏輯能夠快速排查和定位問題。為此，對會場整體鏈路各環節均進行了細緻監控:
客戶端監控
考慮端側動態指令碼異常、資料處理流程意外、頁面資料載入錯誤、快取及請求通道異常等各類出錯可能，我們需保證在億級UV/PV訪問量下，如何能夠及時發現端測問題？以及具體發生在哪些環節？為此，會場框架結合端上渲染引擎採用自主開發的端上監控平臺來監控主會場的端側表現，細分至資料獲取、資料處理、資料渲染、節點操作等各核心環節(包括js執行錯誤、cdn拉取js失敗率、會場crash率、DOM操作的成功率)， 通過採集此類監控點資料，結合會場框架在端上的降級策略， 保證會場整體穩定性。
雲端監控
服務端層面，業務角度主要核心為個性化資料獲取成功率和流量管控準確性保障，同時大資料演算法側有內容異常監控(資料為空或資料片段缺失等)，從而保障整體鏈路效果。
基於以上設計和實現，會場框架基本完善。營銷角度，框架承載流量的核心還是內容。所謂巧婦難為無米之炊，個性化千人千面，實現移動時代的大資料效果，依賴以下一套全新的利器來完成。
可複用會場框架素材來源重要支撐——合圖
如前所述，千人千面對會場投放的內容複雜度、計算量級提出了前所未有的挑戰。本次雙十一主個性化主會場為此衍生出了一個橫向的創新產品——合圖。前面也提到過歷來會場的圖片素材都是來自官方素材(商家或者設計師人肉製作)。在全面升級為個性化會場後，對素材庫的要求也隨之鉅變。如果將個性化推薦比作大資料時代的重型武器，那麼圖片素材庫就好比重型武器的彈藥庫。個性化推薦能不能打響，打的有多猛，首先要看商品素材的質量夠不夠好、數量夠不夠多。原因很簡單，每一個消費者都是獨特的，個性化推薦要滿足成千上萬消費者的喜好，當然首先你得有成千上萬種商品。面對雙十一的海量使用者，如果素材搞不定，任何推薦演算法都無法施展威力。
傳統的運營投放方式好比左輪手槍，依靠運營的經驗命中消費者喜好。而個性化推薦則是在海量的資料之上，為每個使用者定製他專屬的雙十一。經過前期評估，個性化主會場想要在雙十一這種量級的場景中取得效果，這個素材庫的圖片數量至少需要百萬級別的，如果讓商家或設計師來人肉製作這個"彈藥庫"，顯然這是一個mission impossible。
目標
寶貝圖片和利益點文字合併成一整張圖片輸出，減少客戶端渲染壓力。
主會場圖片展示個性化，需要準備百萬級別的素材圖片。
解法
針對以上目標，我們需要一種能夠高質量、大規模、結構化，生產圖片的能力。在這種背景下，我們的合圖系統應運而生。
合圖系統需處理的問題：
圖片質量，海量圖片的篩選，識別人臉，牛皮癬，非白底等badcase。
抽象模板 靈活的DSL語言表達，設計師可操作的修改，調整。
合圖服務，按照DSL模板定義產出標準的圖片。
圖片質量:雙十一的會場圖片主要來源與商家提報的素材，這些素材良莠不齊，無法直接使用，需要針對性的進行過濾處理，比如因為涉及版權，我們不能直接使用帶有人臉的圖片。pc時代商家習慣性的圖片帶牛皮癬的case也需要能夠過濾，以及最基本的圖片是否清晰等等，針對這些要求，我們會對每幅影像進行預定義的多種影像處理，輸出基於影像內容的語義標籤，完成影像自動的標籤化過程，以便於按特徵過濾或提前所需要的素材。
抽象模板：雙十一會場坑位具有多種尺寸，多種佈局。我們建立了一套用於合圖的領域專用語言(DSL)，一方面利於修改，便於業務靈活調整；一方面閱讀友好，利於設計師參與。
合圖服務： 重點在於按主體寬高進行自動化適配，這個直接決定了最終產出的圖片效果。(下面兩張對比圖，對於豎型素材，通過邊緣檢測自動化適配，優化有效展示區域)
產出
我們在雙十一期間共計製造出了百萬級別的圖片素材，完美的解決了這百萬級彈藥庫的mission impossible！
通過素材收集平臺，我們向商家賦能，商家可以低成本的製作適用於無線會場的圖片，獲取更多曝光流量。
通過合圖DSL語言，我們向設計師賦能，設計師可以將視覺稿無差異的標準量產，提高生產力。
通過整套合圖系統，我們向個性化賦能，使得個性化的彈藥庫填充滿滿。
未來與展望
在支撐完全球狂歡節之後，我們用現成的會場框架體系支撐了淘寶雙12活動以及阿里年貨節，整套會場框架已經穩定，未來會通過系統配置的方式進行自動化的頁面搭建，我們希望端上能夠有一套完整的會場框架，在雲端的資料產出以及各種規則的配置都能自動化，系統化，更好滿足常態化的大促場景需求。
另外針對合圖系統，除了繼續應用於大促個性化會場搭建以外，計劃將此能力輸送到更多的個性化場景，比如手機淘寶，手機天貓日常的千人千面個性化。在進一步完善和擴充套件合圖DSL的基礎前提下，能夠橫向的對集團內業務方提供對應的場景支援。真正做到賦能商家，賦能小二，充分挖掘流量價值。
關於阿里百川
阿里百川（baichuan.taobao.com)是阿里巴巴集團“雲”+“端”的核心戰略是阿里巴巴集團無線開放平臺，基於世界級的後端服務和成熟的商業元件，通過“技術、商業及大資料”的開放，為移動創業者提供可快速搭建App、商業化APP並提升使用者體驗的解決方案；同時提供多元化的創業服務-物理空間、孵化運營、創業投資等，為移動創業者提供全面保障。