《荒野亂鬥》：讓我看著極致舒服的顏色搭配和UI設計

“當人的視覺受到一定刺激之後，心理就會產生平衡這個色彩的渴望。”

首先說一下，我並不懂顏色搭配以及UI設計，本文內容都是從一個普通玩家的角度為出發點，來觀察《荒野亂鬥》的遊戲設計，文中的觀點、分析和評論都是以“看著舒服”為核心出發點。如果有寫的不對之處，歡迎各路大神留言指正。

01 黑與白的碰撞 讓刺眼的顏色搭配變得格外舒適

滿螢幕鮮豔的紅色、黃色、藍色搭配在一起極其容易讓使用者產生刺眼的感覺，但是在《荒野亂鬥》的各種介面中，這樣的搭配比比皆是。為什麼我又會覺得看著很舒服呢？這主要歸功於“絕對冷暖色”的應用以及無處不在的黑色線條描邊。我們先看下圖。


在《以匠心，致設計》一書中提到了“絕對冷暖色”的概念，絕對冷暖是一眼就能看出來顏色冷暖差異的顏色搭配，上圖中人物與寵物是標準的暖色系，而背景的藍色是偏冷的色系。這樣的搭配可以彰顯出畫風活潑、張揚、誇張的性格，與《荒野亂鬥》的遊戲定位相符合，但是絕對冷暖的搭配極易讓使用者產生視覺疲勞和刺激感，所以需要中間色來對畫面進行冷暖的平衡調節。

我們發現，在這個頁面中無處不在的黑色線條描邊肩負起了“平衡冷暖”的大旗，除了人物與寵物身上的黑色線條以外，這個介面的每一個按鈕、標籤、圖示都有黑色描邊的存在，雖然很細小但卻起到了非常重要的作用。尤其是正中間紅色的人物與紅色的寵物重疊站在一起時，通過黑色描邊的勾勒，讓人物、寵物、背景變得層次分明色調明顯。如果各位看官不明白我在說什麼，那麼我們做一個簡單的小對比，下圖中我將紅色寵物身上的黑色線條去掉，和原圖進行對比，是不是冷暖色的平衡效果就一目瞭然了？


黑色線條很重要，白色線條在《荒野亂鬥》的介面中也有著它獨特的作用。比如下圖中的英雄角色，如同上文所說，在黑色線條的勾勒下，英雄頭像和背景產生了舒適的冷暖色平衡效果。但是，我們再往下看。


當介面出現更多英雄頭像時要如何突出玩家選中的那一個？《荒野亂鬥》的UI設計師給出的答案是比黑色更粗的白色線條。


白色線條不僅起到了平衡色調的作用，和黑色對比起來白色邊框會更加的突出，是不是覺得白色邊框的英雄頭像要比其他幾個英雄頭像明亮了一些？其實這就是黑白對比的效果（當然，這個英雄本身也是小白臉）。

黑白線條的勾勒在《荒野亂鬥》的介面中幾乎無處不在，因為整個遊戲介面都在“絕對冷暖”的顏色衝突中設計完成。顏色可以表達出產品的情感與性格，符合使用者審美習慣的配色可以讓人們心情愉悅，簡單的說就是：“看著舒服。”

02 進入戰鬥後的配色風格 以冷色調為背景用暖色調突出人物

上文說的“絕對冷暖”概念只適合在相對靜態的畫面中使用，《荒野亂鬥》在遊戲正式開始之後就進入了另一個概念——“相對冷暖”的配色中。整個畫面以偏冷色調（藍色、青色）為主，輔以中間色（紫色、綠色）為搭配，暖色調的人物設計是為了突出戰鬥時角色在戰場上的核心位置以及讓技能按鈕更加顯眼。


我們試想一下，如果戰鬥時遊戲的色彩搭配依然以主介面的“絕對冷暖色”為主，多個角色在畫面中高速移動，那麼整個畫面一定是色彩混亂的災難性表現，此時就算是黑色線條PLUS估計也救不回來。

《荒野亂鬥》在戰鬥場景的顏色搭配讓我想起了FC時代的遊戲。那個時候沒有逼真的3D引擎、沒有華麗的滿屏特效，想要讓畫面看起來主次分明，讓玩家看起來心情舒適愉悅，就需要在顏色搭配上多下功夫。比如我們非常熟悉的《魂鬥羅》、《超級瑪麗》等遊戲，都是以冷色或者中色調為主，將暖色調集中使用在了主角、敵人、武器特效、戰鬥效果上面，形成了鮮明的畫面對比。



《坦克大戰》這個遊戲的顏色搭配較為特殊，是少有的以黑為底色的配置。一般黑與白都是以補色的形態出現，就是通過黑白的少量運用來平衡整個畫面的色彩。但是《坦克大戰》的黑背景同樣也收到了很好的效果，紅色的磚牆與綠色的草叢對畫面的顏色進行了互補，各種顏色的坦克在黑背景下也不會出現撞色的情況，在FC時代，這算是一個非常優秀的顏色搭配案例了。


03 讓人舒服的UI設計：玩家需要什麼就有什麼 不明白的地方馬上有提示

我一直覺得好的UI設計就是使用者想找東西的時候馬上可以找到，哪裡不明白馬上就可以看到提示。為了方便大家理解我說的意思，先舉一個簡單的例子，比如我們常見的二維碼掃描功能，大家是不是都遇見過天黑掃描不到的情況？如果你用的是微信，當環境光線過暗時介面會彈出一個手電筒的小圖示，輕輕點選後即可開啟手電筒功能。而在百度APP和百度網盤APP上，光線過暗就不會給出任何提示，你只能一邊口吐芬芳一邊自己在下拉選單中開啟手電筒。UI設計的作用在這裡就展現的很重要。


讓我們把話題再說回《荒野亂鬥》，這款遊戲的UI設計也是讓我覺得很舒服的一款產品。比如說我在解鎖新地圖時系統提示“獎盃不足”，但此時我對獎盃並沒有任何概念，也不知道獎盃在哪裡，所以決定返回主介面尋找“獎盃”。


如上圖所示，回到主介面後我找到了兩個“獎盃”圖示，並且兩個圖示的數量完全不同，此時一臉懵X的我點選了一個“獎盃”圖示，於是彈出了讓我極為舒適的提示標籤，原來一個是獎盃總數，一個是當前英雄獲得的獎盃數量。


如同之前我說的：“UI設計就是使用者想找東西的時候馬上可以找到，哪裡不明白馬上就可以看到提示。”，你可能覺得這種細節微不足道，但是一款好遊戲的UI設計，就是把這些無數個微不足道的細節堆砌在一起，才會擁有讓玩家感覺極為舒適的操作體驗。

UI設計我覺得還有另一個用處，就是放大使用者的感知，比如說通過UI讓玩家的快樂翻倍，這也是細節設計的一種。為了讓大家理解我在說什麼，依然需要先講一個淺顯易懂的例子，賽車遊戲相信大家都玩過，當我們在遊戲裡踩油門的時候會聽見引擎的轟鳴聲，當我們加速的時候會看到遊戲介面出現的時速表。現在，我們在腦海中把引擎的轟鳴和時速表去掉，賽車依然在瘋狂的加速，外面的景色在飛速的後退，但是現在沒有聲音和時速表，是不是覺得開的再快都不夠刺激呢？這就是通過設計放大使用者感知的效果。


再來說說《荒野亂鬥》中放大使用者感知的小細節。當每一局遊戲結束時，玩家會獲得骷髏勳章，就如同其他遊戲結束後獲得了金幣一樣。《荒野亂鬥》的設計是在右下角通過3個地方的“數字+小圖示”組合不斷的提示使用者“你獲得了勳章”，通過數字的不斷增加來提升使用者的快感。



你以為這就結束了？並沒有，當你返回主介面的時候，“骷髏勳章”獲得的特效還會重新再來一次，從右邊的對戰按鈕方向出現，飛到螢幕左側的“金券”按鈕上。這個特效不僅極具視覺效果，並且再次提醒了玩家“你獲得了大量勳章”，同時還會引導玩家點選“金券”按鈕來使用勳章，無形之中告訴玩家，這裡還有個“消耗功能”可以使用。


很多年前，我的前公司也做過一款遊戲，當時運營設計了一個簡單的福利活動，只要手動領取就可以獲得大量稀有、珍貴、價值高的材料。但是一週過去了，玩家對這些活動獎品並沒有什麼興趣，後來我們從玩家的角度出發找到了原因“我們玩這個遊戲3天了，運營活動給的高階材料，怎麼用、有什麼價值我們完全不瞭解，所以我們為什麼要參加活動？”

我覺得《荒野亂鬥》設計上的優秀就在於通過無數細節去“提醒”使用者：道具有什麼作用、可以在哪裡獲得、又可以在哪裡消耗、消耗之後你又能獲得什麼樣的提升。這些事情說起來簡單，但真的要把無數個細小的“提醒”做到遊戲裡，卻是一件非常考驗設計功底的事情，就如同大家都是巨頭，微信掃描知道給使用者一個手電筒，百度就完全不會考慮這方面的需求，差距在哪裡，我們們心理都得有點數。

注：本文很多理論內容來自網易使用者體驗設計中心出品的《以匠心，致設計》實體書中。如果文中有錯誤，書是本好書，是我沒學好。


( 完 )

來源：遊戲客棧x爆款時代
原地址：  https://mp.weixin.qq.com/s/a9EiE4vv6dYiiGMg8j4o3A