最近正好處在動森棄坑的邊緣，《荒野亂斗》成功引起了“老休閑玩家”-骨頭老師對這款游戲的注意。再加上最近《荒野亂斗》國服在TAPTAP評分跌破5.0，對于《荒野亂斗》這款Supercell測試期最久的項目，用“披荊斬棘”來形容不足為過。但從美術(shù)風格方向來說，最后的美術(shù)版本效果既保持了Supercell的水準，又能突出游戲本身潮酷的風格。

那么咱們今天就來看看，這款差一點就被砍掉的游戲，從立項到上線都經(jīng)歷了什么～

（本文共3905字，閱讀約需6分鐘）

Part.1?美術(shù)風格

玩法決定美術(shù)風格的包裝。

雖然荒野亂斗這款游戲的靈感來源于英雄聯(lián)盟，但玩法上更靠近輕量的吃雞模式。所以從美術(shù)風格來說沿用了Supercell休閑類游戲輕松和明快的美術(shù)風格。從測試到正式發(fā)布超過了一年半的時間，而在此期間，游戲玩法、界面都進行了很大的改動。

大家大概想象不到，早期的《荒野亂斗》原畫是長這個樣子的：

這個是2016年初的科幻小說版本

2016年11月的時候，美術(shù)團隊新來了一位同事，他畫的一些草圖：

把角色改成西部風格。

在這個階段大家可以看到整體的原畫形象概念有了，但不夠討喜和有辨識度。

又換回了西部+科幻畫風，和最終發(fā)布的很接近：

最后的立繪風格：

Supercell游戲風格是有傳承的，體塊感較強的歐美Q版風格，成為了系列游戲的辨識度。

上圖雖然為SUPERCELL游戲中不同角色的立繪，都采用了上大下小的方式，風格非常和諧。

同時很注重角色的剪影刻畫，通過剪影來體現(xiàn)人物特點。

從原畫風格中，可以提煉出運用到UI設(shè)計中的元素。比如突出體塊的風格，保留質(zhì)感，圓中帶方等。這些都可以作為初期UI設(shè)計的靈感，在UI設(shè)計中運用進來。

荒野亂斗游戲UI美術(shù)風格

顏 ?色? ??

在顏色上，大家可以橫向?qū)Ρ绕渌蓍e類游戲。

比如前段時間流行的游戲《動物森友會》，因為游戲調(diào)性是比較放松，所以色系其實更偏自然，讓人從顏色就可以感受到放松。

相對于《荒野亂斗》而言，西部+科幻的概念，讓游戲的色彩相對《動森》來說會濃烈一些。

《荒野亂斗》的顏色層次有3種。

第一種多為系統(tǒng)UI為藍色，和戰(zhàn)斗分為選用了最讓人舒服的藍色為主色調(diào)，這樣既可以更好地突出角色以及操作按鈕，也能讓玩家長時間對著屏幕游戲的同時減輕視覺疲勞。

第二種為玫紅色，戰(zhàn)斗準備狀態(tài)的背景會整體偏暖色調(diào)，更能提升大家的緊張感，準備投入戰(zhàn)斗。

第三種為紫色，主要出現(xiàn)在和亂斗金券相關(guān)界面。畢竟是氪金界面，要的就是尊貴感～

最后大家也能看得出來，因為3種主面板色系多為藍紫色，所以點綴色就都選用了黃色，基本出現(xiàn)在游戲中的通用按鈕，以及進度條這樣的重要控件的運用上。

?LOGO風格 ?

可以看出游戲風格調(diào)性的區(qū)別的變化?；囊皝y斗相比其他的游戲更偏潮流方向。

?視覺元素 ?

從LOGO簡化的骷髏圖標提取出來，運用到很多界面里；UI整體視覺元素會應(yīng)用很多帶傾斜角度的方塊元素，增加動感；

如果大家仔細看《荒野亂斗》標題可以發(fā)現(xiàn)，主標題和副標題的字體比較渾厚，有力，一般在表現(xiàn)機甲，動作，戰(zhàn)斗等會使用。

同時LOGO中還體現(xiàn)了筆畫繼承，在UI中與面板的負型不謀而合。

豎版本線框感較重，并且有較多圓角，整體看上去感覺不太統(tǒng)一，并且會有低幼感。

在新的橫板優(yōu)化了圓角外框，調(diào)整為了和LOGO統(tǒng)一調(diào)性的四邊形。

這樣優(yōu)化的好處是，降低了之前邊框厚重圓潤的感覺，更突出荒野亂斗潮酷的調(diào)性。

另外獲得英雄界面調(diào)整了展示英雄卡槽的大小，這樣可以讓玩家在這個界面中更好的把注意力集中在查看英雄信息上。

品牌元素的貫穿應(yīng)用?

LOGO所帶的負型和元素和各個游戲都有密切聯(lián)系。

《荒野亂斗》LOGO的負型骷髏元素一直貫穿整個游戲。比如金幣，還有亂斗金券都應(yīng)用到了這個元素。

本文在較前段的部分提到了，項目組把世界觀定位為西部+科幻題材。通過搜集資料可以知道：

西部牛仔（West cowboy），是指18至19世紀的美國，在西部廣袤的土地，一群熱情無畏的開拓者。在美國歷史上，他們是開發(fā)西部的先鋒，他們富有冒險和吃苦耐勞精神，因此被美國人稱為“馬背上的英雄”。

從距離咱們比較近的《玩具總動員》動畫，以及美劇《西部世界》和西部牛仔有關(guān)的元素可以獲取到比較能代表西部牛仔的精神--牛仔徽章。

關(guān)于游戲里的主要元素，大家在設(shè)計的時候需要和整個游戲緊密結(jié)合，并且是符號化的存在，大家在使用的時候一定要好好斟酌。

?扁平風格 ?

扁平風格其實直接帶來的好處是為了降低游戲配置需求，從而使得低端機也能暢玩。但對于現(xiàn)在普遍較高配置的手機玩家來說，現(xiàn)在的扁平風格更是為視覺效果服務(wù)的。

? ?BANNER構(gòu)圖??

《荒野亂斗》宣傳圖構(gòu)圖較常出現(xiàn)發(fā)散式構(gòu)圖。一般這樣的構(gòu)圖也可以運用到我們的開始界面中，或是拍臉圖的設(shè)計中。

比如上圖用的就是經(jīng)典的三角形構(gòu)圖，這樣畫面很穩(wěn)定，不容易出差錯。

這張可以看作一個對角線構(gòu)圖。

這張BANNER的構(gòu)圖算是上一張圖的升級版，只是在上圖的基礎(chǔ)上又加入了發(fā)散型的元素，更能突出視覺中心。

這張是X 構(gòu)圖，配合原畫的大透視，同時人物的站位也是有層次的。

Part.2 交互體驗

1.主游戲界面優(yōu)化 ? ?

大家都知道《荒野亂斗》游戲經(jīng)歷過從豎屏到橫屏玩法的改動，豎版交互是為了單手操作誕生的，所以不太適合精確操作；但實際上荒野亂斗還是挺考驗操作的，并且豎構(gòu)圖視野不太好觀測隊友行動。

繼續(xù)來看看之前豎版層次的問題：最上方的數(shù)值信息和時間倒數(shù)較重，同時阻擋了最上方的游戲中的畫面，并且按鈕有點過大過明顯，游戲中角色和信息和背景有點沒有拉開。

再來看看新優(yōu)化的版本：

橫板操作更精確，因為是3V3的玩法，視野能更好的觀測隊友站位，配合操作體驗更好；并且橫板更有畫幅感，不會讓畫面顯得很擁擠，甚至還能在背景場景的表現(xiàn)上做一些趣味性的設(shè)計。同時豎版本最上方的寶石數(shù)量和時間顯示也不會太干擾游戲畫面了。

畫面層次也是影響游戲體驗很重要的一部分。

通過去色，我們可以看到整體背景在一個灰度里，并沒有對游戲中的玩家角色和信息做過多的干擾。包括左右兩側(cè)操作的虛擬搖桿也并沒有對整體游戲畫面做過多的遮擋。

由此我們可以推出主游戲界面里的層次從前往后分別的順序為：1.雙方總進度（或?qū)毷偭浚?.角色+角色頭上信息+角色特效表現(xiàn)；3，左右兩側(cè)虛擬搖桿；4.背景（場景）。

2. 動態(tài)表現(xiàn) ? ?

因為動態(tài)表現(xiàn)這塊涉及到比較專業(yè)的動畫知識，所以骨頭老師找了3個動態(tài)采樣給大家：

看到上面的三個小球繞大球的軌道動圖的例子，元素變化的屬性只有小圓的旋轉(zhuǎn)屬性。但是應(yīng)用了三個不同的動畫曲線。屬性相同但是數(shù)值變化不同就能帶來不同的感受。

這里第一個是應(yīng)用的線性動畫，第二個是比較常見的緩入緩出動畫，第三個就是彈性動畫。

這里的三條曲線就是我們經(jīng)常能夠看到的三大類動畫曲線?；跁r序補間的線性和緩入緩出動畫曲線以及基于物理性質(zhì)的彈性動畫曲線。

01? ?LOADING界面

元素上運用了從LOGO中衍生的徽章元素，動畫上運用的是典型的線形動畫。這樣的動畫表現(xiàn)連貫且較節(jié)省動畫資源。

02? ?信息提示浮層

緩出動畫主要用在了文字信息的反饋上。這樣動畫的好處是，提示但不會對玩家做過度的打擾，不打斷游戲體驗。

上面這種是比較常用的緩出曲線，再來看看緩出的進階版-緩入緩出曲線。

在界面中這種曲線也比較好用。因為在可以合適的吸引用戶的注意力，又比較自然的展示元素內(nèi)容。

01? ?結(jié)算界面

咱們先來看看動畫表現(xiàn)。在動畫中結(jié)算界面這塊運用得比較多的是彈性動畫曲線。

在界面中的使用目前來看是非常普遍的，比如像游戲中的結(jié)算頁面，信息窗口的彈出大多使用了彈性動畫。

大家可以注意到，窗體彈出的那個時刻大于實際的尺寸。這種動畫的好處是在這里就比較好的引導用戶關(guān)注到結(jié)算信息。

戰(zhàn)敗和勝利的結(jié)算表現(xiàn)順序依次為：

1.顯示勝利或戰(zhàn)敗結(jié)果，結(jié)算時動態(tài)表現(xiàn)順序先左上獎杯出現(xiàn)，判定是否增加或減少；

2.然后在榮譽獎杯進度條有所體現(xiàn)；

3.右側(cè)經(jīng)驗值結(jié)算；

4.獎?wù)陆Y(jié)算之后飛到左側(cè)該英雄累積獎?wù)拢?/p>

5.退出結(jié)算界面。

在這塊結(jié)算界面降低了失敗的挫敗感，讓整個結(jié)算流程簡化且流暢，讓大家迫不及待開始下一場游戲。

02? ?開寶箱動態(tài)表現(xiàn)

這塊的動態(tài)表現(xiàn)會讓人有很爽的感覺。

大家注意看寶箱背景的光效表現(xiàn)，還有四周有做壓暗的遮罩，更加能突出讓大家想要點擊這個寶箱。

最后會把所有獲得的碎片和獎勵集合展示，背景用了外發(fā)散的負型做托底，加強了視覺沖擊力。

03? ?獲得新英雄動畫表現(xiàn)

荒野亂斗的獲得新英雄的動畫表現(xiàn)也是很有趣，英雄是旋轉(zhuǎn)著出場的。

看到這里，大家可以有時間的時候自己多體驗下《荒野亂斗》，感受下游戲里的動態(tài)表現(xiàn)哦～

葉子學堂讀書筆記

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

《荒野亂斗》雖然險些被砍掉，但項目組的參與者們并沒有在數(shù)據(jù)下滑的時候放棄，不斷地調(diào)整，做各種游戲優(yōu)化，才能真正上線與玩家見面。

美術(shù)方面：從剛開始的和調(diào)性不太統(tǒng)一的圓角視覺元素，統(tǒng)一了從LOGO到各個界面的視覺元素，體現(xiàn)出了潮酷的扁平風格。同時在顏色上突出了戰(zhàn)斗相關(guān)界面和亂斗金券。

交互方面：做了很大的優(yōu)化調(diào)整，優(yōu)化了主游戲界面的層次問題，同時也增加了很多動態(tài)表現(xiàn)，增加了獲得寶箱和新角色的成就感，降低了結(jié)算界面失敗的挫敗感。

《荒野亂斗》走到現(xiàn)在不容易，走的多遠還是得看玩法以及后續(xù)英雄數(shù)值的平衡。也希望各位大寶貝們，每次體驗游戲時，能從不同游戲身上看到更多美術(shù)風格的優(yōu)缺點以及交互體驗上的優(yōu)化點。

如果大家對《荒野亂斗》這款游戲有什么獨特的見解，

歡迎大家留言，或者加入我們的公眾號“葉子學堂”一起參與討論鴨～我們下期再見

附錄

1、這里有動畫采樣使用的源代碼：https://gist.github.com/chriseidhof/f1bfea3b26ed23c26f2b016a2d618ba4

2、更多類型的曲線可以參照這里：https://easings.net/?，詳情頁有比較詳細的效果應(yīng)用

3.部分動畫表現(xiàn)圖片和文字參考了《以荒野亂斗為例，一文搞懂界面動畫曲線》，作者騰訊PPdesign