鏈接:https://isux.tencent.com/articles/isux-boodo-idol.html

| 導語 |

在ACG圈有着這樣一種賽事:沒有硝煙戰火,沒有(廣義上的)明星參與,沒有盛大線下比拼,卻能引發廣大粉絲瘋狂參與,甚至爆肝應援——這就是「萌戰」,屬於二次元粉絲和人氣動漫角色的評選大戰。此類活動鼻祖是「日萌」,起源於日本最大的論壇2ch,從02年開始流傳至今,由網站居民自發舉行,選出年度二次元er最愛的人氣角色。因賽制問題和不接受非本國人員投票等原因慢慢失去關注,而後「世萌」、「燃戰」以及國內的「B萌」「部落萌」等等同類活動也逐漸興起,備受二次元er關注。波洞作爲國內萌新的二次元平臺,舉辦此類活動尚屬首次,各方面存在不少壓力和難度,這裏我們就視覺設計層面,聊一聊用愛發電的經驗:)

邂逅二次元雪花—波洞星戰設定

|目標

波洞作爲首次舉辦此類活動,產品目標是爲了提高社區活躍度,刺激用戶參與社區行爲,同時也能提高人氣角色原作品閱讀量,也爲今後同類活動做好準備。

設計上,我們更多想把「波洞星戰」進行品牌化,融合波洞品牌和IP,打造成系列品牌,抓住年輕用戶的喜好,引起跨圈層用戶關注和討論。

|項目難點

項目開始之初就遇到諸多困難,比如時間特別緊張設計週期只有2周時間,包括了7個賽段頁面和各類宣發物料設計工作量較大等,在人力資源有限的情況下需要快速產出視覺設計;設計物料需要權衡二次元飯圈的用戶心理,防止出現粉絲罵戰和輿論問題,如角色站站位問題等等,總之設計需要有一定話題度的同時需要保持中立客觀的態度。

|概念推導

這裏我們對“二次元人氣角色評選”這個命題展開了一系列腦暴,其中選取最有趣的切入點:“二次元的偶像比賽”。近年來produce101系綜藝大爆,這類由粉絲深度參與,通過投票支持甚至左右最終出道雪花的養成系比賽深受年輕粉絲追捧。二次元角色與三次元偶像這兩者之間存在相似性,粉絲年齡層的重合度較高,於是我們大膽的去想象,可以去打造專屬於二次元的偶像比賽氛圍。

邂逅二次元雪花—波洞星戰設定

|視覺風格的推導

我們找出衆多二次元「萌戰」的視覺風格進行對比,發現差異化較小,主視覺的感受都聚焦在「動漫感」的呈現,這並不能完全詮釋受到粉絲追捧的「偶像感」,由此我們思考,如果視覺風格上包裝成一個具備出圈資質的二次元活動,將會給我們帶來更多的可能性。

邂逅二次元雪花—波洞星戰設定

既然是屬於二次元的偶像比賽,其視覺風格必定要符合當下的年輕人審美標準,我們找出偶練創造營青你等國內雪花養成節目鼻祖——韓版PRODUCE101,作爲101系列節目的先行者,整體的品牌包裝設計簡潔有力,顏色傾向清爽飽滿,對基礎幾何圖形的使用和品牌化延展有大量的設計。

邂逅二次元雪花—波洞星戰設定

國內的同類型節目:我鵝的創造101、明日之子,以及友商出品的偶練等等,也都延續扁平幾何化風格,且配色大膽,大量的使用高飽和撞色;點綴圖形以三角、方塊、圓形、菱形等大道至簡的基礎幾何圖形爲主。這和我們波洞“紅藍”品牌色,圓形的品牌符號,及年輕化的品牌調性接近,於是將“扁平”“高飽和撞色”“幾何圖形輔助”等關鍵詞作爲主視覺的關鍵詞。

邂逅二次元雪花—波洞星戰設定

|設計執行

設計之初爲了讓活動品牌化,將原活動名稱進行了包裝。

主活動名稱:波洞星戰

副標題:國漫人氣角色評選

( 1 ) 配色風格 —— 警告!炸眼球的顏色

顏色上將波洞原品牌色進行了提煉和升級,衍生出本次活動專屬的顏色體系;爲了增強視覺衝擊力和品牌延續。

邂逅二次元雪花—波洞星戰設定

( 2 ) logo設計 —— 給你我的小心心

字體:

基於字形結構較爲幾何感和年輕感的“造字工房尚黑”進行二次設計,對於鋒利硬朗的原字體進行了徹底的“圓化”,爲什麼是圓?因爲波洞logo及擴展圖形均取自圓形,與波洞的品牌設計語言一脈相承。

邂逅二次元雪花—波洞星戰設定

容器:

身爲投票活動,勢必需要大量的容器承載被投票角色。於是在容器的設計上選擇左上右下爲圓角的方形做爲基礎容器圖形,這樣在保持圓形的設計語言同時,也能夠最大限度的爲角色提供展示面積,從而方便用戶快速查找和投票應援。

邂逅二次元雪花—波洞星戰設定

LOGO:

基於主視覺方向以及字體、容器,遵循幾何圖形輔助原則,以方框爲基礎進行變化,使logo字體更有辨識度。另外,“手指比心”做爲近幾年明星雪花最愛用的手勢,也將其加入本次的應援活動設計中,在logo以及投票表現上露出。

邂逅二次元雪花—波洞星戰設定

( 3 ) 主KV方案 —— 火速應援!我的二次元雪花!

由於主要的落地場景是波洞APP首頁TAB,構圖上讓活動主LOGO佔據主要的視覺中心,KV的臨場感和情感化的任務交給了品牌形象。

邂逅二次元雪花—波洞星戰設定

作爲主辦方,考慮的是如何讓用戶更多的感受到活動氛圍,積極參與進來;比如:讓IP形象化身爲粉絲爲雪花應援,以此拉近了我們和用戶之間的距離,增強用戶的代入感。

方案 1

邂逅二次元雪花—波洞星戰設定

前期思考了兩個方向的設計思路:

1-人氣二次元角色化身波洞限定偶像團體C位出道,面對鏡頭擺出POSE瘋狂吸粉。

2-波洞看板娘爲雪花們應援打call。

最後考慮到動漫角色的選擇及站位關係等風險,最終選擇B方案並基於構圖和表現力進行優化。

方案 2

邂逅二次元雪花—波洞星戰設定

將IP形象進行了動作設計,加入應援棒以及主LOGO的“手指比心”元素,增強角色的細節,傳達賽音和可賽的人物性格及動態張力。同時也結合LOGO,設定構圖方向,呼應波洞品牌視覺語言。

邂逅二次元雪花—波洞星戰設定

主kv成稿:

邂逅二次元雪花—波洞星戰設定

搭建這樣一個場景:一個擺滿角色頭像的照片牆上開了一個圓形蟲洞入口,跳出應援少女和波洞君;我們想通過人物和場景的互動去強化視覺層次,讓用戶感受到熱烈的比賽氛圍;人物表情和肢體動作富有張力,給用戶傳達活動的青春氣質,讓用戶有種收到二次元邀請的既視感。

爲了進一步的強化kv效果,將kv做成動態,並增加一段微動畫開場增強衝擊力:

視頻加載中...

動態的製作以飄動動畫爲主,使用AE製作,但是考慮到設計週期較爲緊張,所以我們採用了高效的AUTOSWAY腳本實現,節約了80%的調試時間,這裏就不展開腳本技術討論了,有興趣可以私聊,共同探討。

( 4 ) 落地場景-H5/移動端

遵循主kv的調性,頁面設計上以紅藍爲主,內容模塊搭建主要以卡片形式爲主,卡片的設計以主logo定義的基礎圖形作爲外框,容器pattern的設計延續紅藍主色調和蟲洞星系符號,不斷的強化活動的品牌感和一致性。

主頁面:

邂逅二次元雪花—波洞星戰設定

角色投票:

邂逅二次元雪花—波洞星戰設定

點贊動效:

作爲應援比賽,用戶最重要最高頻的操作路徑是投票體驗,所以我們在保證性能的基礎上,埋上動效小彩蛋:沿用手指比心的星戰符號動作,將用戶投單票和全票的行爲表現進行區分,單票冒一顆心,多票冒出全部小心心~ 把用戶給雪花打call的心意具像化,提升投票的快感。

邂逅二次元雪花—波洞星戰設定

其他頁面:

邂逅二次元雪花—波洞星戰設定

( 5 )宣發資源物料設計

整體活動涉及不同角色的應援方和宣發合作方較多,如何保持整體活動品牌調性的一致性是設計啓動之初就考慮的問題。沿着前期定調的設計思路和設計規範,我們在項目最初制訂好設計語言和規則,並以設計元件的方式給到合作方設計規範,從源頭將整體活動調性進行把控。

波洞閃屏

邂逅二次元雪花—波洞星戰設定

宣傳物料

邂逅二次元雪花—波洞星戰設定

|項目總結

歷時半個月的設計任務告一段落,而我們視覺攻堅小團隊在這次項目中收穫良多。設計側意識到團隊協作的重要,與產品、重構、開發、運營同學的配合緊密,以建立更好的配合機制爲目標一起在努力。設計堅實自己的專業,挖掘更多波洞的品牌調性,在未來探索更多的創新玩法,沉澱經驗,提升能力,一起爲了建立更好的波洞星球而發力。

相關文章