淺析原創(chuàng)動(dòng)漫作品手游《Battle Glory》中的UI設(shè)計(jì)

張生博

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

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

中圖分類號(hào)：J524 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1007-0125（2016）08-0179-02

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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

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