說點心里話!「QQ飛車×Vans隨我造」項目背后的設計故事 - 優設-UISDC

說點心里話!「QQ飛車×Vans隨我造」項目背后的設計故事

2017/07/16 評論區

騰旭游戲TGideas – 狗哥:首先這邊分享不是一個項目總結,不會按照一個套路來總結數據,復盤流程,這是一篇寫給內部設計師的心里話,作為INHOUSE的視覺設計師和創意工作者,真正有機會按照自己的想法來輸出內容和設計風格,是多么幸運的一件事情,就沖著品牌和產品對設計師的信任,或者說對設計師任性的縱容,激發了我們對與#QQ飛車×Vans隨我造#活動創作的全部熱情,設計師就是一群容易滿足又容易被傷害的群體不是么?

從做包裝到做文化內容

TGideas服務QQ飛車這款產品已經超過八年,產品一直保持較高的生命力,陪伴著第一批用戶從小學,中學然后走入大學,除了常規的營銷和運營設計之外,我們一直想能夠給這些用戶帶來一些新的體驗,所有的玩家都不僅僅是宅在家里只會玩游戲而已,他們都有社會屬性,尤其是作為青少年,正在以旺盛的精力感知這個世界,我們能不能帶給用戶真正這個年齡段他們感興趣的文化。

想要干這個事兒,比較快捷的路徑是找到調性相符的品牌,在跨界合作中,調動雙方的品牌基因,形成化學反應。常規游戲產品的跨界合作形式通常是以資源置換和短期傳播一波流為主,找兩個品牌的共同契合點,然后做一波包裝,你在產品上有我的素材,我在游戲中植入跟你品牌相關的道具。這種形式的合作過于依賴單點素材,且對用戶的刺激也相對較淺。我們想要做點不一樣的。

有一天我們的QQ飛車品牌經理興沖沖的跑來說,他在微博上聯系到了Vans中國,對方有合作的意向,但是他們從來沒有跟游戲品牌合作過,對如何延續雙反的品牌價值有擔憂,另外他們還提出50年的Vans品牌有一套非常嚴格的視覺體系,在創意設計上怎么能夠符合這個視覺體系又能融入飛車的元素?聽完這句話我們的設計師小真就不干了,還質疑我們對風格的把握,哥可是專業干這個的啊,說完就翻開工卡。

翻開工卡背面的卡片,小真還珍藏著幾年前參加Vans比賽的時候產出的插圖作品,也正是他的緣故,Vans CN開始放下對于設計品質和風格的顧慮,這次合作也算是正式前線搭橋成功。現在小真被戲稱“隨我造之父”

設計師的對外影響力非常重要,要懂得使用優秀的平臺對外展示自己,積極參加一些有影響力的比賽,給自己創造更多的機會,這就是軟實力。如果沒有小真這個內容設計師的存在,有可能這個項目推動起來有很強的溝通成本,甚至無法推動下去。

牽線之后,我們成立了專項小分隊,仔細分析了我們到底能做到什么地步,品牌給予了我們很大的發揮空間和支持,但也提醒我們步子邁得太大容易扯著蛋,在當以傳播為導向的營銷中,在爆款H5如日當頭的背景下,我們還是堅持做一個長線的體驗,把真正的街頭潮流文化帶給我們的飛車用戶,鼓勵年輕人表達自我—-OFF THE WALL(濃濃的一股子使命感油然而生)。

我們把整體跨界合作分為四個部分:

  • 對整體的活動進行視覺包裝和預熱,讓用戶知道他們可以做什么,得到什么。
  • 搭建在線平臺,號召用戶上傳作品,在線創作作品。
  • 將優質的UGC內容和作者進行包裝和升華。
  • 將放大升華后的內容再植入游戲內。

對整體的活動進行視覺包裝和預熱

用Rock手勢+畫筆的圖形來作為整體涂鴉大賽的ICON,用#隨我造#作為活動的名稱,傳達“追隨內心,自由創造”的含義。

在主KV方面將游戲中的賽道,汽車等競速類元素與課堂相關的物品,塑造了一個小橘子腦洞大開的場景,風格上融合插畫,版畫,涂鴉等類型,在強調氛圍的同時保證單個物品的獨立識別,保證主ICON的最大識別面積。

我們選用貼近用戶的校園場景 拍攝了TVC和動態海報來作為預熱,讓有個性,渴望表達的用戶共鳴。TVC播放量473W ,“他們說”動態懸念海報引發用戶猜想,話題瀏覽量突破10W。

搭建在線平臺,號召用戶上傳作品,在線創作作品

我們設計了用戶創作平臺,征集游戲角色插畫,通過網頁端3D控件,在線實時改裝賽車和板鞋設計。頁面PV4000萬,作品回收過5萬,點贊人數207萬,是飛車歷史上參與度最高的品牌活動。

可以看到飛車用戶有比較強的創作欲望,不管是否專業,從作品里可以感受他們對飛車的IP形象小橘子的熱愛,我們從中找到了幾位涂鴉作品的作者,準備開始下一階段的工作。

將優質的UGC內容和作者進行包裝和升華

團隊中的多媒體設計師二娃獨自一人完成了的人設,分鏡,特效,動畫,用兩個月的時間輸出視頻。

有時候一個設計作品可以作為溝通語言,效果甚至超過談判與商務技巧,Vans總部認為游戲角色很好的與Vans精神進行了融合,Vans總部50年來破例迎來一群來自中國的游戲玩家們。我們將所有的行程拍攝成紀錄片,反饋給產品的用戶。

活動告一段落之后我們通過產品10-11月的用戶調研結果看到,飛車用戶對此次活動的滿意度達到78%,也是歷史新高,用戶對17年合作的期待度達到83%。

由于2016年跨界合作過程中,TGideas團隊與合作方積累了較好的信任度,所以2017年的合作已經開啟,基于去年的積累,今年的跨界合作我們更期望把“隨我造”變成一個平臺,能夠持續給游戲用戶帶來Vans所倡導的OFF THE WALL精神,并把這種精神落實到音樂、滑板、游戲等潮流文化的領域。設計團隊為了能夠幫助活動達到預期,必須在2016年的基礎上,不斷輸出更加到位的視覺包裝與活動策劃建議。

將原有的產品的IP角色進行升級和改造,為后續的跨界合作提供更加適合的連接方式。同時也為IP的故事延展積累素材。

小橘子作為游戲內的IP代言人,深入玩家的內心,但是在游戲原畫美術的范疇里,角色的美術表現更加的夸張,更具有想象力,符合用戶對游戲體驗的期望值,但是一旦把角色拿到現實就會格格不入,尤其是合作品牌由自己強烈調性的時候,這種違和感就會加強。

通過我們的分析,小橘子屬于18歲剛剛步入成年的女生,她穿上賽車服應該是一種酷酷的,略微性感的Look,在現實生活中,她應該是一個個性,隨意,灑脫的女孩子,屬于蘿莉和御姐之間的狀態。

跟以往不同的是,我們一開始并沒有去參考太多動漫形象的設計和設定,而是從現實生活中找一個活生生的參考,經過大量的梳理,我們認為最近流行的TOM BOY風格符合性格設定,把沒有出柜前的暮光女,作為我們對角色的視覺印象。我們也總結出角色設定的關鍵詞。

△ 將#隨我造#的核心視覺進行延展

強化品牌視覺資產

將Rock手勢+畫筆的圖形進行多維度延展,結合音樂、怪企鵝、鞋子和滑板等變成一個無限延展的組合形式,風格更加靈動,潮流感。但是能夠保證手勢的清晰識別,經過長時間的推廣和用戶認知,這個就可以變成品牌視覺資產。

2017#QQ飛車×Vans隨我造#即將在藝術、音樂、游戲、潮流文化方面進一步創造,變成游戲用戶UGC內容的平臺,進一步把相關的內容帶給用戶,我把手勢的部分做了延展和夸張,作為各個模塊的主視覺。

與HOUSE OF VANS深入合作,首次打造國內網絡游戲產品與HOV的跨界。

我們分析了以往HOV的設計風格,我們既要保持已有的調性,但是又想做出不一樣的感覺,為了能夠更好的融入兩個品牌視覺,我們將游戲角色用涂鴉的形式進行包裝,盡可能讓兩個品牌在視覺上融合貫通。在設計原則上保證元素獨立和更多組合的可能性。

游戲logo大多數采用繪畫式的質感表現,元素較多,如果設計之初能考慮后續的延展,就需要輸出線稿和黑白稿,來滿足不同場合的應用。

為了能夠讓小橘子更好的跟HOUSE OF VANS貼合,我們設計了眾多輔助圖形,讓小橘子能夠更加自然融入現場場景。

嘗試將KV中涉及到的元素實體化,場景化,輸出了#QQ飛車×VANS隨我造#樂園場景概念設定,為后續故事的展開積累場景素材。

 

為了能夠對QQ飛車主體的HOV進行預熱,我們拍攝了一條Video來進行傳播,讓小橘子進入現實場景,營造有創意,好玩有趣的氛圍,提升用戶對活動的期待度。

為了能夠撬動公司內的優質設計資源,聯合怪企鵝,QQ音樂,QQ空間,游戲美術,TGideas進行了滑板涂鴉活動,并最終展示在活動現場。后續通過各自渠道的傳播,也帶動了活動本身的曝光。

現場搭建的過程中,盡可能平衡現場游戲視覺部分與HOV本身的調性,保證到場的用戶有各自的歸屬感。

#QQ飛車×Vans隨我造#項目2017年只是完成了開端,對于創意和設計團隊,仍然要用在自身的技能能夠幫助產品解決實際的問題,想對所有設計師說,我們一直把自己作為工作流水線的末端,習慣扮演通宵修改十版,最后用回第一稿的受害者。不知道是因為太過于沉浸自己的小宇宙還是面對繁復流程的退縮,我們好像始終做不了主導,更別提從更宏觀的角度來看待問題,尋找解決辦法。對于INHOUSE的團隊,以Campain為單位的需求類型,基本上品牌+視覺+多媒體+視頻類美術指導+開發+PM已經成為標配,在這種相對平行的Team中,誰都可以成為一個主導,承擔更多邊界模糊的工作,那么你就會更加深入了解一個項目,沉淀到更多的經驗。加油!

「騰訊游戲當年做過的重磅案例」

  1. 《親歷者說!火爆的“吳亦凡入伍”HTML5背后有哪些設計故事?》
  2. 《刷爆網絡的「薛之謙憋大招H5」,設計師是這么做出來的!》

【優設網 原創文章 投稿郵箱:[email protected]

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

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

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

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.51294208.com/qqspeed-and-vans-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 優設大課堂 轉場動效 設計師 扁平化設計 交互設計師 界面設計 排版布局 職場 平面設計 設計師專訪 素材下載 視覺設計 配色 設計流程 web前端開發 AI教程 用戶體驗設計 設計理論 神器下載 海報設計 字體下載 設計趨勢 設計規范 psd下載 動效設計 圖標設計 產品設計 logo設計 ICON 神器推薦 職場規劃 App設計 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 用戶體驗 ps技巧 酷站 PS教程 網頁設計 經驗分享
wechat

優設官方微信

50萬設計師關注

微信號:youshege

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

云南时时彩开奖今天