萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> 平面設計理論 >> 淘寶設計師關於紅包的設計實戰思考

淘寶設計師關於紅包的設計實戰思考

   搶紅包成為每年大促活動的標配套餐,用戶對基本的紅包玩法都不陌生,各大電商也都在想方設法想通過紅包強化互動社交的聯系,支付寶的口令紅包,猜紅包,接龍紅包,搶紅包,親親紅包玩法設計百花齊放!怎樣讓玩家保持新鮮感,又能搶得過瘾,同時又能達到引導搜索進店的最終效果。這是今年負責紅包項目的難點所在。

淘寶設計師關於紅包的設計實戰思考 三聯

  設計核心

  體現符合今年全球化主題氛圍,會在一些功能性頁面營造更多節日氣氛。

  著重營造抽中紅包和分享紅包的場景,達成品牌影響力和傳播力,向用戶傳達品牌的精神態度

  通過簡化流程和玩法設計,統一的結果反饋,使產品認知簡單

  對紅包人物形象的探索,紅包互動的更新穎的表現方式

  針對每個階段諸多不同玩法的紅包,既要凸顯每個玩法的特色,視覺過度上不可跨度太大,又需要有相對統一的感知體驗,創造一個熟悉又愉悅的體驗。

  首先,在設計上需要運用符合品牌氣質的視覺語言,讓用戶對品牌留下深刻印象。通過玩法的設計和情緒渲染,讓品牌在游戲中得到成功傳播。

  其次,一致的認知:統一紅包的基礎樣式,第二、統一結果彈窗等一些反饋頁面,這樣用戶在同時切換玩幾組紅包游戲中,也易於理解,便於分享出去後統一的認知,看到類似這樣的紅包界面就知道是淘寶的紅包活動。

  雙十一紅包形象前期探索

  十二國紅包小人形象(因為後續采用了告白小人的形象,此部分沒有在項目中具體應用,項目結束後又做了一些深化)

  腦袋上頂著金幣的紅包人,從著裝配飾體現不同國家的特點和性格。

  主打風格:萌蠢、可愛風,扁平的幾何表現,明快的配色

  限制: 整體形象比較規整,肢體動作不太好表現 ,擺在一起時會略顯呆板!

2hb20151229

  每個紅包小人都配有一套國家形象的服飾,比如結合中國特有元素的舞獅造型,新西蘭的毛利人的羽毛以及彩繪裝扮,思密達的韓服大蓬裙,美國牛仔,英國皇家衛隊的熊皮帽和紅色制服,日本的和服壽司,表情萌呆,國際形象突出,營造一群陽光歡樂的紅包人物形象。

3hb20151229

  為了解決單一形象呆板單調的問題,把形象做了更豐富衍生設計,配合了有趣的場景插圖設計的郵票,讓規則的紅包造型更加生動。和服小妹趴在壽司上,毛利人的航海購物之旅,結合標志性的國家建築場景,簡潔的提煉標志元素,運用情感化的圖形語言讓頁面更具有親和力!

  雙十一互動紅包設計

4hb20151229

  密令紅包拼得不只是手氣,是機智,記憶力,速度,還有最重要的國語水平!

  搜索框被玩壞了!通過“文字密令+圖片”的紅包模式,普通用戶玩起了文字迷、大秀恩愛…商家更可以利用口令達到傳播品牌的效果。所以在設計中所有都要以密令為主核心做強化,分享頁面通過搜索框的來示意密令的玩法路徑,並用更跳躍的黃色做引導。

  我們堅持經典的活動配色:紅黃搭配,過節不累~

  在配色上還是以經典的番茄雞蛋的配色,還運用了一些夜空絢爛煙花的色調襯托,渲染夜晚狂歡的熱鬧。場景豐富上也做了更多的細節嘗試。比如設計了一些告白小人舞動四肢慶祝的場景,結合國家的建築元素體現全球化狂歡主題。

5hb20151229
6hb20151229

  故事梗概:在2015雙11即將來臨之際,浩瀚的宇宙夜空,有一個即將熱烈迸發的紅包星球,來自世界各地伙伴共同慶祝雙11狂歡得到來,紅包君們已經秘密潛伏在他們中間,只要輸入暗號口令就能開啟島嶼之門。我發密令,你拿紅包!這是今年正對前幾年支付寶口令紅包的升級玩法~

  這次雙11紅包以貓頭為統一的頭像標識,背後透出一些金幣表現表現紅包的分量感。密令紅包分為:商家、明星和c2c 的紅包,設計統一的信息展示結構,商家和明星紅包則可自定義更換封面海報,提供更大的表現空間,商家則可以設計更多商品和活動的營銷透出。

  紅包插圖設計

  作用:營造氛圍、雙11元素的透出和傳播~ 如貓頭和國家元素。

  插圖狂歡氛圍的營造讓整個偏功能主導的紅包產品 有了更多節日的渲染,全球化的理念幾乎貫穿在整個雙11活動各個產品中,繪制的藍色地球上,乘著天貓號的船長和世界各地的伙伴一起舉杯慶祝,夜空煙花綻放,清新柔和的藍灰色調,搭配主體紅色的氛圍,也不會影響主體信息的理解和操作。

7hb20151229

  雙十二紅包爭奪戰

  設計核心:

  每環的商家星球的主體設計,表現方式:輕質感表現,星球的縱深空間感,有趣的形象和細節設計是重點!

  搶奪紅包的格斗動態展現,突出緊張迫切的氛圍,強化引導點擊。

  有趣的是你來我往互偷的爽勁,通過設計的情緒引導,調動玩家的熱情和新鮮感!

  氛圍營造:

  1-3環商家主題星球的設計(圖一),帶有一些爭戰元素的星球通過可愛的元素表現,小怪獸、糖果、動物等中性柔性主題,讓女生也能接受打斗戰爭的氣氛。

  打斗的動態反饋是讓搶紅包很過瘾的體驗,隨著紅包不斷飛出,視覺體驗上更加立體,唯一不足的是當用戶在熟悉了玩法後,不斷打斗的狀態會造成用戶一些疲憊感,持續的雷同頁面會使一部分用戶失去新鮮感,越是簡單的游戲,激勵設計和如何保證新鮮感尤為重要。如這個打斗頁面(圖二)可以通過設置穿著不同戰服的士兵形象、武器來獲得用戶的持續關注。

  通過首頁底部的黃色月球設計串聯3個入口的界面導航作用,同時也非常契合星戰的主題氛圍,同時這裡的月球又和搶奪頁面的月球形成呼應的作用,增加用戶在前後的操作中的連貫感知。

8hb20151229

  星球戰爭主題icon設計

  50個星球,依照商家出現的屏數1-3環的招商設置,設計分屏主題化,激發用戶再浏覽過程的好奇心,(探索更多主題的星球),緩解因出現屏次靠後的商家的訪問量的遞減的情況。

  星球的形象討得用戶喜愛:星球飛船、小怪獸、萌寵和糖果水果主題,形象上更偏萌系卡通風格。輕質感得表現方式,利用自然得漸變過度和柔和的投影保證星球的空間三維感。

9hb20151229

  紅包項目設計過程中的一些手繪構思草圖,幫助快速表現腦海中的想法,搭建頁面構圖和布局,有了第一步構思草圖便可以進行小組的討論,快速敲定最終方向,如果方案不行也可快速更新思路探索新的方向,手繪草圖在前期的設計過程非常高效。快速表現腦海中閃現的創意,也更好得理解產品的設計目標,提前預知問題的風險,在項目結束後也方便自己的總結和回顧。

10hb20151229

  小結

  任何一個產品都需要經過不斷的打磨,才能慢慢得更接近你心中的樣子,可能一開始有很多不完美的細節,沒關系,在持續地探慢慢得雕琢之後,你會慢慢觸到方向。很多時候平時的思考的和技能上的積累很重要,在雙11雙12這樣時間有限需高產出的項目中,會遇到很多新的挑戰,在短時間內產出不同階段的設計方案,對設計方法和技能尚有比較高的要求,同時也是最能體現設計綜合能力的時機,會碰到很多平時平時不太接觸的問題,用最快的時間查閱資料,快速學習和高效的執行力會使項目有序得進行,不斷的驗證和實踐是最好的方法。

  歡迎關注淘寶MIX無線設計的公眾號:

stqr
copyright © 萬盛學電腦網 all rights reserved