春節期間各大互聯網平臺的紅包大戰“硝煙四起”，作為騰訊旗下深度運營年輕用戶的QQ，被賦予了更多娛樂社交屬性。今年，QQ也在探索重新定義紅包的社交價值，推出了全新玩法，將民間廣為流傳的民俗活動—廟會從線下搬到線上，即QQ游園會。

逛QQ游園會，玩民俗游戲，普及民俗知識，還有一定概率獲得福袋，與家人和好友分享福袋，傳遞福氣，分享越多，福氣越多。

項目目標

該項目作為QQ春節福袋運營活動的主體部分，其目標是在虛擬游園會上，通過民俗小游戲等方式，吸引用戶關注活動，增加用戶互動并提高春節福袋的分享率。

在玩游戲的同時亦科普與傳播傳統習俗，讓逐漸消失的傳統文化重新回歸人們的視野。

為了使活動更有新春熱鬧的氛圍，區別于往年單一獲得現金紅包的形式，這次我們在紅包的基礎上增加了共享紅包的玩法，也增加了更多商家的福利卡券，并包裝成新年福袋的樣式。

用戶不僅僅可以獲得現金紅包與親朋好友分享，更可以獲得各種實用的福利，并配合玩小游戲獲得福袋，充分調動了用戶的參與感和積極性，真正讓用戶和家人朋友一起玩起來。

使命感是吸引用戶玩游戲的首層因素，所以我們要明確用戶的目標是什么。在整個活動中，用戶最想得到的是福袋。

我們把游戲內的福袋結果進行隨機處理，福袋額度并不與游戲積分成正比。比起確定的收益，用戶更喜歡自己能掌握的不確定的收益，“說不定下次會有好運到來”的心理驅使用戶更加積極地參與到活動之中。

活動的另一個目標是鼓勵用戶進行更多的互動和分享。用戶是喜歡能夠瞬間看到自己成功的效果行為，所以及時的進步反饋和成就感會帶給用戶“爽“的體驗。在活動主頁及游戲內增加排行榜等內容，從得分和排行榜玩法增加用戶的成就感與分享熱情。

設計方法

受限于H5的承載和實現能力，元素和動畫不能過于復雜；設計師確定輕量化設計原則，力爭在短時間內輸出高品質內容。

在此我們遵循“故事性-場景化-輕量級”三原則打造視覺體驗?！肮适隆蹦苏麄€設計所依存的背景，“場景化”則是在特定背景下將具象的元素進一步勾勒出來，而“輕量級”則是元素的具體表現方式，“故事-場景-輕量”是“由里及表”的設計過程。

該項目中，整個“故事”框架設定在游園會的背景之下，借用不同的民俗主題作為游戲背景，通過統一的輕量化視覺語言，從圖形、色彩、質感、層次、動效五個維度入手，將整個活動主旨貫穿到細節。

Part.01?首頁設計

H5首頁，作為小游戲及裝扮等活動的入口載體，起到統合整體活動視覺DNA的作用。廟會是最具中國傳統年味的民俗氣息的文化活動形式之一，為構建富有中國年味的體驗場景,使用戶產生情感共鳴，設計師將活動背景設定為一場花天錦地的春節游園會。

主界面中，融合了廟會常見的舞獅、燈籠、錦鯉、財神等元素，將傳統民俗風情從現實世界搬到網絡舞臺。

1. 圖形元素

首頁主要元素是三個小游戲及一個裝扮商城入口，設計師將每個入口都設計成一處別致的園林小景，入口的主圖形外觀設計亦與所代表的內容本身相契合。三個小游戲入口采用了游戲內的舞獅、福樓等元素，而裝扮入口則使用布衣售賣攤位的形式，圖形元素既符合游園會主題，又讓用戶一眼明了其所代表的游戲、活動內容。

2. 色彩搭配

紅色作為中國傳統喜慶佳節的代表色，理所當然成為整個H5主題色彩的首選。配色方案以中式古建常見的檐下彩繪為靈感，紅色打底，孔雀藍輔助，金色作鑲邊及點綴，暖主冷輔的格調讓整體畫面顯得熱烈而不過火，讓雙眼在高飽和度的畫面上有個舒適的緩沖空間。

3. 質感/層次

為了讓整體界面既保留傳統風味又具有現代氣息，質感上選用了輕量的彩色剪紙風格。通過細致的陰影變化區分前后景，營造豐富的層次感，讓畫面保留扁平風的同時又帶有輕巧的立體效果。

微立體樣式的添加亦有助于不同模塊功能區域的劃分，每個游戲入口圖形均為一整片獨立的剪紙裁切，通過投影用戶可以更方便區分每個模塊熱區的邊界。

4. 視覺動線

整個首頁是一個約為2屏長度的長圖，乍看像一張虛擬的游園地圖。地圖中間留出一條“主路”，至上而下引導用戶視線自然地從一個場景轉移到另一個場景。

視覺動線的設計使場景間錯落而有序，增加“游園”體驗沉浸感的同時，也不會讓用戶在長地圖中迷失方向。

5. 角色/動效

即是“游園”，擁有活躍氣氛、增強場景故事性功能的角色設計便不可或缺。我們選用深受年輕群體喜愛的品牌吉祥物之一——Pupu鵝作為游園的角色主體。

為了讓角色設計與福袋更有搭配感，設計師將Pupu鵝與財神的角色合二為一，因為財神象征著財富，而福袋的作用則是聚集財富。

從Banner到主場景再到末尾插畫，都有頭戴財神帽的Pupu鵝貫穿其中，通過生動的動效設計，引領用戶體驗這一場趣味盎然的游園活動。

6. 首頁界面效果

Part.02?小游戲之燈籠高高掛

在游戲設計中故事為魂?！盁艋\高高掛”小游戲里，我們把“掛燈籠”作為此款游戲的核心。它即是民間根深蒂固的習慣，又象征團圓，同時營造一種過年喜慶的視覺氛圍。

單純的讓燈籠層層“疊加“并不能體現“掛”。那么如何維持“疊”的游戲玩法，同時又體現“掛”呢？

設計師從模擬真實場景入手，樓閣是中國古代建筑中的多層建筑物，其中一種構架形式是將單層建筑體逐層重疊構成整體建筑物，樓閣每層都會懸掛燈籠。設

計師巧妙運用這一點，以燈籠掛在樓閣的形式與游戲玩法相結合。并且設計師把“清晨-正午-夜晚”的時間變化增加到游戲場景中，讓用戶在玩中更接近生活。

1. 圖形元素

樓閣樣式設定為三種。設計師從中國十大歷史文化名樓入手，研究其特點，嘗試提煉，并借用到設計中。1.屋檐考慮使用弧線；2.柱頭區分樓閣樣式；3.適度添加墻體紋樣。

抓住上述名樓特點，設計師開始繪制草圖。名樓的“高級臉”形象不適合民俗風情，考慮到春節還是老百姓的節日，所以設計師又參考了西北窯洞，北京胡同這類民居建筑元素，力求在設計上接地氣。

第一稿草圖后，設計師發現，由于過渡追求真實感和造型精美感，樓閣的細節刻畫的太多而繁瑣；忽視了游戲元素的尺寸規定。針對這些問題，設計師提煉了四種執行方法：1.平行視圖；2.幾何形體；3.輕微弧線；4.減少修飾線

2. 色彩搭配/質感/層次

避免多色帶來的打擾感，設計師在中國傳統色彩里面選擇“酡紅”、“金”和“栗”作為樓閣與燈籠的主色調。

參考工筆畫技法，每個樓閣采用1像素金邊，增加元素精致感?！扒宄?正午-夜晚”的時間變化，選用“碧藍-杏黃-靛藍“相互循環漸變。再配合山、樹、云、太陽、月亮、星星這類場景元素，即突出樓閣燈籠的主體，又增加游戲場景變換的氛圍感。

QQ春節主活動的風格是剪紙風，視覺DNA需要遺傳至游戲項目中，所以《燈籠高高掛》質感同樣采用紙。如何實現呢？在圖形上添加細微的陰影，把界面的層級關系拉開，傳達核心信息，用戶對游戲結構更清晰易懂。

3. 動效

游戲受限于H5的實現能力，動畫采用輕量化設計，多用位移和縮放效果；及時的動畫反饋提升用戶成就感，與音效的配合烘托春節氛圍。除此之外，動畫讓設計更貼近真實場景和游戲主題。

首先，loading與封面的銜接動畫，直觀表現游戲主題；其次，樓閣疊加后，兩側出現煙霧動畫，詮釋樓的重量感，是對用戶成功操作的及時反饋；第三，相同大小的樓閣疊加后出現“完美“提示詞，是對用戶操作的夸獎；連續疊加三次相同大小的樓閣后，立即出現加分動畫；最后，禮花動畫慶祝用戶得到滿意分數，再次提升用戶成就感。

4. 燈籠高高掛最終界面

Part.03?小游戲之天降福運

中國民俗傳統中，“舞獅”是必不可少的表演藝術，傳統文化中認為“舞獅”可以驅邪辟鬼。故此每逢喜慶節日，例如新張慶典、迎春賽會等，都喜歡打鑼打鼓，舞獅助慶。而“?！弊质切麓簳r的另一個常見傳統習俗，成為春節的一種像征。寄托了人們對幸福生活的向往，也是對美好未來的祝愿。

1. 圖形元素

在“天降福運”的游戲玩法設計中，設計師將中國傳統的“福字”和“舞獅”作為游戲主體。福字對應天降福運中的“?！?，而舞獅作為中國的祥瑞之獸，可以在新年帶來好運，則對應著天降福運中的“運”。此外，為了與主活動保持統一，設計師也將福袋元素延展到游戲中，用福袋接住從獅頭中抖落的福字，既秉承了文化傳統又完成游戲元素的提取。

2. 色彩搭配

作為以春節民俗為主題的小游戲，設計師選擇了傳統的胭脂紅作為主色調，并加入金色和孔雀藍等進行點綴，希望能通過色彩將傳統民俗變得更有活力。

3. 質感/層次

風格：主活動的風格是高飽和度的剪紙風格，作為其中的小游戲，視覺風格自然不能差異過大。所以“天降福運”小游戲的界面同樣采用剪紙風格，但同時降低了色彩的飽和度與投影強度，看起來有一種稍稍做舊的感覺，既延續了主活動風格，又有自己的特點。

4. 動畫&音效

動畫方面簡單的分成了游戲氣氛動畫和反饋相關的動畫。

氣氛動畫方向參考了很多和天降福運玩法類似的節奏類型游戲，我們主要參考了兩款童年經典游戲——啪塔碰和太鼓達人。目標是完成像這兩款游戲一樣氣氛強且有趣的游戲動畫。

基本的煙花綻放和粒子碎花的循環動畫作為背景烘托整個游戲的氣氛。同樣作為整個游戲的標志——頭部舞獅子，我們也希望它以一個熱鬧并且有趣的動畫展示。

我們參考了dribbble上的一些卡通臉部動畫，利用AE的父子級工具和簡單旋轉位移的完成了這個動畫。

為了讓這個動畫更加生動（不那么容易看出循環規律）我們在這里做了6s的循環動畫。計劃用lottie輸出整個獅子頭部的動畫，然而被技術同學告知白鷺引擎不支持lottie動畫包。

這里的動畫顯然不能用png序列來完成（占資源，fps低，體驗不順暢）。為了完美實現這里獅子頭的動畫我們用了一個“土”辦法——設計師跟蹤元素每一幀的運動數據，然后將數據交給重構同學完成整個動畫的開發任務。終于完美實現獅子頭部的動畫表現。

反饋相關的動畫，當玩家按按錯顏色福氣時，為了減若玩家的操作失誤時的挫敗感，我們用了手機震動作為消極反饋代替音效和動效反饋。而玩家在成功消除的時候，我們用動效（福氣入袋&積分加分）和類似”bingo”的音效讓用戶獲得成就感。

同時消除類游戲關鍵在于在玩游戲的過程中玩家得到“割草”的快感。我們讓用戶進入combo狀態后加入一些積極反饋的動畫讓用戶獲得更多滿足感和成就感。

1）連擊反饋動畫；

2）音效鑼聲提示；

3）積分x2反饋提示；

4）視覺對比更強的煙花背景動畫；

5）獅子頭從藍色進化成黃金狀態。

在游戲中，我們增加了對戰游戲中常用的“combo”連擊，讓用戶在游戲中過程中感受到自己“猴塞雷”，通過較低成本的方式讓用戶獲得成就與滿足感。

游戲結束之后，會根據得分隨機獲得“QQ春節福袋”，拆福袋的行為就是一種隨機性的游戲，通過拼“歐氣”增加游戲的可玩性。

5. 科普與傳播傳統習俗

以民俗為主題的小游戲，讓用戶在玩游戲的同時科普與傳播傳統習俗，讓逐漸消失的傳統文化重新回歸人們的視野。

6. 天降福運最終界面

用戶反饋

春節游園會活動自上線以來，激起了用戶的熱烈反響。有的用戶為了贏取更高積分甚至自行“研發”了游戲的過關妙招，這些自主行為大大超出了設計原本的預想。民俗小游戲的結合增加了用戶參與福袋收集、分享的興趣與欲望，社交模式的滲入進一步擴大了活動的傳播與影響。

項目總結

春節游園會H5運營活動整體較為龐大，項目啟動時間比往年晚了近2個月，除了文章中提到的界面，還要配合商務團隊做招商設計，配合前期演練的素材，預熱活動，閃屏等，項目時間非常緊張，有的活動從設計到上線只有一周時間，大多數時候設計、開發和測試驗證都需要并行。

該項目極大地考驗了設計師們的高速創作及協作能力，設計師們加班加點，在有限的時間內不斷雕琢、優化視覺效果，力爭在各大平臺百花爭鳴的紅包運營活動中做到最好。

這次嘗試的全新福袋玩法也給未來類似活動運營提供了不錯的參考思路，相信在未來的運營活動中，我們將嘗試更多有趣的運營模式，用更開闊的設計思維迎接未來的挑戰。

鳴謝所有團隊成員，謝謝你們的辛勤付出！

作者：騰訊ISUX，公眾號：騰訊ISUX（ID：tencent_isux）

來源：https://mp.weixin.qq.com/s/T_6ElwTNNKhVrPb5xSOYFg

題圖來自Unsplash，基于CC0協議