引言

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

部分歷史會(huì)場(chǎng)截圖

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

會(huì)場(chǎng)設(shè)計(jì)優(yōu)化的三個(gè)階段

一、收斂刪繁就簡(jiǎn)

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

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

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

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

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

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

減少"氛圍"對(duì)商品信息的干擾

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

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

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

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

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

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

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

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

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

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

字號(hào)與柵格規(guī)范

2. 組件化

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

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

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

3. 更新維護(hù)

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

線上組件庫

三、提效快速迭代

1. 精簡(jiǎn)交互層級(jí)

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

近期大促主會(huì)場(chǎng)框架的優(yōu)化

2. 控制屏效

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

618、雙旦首屏效率對(duì)比

3. 效率與氛圍的平衡

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

雙旦全屏/高版頭動(dòng)效切換

在近期的雙旦會(huì)場(chǎng)中，我們嘗試用更豐富的視覺表現(xiàn)來貼合運(yùn)營(yíng)主題，進(jìn)行更生動(dòng)的演繹。

雙旦波段視覺效果

特色會(huì)場(chǎng)橫滑切換

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

權(quán)益版頭、直播版頭、倒計(jì)時(shí)、互動(dòng)版頭切換

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

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

品類、熱點(diǎn)、節(jié)日多種類型會(huì)場(chǎng)

結(jié)語

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

來源：淘寶設(shè)計(jì)