《原神》9月28日正式上線啦～

懷揣著激動(dòng)的小心心，點(diǎn)開了《原神》的游戲一探究竟～今天咱們不聊《原神》和《塞爾達(dá)傳說：曠野之息》之間究竟誰是爸爸，誰是弟弟，

今天咱們重點(diǎn)來和大家聊一聊，《原神》美術(shù)風(fēng)格和UI視覺包裝這塊是怎么做的～

Part? 1

美術(shù)風(fēng)格

1.世界觀架構(gòu)決定美術(shù)風(fēng)格

《原神》世界觀：

游戲發(fā)生在一個(gè)被稱作“提瓦特”的幻想世界，在這里，被神選中的人將被授予“神之眼”，導(dǎo)引元素之力。玩家將扮演一位名為“旅行者”的神秘角色，在自由的旅行中邂逅性格各異、能力獨(dú)特的同伴們，和他們一起擊敗強(qiáng)敵，找回失散的親人——同時(shí)，逐步發(fā)掘“原神”的真相。

2.游戲立繪

作為一個(gè)有情懷的二次元公司，米哈游延續(xù)了崩3一貫的立繪風(fēng)格。立繪角色有可鹽可甜的小姐姐，可奶可狼的熱血少年。

同時(shí)在很多立繪中，我們可以看到原畫也很好地結(jié)合了國風(fēng)和歐式風(fēng)格時(shí)裝（當(dāng)然也是因?yàn)橛螒蚶镉兄惺胶蜌W式風(fēng)格的城市），豐富的“多樣性”可以說牢牢抓住了二次元玩家的心。

看著這么精致的立繪，不多充一波648對不起“葉子學(xué)堂老二次元”這個(gè)稱謂！?

3.世界觀架構(gòu)決定美術(shù)風(fēng)格

在這里繼續(xù)吹一波米哈游對于角色立繪形象在游戲中建模的還原，在這里也看到崩3里人物模型這塊的積累。

但美中不足的是，人物立繪和野外怪物風(fēng)格部分不統(tǒng)一。

在場景里大家可以腦補(bǔ)一下一個(gè)二次元的角色和一個(gè)比例三次元的狗子在一起四目相對是什么感覺。

4.游戲場景

《原神》游戲里的天氣系統(tǒng)可以讓同一個(gè)場景呈現(xiàn)出不同的光影變化，這點(diǎn)還是很贊的。

因?yàn)槭澜缬^是幻想風(fēng)格，所以從場景中我們可以看到很多中世紀(jì)風(fēng)格的羅馬立柱，以及長廊。

Part? 2

游戲視覺元素提煉

1.神之力星型要素

大家注意到小姐姐頭上的星型標(biāo)志了沒。這個(gè)是“神之眼”，導(dǎo)引元素之力。咱們可以看到這個(gè)星型元素在UI中作為一個(gè)核心要素被高頻使用。

還有我們能看出有對崩3風(fēng)格做延伸。

2.LOGO

LOGO本身不是很復(fù)雜，還是有延續(xù)神之力的星型視覺要素作為主要的辨識度。

3.BANNER+宣傳圖

BANNER風(fēng)格和現(xiàn)在流行的扁平風(fēng)格越來越接近，辨識度來自于米哈游的原神主要立繪和角色。

立繪結(jié)合不同角色的英文名作為負(fù)型作為主要的設(shè)計(jì)內(nèi)容，同時(shí)再結(jié)合立繪本身的色系，拓展作整體包裝。?

4.ICON

因?yàn)槭腔孟胧澜缬^的風(fēng)格，主界面的ICON部分多采用扁平風(fēng)格。在這里我們可以看到很多對稱式圖標(biāo)，翅膀元素，武器和魔法效果等。

物品類的圖標(biāo)多為精致輕薄的日系圖標(biāo)風(fēng)格，因?yàn)樾枰m配不同頁面的展現(xiàn)。

精致的圖標(biāo)在搭配相對而言虛空類型的星空背景來說是不可或缺的存在。

Part? 3

UI拓展和應(yīng)用

整體來說，UI的調(diào)性扁平風(fēng)格，還是延續(xù)“神之眼”的星型拓展出適合整體UI包裝的星空主題。

1.星空主題包裝/“神之眼”星型大量運(yùn)用

在這里我們可以看到，抽卡邊框的形狀很接近這樣歐式教堂窗戶邊框的風(fēng)格，同時(shí)也結(jié)合了“神之眼”元素來做包裝。這樣可以讓抽獎(jiǎng)系統(tǒng)更具有魔幻的神秘色彩。?

2.魔法書/紙材質(zhì)延伸

在類似委托人物，成就系統(tǒng)UI都運(yùn)用了魔法書和紙張這樣的設(shè)計(jì)，可以更好的承載更多信息。

并且用魔法書這樣的視覺包裝可以讓UI更具有場景化，讓玩家更有代入感～

3.毛玻璃效果

無論是主機(jī)風(fēng)格，還是近幾年市面上流行的二次元手游風(fēng)格，多喜歡采用類似的毛玻璃效果。

這樣可以很好的為程序節(jié)省資源，并且會更突出前景交互內(nèi)容，讓頁面看上去非常整體。

毛玻璃效果也很好地為國風(fēng)和歐式界面做了很好的轉(zhuǎn)換，讓國風(fēng)活動(dòng)出現(xiàn)的時(shí)候不會覺得很突兀。

4.魔法陣和時(shí)間界面

界面里還有很多齒輪和魔法陣結(jié)合的設(shè)計(jì)元素，讓人會聯(lián)想到塔羅牌卡牌背面的裝飾圖案風(fēng)格。

這是骨頭個(gè)人很喜歡的一個(gè)界面，在這里配合右側(cè)的時(shí)間的指針調(diào)整，左邊會對應(yīng)出現(xiàn)不同天氣的變化。

5.抽卡界面BANNER化

抽卡界面的設(shè)計(jì)更像一整張BANNER，這樣可以加強(qiáng)抽卡頁面在游戲中的對比，同時(shí)也方便之后高頻次替換資源。

Part? 4

動(dòng)效表現(xiàn)

1.抽卡動(dòng)效

因?yàn)槭请唇鸾缑?，所以這里的UI動(dòng)效表現(xiàn)是視覺沖擊力最強(qiáng)的部分。一般十連抽的時(shí)間會控制在30秒之內(nèi)，給足了氪金玩家加強(qiáng)抽卡的成就感，同時(shí)也清晰地給玩家展示了獲得的武器道具和角色。

整個(gè)抽卡動(dòng)效分為3個(gè)階段：

1. 在這里結(jié)合了一個(gè)很動(dòng)畫式的表現(xiàn)形式，從天空中墜 ? ?落的隕石發(fā)出強(qiáng)烈的光柱即將到達(dá)地面。

2.展示單獨(dú)獲得的物品和角色，武器展示和角色卡牌展示動(dòng)效和設(shè)計(jì)上有一些區(qū)分。

3.整體展示獲得物品，在這里優(yōu)先突出展示四星或者更高級的角色卡牌

2.物品升級動(dòng)效表現(xiàn)

在這里整個(gè)物品升級表現(xiàn)時(shí)間非常短，只有3秒，比較適合高頻次的升級操作。

3.烹飪特效

在原神里有一個(gè)烹飪系統(tǒng)，在這個(gè)進(jìn)行烹飪操作的時(shí)候，會有一個(gè)很有意思的烹飪小動(dòng)畫。

4.系統(tǒng)UI動(dòng)效

在這里場景里的人物角色會配合不同的界面做一些動(dòng)效反應(yīng)。

轉(zhuǎn)場動(dòng)效

物件和彈出框多為放大縮小的動(dòng)效形式，背景的星空有做輕微的動(dòng)效結(jié)合。

不同元素英雄切換時(shí)整體背景色調(diào)也會跟隨著切換。

選中態(tài)動(dòng)效表現(xiàn)

選中態(tài)基本標(biāo)配亮黃色和藍(lán)色，這樣更容易讓大家識別到選中態(tài)。選中態(tài)動(dòng)效較輕量，和氪金動(dòng)效形成鮮明對比。

2020/09/28?

葉子學(xué)堂讀書筆記

骨頭老師為大家復(fù)盤一下今日份知識點(diǎn)噢～

《原神》之所以受到大家這么多關(guān)注，肯定是有過人之處：

1. 美術(shù)風(fēng)格：精美的二次元立繪，高度還原的角色模型以及游戲場景符合二次元玩家的需求；

2. 在游戲視覺元素中提煉出了“神之力”的星型視覺要素，應(yīng)用到LOGO，BANNER，ICON之中；

3. UI拓展和應(yīng)用：我們可以看到運(yùn)用了大量星空主題包裝，魔法書/紙材質(zhì)延伸，毛玻璃效果等；

4. 動(dòng)效表現(xiàn)：抽卡界面動(dòng)畫式表現(xiàn)，物品升級輕量表現(xiàn)，烹飪特效有趣，系統(tǒng)UI動(dòng)效通用。

   
   

   總? ? 結(jié)

《原神》的確神似《塞爾達(dá)傳說：曠野之息》，但他同時(shí)也擁有幾乎是國內(nèi)游戲開發(fā)商最高的技術(shù)實(shí)力，無論是從美術(shù)渲染，還是引擎運(yùn)用，《原神》都可以稱得上是國內(nèi)頂級的。

整體來說《原神》在整體的美術(shù)視覺包裝上，還是抓住了“神之眼”這個(gè)主要的核心拓展出基礎(chǔ)視覺元素，以及延伸出星空背景的理念。拋開一些玩法上的硬傷，其實(shí)很多ICON設(shè)計(jì)，抽卡動(dòng)效設(shè)計(jì)的表現(xiàn)還是值得大家學(xué)習(xí)的。

希望各位大寶貝在體驗(yàn)游戲的時(shí)候，謹(jǐn)慎輕噴。我們需要做的應(yīng)該是更用一分為二的辯證法去看待，看到游戲中不足的，也要看到游戲中的優(yōu)點(diǎn)，可以讓我們提升的部分，變成一個(gè)更厲害的美術(shù)爸爸！

最后，提前預(yù)祝大家中秋節(jié)和國慶節(jié)雙節(jié)快樂～