案例分析 — 皇室戰爭(Clash Royale),一款集換迷熱愛的遊戲

皇室戰爭》是一款免費的手遊, iOS & Android 雙平台都有。該遊戲衍生自《部落衝突》,融合了交換卡片(CCG=Collectable Card Game)、塔防和多人連線競技遊戲(MOBA=Multiplayer Online Battle Arena)等遊戲元素。由 Supercell 於2016年 3月2日全球發行
Clash Royale 宣傳圖 (圖片來源:Clash Royale

開始寫這篇之前,想先說說為什麼要挑皇室戰爭寫。主要原因有兩個:

  1. 加入遊戲公司將近一年半,想要讓自己挑戰分析其他遊戲的介面優缺點,甚至是探討遊戲當中的想法及 UX ,加上爬了文發現好像在 medium 上面沒有人寫過關於皇室戰爭的設計。
  2. 皇室戰爭大概存在我手機將近兩年之久,沒錯,他發行沒多久後我就一直玩到現在,除了要測試以外都沒有刪除過。我平常玩的手遊不算多,但皇室戰爭卻是每天一定都會玩個幾場以上(記得只有一陣子分數一直掉,所以停了一兩個月XD)。

我相信能讓玩家能有長期的黏著度,一定有他的好和迷人之處,因此想藉由這篇文章跟大家討論分享,看完覺得有不一樣的想法或覺得我寫這文章根本狗屁不同,都歡迎留言指教。廢話不多說,一起欣賞王子那可愛的小馬吧!登登登登登登~(皇室音樂 launching 音效)

遊戲方式 & 主要概念

在開始分析遊戲介面之前,覺得要先簡單的跟大家介紹一下主要的遊戲方式和機制,因為應該有非常多人沒玩過。我覺得一款遊戲能成功,介面的直覺和美觀只是其中一環,更重要的是整個遊戲的架構和核心價值。因此我整理三個部分:

  1. 收集

沒玩過皇室戰爭沒關係,但大家應該都知道“收集”這件事情是很容易讓人上癮的。不只是收集遊戲類的物品,日常物品有很多東西都是被大家收集和收藏的,像是:化妝品、鞋子、郵票、杯子等。(限量品就不在此討論範圍,因為光是“限量”兩個字就是完全另一個層次的誘因(笑))。

記得在我國小到高中的時候,曾經很迷“遊戲王”這部漫畫以及卡片遊戲,而皇室戰爭也是讓玩家在玩的過程中可以收集不同卡牌的手遊。不管是實體卡片或是虛擬卡片,他給予玩家的體驗是類似的 — “通常玩家往往都會想要收集到全部!”

收集 — 這是一個很容易讓所有不同年齡層的人輕易著迷的強大動機,大家之所以會熱衷於收集,是因為往往這些物品都具有“稀缺性”。圖片來源:筆者自攝

皇室戰爭的卡片不僅是收集,還能升級。升級雖然不是什麼很新的概念,但開發團隊將卡片升級與社交綁在一起,就帶來了極佳的效果。

在遊戲中,玩家們可以和自己的好朋友組成公會,公會裡面的成員就會互相交換卡片,各取所需 。交換卡片這項 UX 的運用非常好,每三個小時就能交換一次卡片,如果你沒有準時開啟皇室戰爭回到 app 中,讓你就覺得比其他準時的人吃了虧。這種微妙的比較心理學,雖然大部分人不會太在意,但對那些 hard-core 玩家來說,就非常適合。

2. 塔防

遊戲戰鬥畫面 — 畫面正中間的兩座為主塔。圖片來源:遊戲截圖

在皇室戰爭出現之前,其實已經有很多有名的塔防類遊戲。像是 Blizzard 的 Dota 或是後來 Riot 的英雄聯盟,都是全世界非常著名的塔防類遊戲。但上述的塔防遊戲都是只有一個主要的塔為目的,皇室戰爭則是有主塔和副塔的概念,配合每場最多四分鐘的遊戲時間限制,讓玩家用者衍生出許多戰術和卡牌搭配,想盡辦法要在每場對戰中,比對手拿下更多的塔。<註:這款遊戲中,如果時間到了雙方取的副塔數目一樣則為平手,但如果先拿下對方主塔的人,就能立刻獲勝(不論時間歸零了沒)>。

3. 戰術

除了收集之外,我覺得所有類型的卡片遊戲都有非常重要的一點 — “當玩家收集到一定數量或更多卡片後,他們就能自由組合出想要的戰鬥方式(牌組)”這印證了周郁凱在他的遊戲化八角哲學裡面提到很重要的一點:賦予創造力。每個人都會想要有與眾不同的時候,這時玩家就會把心情投射在卡片的組合裡,絞盡腦汁想創造出自認為最厲害的牌組。

基於這三點主要的概念,遊戲的流程大概是這樣的:

“教學流程 > 正式遊戲 > 解鎖關卡 > 解鎖卡片”

每位玩家在通過教學流程學會基本的對戰操作後,就展開了他們集換卡片的長途之旅。並在邊收集(邊課金)卡片的過程中,不斷打敗其他玩家來賺取分數,不同的分數可以解鎖不同的關卡,為什麼玩家會想要不停的打上高分呢?那是因為每個不同關卡又能解鎖新的卡片。周郁凱在他書中寫過一句話我很喜歡,他說“沒有任何人,是必須去玩任何一款遊戲的”。因此,遊戲的設計者必須想盡辦法讓大家喜歡上他的遊戲,並製造出動力讓他們想要不斷的玩。我覺得以遊戲的核心架構來說,皇室戰爭可以說是做得很好,也確實的打到許多人的胃口。

遊戲介面

大概簡單介紹了遊戲主軸和玩法後,想再談談一些不錯的介面和遊戲體驗的部分。皇室戰爭的美術視覺風格應該算介於寫實 + 風格化之間,並帶有滿明顯的 3D 立體風格(光影層次豐富),介面的風格也是比較偏可愛的寫實風格(可以看到卡牌的木頭背板有材質,或是按鈕都顆了很多層的光影)。

整體的介面架構由五個主要功能構成,分別是:

目前版本的主要頁面。圖片來源:遊戲截圖
商店 / 卡牌 / 主頁 / 社交 / 活動(較舊的版本這一頁為宣傳)

玩家可以利用非常熟悉的左右滑手勢在五個主頁來回切換,而不是大家熟悉的直接點擊 tab bar(當然也是可以,只是我在玩這款遊戲時,主要會先利用左右滑動的手勢)。會這樣設計的原因我覺得主要是因為主頁下方是寶箱欄位,如果 tab bar 只能點擊的話很可能讓玩家常常誤點到寶箱,因此才在五個頁面之間支援左右滑動進行操作。

接下來將針對每個頁面做簡略地介紹:

  1. 主頁(對戰頁面)
主頁介面:早期(左)& 目前(右)。圖片來源:遊戲截圖

其實在大約半年前,皇室戰爭有做過一次比較大的介面修正,其中主頁和活動頁面算是修正比較多的部分。

大家可以看到上圖的比較,主頁做的修正集中在畫面的上方區塊。上方左邊的免費寶箱改變成任務模式(如下圖),我覺得這一點的修正也更豐富了玩家遊戲的週期和生態,猜測應該有讓每日活躍人數(DAU = Daily active user)和 retention rate 數值上升不少。

任務系統的清單。圖片來源:遊戲截圖

舊版的免費寶箱,記得一天好像最多領四次,主要是為了讓玩家能夠常常回到遊戲中領取免費獎勵並進行遊戲 ; 換成任務之後,大家可以從上圖的任務系統清單看到,除了保留了每日免費禮物的欄位之外,也新增了幾組不同的任務讓玩家去完成,完成之後可以再得到不同獎勵,而獎勵的其中一項是任務積分(圖中黃色打勾的 icon),透過累積積分還能換取最上方的大禮(通常是較為稀有的寶箱),這樣的改動讓整體的獎勵機制變得更豐富,也更能吸引玩家每天持續進行遊戲。

另一個改動的點是,舊版的第五個分頁的宣傳,在新版中移到了關卡右側上方的小 icon 位置,我猜這一個改動自然是必要的,畢竟一個新聞活動的宣傳頁面佔據一個分頁真的太浪費。

遊戲最重要的一部分就是如何吸引玩家持續的遊玩,我覺得皇室戰爭整個系統一直在改善這一環,光是首頁的寶箱運用就分成了主要三種收集方式:

  • 免費寶箱(任務系統內 — 每 3 小時可以領一次)
  • 皇冠寶箱(藉由戰鬥中獲得的皇冠數累積的寶箱,每 10 個皇冠可以換取一次,而一天最多只能換到一個)
  • 戰鬥勝利寶箱(主頁最下排的寶箱欄位(最多一次四個寶箱):隨機可以抽到不同稀有度的寶箱分別是:白銀 / 黃金 / 神奇 / 超級神奇 / 傳奇)

光是戰鬥勝利寶箱加上皇冠寶箱,就能讓忠實玩家每天打個至少五場甚至更多,至於戰鬥對手的選擇我不在此篇論述,網路上應該有滿多這類的專家在討論,有興趣的人可以去找來看。不過有趣的一點是,當你連贏4,5 場之後,往往都會連輸個幾場(真是智慧的演算法啊)。目的就是希望讓那些不服輸的玩家們手刀課金購買更多寶石和卡片來升級自己的牌組。

2. 商店

商店介面:早期(左)& 目前(右)。圖片來源:遊戲截圖

商店介面其實沒有太大的更動(猜想可能 pay rate 已經夠好了吧(喂))最大的改正如上圖的右上方,可以看到多了一個吸引消費者掏腰包的幸運卡牌組。其他的架構部分為:

精選卡組(金幣購買) > 寶箱(寶石購買) > 寶石(現金購買) > 金幣(寶石購買)

我非常佩服的一點是, Supercell 的遊戲是完全沒有廣告的,以一個免費下載而且完全沒廣告的軟體,營收卻能衝到全世界手遊前幾名,真的是非常厲害!(做 app 的人大概知道廣告收入起碼佔了一半以上…)皇室戰爭能在沒有廣告情況下做到這種成績,也不得不佩服遊戲核心和促銷時機做的也很恰到好處,常常讓玩家不小心就手滑購買。

其中一個促銷手法叫做 Upselling — 指的是運用較高價的金額來賺取更多利潤的促銷方式。既然是較高的價格,為何玩家還願意買單呢?這時候促銷的出現時機和行銷策略就非常重要。

以皇室戰爭為例,先前文中提到玩家在分數不同的階段時會解鎖不同關卡,這時候商店就會在某些關卡跳出 Upselling 促銷,利用表面亮麗閃閃發光的視覺圖樣向玩家招手,背後卻心想著“肥羊,來吧”,諸如此類的拉扯不斷在玩家(包括我)與 Supercell 之間發生,反映在該公司節節上升的營收額。扯遠了,總之我很喜歡皇室戰爭的促銷方式,還好我幾乎都有忍住(笑)。

3. 卡牌

卡牌分頁我覺得是相對單純的一頁,版本改動後最明顯的差異是由本來的三副牌組增加為五副牌組。其他部分我覺得中規中矩,視覺喜不喜歡很主觀,沒什麼好討論。唯一一點我覺得可以調整的是希望可以自己編輯牌組的名稱,這樣可以讓牌組辨識度更好。而這個調整我覺得也是有需求的,因為 Youtube 上都會有許多人替自己的牌組取名,如果可以編輯名稱則能讓所有玩家直接寫在遊戲中。

4. 社交

社交頁面:尚未加入公會 / 已加入公會後的聊天畫面 / 搜索 / 好友

社交頁面主要提供玩家在遊戲中尋找另一半(不是),是尋找自己的好朋友(甚至是加入陌生人,和他們一起切磋並討論戰術)。介面的架構為:

聊天(自己加入的公會,主要的功能有重播錄像、交換卡片、聊天、與好友進行友誼戰) > 搜尋 > 好友(從社群平台找到也在玩的朋友,並能觀戰)

在一開始進入遊戲時,會呈現最左邊的推薦公會列表,並能讓玩家直接搜尋他們朋友的公會名稱,加入後就會看到第二張圖片的介面。在這介面的視覺層級我覺得也做得很分明,凸顯“交換卡片”這件事情,並讓玩家可以優先執行並賺取遊戲內的金幣及經驗值,延長玩家的使用曲線。

5. 活動頁面

特別活動挑戰賽。圖片來源:部落衝突官方粉絲頁

我個人覺得活動頁面是改版後我最喜歡的新功能,配合團隊的行銷企劃推出許多不一樣的挑戰賽活動,而這些挑戰賽都伴隨著大大小小的獎勵,並在推出新的挑戰賽時發送給玩家推播通知,雖然我無法得知這些推播通知的點擊率好不好,但以我個人經驗我都是會被吸引並回到軟體並開始遊戲。

而當有新的傳奇卡片即將上架前,也會推出該傳奇卡片的挑戰賽,一方面預熱,另一方面也能在推出之前慢慢把那段時間比較沒玩的玩家重新吸引回來。

試著介紹了遊戲的核心和介面,我覺得好的設計真的是做到讓人難以察覺,而是在體驗的過程中就沈浸在裡面。如果你也剛好喜歡皇室戰爭,非常歡迎留言一起討論!

我是 Andy,目前是 Fourdesire 的 UI/UX 設計師,我喜歡搖滾樂,設計,有空畫點小插圖,喜歡和人聊聊腦子裡的想法,如果有任何想聊聊的或是合作都歡迎用 Facebook 或是 email (shinyagrey@gmail.com)與我聯絡 :)
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.