紅包還可以這樣玩！眾安專屬紅包活動設計經驗總結

編者按：一個互聯網設計團隊，每年都會產出大量的產品設計、運營設計的作品。及時整理和總結這些作品，對于團隊和設計師的成長都很有裨益。善于總結設計思路和方法，能夠提升設計師的工作效率，更好的為需求服務。本文為ZED設計總結系列之一，后續會有更多的優秀設計作品總結與大家見面，請持續關注我們喲！

設計背景

春節是一年中最為重要的節日之一，也是各大電商最為重視的節日之一，圍繞著促銷的核心目的，產出了大量的運營方式和活動，紅包就是一個熱門的方式之一。紅包，一方面讓用戶在新年中一個好彩頭，一方面可以通過發福利增加拉新量和達到營銷目的。紅包這個題材已經被廣大互聯網公司給做濫，怎么玩好紅包這個題材，我們想了很多。

業務需求

通過游戲派發紅包，積累用戶。

活動邏輯

經過與業務方多次討論，我們這次紅包活動提供“專屬”紅包的概念，通過春節各個場景的幽默漫畫，帶來一些不一樣的感覺。根據業務流程，繪制詳細的交互圖，主要展現頁面跳轉流程、功能和信息排布，所有的信息展示的位置和面積，以及簡單的動畫實現。與運營和技術交流數次后，確認了交互，開始進一步的設計。

關鍵字提煉

設計師主導與業務方一起，進行小型的頭腦風暴，提出本次活動的關鍵詞，最后歸納為以上幾點，紅包活動要與新年的整體氛圍相符。

主視覺推導

確定了關鍵詞后，就開始考慮具體呈現出一個什么樣的風格了，收集了一些電商春節的運營風反復斟酌，決定使用扁平線條＋剪紙＋版畫效果的風格，這種風格在以往的春節活動中出現的頻率較低，同時也符合眾安保險App的金融定位，較為穩重。

界面設計

1. 活動主頁

目的：引導用戶搶紅包。

視覺思考：營造出春節的喜慶氛圍，加入彈幕等元素進行引導用戶點擊搶紅包，增加紅包雨的動態視覺效果。主界面中“我要搶紅包”是最重要的Button，所以用最重的顏色進行引導；點擊后出現拆紅包界面。

2. 創意紅包頁

目的：以圖的有趣味來打動用戶，引導用戶分享傳播。

視覺思考：總結為一下兩點。

• 笑點，讓用戶看到就覺得好笑。
• 槽點，營造場景，春節期間常見且特別想吐槽的場景。本頁中插畫的運勢圖是最為重要的內容。

3. 創意紅包插畫

創意紅包插畫是這次活動的最重要差異化的內容，所以在畫面和文案上，我們花費了很多心思。整個畫面創造的是無厘頭幽默氛圍，結合春節的種種笑點和槽點，引起用戶的共鳴。畫面的表現方式跟主界面保持一致，都是運用描邊＋局部填色＋局部點狀網；顏色上，沿用了主界面的顏色。

4. 彈框

多種狀態下的彈框，在不變中又包含特異，每個彈框上半部分都是有細微調整。

5. 我的獎品

我的獎品頁面的兩種狀態，與主界面的視覺元素相呼應。

6. 圖標設計

首頁活動圖標：

活動橫跨春節長假，為了配合春節氛圍和首頁的整體氛圍決定將入口圖標和底部Tab導航欄圖標都替換成春節活動圖標，同時增加懸浮圖標，懸浮圖標配合簡單的交互動畫，目的是增加用戶點擊量，最后數據表明，懸浮圖標的點擊率高于Banner，達到了最初的設計目標。

視覺元素選擇的是春節比較常見的物件，風格延續主頁，但是在顏色方面，圖標的金色比較靠近黃色，為的是要在整體中拉開細微的區別，以增加層次感，同時整體保持一致。

app開屏

開屏頁的設計依舊以單線小面積著色為主，增加了雞年的福字招貼，加強畫面的主體，配合福字，下面的主標題選用“顏真卿字帖字體”。構圖選用傳統的居中構圖，主視覺集中展現，信息明顯。

數據反饋

活動的數據高于預期，在經費為0的情況下，pv、uv高于同期有營銷成本的活動，完成目標。
注冊轉化率達到20%以上，數據如下：

活動設計總結

春節紅包設計開發的過程基本順利，但是還有很多可以提升的空間，比如：設計預留時間不夠，導致紅包頁內容不夠豐富；活動機制未涉及用戶間的互動，沒有引起很好話題傳播效果。
現有幾個設計方面的問題總結如下，供大家參考。

1. 充分與開發交流。

本次活動要上兩個平臺：App和微信，兩個平臺的流程大相徑庭，前期沒有充分溝通，導致后期需要多次修改。前期會議時一定要與開發多交流，包括流程、動效實現等，在構思的時候把一些問題都解決，節省成本。

2. 減少不必要的效果。

為了減少文件大小，在不影響整體的情況下，一些不必要的效果就不要加，否則影響H5加載速度。

3. 使用默認字體。

需要抓取的文字一定要使用默認字體，所以在設計的時候就要充分考慮到字體的問題，標題類可以使用個性的字體，但是如果需要配置和抓取的文字一定要使用默認的字體，否則后期修改會出現問題。

4. 與業務溝通預留足夠的時間。

預留足夠的時間，可以把設計打磨的更加精細。本次活動的設計開發時間很短，最開始計劃的活動是現在的2倍體量，由于時間不夠，所以只能壓縮需求，導致實際上線的活動不如當初計劃的豐富。

歡迎關注作者：眾安ZED原創 （ 微信號zhongan_zed ）

「如何有理有據做設計？」

1. 《有理有據做設計之如何明確設計目標？》
2. 《用這個流程，4步完成一個有理有據的LOGO 設計》
3. 《如何在用戶體驗與業務目標之間尋求設計平衡點？》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com