大家好，我是 Jack，近期最火的打卡旅游景點是？

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

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

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

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

言歸正傳，認識我的的朋友都知道我是一名游戲研發(fā)美術，也是一名 UI 導師。

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

·

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

·

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

游戲原畫部分：

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

·

·

·

·

·

·

游戲 UI 界面：

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

·

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

·

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

《哈利波特》游戲設計

關鍵字：魔法、擬物化、空間感、歷史感、光影動效

設計載體：書籍、布條、花紋、墨滴、卡牌

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

·

·

·

·

·

·

·

·

·

動效欣賞：

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

于是，有故事、好玩的界面設計和玩家交互更容易獲得消費者的芳心，評價得分也高了。

這款游戲最主要的就是卡牌，我們先來看看卡牌的動效設計吧，大家仔細看看，每個動效是不是都有個小故事，有莫有電影的代入感？

·

吼叫信

·

小蜘蛛群

·

氣象咒

·

雪球咒

·

八眼巨蟒的毒液

·

康沃爾郡小精靈

·

腫脹藥水

·

門鑰匙

·

巨怪

·

盔甲護身

·

充氣咒

·

光輪 2000

·

火螃蟹

·

冰凍咒

高階卡牌動效：

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

·

火焰熊熊

·

鳥蛇

·

霹靂爆炸

·

時間轉換器

·

韋斯萊煙花

·

游走球

·

石礅出動

·

歷火

說下設計：

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

因為游戲 UI 往往對游戲和玩家的影響力巨大，一套好的游戲 UI 設計和圖標對項目非常重要，尤其是手游項目，而一個能夠做出高品質(zhì)，獨特風格的設計師待遇往往也是超級 nice 的。說到 UI 高手，整個游戲行業(yè)就那幾個，大廠都要搶所以待遇就水漲船高了唄。

1. 創(chuàng)建角色

·

場景化的界面設計，巫師世界的元素，加強了魔法世界的代入感，并符合巫師世界的設定。

2. 捏臉

·

3. 個人信息

·

·

4. 我的搭配

·

5. 抽卡界面

·

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

6. 戰(zhàn)斗界面

·

7. 召喚伙伴

·

好了，看了這么多小動畫大家對游戲已經(jīng)有個大致的認知，接下來阿杰想說點美術設計方面的知識，和大家一起分享。

案例分析：

1. 顏色對游戲 UI 的重要性

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

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

·

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

·

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

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

這個就是今天分享的一個小知識-顏色對于游戲 UI 的重要性，大家學會了可以拿下面圖片練習下哦~

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

·

答案：

界面用米白色紙張作為載體，突出了人物頭像方便玩家識別自己游戲中形象，還是弱化了標題布條，讓其層次變?nèi)?，不搶重要信息。（大家有沒有發(fā)現(xiàn)紙張上面細節(jié)設計？）

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

感興趣小伙伴可以做做練習，鞏固下知識點。

練習 1：

·

第五人格界面

·

哈利波特界面

練習 2：

·

第五人格界面

·

哈利波特界面

練習 3：

·

第五人格界面

·

哈利波特界面

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

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