值得學(xué)習(xí)！人氣爆棚的「哈利波特」游戲美術(shù)特點(diǎn)分析

大家好，我是 Jack，近期最火的打卡旅游景點(diǎn)是？

北京環(huán)球影城有莫有，是不是常有小伙伴刷視頻有威震天、哈里波特、變形金剛、小黃人等……

這座修建近 7 年，耗資超數(shù)百億，號(hào)稱北方最大游樂公園的環(huán)球影城終于來了，共設(shè)有七大主題景區(qū)，功夫熊貓蓋世之地、變形金剛基地、小黃人樂園、哈利波特的魔法世界、侏羅紀(jì)世界努布拉島、好萊塢和未來水世界，同時(shí)設(shè)有 37 個(gè)騎乘娛樂設(shè)施及地標(biāo)景點(diǎn)，和 24 個(gè)演出項(xiàng)目，另外這也是中國首個(gè)環(huán)球影城哦。

我最喜歡的就是哈里波特景區(qū)了，好多魔法互動(dòng)元素，晚上還能看燈光秀，美極了。

這個(gè)景區(qū)的建筑都很有特色，也有很多好玩的小道具，累了還能去戶外的魔法商店給朋友們帶點(diǎn)小禮物。

言歸正傳，認(rèn)識(shí)我的的朋友都知道我是一名游戲研發(fā)美術(shù)，也是一名 UI 導(dǎo)師。

今天給大家特別帶來老東家網(wǎng)易最新推出的一款游戲《哈利波特》，這款游戲上線和北京環(huán)球影城開業(yè)時(shí)間同為 9 月份，我相信這肯定不是巧合，是緣分哈！

《哈利波特》魔法覺醒項(xiàng)目在 2017 年立項(xiàng)研發(fā)，由美術(shù)主管：宋鵬；美術(shù)經(jīng)理：麻亞光負(fù)責(zé)，這款游戲歷時(shí)了 4 年多的研發(fā)打磨，品質(zhì)超棒，和阿杰一起來看看上線后的游戲美術(shù)截圖和動(dòng)效吧。

游戲下載 APP-ICON 是經(jīng)典的男主角

游戲原畫部分：

非常注重還原游戲的內(nèi)容和角色，看到這些設(shè)定就有一種想玩的感覺，畫面也很有親和力，像是看一部動(dòng)畫片。

游戲 UI 界面：

整個(gè)游戲過程注重電影情節(jié)，會(huì)經(jīng)歷很多事件，然后會(huì)獲得很多技能和怪物卡牌，同時(shí)陸續(xù)解鎖一些新的功能系統(tǒng)；整個(gè)玩法繼承了網(wǎng)易一貫的游戲特點(diǎn)，通過卡牌或是技能來戰(zhàn)斗，網(wǎng)上類似游戲玩法都類似只是美術(shù)表現(xiàn)不同，畫面一般都是俯視角 2.5D 或者是平視角，這樣體驗(yàn)更好，戰(zhàn)斗視野開闊。

豬廠的游戲美術(shù)品質(zhì)和風(fēng)格是最大看點(diǎn)，也是賣點(diǎn)，相比鵝廠我們沒有流量渠道，只能通過好的游戲品質(zhì)去打動(dòng)消費(fèi)者，為了提高美術(shù)，平時(shí)咱們研發(fā)沒少加過班，挨過罵，可見大佬對(duì)項(xiàng)目要求多嚴(yán)格。

通常我們修改設(shè)計(jì)稿，一次改個(gè)十多遍太正常了，這也是我們美術(shù)設(shè)計(jì)人員比較看重的，畢竟我們本職工作就是做好視覺設(shè)計(jì)，比如上面阿杰參與的《海島紀(jì)元》項(xiàng)目，其中優(yōu)化的 2 個(gè)界面我來回每個(gè)修改了 10 多次最終才基本定稿，讓制作人滿意。

《哈利波特》游戲設(shè)計(jì)

關(guān)鍵字：魔法、擬物化、空間感、歷史感、光影動(dòng)效

設(shè)計(jì)載體：書籍、布條、花紋、墨滴、卡牌

如果大家仔細(xì)看，會(huì)發(fā)現(xiàn)我上面說的這些設(shè)計(jì)載體貫穿了整個(gè)游戲 UI 界面和圖標(biāo)的設(shè)計(jì)，很多界面都有魔法書和魔法相關(guān)道具，這里也還原了小說故事背景。

動(dòng)效欣賞：

隨著美術(shù)的發(fā)展，近年來各大游戲廠商對(duì)品質(zhì)的要求提升很高，這時(shí)候 UI 設(shè)計(jì)就到了天花板。那么，怎樣才能更好的打破這個(gè)高度呢？答案就是讓設(shè)計(jì)動(dòng)起來！這樣比單純是一個(gè)靜態(tài)的圖片更有畫面交互和張力；

于是，有故事、好玩的界面設(shè)計(jì)和玩家交互更容易獲得消費(fèi)者的芳心，評(píng)價(jià)得分也高了。

這款游戲最主要的就是卡牌，我們先來看看卡牌的動(dòng)效設(shè)計(jì)吧，大家仔細(xì)看看，每個(gè)動(dòng)效是不是都有個(gè)小故事，有莫有電影的代入感？

吼叫信

小蜘蛛群

氣象咒

雪球咒

八眼巨蟒的毒液

康沃爾郡小精靈

腫脹藥水

門鑰匙

巨怪

盔甲護(hù)身

充氣咒

光輪 2000

火螃蟹

冰凍咒

高階卡牌動(dòng)效：

通常美術(shù)在設(shè)計(jì)時(shí)會(huì)更有趣、時(shí)間長、畫面震撼力和動(dòng)效區(qū)域面積比低級(jí)卡牌更大，效果華麗。

火焰熊熊

鳥蛇

霹靂爆炸

時(shí)間轉(zhuǎn)換器

韋斯萊煙花

游走球

石礅出動(dòng)

歷火

說下設(shè)計(jì)：

通常好的設(shè)計(jì)都是需要反復(fù)修改才會(huì)有的，從 0 開始的過程很漫長，如果在之前成功的項(xiàng)目基礎(chǔ)上繼續(xù)完善會(huì)更加容易拿高分、成功，所以小伙伴可能發(fā)現(xiàn)了很多游戲的交互、玩法、類型都差不多，唯一區(qū)別就是美術(shù)風(fēng)格和題材了，有的項(xiàng)目也許原畫都是一樣，僅僅是換了下游戲 UI 風(fēng)格和設(shè)計(jì)，整個(gè)項(xiàng)目品質(zhì)就有了很大飛躍，這也是近幾年游戲 UI 異常吃香，待遇持續(xù)走高的原因。

因?yàn)橛螒?UI 往往對(duì)游戲和玩家的影響力巨大，一套好的游戲 UI 設(shè)計(jì)和圖標(biāo)對(duì)項(xiàng)目非常重要，尤其是手游項(xiàng)目，而一個(gè)能夠做出高品質(zhì)，獨(dú)特風(fēng)格的設(shè)計(jì)師待遇往往也是超級(jí) nice 的。說到 UI 高手，整個(gè)游戲行業(yè)就那幾個(gè)，大廠都要搶所以待遇就水漲船高了唄。

1. 創(chuàng)建角色

場(chǎng)景化的界面設(shè)計(jì)，巫師世界的元素，加強(qiáng)了魔法世界的代入感，并符合巫師世界的設(shè)定。

2. 捏臉

3. 個(gè)人信息

4. 我的搭配

5. 抽卡界面

抽卡系統(tǒng)采用一個(gè)圖書館的場(chǎng)景表現(xiàn)，場(chǎng)景里還可以看見同樣來圖書館的其他玩家，營造魔法學(xué)院的氛圍感。

6. 戰(zhàn)斗界面

7. 召喚伙伴

好了，看了這么多小動(dòng)畫大家對(duì)游戲已經(jīng)有個(gè)大致的認(rèn)知，接下來阿杰想說點(diǎn)美術(shù)設(shè)計(jì)方面的知識(shí)，和大家一起分享。

案例分析：

1. 顏色對(duì)游戲 UI 的重要性

下面這個(gè)界面各方面細(xì)節(jié)都做的很到位，花紋，光影，自然度，配色，層級(jí)關(guān)系等，大家可以看看。

一般游戲中比較重要的資源都會(huì)給一個(gè)顏色，對(duì)比和飽和度都會(huì)相對(duì)比較高，這樣可以更加容易突出層次效果，也讓玩家方便查找，或者是對(duì)界面進(jìn)行交互操作。

比如上圖界面右邊的標(biāo)題布條就沒有很重要，也不具備交互性，于是設(shè)計(jì)師就故意弱化讓其沒有顏色，讓和書籍色彩類似，這樣降低布條的重要性和層次關(guān)系，把重要的層次都給有顏色的信息內(nèi)容。

這邊阿杰嘗試去修改了下配色，我把左邊的徽章弱化了飽和度，強(qiáng)化了右邊的標(biāo)題布條。

大家有沒有發(fā)現(xiàn)整個(gè)界面的視覺中心立馬集中到紫色的布條上了呢？

這個(gè)就是今天分享的一個(gè)小知識(shí)-顏色對(duì)于游戲 UI 的重要性，大家學(xué)會(huì)了可以拿下面圖片練習(xí)下哦~

按照上面我分享的設(shè)計(jì)技巧，大家看看下圖這個(gè)界面我們最想表現(xiàn)得是哪些內(nèi)容？然后這塊區(qū)域的層級(jí)關(guān)系又是如果處理的呢？

答案：

界面用米白色紙張作為載體，突出了人物頭像方便玩家識(shí)別自己游戲中形象，還是弱化了標(biāo)題布條，讓其層次變?nèi)酰粨屩匾畔ⅰ＃ù蠹矣袥]有發(fā)現(xiàn)紙張上面細(xì)節(jié)設(shè)計(jì)？）

最后，我還想說下《第五人格》游戲，這款游戲整體的成績也是非常不錯(cuò)的，而且玩家評(píng)價(jià)也很高，現(xiàn)在放幾張圖，大家看看和今天阿杰介紹的《哈利波特》游戲有哪些共同點(diǎn)和不同點(diǎn)，你學(xué)會(huì)了哪些游戲 UI 設(shè)計(jì)套路？

感興趣小伙伴可以做做練習(xí)，鞏固下知識(shí)點(diǎn)。

練習(xí) 1：

第五人格界面

哈利波特界面

練習(xí) 2：

第五人格界面

哈利波特界面

練習(xí) 3：

第五人格界面

哈利波特界面

是不是有一種開竅的感覺？

我相信只要認(rèn)真去觀察和做練習(xí)，大家都可以做出很棒的界面，其實(shí)很多游戲的游戲 UI 界面設(shè)計(jì)都難免會(huì)有些共同點(diǎn)，但一款優(yōu)秀的游戲會(huì)在參考基礎(chǔ)上面打磨的更完善，增加豐富細(xì)節(jié)，哈里波特這款游戲做到了。

好的，限于篇幅我就不聊太多了，如果有喜歡交流游戲設(shè)計(jì)，喜歡各類設(shè)計(jì)教程的小伙伴請(qǐng)關(guān)注我的公眾號(hào)：JACK 藝術(shù)工作室