浅析原创动漫交互作品《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次。