淺析原創動漫作品手游《Battle Glory》中的UI設計

張生博

【摘 要】智能移動設備普及且性能大幅提升的今天，在移動平臺進行多人在線戰術競技游戲已經不會受一些硬件的制約，節奏快、打擊感強、畫面炫酷，這些雖然在游戲性上滿足了玩家，但很多游戲卻忽略了游戲UI的重要性。本篇論文通過產品構思、美術風格、交互設計、界面設計等幾個方面，闡述了IPad MOBA游戲《Battle Glory》的UI設計過程，以及設計過程中帶給我的心得和感悟。

【關鍵詞】UI設計；交互；界面設計；用戶體驗

中圖分類號：J524 文獻標志碼：A 文章編號：1007-0125（2016）08-0179-02

智能設備性能的不斷提升，讓手機游戲的類型變得更加多樣化，以前只能在PC端游戲的多人在線戰術競技游戲（Multiplayer Online Battle Arena，以下簡稱MOBA游戲），現在也被搬上了移動平臺，讓大家可以方便快捷地享受競技游戲的樂趣。跟隨移動端MOBA游戲的流行風潮，我結合已有的角色素材，并參考市面上已有的MOBA游戲美術風格，創作了一套力求功能與美觀并存的游戲UI。

一、《Battle Glory》UI的構思與美術風格

近幾年，MOBA類游戲終于不再被限制在PC平臺上，在移動平臺也打得火熱。不同于PC端，在移動端進行游戲，每局時間短、節奏快，手指直接控制人物跑動和施放技能，操作感強。不過正因為游戲本身可玩性很高，所以大家往往都忘了在游戲UI上花費功夫。我自己也玩了一些手機和平板電腦平臺的MOBA游戲，發現大部分游戲的UI在功能性和交互性上都不夠清晰，新人經常出現找不到所需功能的情況，導致用戶體驗很差。而且UI的界面設計也做的很簡單，沒有內容和細節。因此，我決定設計一套功能明了易懂且具有美觀性的游戲UI。

一般MOBA類游戲的人物、場景都是3D寫實的，且這類游戲又屬于戰斗類的游戲，這就決定了它配套的UI不能太過華麗復雜。我參考了市面上的一些MOBA游戲，證明確實如此，因此我的設計也會遵循這一原則。在我的設想中，我要做的是一款歐美未來架空背景下的MOBA游戲，我認為符合這個背景的特點有：歐美風、科技感、簡潔、藍色、綠色、光芒等。通過查閱資料、觀察真實游戲，我發現歐美風的UI，除了超寫實的風格以外，基本都以簡潔大氣為主，不會太過于突出，卻也有存在感，會有細節與質感在其中，這樣的設計會給人精致細膩的感覺。游戲背景設定在未來，那個時候的科技肯定已經非常發達，所以我認為科技感的元素是必不可少的。在顏色上，我會聯想到藍色、綠色，質感上，我聯想到的是金屬、發光等等，這些都比較符合我所構想的美術風格元素。

二、《Battle Glory》的UI設計

交互設計是產品UI設計中的第一步，它的目的是提高用戶體驗，使產品更好用，功能更符合人性化邏輯。交互設計是界面設計的內在框架，只有先確定好UI的交互設計，才能進行后續的界面設計。一個沒有經過交互設計的產品，很可能為了解決一個問題而創造出更多的問題。因此，交互設計是產品UI設計過程中不可或缺的一環。在交互設計上，我為了將功能集中統一，選擇了頂部通用信息欄的形式，將主界面、英雄選擇界面、英雄購買界面、皮膚購買界面、編輯天賦界面以及資源信息和個人信息整合在一起。信息欄是固定的，需要哪一個功能，直接點擊，畫面即可跳轉到相應的功能界面。在作品的皮膚購買界面中，左側為英雄選擇，此處是將英雄選擇界面的英雄頭像部分拿來，改為縱向弧形排列，依然是“近大遠小”的原則，創造空間感，通過手指上下滑動進行選擇。右側信息欄，顯示所選的皮膚名稱、文字介紹、屬性加成，以及同一英雄不同皮膚之間的切換和購買按鈕。相關信息集中展示，可以有效減少玩家的無用閱讀。

戰斗界面不屬于單純的功能性界面，但它的交互卻需要考慮玩家操作習慣、信息整合、不能影響戰斗等多種因素。我把一些必要的信息：敵友方頭像、比賽用時、殺敵數、死亡數、快捷語、金錢、小地圖等都放在最明顯的上方。下方中央則是5個技能按鍵，點擊即可。技能按鍵的布局是根據游戲玩法而定的，大部分戰斗類游戲的布局是左下角虛擬方向搖桿，右下方普攻鍵和技能鍵，這是最符合人們使用手機的習慣的布局。我的設定是直接點擊屏幕移動和普通攻擊，省略掉了方向搖桿和普攻鍵，將技能鍵居中擺放至下方，技能右側則為發送信號、比賽信息、商店按鈕，方便用戶使用。

界面設計是交互設計的外在表現，它與交互設計緊密結合才組成了UI設計。成功的界面設計，就是能讓用戶一眼就看到最重要的東西，而不重要的、不應該被注意到的部分，結合交互設計，可以將其弱化，甚至是直接刪掉。從根本上講，界面設計的工作重點，在于如何處理和組織好視覺元素，從而有效傳達出行為和信息。視覺組成中的每一個元素都有一些基本的屬性，比如形狀和顏色等等，但是幾乎沒有哪個屬性具備與生俱來的意義，是各種視覺元素、各個屬性的不同和相同搭配組合，才讓界面具備了意義。

界面設計中的面板我采用了半透明毛玻璃質感，并添加了內部細節，包括花紋、紋理等，讓它更加豐富。選用毛玻璃質感，是因為它的朦朧感，容易營造空間氣氛，同時也具備了不搶主體又體現質感的特質。按鈕我采用的是金屬質感長方形按鈕，更加突出，讓按鈕成為界面中最重要的存在。

UI中的功能圖標我采用扁平化圖形的處理方式，配以淡淡的外發光，讓其融入整體，這種方式不僅不會增加玩家的思考成本，在制作方面也可以以最快的速度達到最好的效果。戰斗界面的功能圖標與其他界面的相比略有不同，殺敵數、死亡數、金錢這三個比較重要的圖標，要清晰明顯，因此純色的效果就很好。作為不是很重要的按鈕，快捷語、發送信號、比賽信息、商店按鈕我都做了降低透明度的弱化處理，這樣讓其存在且不影響視線。

三、《Battle Glory》 UI設計中的設計規范

UI設計需要創意與創新，但不是天馬行空，想怎么做就怎么做，而是要遵循一定的硬性規范。因此在制作初期，我查閱了很多資料，并玩了一些游戲進行參考。移動設備機型眾多，屏幕大小也是各不相同，因此移動端UI的設計，首先最需要考慮的就是適配問題，其次就是控件的比例、間距的問題。關于分辨率，一定要便于屏幕適配。常用的適配方法是按照960*640px的尺寸，等比放大或縮小，用圖案填充左右或上下多出的部分。因為MOBA類游戲在大一些的屏幕上才會有更佳的體驗，因此UI設計定位為IPad版本，分辨率直接采用IPad分辨率，2048*1536px。

UI中的控件，遵循了所有切圖資源均為偶數像素的原則，并考慮到了界面中同類功能資源復用的問題。這里要特別注意的控件是按鈕，其大小顏色等屬性應與重要程度掛鉤。我的作品中首要按鈕最大，為120px，且顏色為最鮮亮的金黃色，普通大按鈕90px，往下依次是中按鈕70px、小按鈕60px，最小按鈕也按照規范不小于44px。間隔是非常重要的界面構成要素，各控件之間的間隔類型不要太多，這樣就可以做出秩序井然的界面效果。當然，在此基礎上進行適當的變化，可以營造出活潑有趣的效果。我在選擇英雄界面和皮膚購買界面中英雄頭像的處理，就是受到了這點的啟發。

在UI設計的前期，我遇到的最大問題就是比例問題，比例失調讓界面怎么樣都漂亮不起來。創作的過程是個很奇妙的過程，在自己陷入瓶頸的時候，與他人進行討論通常都會讓事情出現轉機，畢竟設計就是為了方便大家的，集思廣益才更容易解決問題。在自己的能力還不足以獨擔大任時，閉門造車無疑是錯誤的選擇。

參考文獻：

[1]周陟.UI進化論：移動設備人機交互界面設計[M].北京：清華大學出版社，2010.

[2]Garrett，J.J.用戶體驗的要素[M].北京：機械工業出版社，2007.

[3]Cooper，A.About Face 3 交互設計精髓[M].北京：電子工業出版社，2008.

[4]佐佐木剛士.版式設計原理[M].北京：中國青年出版社，2007.

[5]Saffer，D.交互設計指南[M].北京：機械工業出版社，2010.