在 ACG 圈有著這樣一種賽事：沒有硝煙戰(zhàn)火，沒有（廣義上的）明星參與，沒有盛大線下比拼，卻能引發(fā)廣大粉絲瘋狂參與，甚至爆肝應(yīng)援──這就是「萌戰(zhàn)」，屬于二次元粉絲和人氣動(dòng)漫角色的評(píng)選大戰(zhàn)。此類活動(dòng)鼻祖是「日萌」，起源于日本最大的論壇 2ch。從 02 年開始流傳至今，由網(wǎng)站居民自發(fā)舉行，選出年度二次元er最愛的人氣角色。因賽制問題和不接受非本國(guó)人員投票等原因慢慢失去關(guān)注，而后「世萌」、「燃戰(zhàn)」以及國(guó)內(nèi)的「B萌」「部落萌」等等同類活動(dòng)也逐漸興起，備受二次元er關(guān)注。波洞作為國(guó)內(nèi)萌新的二次元平臺(tái)，舉辦此類活動(dòng)尚屬首次，各方面存在不少壓力和難度，這里我們就視覺設(shè)計(jì)層面，聊一聊用愛發(fā)電的經(jīng)驗(yàn)。

目標(biāo)

波洞作為首次舉辦此類活動(dòng)，產(chǎn)品目標(biāo)是為了提高社區(qū)活躍度，刺激用戶參與社區(qū)行為，同時(shí)也能提高人氣角色原作品閱讀量，也為今后同類活動(dòng)做好準(zhǔn)備。

設(shè)計(jì)上，我們更多想把「波洞星戰(zhàn)」進(jìn)行品牌化，融合波洞品牌和 IP，打造成系列品牌，抓住年輕用戶的喜好，引起跨圈層用戶關(guān)注和討論。

項(xiàng)目難點(diǎn)

項(xiàng)目開始之初就遇到諸多困難，比如時(shí)間特別緊張，設(shè)計(jì)周期只有 2 周時(shí)間，包括了 7 個(gè)賽段頁(yè)面和各類宣發(fā)物料設(shè)計(jì)工作量較大等，在人力資源有限的情況下需要快速產(chǎn)出視覺設(shè)計(jì)；設(shè)計(jì)物料需要權(quán)衡二次元飯圈的用戶心理，防止出現(xiàn)粉絲罵戰(zhàn)和輿論問題，如角色站位問題等等，設(shè)計(jì)需要有一定話題度的同時(shí)，需要保持中立客觀的態(tài)度。

概念推導(dǎo)

這里我們對(duì)「二次元人氣角色評(píng)選」這個(gè)命題展開了一系列腦暴，其中選取最有趣的切入點(diǎn)：「二次元的偶像比賽」。近年來(lái) produce101 系綜藝大爆，這類由粉絲深度參與，通過(guò)投票支持，甚至左右最終出道愛豆的養(yǎng)成系比賽深受年輕粉絲追捧。二次元角色與三次元偶像這兩者之間存在相似性，粉絲年齡層的重合度較高。于是我們大膽的去想象，可以打造專屬于二次元的偶像比賽氛圍。

視覺風(fēng)格的推導(dǎo)

我們找出眾多二次元「萌戰(zhàn)」的視覺風(fēng)格進(jìn)行對(duì)比，發(fā)現(xiàn)差異化較小，主視覺的感受都聚焦在「動(dòng)漫感」的呈現(xiàn)，這并不能完全詮釋受到粉絲追捧的「偶像感」。由此我們思考，如果視覺風(fēng)格上包裝成一個(gè)具備出圈資質(zhì)的二次元活動(dòng)，將會(huì)給我們帶來(lái)更多的可能性。

既然是屬于二次元的偶像比賽，其視覺風(fēng)格必定要符合當(dāng)下的年輕人審美標(biāo)準(zhǔn)，我們找出國(guó)內(nèi)愛豆養(yǎng)成節(jié)目鼻祖──韓版PRODUCE101。作為 101 系列節(jié)目的先行者，整體的品牌包裝設(shè)計(jì)簡(jiǎn)潔有力，顏色傾向清爽飽滿，對(duì)基礎(chǔ)幾何圖形的使用和品牌化延展有大量的幫助。

國(guó)內(nèi)的同類型節(jié)目：我鵝的創(chuàng)造101、明日之子，以及友商出品的偶練等等，也都延續(xù)扁平幾何化風(fēng)格，且配色大膽，大量的使用高飽和撞色；點(diǎn)綴圖形以三角、方塊、圓形、菱形等大道至簡(jiǎn)的基礎(chǔ)幾何圖形為主。這和我們波洞「紅藍(lán)」品牌色，圓形的品牌符號(hào)，及年輕化的品牌調(diào)性接近，于是將「扁平」「高飽和撞色」「幾何圖形輔助」等關(guān)鍵詞作為主視覺的關(guān)鍵詞。

設(shè)計(jì)執(zhí)行

設(shè)計(jì)之初為了讓活動(dòng)品牌化，將原活動(dòng)名稱進(jìn)行了包裝。

• 主活動(dòng)名稱：波洞星戰(zhàn)
• 副標(biāo)題：國(guó)漫人氣角色評(píng)選

1. 配色風(fēng)格——警告！炸眼球的顏色

顏色上將波洞原品牌色進(jìn)行了提煉和升級(jí)，衍生出本次活動(dòng)專屬的顏色體系，為了增強(qiáng)視覺沖擊力和品牌延續(xù)。

2. logo設(shè)計(jì)——給你我的小心心

字體

基于字形結(jié)構(gòu)較為幾何感和年輕感的「造字工房尚黑」進(jìn)行二次設(shè)計(jì)，對(duì)于鋒利硬朗的原字體進(jìn)行了徹底的「圓化」。為什么是圓？因?yàn)椴ǘ?logo 及擴(kuò)展圖形均取自圓形，與波洞的品牌設(shè)計(jì)語(yǔ)言一脈相承。

容器

身為投票活動(dòng)，勢(shì)必需要大量的容器承載被投票角色。于是在容器的設(shè)計(jì)上選擇左上、右下為圓角的方形，做為基礎(chǔ)容器圖形，在保持圓形的設(shè)計(jì)語(yǔ)言的同時(shí)，也能夠最大限度地為角色提供展示面積，從而方便用戶快速查找和投票應(yīng)援。

LOGO

基于主視覺方向以及字體、容器，遵循幾何圖形輔助原則，以方框?yàn)榛A(chǔ)進(jìn)行變化，使 logo 字體更有辨識(shí)度。另外，「手指比心」做為近幾年明星愛豆最愛用的手勢(shì)，也將其加入本次的應(yīng)援活動(dòng)設(shè)計(jì)中，在 logo 以及投票表現(xiàn)上露出。

3. 主KV方案——火速應(yīng)援！我的二次元愛豆！

由于主要的落地場(chǎng)景是波洞 APP 首頁(yè) TAB，構(gòu)圖上讓活動(dòng)主 LOGO 占據(jù)主要的視覺中心，KV 的臨場(chǎng)感和情感化的任務(wù)交給了品牌形象。

作為主辦方，考慮的是如何讓用戶更多的感受到活動(dòng)氛圍，積極參與進(jìn)來(lái)。比如：讓 IP 形象化身為粉絲為愛豆應(yīng)援，以此拉近了我們和用戶之間的距離，增強(qiáng)用戶的代入感。

方案1

前期進(jìn)行了兩個(gè)方向的設(shè)計(jì)思考：

• 人氣二次元角色化身波洞限定偶像團(tuán)體C位出道，面對(duì)鏡頭擺出POSE瘋狂吸粉。
• 波洞看板娘為愛豆們應(yīng)援打call。

最后考慮到動(dòng)漫角色的選擇及站位關(guān)系等風(fēng)險(xiǎn)，最終選擇 B 方案，并基于構(gòu)圖和表現(xiàn)力進(jìn)行優(yōu)化。

方案2

將 IP 形象進(jìn)行了動(dòng)作設(shè)計(jì)，加入應(yīng)援棒以及主 LOGO 的「手指比心」元素，增強(qiáng)角色的細(xì)節(jié)，傳達(dá)賽音和可賽的人物性格及動(dòng)態(tài)張力。同時(shí)也結(jié)合 LOGO，設(shè)定構(gòu)圖方向，呼應(yīng)波洞品牌視覺語(yǔ)言。

主kv成稿

搭建這樣一個(gè)場(chǎng)景：一個(gè)擺滿角色頭像的照片墻上開了一個(gè)圓形蟲洞入口，跳出應(yīng)援少女和波洞君；我們想通過(guò)人物和場(chǎng)景的互動(dòng)去強(qiáng)化視覺層次，讓用戶感受到熱烈的比賽氛圍；人物表情和肢體動(dòng)作富有張力，給用戶傳達(dá)活動(dòng)的青春氣質(zhì)，讓用戶有種收到二次元邀請(qǐng)的即視感。

為了進(jìn)一步強(qiáng)化 kv 效果，將 kv 做成動(dòng)態(tài)，并增加一段微動(dòng)畫開場(chǎng)，增強(qiáng)沖擊力：

△ 點(diǎn)擊查看開場(chǎng)動(dòng)畫

動(dòng)態(tài)的制作以飄動(dòng)動(dòng)畫為主，使用 AE 制作，但是考慮到設(shè)計(jì)周期較為緊張，所以我們采用了高效的 AUTOSWAY 腳本實(shí)現(xiàn)，節(jié)約了 80% 的調(diào)試時(shí)間，這里就不展開腳本技術(shù)討論了。

4. 落地場(chǎng)景——H5/移動(dòng)端

遵循主 kv 的調(diào)性，頁(yè)面設(shè)計(jì)上以紅藍(lán)為主，內(nèi)容模塊搭建主要以卡片形式為主，卡片的設(shè)計(jì)以主 logo 定義的基礎(chǔ)圖形作為外框，容器 pattern 的設(shè)計(jì)延續(xù)紅藍(lán)主色調(diào)和蟲洞星系符號(hào)，不斷地強(qiáng)化活動(dòng)的品牌感和一致性。

主頁(yè)面

角色投票

點(diǎn)贊動(dòng)效

作為應(yīng)援比賽，用戶最重要最高頻的操作路徑是投票體驗(yàn)，所以我們?cè)诒ＷC性能的基礎(chǔ)上，埋上動(dòng)效小彩蛋：沿用手指比心的星戰(zhàn)符號(hào)動(dòng)作，將用戶投單票和全票的行為表現(xiàn)進(jìn)行區(qū)分，單票冒一顆心，多票冒出全部小心心。把用戶給愛豆打 call 的心意具象化，提升投票的快感。

其他頁(yè)面

5. 宣發(fā)資源物料設(shè)計(jì)

整體活動(dòng)涉及不同角色的應(yīng)援方和宣發(fā)合作方較多，如何保持整體活動(dòng)品牌的一致性，是設(shè)計(jì)啟動(dòng)之初就考慮的問題。沿著前期定調(diào)的設(shè)計(jì)思路和設(shè)計(jì)規(guī)范，我們?cè)陧?xiàng)目最初制訂好設(shè)計(jì)語(yǔ)言和規(guī)則，并以設(shè)計(jì)元件的方式給到合作方設(shè)計(jì)規(guī)范，從源頭將整體活動(dòng)調(diào)性進(jìn)行把控。

波洞閃屏

宣傳物料

項(xiàng)目總結(jié)

歷時(shí)半個(gè)月的設(shè)計(jì)任務(wù)告一段落，而我們視覺攻堅(jiān)小團(tuán)隊(duì)在這次項(xiàng)目中收獲良多。設(shè)計(jì)側(cè)意識(shí)到團(tuán)隊(duì)協(xié)作的重要，與產(chǎn)品、重構(gòu)、開發(fā)、運(yùn)營(yíng)同學(xué)的配合緊密，以建立更好的配合機(jī)制為目標(biāo)一起努力。設(shè)計(jì)堅(jiān)實(shí)自己的專業(yè)，挖掘更多波洞的品牌調(diào)性，在未來(lái)探索更多的創(chuàng)新玩法，沉淀經(jīng)驗(yàn)，提升能力，一起為了建立更好的波洞星球而發(fā)力。

歡迎關(guān)注「騰訊ISUX」的公眾號(hào)：