引言

營銷會場一直是大促活動的標(biāo)志性產(chǎn)品，伴隨大家走過了每一個"雙 11"、"618"；如今淘寶的活動更加豐富頻繁，我們也一直在為會場這個成熟的產(chǎn)品持續(xù)做優(yōu)化升級。

部分歷史會場截圖

今年，我們對營銷會場做了一些至關(guān)重要的優(yōu)化，分收斂、統(tǒng)一、提效三個階段逐步實現(xiàn)，解決了諸多歷史問題的同時也融入了我們對于會場新的思考。

會場設(shè)計優(yōu)化的三個階段

一、收斂刪繁就簡

會場是通過模塊搭建的方式來實現(xiàn)的，模塊會在不同活動中反復(fù)使用；隨著時間的推移，我們的用戶群體在發(fā)生變化，用戶的設(shè)備不斷升級，使用習(xí)慣也在改變，這使得許多老舊模塊在新的環(huán)境下已經(jīng)變得不再合適。

這些不合適的模塊往往存在文字可讀性差、內(nèi)容過于密集、信息層級不清晰等問題；針對這些問題我們梳理了一些設(shè)計原則來做統(tǒng)一優(yōu)化調(diào)整。

部分優(yōu)化調(diào)整的模塊舉例

1. 內(nèi)容減負(fù)與"氛圍"降噪

營銷會場需要真實、準(zhǔn)確、高效地向消費者傳遞商品內(nèi)容、活動信息；所以要嚴(yán)格控制信息密度，減少非必要的內(nèi)容，并不是字越多越好，對于"寫了也沒錯，不寫也可以"的信息，要做到最大限度地刪減。

長久以來，會場的設(shè)計中都用到較多的裝飾性視覺元素，以實現(xiàn)濃重的"營銷氛圍"風(fēng)格；但在實際效果上來看，過度的風(fēng)格化視覺表達(dá)往往會干擾用戶瀏覽商品信息。

減少"氛圍"對商品信息的干擾

2. 信息分層與結(jié)構(gòu)變通

頁面信息需要有主次之分，就像文章要區(qū)分標(biāo)題和正文一樣；在頁面框架和交互層面做到扁平簡潔的同時，要對頁面信息做仔細(xì)的推敲分級，方便用戶更輕松地閱讀理解內(nèi)容。

設(shè)計合理的字號字重與圖層關(guān)系

在一些復(fù)雜業(yè)務(wù)場景中，需要透露出的信息較多卻又不可以刪減，這時候如果生硬地套用組件規(guī)范就會設(shè)計出非常難以閱讀的模塊，需要我們靈活地調(diào)整布局形式。

靈活調(diào)整模塊布局

二、統(tǒng)一體驗一致

同樣一件事情在分屬不同業(yè)務(wù)和團隊去做設(shè)計的時候，大家憑經(jīng)驗去做了各自認(rèn)為合理卻又并不相同的方案，這種不一致的情況增加了用戶的理解成本，帶來了混亂的負(fù)面體驗。

為了解決以上問題，在經(jīng)歷了一輪地毯式的收集整理與重新設(shè)計之后，我們將幾千個歷史模塊最終收斂成了 150 多個常用模塊，并完成了模塊的組件化。

1. 基礎(chǔ)規(guī)范

我們首先制定了精簡嚴(yán)格的基礎(chǔ)視覺規(guī)范，對老舊不合理的模塊細(xì)節(jié)做統(tǒng)一修改。

字號與柵格規(guī)范

2. 組件化

針對常見的模塊結(jié)構(gòu)，設(shè)計統(tǒng)一的模塊標(biāo)題、標(biāo)簽、商品字段布局等細(xì)節(jié)，將常見模塊做組件化拆解，避免同類組件的不同表達(dá)造成的混亂。

將常見的模塊狀態(tài)做成可復(fù)用的組件

為了將規(guī)范更好地被遵循使用起來，不僅需要設(shè)計層面的組件化，也需要從代碼層面封裝成可調(diào)用的組件，不再需要反復(fù)地繪制設(shè)計稿和寫代碼，極大地降低規(guī)范在落地過程中出錯的可能性。

3. 更新維護

當(dāng)模塊組件確定之后，不會輕易做修改，但在遇到新的應(yīng)用場景時，需要增加一些組件和細(xì)分狀態(tài)，通過維護在線的組件庫，做到一處新，處處新，所有設(shè)計師都能用到最新最全的組件庫和模塊案例。

線上組件庫

三、提效快速迭代

1. 精簡交互層級

會場的主頁框架很久沒有更新過，一直有頂部和底部兩個導(dǎo)航欄，從最近的雙 12 活動開始，我們嘗試將其簡化成了統(tǒng)一的頂部導(dǎo)航。這個變化使會場的頁面交互邏輯更清晰易懂，也有效地提升了頁面的導(dǎo)購空間內(nèi)容占比。

近期大促主會場框架的優(yōu)化

2. 控制屏效

追求高屏效，并不是機械地把頁面內(nèi)容縮小讓頁面塞下更多，而是要讓用戶在有限的屏幕空間和瀏覽時長內(nèi)，輕松獲取更多有價值的信息。新的方案由原有固定版頭高度的畫面演繹調(diào)整為高矮版頭的動態(tài)切換，強化利益點信息，提升傳達(dá)有效性。

618、雙旦首屏效率對比

3. 效率與氛圍的平衡

先前的版本固定版頭高度限制了信息與視覺的表達(dá)，要么強化信息，要么雕琢氛圍。新版本靈活的版頭高度變換可以讓信息與視覺更突出，做到兼顧效率與氛圍。

雙旦全屏/高版頭動效切換

在近期的雙旦會場中，我們嘗試用更豐富的視覺表現(xiàn)來貼合運營主題，進行更生動的演繹。

雙旦波段視覺效果

特色會場橫滑切換

在不同時間段，可以給不同用戶推送他們更感興趣的功能，版頭不僅僅能傳達(dá)氛圍和信息，更可以拓展實用性。

權(quán)益版頭、直播版頭、倒計時、互動版頭切換

4. 視覺表達(dá)的多樣化

視覺需要輔助內(nèi)容更好地溝通，多樣性的視覺則更貼切地將主題傳遞給用戶。在主題會場中，豐富的版頭設(shè)計與頁面做到了很好的銜接，讓頁面更整體、協(xié)調(diào)。

品類、熱點、節(jié)日多種類型會場

結(jié)語

回顧 2024，這一年的會場經(jīng)歷了艱難復(fù)雜的蛻變，雖然是一個成熟的產(chǎn)品，但只要用心去研究打磨，總能找到突破和創(chuàng)新的機會。展望即將到來的 2025，我們會繼續(xù)大膽嘗試，小心打磨，為大家呈現(xiàn)更好的大促體驗。

來源：淘寶設(shè)計