【摘 要】童年時(shí)光是我們大多數(shù)人最開(kāi)心的時(shí)光，我的作品是由一款經(jīng)典的動(dòng)畫作品衍生出的手機(jī)游戲，主要是針對(duì)比較念舊且仍舊保持著一顆童心的人們。作品《The blue moon》有明確的主題和精美的界面設(shè)計(jì)，配色也是根據(jù)經(jīng)典動(dòng)畫原作而設(shè)計(jì)，充分尊重了原作，能產(chǎn)生較好的視覺(jué)效果，符合現(xiàn)如今大多數(shù)人的審美；在交互方面又能讓用戶有一種隨時(shí)可以獲得驚喜的體驗(yàn)，有很多人性化的細(xì)節(jié)設(shè)計(jì)，提高了人們交互體驗(yàn)的新鮮感?？偟膩?lái)講，這個(gè)作品以賞心悅目的界面和創(chuàng)意的玩法給用戶帶來(lái)了高品質(zhì)的交互體驗(yàn)。

【關(guān)鍵詞】交互體驗(yàn)；視覺(jué)界面；重溫童年

中圖分類號(hào)：G898.2 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1007-0125（2016）09-0140-02

一、設(shè)計(jì)靈感與前期準(zhǔn)備

創(chuàng)作這款手游的初衷是想在我們?nèi)找婷β档纳钪姓一匾恍┩隃嘏挠洃洠o比較念舊的朋友們留個(gè)美好的回憶。在最近這幾年中，手機(jī)游戲開(kāi)始迅速變成人們?nèi)粘Ｏ矈蕵?lè)的一個(gè)很重要的方式，同時(shí)動(dòng)畫作品和游戲作品也開(kāi)始互相滲透，這個(gè)新的發(fā)展方向讓我有了從一款經(jīng)典動(dòng)畫作品衍生出一個(gè)精美手游的想法。作品《The blue moon》定位成一款手機(jī)游戲，是因?yàn)槭謾C(jī)游戲的交互性相比其他游戲來(lái)說(shuō)較高，可以連接到各種聊天軟件來(lái)進(jìn)行朋友與朋友之間的互動(dòng)。

在有了基本構(gòu)思以后，就開(kāi)始了前期資料準(zhǔn)備工作，我搜集了很多資料，了解了手機(jī)游戲相對(duì)于別的游戲的優(yōu)劣勢(shì)、市場(chǎng)發(fā)展趨勢(shì)等等。由于現(xiàn)在的玩家越來(lái)越專業(yè)，對(duì)游戲畫面的要求越來(lái)越高，游戲界面設(shè)計(jì)的多樣性和個(gè)性化也變成了玩家在選擇一個(gè)游戲時(shí)考慮的因素，甚至在某種程度上，界面設(shè)計(jì)的獨(dú)特出眾與否可能會(huì)決定一個(gè)游戲的用戶量，因?yàn)橹挥歇?dú)特新穎的設(shè)計(jì)才能獲得比較挑剔的玩家的青睞。

二、游戲界面設(shè)計(jì)及美術(shù)風(fēng)格

界面設(shè)計(jì)是搭配游戲畫面而來(lái)的，《The blue moon》游戲角色大體為日式卡通風(fēng)格，但由于此款游戲要向歐美地區(qū)推廣，界面的設(shè)計(jì)也要迎合當(dāng)?shù)赝婕业膶徝榔?，因此我的作品偏向歐美卡通風(fēng)格。日式風(fēng)格和美式風(fēng)格的融合，可愛(ài)的角色擁有著炫酷的技能，給了玩家從來(lái)沒(méi)有過(guò)的視覺(jué)沖擊力。整體色調(diào)為藍(lán)色，顏色飽和度高、色彩艷麗，追求炫酷的視覺(jué)效果。初入游戲的界面，一定會(huì)被可愛(ài)的Q版寵物所吸引，這些小寵物不僅僅是萌萌的小玩偶，它們另類爽快的攻擊動(dòng)作讓玩家不得不喜歡。游戲的場(chǎng)景清新百變，玩家在游戲中會(huì)感覺(jué)置身于一個(gè)童話世界。

在《The blue moon》的主界面中，除上方通用信息欄以外，主要顯示游戲新聞、活動(dòng)等內(nèi)容；正中偏下方有“開(kāi)始游戲”按鈕跳轉(zhuǎn)至選擇英雄界面；下方左側(cè)為設(shè)置和郵件按鈕，右側(cè)為好友按鈕，點(diǎn)擊分別彈出相應(yīng)界面；下方中間有聊天小窗，雙擊可以變大。

在作品的英雄選擇界面中，上方信息欄會(huì)顯示隊(duì)友和敵方所選擇的英雄，以及剩余選擇時(shí)間；中間大部分區(qū)域，左側(cè)預(yù)覽英雄形象，右側(cè)信息欄則顯示英雄皮膚和屬性，并選擇所用天賦，以及“準(zhǔn)備”按鈕；下方是一排英雄頭像，我采用微弧形、近大遠(yuǎn)小排列，以此增強(qiáng)界面空間感，玩家以手指滑動(dòng)來(lái)選擇要預(yù)覽的英雄；下方設(shè)置、郵件、好友按鈕和聊天窗口依然在，如果提前選擇好英雄，可以進(jìn)行其他操作，也可以和隊(duì)友討論下戰(zhàn)術(shù)等等。

在作品的英雄購(gòu)買界面中，我將畫面設(shè)計(jì)成一次會(huì)顯示5個(gè)英雄，豎直排列，最中間的會(huì)變?yōu)楦吡吝x中狀態(tài)，并顯示價(jià)格和屬性等信息，其他英雄為黑白狀態(tài)，以手指左右滑動(dòng)來(lái)選擇英雄。此外，還有2個(gè)購(gòu)買按鈕，價(jià)格和貨幣直接顯示在按鈕上，玩家可以直接點(diǎn)擊購(gòu)買，這樣省去了選擇不同貨幣的步驟。在作品的皮膚購(gòu)買界面中，左側(cè)為英雄選擇，此處是將英雄選擇界面的英雄頭像部分拿來(lái)，改為縱向弧形排列，依然是近大遠(yuǎn)小的原則，創(chuàng)造空間感，手指上下滑動(dòng)進(jìn)行選擇；右側(cè)信息欄，顯示所選的皮膚名稱、文字介紹、屬性加成，以及同一英雄不同皮膚之間的切換和購(gòu)買按鈕。相關(guān)信息集中展示，可以有效減少玩家的無(wú)用閱讀。在作品的編輯天賦界面中，左側(cè)為已擁有的天賦，玩家用天賦點(diǎn)可搭配出不同效果的天賦。選中狀態(tài)為彩色，普通狀態(tài)為黑白，鎖定狀態(tài)為帶鎖黑白。右側(cè)信息欄顯示玩家可自行編輯的天賦名稱、可用天賦點(diǎn)、文字說(shuō)明以及重置和保存按鈕。信息欄復(fù)用皮膚購(gòu)買界面中的交互形式，這樣就將不同界面緊密聯(lián)系在一起了。

三、游戲界面的布局設(shè)計(jì)

登錄界面的設(shè)計(jì)我盡量做到了簡(jiǎn)單明了，讓玩家清清爽爽地輸入賬號(hào)密碼，不給玩家這個(gè)游戲很啰嗦的印象。在等待進(jìn)入游戲的界面，我用上下跳動(dòng)的精靈球作為L(zhǎng)adingPage的主要因素，因?yàn)檫@款游戲的主題就是懷舊，經(jīng)典的精靈球形象，即使在玩家網(wǎng)速很慢，等待進(jìn)入游戲的時(shí)候也不會(huì)覺(jué)得無(wú)聊，會(huì)被這個(gè)活潑的精靈球所吸引，可以減少因?yàn)椴槐匾囊蛩貋G失玩家的幾率。

等待完成時(shí)會(huì)出現(xiàn)一個(gè)顯眼的logo和在它后面有序的排放著很多重要的角色，這些角色都是大家所熟悉的小精靈，精美的畫面讓玩家有一下回到了童年的感覺(jué)。在游戲主界面的頂部信息欄上面分布著一個(gè)等級(jí)條、四個(gè)藍(lán)色信息按鈕，這幾個(gè)按鈕的配色相互呼應(yīng)，大小統(tǒng)一，給人以整齊的視覺(jué)感受。右邊是玩家自己的頭像，玩家可以選擇任意一個(gè)自己擁有的寵物形象作為頭像，這樣的換頭像方式既人性化，又符合游戲整體風(fēng)格。

在最中間部分是一個(gè)環(huán)形房屋圖標(biāo)構(gòu)成的Town界面，一個(gè)圖標(biāo)被一圈圖標(biāo)包圍著的環(huán)形設(shè)計(jì)，就像是一個(gè)大精靈球在屏幕中間，同時(shí)四通八達(dá)的公路背景在這些圖標(biāo)的后面把他們連成了一個(gè)整體，不會(huì)因?yàn)槠聊粌?nèi)圖標(biāo)多而顯得瑣碎。在中間部分的底部有一排選擇欄是一個(gè)藍(lán)底構(gòu)成的小整體，每個(gè)的作用都在圖標(biāo)上面有所體現(xiàn)，符合了玩家文字和圖標(biāo)相互呼應(yīng)的視覺(jué)習(xí)慣。手機(jī)游戲的界面設(shè)計(jì)因?yàn)槭艿搅艘苿?dòng)端屏幕大小的限制，所以在有限的區(qū)域內(nèi)必須讓玩家了解到最多的信息，這就需要設(shè)計(jì)師必須根據(jù)視覺(jué)審美規(guī)律合理安排整個(gè)界面的布局，做好圖片和文字的完美結(jié)合。

四、游戲界面中交互設(shè)計(jì)的作用

在登錄游戲時(shí)的輸入框中除了必需的那些按鍵，還在底部加了一個(gè)“Log in with Facebook”，這個(gè)按鍵就是為了讓玩家可以用自己的Facebook賬號(hào)登錄這款游戲，這樣在玩游戲的時(shí)候就可以跟自己的Facebook好友進(jìn)行互動(dòng)。在游戲過(guò)程中，玩家與手機(jī)和玩家與玩家的互動(dòng)無(wú)處不在。為了讓玩家每時(shí)每刻都對(duì)游戲充滿好奇心，除了最基本的打斗界面，我還設(shè)計(jì)了好多小活動(dòng)和小冒險(xiǎn)，增加了更多的交互方面的設(shè)計(jì)，在好友界面可以跟自己的好朋友在游戲內(nèi)聊天比賽，還可以互送精力。同時(shí)從盈利的方面考慮，還在游戲中設(shè)置了商店、充值和會(huì)員界面。為了滿足一些玩家的收集欲望，還專門制作了一個(gè)裝備、寵物圖鑒點(diǎn)亮界面和背包界面，進(jìn)入背包界面，玩家可以看到自己所收集的所有寵物、財(cái)富、裝備等東西。我的整個(gè)作品完整而且豐富，所有界面的設(shè)計(jì)都充分考慮了玩家的心理需求。它一定要清楚明了，這一點(diǎn)主要表達(dá)在功能和信息上，一定要讓人一眼就看到重點(diǎn)；它的交互一定要便于操作，符合人性化邏輯而不是計(jì)算機(jī)程序邏輯，這樣才能有好的用戶體驗(yàn)；最后，在做到前兩點(diǎn)的基礎(chǔ)上，做出符合游戲風(fēng)格又具有特色的視覺(jué)界面設(shè)計(jì)，這樣才能算是一套完整且品質(zhì)不錯(cuò)的游戲界面設(shè)計(jì)。

參考文獻(xiàn)：

[1]余瑩瑩，張輝，陳鵬.手機(jī)游戲人機(jī)交互界面設(shè)計(jì)研究[J].大眾文藝，2014.

[2]仇曉香.手機(jī)游戲界面設(shè)計(jì)藝術(shù)風(fēng)格的應(yīng)用研究[J].云南藝術(shù)學(xué)院，2015.

[3]AlanCooper.交互設(shè)計(jì)之路第2版[M].北京：電子工業(yè)出版社，2009.

[4]馬建軍，華江林.手機(jī)游戲界面設(shè)計(jì)分析（第34卷）[J].紹興文理學(xué)院學(xué)報(bào)，2014（9）.

[5]RobertBrunner.至關(guān)重要的設(shè)計(jì)（第1版）[M].北京：中國(guó)人民大學(xué)出版社，2011.

[6]Cooper，A.AboutFace3交互設(shè)計(jì)精髓（第1版）[M].北京：電子工業(yè)出版社，2008.

[7]佐佐木剛士.版式設(shè)計(jì)原理（第1版）[M].北京：中國(guó)青年出版社，2007.

作者簡(jiǎn)介：

張生博，遼寧師范大學(xué)影視藝術(shù)學(xué)院講師，從事動(dòng)漫教學(xué)。個(gè)人動(dòng)漫作品多次發(fā)表在《人民日?qǐng)?bào)漫畫增刊》，獲省級(jí)以上動(dòng)漫比賽獎(jiǎng)項(xiàng)37次。