《真心話・大冒險》不再恐同IG互動遊戲製作秘辛

2019/06/21 18:44

backhand index pointing right

嗨,持續肯定圖文不符的你,最近過得還好嗎?#

最近的我們,也還是一樣努力喔!#


backhand index pointing right   

backhand index pointing right

今天要分享的,是517發佈的《真心話大冒險・IG互動式遊戲》的製作秘辛。

上個月發佈之後,由於太受歡迎,收到了廣大粉絲的敲碗,希望我們能夠分享設計的細節。於是我們花了一些時間整理,催生出這篇談內容設計執行的文章。如果你對這次的內容設計有興趣,不妨撥點時間看看,也很歡迎大家留言與我們交流。

#文長慎入 #很少發的技術文 #對圖文不符如何製作有興趣的話可看 #視覺設計 #遊戲化內容設計 #資訊設計

 

開始看文章之前,如果你沒有玩過這個遊戲

可以先體驗一下 👉http://bit.ly/2Rtu8V2


START#

這次很開心和只要有人&Ariel合作這個議題活動!
#

擔當《不再恐同》IG互動遊戲的製作團隊。

 

行銷策略的部分,或許有些人已經看過相關的分享文了。

那麼身為設計團隊的我們,就從內容設計、專案執行的角度,

來談圖文不符怎麼「說」和「做」出一個好的互動故事吧!

#也看我們如何透過專業執行與時間賽跑(笑


這次的專案,從概念接洽到完成,大約花費20天左右。

🔸其中一半的時間,針對故事如何融入遊戲機制進行溝通

🔸另外一半的時間,用在設計、繪製,來回確認氛圍和閱讀流暢性

#由於中間有其他專案同步進行

時程非常緊湊,也因此接下任務之後,內容團隊火速確認合作方案。


從概念到落實執行,雙方的傳接球怎麼進行呢? 


▌說明執行前,先來看一下我們的人力配置#

圖文不符製作團隊包含:

🔸一個設計師:負責整體視覺氛圍、UI與圖像設定

🔸一個插畫師:負責繪製插圖,創造角色與情境

🔸一個企劃師:負責確認概念與信息傳達完整性

🔸一個內部PM:負責管理素材製程、溝通需求、釐清執行問題

🔸一個外部PM:負責與外部團隊溝通與洽談

 

很多朋友肯定這個專案的插畫視覺效果,但從製作端的角度來看,

有溫度的插畫是優勢,但並不足以構成支撐整個專案成功的關鍵。

 

想了解為什麼?就得先從這次的遊戲機制開始講起。

 

 

▌適應框架,建構真實的互動遊戲機制#

《不再恐同》IG互動遊戲,在行銷上有一個顯而易見的特色,

即是透過拼圖與帳號外連的方式,來重現AVG遊戲的精神。

 

【AVG遊戲的概念有兩層】

🔸一個是情境角色扮演

🔸一個是輸入指令以改變行動

 

在這個專案裡面我們首先遇到了兩個問題:

└問題一:如何在保密謎底的情況下吸引互動?

└問題二:如何透過少量的文字敘述鋪陳情境?

 

畢竟這是一個議題行銷活動,不是真正的遊戲,

觀眾無法透過評論或是遊戲劇情釋出等訊息,

來判斷自己「到底要不要加入這個遊戲」。

 

而遊戲的趣味性,從第一頁開始就隱藏在未知數中。

因此首要評估專案能不能往下Run,

必須先從企劃腳本開始評估,釐清操作流程中可能造成的流失。

 

 

▌用做產品的態度製作內容,用框架預測痛點#

最早我們拿到的腳本:

└「框架」來自Avicii的IG互動劇情遊戲

      ➡️ 確立了用IG來互動的遊戲機制與應用框架

 

└「靈感」來自Sandy Hook Promise的反槍枝廣告

      ➡️ 確立了劇情走向是日常生活中的抉擇導致遺憾

 

既然遊戲最終的目的,是要達成「反思」的效果,

那麼遊玩的過程就不能太快讓觀眾猜到謎底,

以免喪失猜測、探索樂趣。

 

但同時,又必須顧慮到一個硬傷,

「社群並不是被設計來玩遊戲的」!

如果概念並不足以讓人意識到「這是遊戲」,

而且是個「懸疑、等待打開的潘朵拉盒子」,

在帳號外連的過程中,人們很快就會失去遊玩動機。


 

▌洞察遊戲設計的本質,讓腳本不著痕跡#

從上面提到的痛點來審視最初收到的腳本:《高中生戀愛故事》

劇情發展從高中生日常、學園祭事件、到選擇要製作鬼屋或是女僕咖啡店、一直到分組施工、到決定要和誰表白、最後發現學藝沒有來上課、收到簡訊發現自殺,開始到結束共有14層,8個戀愛結局。而學藝股長被排擠的事件,隱藏在看似無關緊要的背景訊息中,等待觀眾自行回溯拼湊問題。而視覺設定則是從可愛的校園故事走向悲劇

 

一連串的事件以平行的方式來進行溝通,遇到了三個狀況:

🔸大量的情境與描述,若呈現不夠完整或引人入勝,前期的遊玩體驗將遠遜於一般AVG遊戲。為增加劇情的細膩度,劇情間的銜接勢必要增加,將大幅提升製作成本。 

🔸此外,就算是繪製精細,觀眾在不了解角色的前提下,沒有足夠的「動機」和「理由」遊玩這個學園祭扮演遊戲,加上外連的層次較多,可能會在謎底太遠的情況下,提前跳出。

🔸最後的問題,就是所需圖量與情節多且複雜,時程內難以執行。

 

執行團隊釐清內容製作到應用可能會遇到的狀況後,用遊戲開發的角度,針對互動效果與可執行性,提出了腳本以霸凌為主體來進行發展的建議。並透過減少選擇次數與圖片上限來縮小製作範圍。透過外部PM的溝通,等待只要有人第二版敘事結構的重新調整。

 

 

▌敘述架構重新建立,再次詮釋校園故事#

第二版的遊戲架構,已經很接近上線的版本(見下圖)

backhand index pointing right

歷經第一次的溝通,遊戲腳本轉換成一個看似單純的校園事件所引發的霸凌,玩家從故事中最微不足道的真心話大冒險,開始體驗故事。=並維持日常生活的設定

 

兩年前做全能古蹟燒毀王&奔跑吧台北時,

很多人懷疑圖文不符是披著設計皮的遊戲製作公司,

但更正確來說,我們是宅屬性比較高的中二創作團體(喂)

 

資訊設計特別重視如何牽起信息↔觀者之間的互動關係,

開業四年下來,我們嘗試許多敘事型的議題描述手法,

想綜合各種技術進行傳達,也因此嘗試遊戲製作。

 

在這個階段圖文不符team提供的回應,

比較是以從創作角度檢視劇情合理性。

 

[舉例來說]

此時期的設定是學藝被瓶子指到,大冒險要和班長告白

在我們的觀點裡就會認為,如果不知道學藝的性向

為什麼會叫他去告白呢?

 

而班長的真心話為什麼是說自己討厭誰?

大冒險又為什麼要跟學藝接吻?

又不是學藝的大冒險…

 

進入分支結局前,也建議多加一層劇情

來暴露學藝在遊戲後的下場。

 

諸如此類的細節,

通過一句話一句話去推敲,每句話該怎麼說?

每個霸凌現場應該會是什麼情境?

學生說話又是什麼調調?

 

執行team從企劃、圖像設計、到氛圍的營造,

給予腳本符合人性觀點的建議,盡可能還原現場。

並在執行的過程中,通過對話、畫面、彩蛋的設定,從視覺、色彩、人物動作到表情,一步步加深校園生活中,平靜卻略帶不安的氛圍。

#不只是插畫全力表現

#整個團隊都卯足了勁設計內容呢

 

這裡我們特別想訴說的遊戲「裏語言」是:

人性中最可怕的,就是漫不經心所造成的傷害。

不成熟的學生時期,同儕間所帶來的人際壓力與歧視,

往往是受霸凌者無法度過的最大難關。

 

我們期待透過開放式的設計,誠懇地詮釋這些觀點,

並且以不帶指責的方式來呈現,期許真的為社會帶來反思。

 

也多虧執行端與企劃端的順暢溝通,咻咻的傳接球。

才能讓大家在5/17這天,完整體驗到這個遊戲。

 

 

▌介面中的介面!IG裡的AVG環境建置#

backhand index pointing right

在這一次的互動體驗中,很多人沒有發現UI設計的存在。

🔸但遊戲機制是否能夠成形?

🔸是否給予使用者足夠的引導?

都是遊戲體驗中非常重要的環節,也是玩不玩得下去的關鍵!

 

畢竟遊戲的開始,可是沒有提示玩家怎麼玩的喔!

所以在這裡也想分享一下我們如何轉換介面設計概念,來看待這個專案。

#感恩設計讚嘆設計

 

前面提到本次的概念發想,來自Avicii的IG互動劇情遊戲。但如果有玩過那個遊戲的人,應該看得出來它和《不再恐同》有著極大的差異!包括視覺有著強烈張力,按鈕的指示與故事指引都十分明確,擁有強烈的遊戲氛圍,很能讓人快速進入狀況。

 

但《不再恐同》比起遊戲,乍看更像是條漫。人物表現為單色調,只透過色彩的烘托來達到情緒映襯的效果。

 

在這樣的視覺條件下,如何讓觀眾願意互動、並且快速掌握操作方式?是設計面一大考驗。但我們也不是沒來由的選擇漫畫這樣的風格,畢竟製作時程很短,只能選擇最快能將劇情呈現出來的方式,同時漫畫也十分適合校園的設定。

 

限制一大堆的情況下,如何維持「剛剛好的引導」?

🔸轉化AVG遊戲的對話概念到遊戲中,又不破壞漫畫的氣氛?

🔸既要讓按鈕擁有被辨識、可操作的功能,又不能讓觀眾感到出戲?

是介面設計上需要深思熟慮的問題。

 

《不再恐同》可操作的頁面中有許多地方都是兩個選項,

有時是玩家自身扮演角色的對話框、有時是情境選擇題,

角色之間也有各自的對話,同時要兼顧場景色彩的搭配。

 

所以在選項邏輯建立後,設計師必須透過視覺優先順序,

邊思考選項、邊把文句與情境佈局到適當的位置,

再交付插畫師執行繪製,一步步確認動線流暢,才不致讓劇情走針。

 

進入色稿階段後同樣也需要反覆審視,

再次確認上色之後是否有閱讀混淆的狀況,

持續揪出bug,以進行修正。

 

畢竟IG本身的介面功能才是使用者熟悉的操作,

光透過帳號首頁的12格,就想建立新的介面邏輯,

除了盡可能洞察玩家在體驗中可能會遇到的狀況,

不斷測試修正,也是讓體驗更完整的必經之路。

 

 

▌每一頁都是一個劇場,談視覺張力的設定#

文案與圖像,是社群內容溝通的兩大關鍵。

但,故事的起點,只是平靜校園的一隅。

 

如何溝通概念?如何引起注意?

憑藉一開始的文案顯然是不夠的。

 

為了讓素材更容易觸動人心,設計與插畫策略,我們重新再做了一次設定。推翻了原案可愛風的設定,從既明朗、又詭譎的氣氛展開第一幕,用懸疑與不安的視覺效果,引發觀眾的好奇。

 

🔸使用飽和的色彩,但人物不上色,突顯蒼白。

🔸潑濺式的效果與陰影,帶來不安聳動的氣息。

 

每個畫面的鏡位與氣氛,都是預先由設計師規劃,再交付插畫完成細節彙整與表現,並反覆確認、調整到最適當的狀態。

 

因此畫面中能看到的對比,不僅只色彩,

就連表情、肢體、角色與周遭環境的關係都有張力的設定。

#環境雖然是陪襯但非常重要

#如果仔細看會發現充滿玄機

#這不正是彩蛋的樂趣所在嗎

 

透過每一張圖的細膩安排,我們讓學藝這個角色在不知不覺中,走入玩家的內心,真正帶觀眾進入情境,成為他的同學。有了帶入感之後,玩家也才能真正去思考自己「該怎麼做」、「會怎麼想」。

 

畢竟我們真正要做的不是左右玩家如何思考,而是透過自然的引導,從人性層面帶領大家探討恐同在校園中所造成的霸凌議題。怎樣讓氣氛出來,但又給人感覺恰到好處,是很重要的關鍵。。

 

 

▌尾聲:關於互動內容的思考 #

backhand index pointing right

遊戲上線後,我們在圖文不符FB設計了一個入口型的貼文。

超譯了原本的遊戲,來刺激遊玩,這個素材導流效果非常的好,創造了低成本高點擊的成效。但說穿了,也不過是轉化心理測驗的方式引發好奇。同時透過適度的暗示,達到隱隱約約的遊戲宣傳效果,並回應了最前面提到的一個問題:

 

「觀眾無法透過評論或是遊戲劇情釋出等訊息,

   來判斷自己到底要不要加入這個遊戲。」

 

畢竟是要點擊網址外連到IG,比起單純的介紹文案,我們選擇在遊戲前端加入了這樣的行銷素材,不僅補足遊戲體驗的完整性,也充分給予觀者遊玩動機,大幅促進連結點擊。

#算是我們最後補足整個遊戲機制的小用心♥️

 

_

 

回顧整個專案的設計過程,到上線後的熱烈迴響。

圖文不符很開心有這個機會,在很短的時間內合作完成這個專案。

特別謝謝只要有人的邀約,也恭喜整個團隊努力有了很好的效果。

 

在互動設計非常發達的今天,人們往往會想用更科技的方式來創造互動、或想要依賴新技術來解決問題,無可厚非,也是時代趨勢。圖文不符過去也曾做過很多互動專案,甚至是遊戲,我們總在嘗試中思考更多有趣的可能,並貼合時代趨勢。

 

但從社群的角度來觀察互動,其實又總覺得人與人之間建立交流,好像也沒這麼複雜。真誠的對待「人心」,依舊是恆久不衰的關鍵。

 

無論是捷運百億人次、又或者不再恐同IG互動遊戲,都不是仰賴太複雜的技術來建立互動。而只要能善用機制與動機建立,單純的平面設計也能與觀者之間建立互動,這是我們在執行這個專案中最開心持續努力的地方。尤其當天同婚專法通過團隊成員更是感動得要飛起來呢♥️

 

這就是今天的分享,如果你喜歡這個專案,或有任何建議,歡迎留言給我們喔!

 

 

【工商一下】#

📍回圖文不符看看我們吧

最近上了很多很有趣的新企劃喔

FB這裡走👉http://bit.ly/2IuWkE4

 

📍想跟我們合作有趣的案子? 

也可以帶著你的預算來找我們喔~~

簡訊設計👉 www.simpleinfo.cc

 

📍覺得這個IG案例真是太讚了

不妨到Hahow看看我們的線上課程

IG全攻略👉bit.ly/2WQ8lwx


🔖 專案團隊

行銷企劃原案|只要有人&Ariel

執行企劃|wayin

PM|amanda&chengchang

設計|waverly

插畫|kuokuo


backhand index pointing right


註冊 / 登入後才能留言。