張生博

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

【關(guān)鍵詞】UI設(shè)計；交互；界面設(shè)計；用戶體驗

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

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

一、《Battle Glory》UI的構(gòu)思與美術(shù)風(fēng)格

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

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

二、《Battle Glory》的UI設(shè)計

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

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

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

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

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

三、《Battle Glory》 UI設(shè)計中的設(shè)計規(guī)范

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

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

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

參考文獻：

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

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

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

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

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