淺析原創動漫交互作品《The blue moon》的游戲界面

【摘 要】童年時光是我們大多數人最開心的時光，我的作品是由一款經典的動畫作品衍生出的手機游戲，主要是針對比較念舊且仍舊保持著一顆童心的人們。作品《The blue moon》有明確的主題和精美的界面設計，配色也是根據經典動畫原作而設計，充分尊重了原作，能產生較好的視覺效果，符合現如今大多數人的審美；在交互方面又能讓用戶有一種隨時可以獲得驚喜的體驗，有很多人性化的細節設計，提高了人們交互體驗的新鮮感。總的來講，這個作品以賞心悅目的界面和創意的玩法給用戶帶來了高品質的交互體驗。

【關鍵詞】交互體驗；視覺界面；重溫童年

中圖分類號：G898.2 文獻標志碼：A 文章編號：1007-0125（2016）09-0140-02

一、設計靈感與前期準備

創作這款手游的初衷是想在我們日益忙碌的生活中找回一些童年溫暖的記憶，給比較念舊的朋友們留個美好的回憶。在最近這幾年中，手機游戲開始迅速變成人們日常消遣娛樂的一個很重要的方式，同時動畫作品和游戲作品也開始互相滲透，這個新的發展方向讓我有了從一款經典動畫作品衍生出一個精美手游的想法。作品《The blue moon》定位成一款手機游戲，是因為手機游戲的交互性相比其他游戲來說較高，可以連接到各種聊天軟件來進行朋友與朋友之間的互動。

在有了基本構思以后，就開始了前期資料準備工作，我搜集了很多資料，了解了手機游戲相對于別的游戲的優劣勢、市場發展趨勢等等。由于現在的玩家越來越專業，對游戲畫面的要求越來越高，游戲界面設計的多樣性和個性化也變成了玩家在選擇一個游戲時考慮的因素，甚至在某種程度上，界面設計的獨特出眾與否可能會決定一個游戲的用戶量，因為只有獨特新穎的設計才能獲得比較挑剔的玩家的青睞。

二、游戲界面設計及美術風格

界面設計是搭配游戲畫面而來的，《The blue moon》游戲角色大體為日式卡通風格，但由于此款游戲要向歐美地區推廣，界面的設計也要迎合當地玩家的審美偏好，因此我的作品偏向歐美卡通風格。日式風格和美式風格的融合，可愛的角色擁有著炫酷的技能，給了玩家從來沒有過的視覺沖擊力。整體色調為藍色，顏色飽和度高、色彩艷麗，追求炫酷的視覺效果。初入游戲的界面，一定會被可愛的Q版寵物所吸引，這些小寵物不僅僅是萌萌的小玩偶，它們另類爽快的攻擊動作讓玩家不得不喜歡。游戲的場景清新百變，玩家在游戲中會感覺置身于一個童話世界。

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

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

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

三、游戲界面的布局設計

登錄界面的設計我盡量做到了簡單明了，讓玩家清清爽爽地輸入賬號密碼，不給玩家這個游戲很啰嗦的印象。在等待進入游戲的界面，我用上下跳動的精靈球作為LadingPage的主要因素，因為這款游戲的主題就是懷舊，經典的精靈球形象，即使在玩家網速很慢，等待進入游戲的時候也不會覺得無聊，會被這個活潑的精靈球所吸引，可以減少因為不必要的因素丟失玩家的幾率。

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

在最中間部分是一個環形房屋圖標構成的Town界面，一個圖標被一圈圖標包圍著的環形設計，就像是一個大精靈球在屏幕中間，同時四通八達的公路背景在這些圖標的后面把他們連成了一個整體，不會因為屏幕內圖標多而顯得瑣碎。在中間部分的底部有一排選擇欄是一個藍底構成的小整體，每個的作用都在圖標上面有所體現，符合了玩家文字和圖標相互呼應的視覺習慣。手機游戲的界面設計因為受到了移動端屏幕大小的限制，所以在有限的區域內必須讓玩家了解到最多的信息，這就需要設計師必須根據視覺審美規律合理安排整個界面的布局，做好圖片和文字的完美結合。

四、游戲界面中交互設計的作用

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

參考文獻：

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

[2]仇曉香.手機游戲界面設計藝術風格的應用研究[J].云南藝術學院，2015.

[3]AlanCooper.交互設計之路第2版[M].北京：電子工業出版社，2009.

[4]馬建軍，華江林.手機游戲界面設計分析（第34卷）[J].紹興文理學院學報，2014（9）.

[5]RobertBrunner.至關重要的設計（第1版）[M].北京：中國人民大學出版社，2011.

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

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

作者簡介：

張生博，遼寧師范大學影視藝術學院講師，從事動漫教學。個人動漫作品多次發表在《人民日報漫畫增刊》，獲省級以上動漫比賽獎項37次。