回合制手游新增UI设计规范研究

范佳伟 王枫红

摘 要：目的：针对已上线回合制手游的新增UI进行界面设计研究，从而探究出回合制手游新增UI设计规范。方法：借鉴现有UI设计原则和他人指导意见，在实际工作中对已上线回合制手游新增UI的设计制作进行探究，然后分析、归纳、总结出相关设计规范。结果：提出已上线回合制手游新增UI界面的设计规范：一致性、准确性、布局科学、操作合理、响应正常。结论：在理论研究的基础上完成了一款回合制手游新增UI界面的设计，做出了可用、适用、易用的UI界面。

关键词：手游；新增UI界面；设计规范

现在的手机不仅仅是一个移动通讯工具，它更是一个人们日常生活中非常重要的娱乐消遣工具。手机游戏正是基于此背景下不断发展起来，并成为大众十分宠爱的娱乐休闲方式。

手游的主要载体是手机，而手机又会受到硬件的限制，一般屏幕较小，空间有限，因而手游的设计不同于以往的端游、页游设计，需要在有限的屏幕内将游戏的功能布局表达完善，这是一个新的设计领域，同时其相关的理论研究又是非常的少，设计者只能不断的从实践中积累经验才能少走弯路从而设计出好的UI界面，因而对手游的UI界面特别是一些已经上市的回合制手游新增UI界面的设计规范研究便有了意义。

1 UI设计介绍

UI设计是指对软件的人机交互、操作逻辑、界面美观进行整体的设计[ 1 ]。优秀的UI不仅能够使得软件给人以个性感和品位感，还能让人操作起来简单、合理，充分表达出产品的功能和个性。自从上世纪80年代第一台电脑被制造出来之后，UI设计便紧随着电脑行业不断发展起来。随着电脑技术的不断进步，人们对电脑的依赖越来越高，相应的UI设计也受到了人们的普遍关注，许多国内外知名学者纷纷著书立作，不断深化对UI设计的探讨，有了一般性的设计原则规范。游戏UI设计也是整个UI设计的一部分，它同样遵循UI设计的一般性原则规范，但同时又有着其独特的风格特点。

2 回合制手游UI界面设计规范性探究

首先，回合制手游UI要严格遵循一致性原则，也即整个手游的UI界面都要有一定的关联性和相似性。这里所说的一致性包括三个方面：设计目标一致，外观元素一致，交互行为一致[ 2 ]。我们先从设计目标一致性方面说起，设计目标是游戏UI界面设计出来之后所要达到的效果，也是整个游戏核心理念所在，这其中包括目标用户、目标指向、目标效果等，例如我们将青壮年男性作为我们的主要目标用户群，以易见、易学、易用作为界面设计目标效果，那么我们每个界面的设计都要考虑到目标用户的使用习惯，并且在每个界面中都要体现出易见、易学、易用的特点。

其次，整个游戏的界面元素也要保持一致，这其中又包括很多方面，比如页面主色调、整体风格、文字、按钮等[ 3 ]。外观元素往往是判断一个游戏是否符合一致性的最直接的凭借，一个游戏的每个界面是否和谐统一在很大程度上取决于外观元素的表现，如果一个游戏的每个界面看起来都迥然不同，整个界面的关联不强，如同一盘散沙，这样的UI设计明显就是一个失败的设计，其游戏质量能有多高，给玩家带来的吸引力能有多大也就不言而喻了。只有每个界面的外观元素保持统一，游戏才不会有分割感，从而吸引用户的焦点，使其沉醉于游戏的绚烂世界里。

最后，整个游戏的交互行为也要保持一致，在同一款游戏中，点击、或者长按会触发什么样的行为事件都有着严格的规范，绝不可以有在不同界面执行相同动作，却产生了不一样的行为事件的情况发生。

其次游戏UI也要遵循准确性原则，要注意统一和规范，标记清晰，各个图标、模块所传达的信息需是准确无误的。同时要让用户根本不用思考和判断某个按钮或图标是什么用途，保证用户一眼就知道每个部分是什么样的功能[ 4 ]。准确性原则涉及到游戏UI的方方面面，其中包括按钮、图标、文本等，与此同时还要考虑到逻辑性和玩家的认知水平，尽量从用户的角度来设计，万不可有与玩家常规逻辑相悖或有冲突的设计出现。

游戏UI的布局也是非常值得重视的一部分，合理化布局是一个要严格执行的原则，不可以凭借个人喜好，随意安放任何一个按鈕或图标的位置。在设计页面布局的时候要充分考虑玩家从上到下、自左向右的浏览习惯和操作逻辑，同时也要注意和之前的游戏界面布局保持一致，不能有不合常规的布局出现[ 5 ]。

在进行界面布局规划的时候要结合游戏需求，考虑好每个部件的位置和尺寸，协调好每个部件之间的关系，要使整个页面和谐统一，同时又能够突出重点，符合认识的逻辑。在这里面同时还要注意所需进行操作的部分是否合理地设置在手指热区内，玩家在操作游戏时是否顺手且不会出错。在用到游戏控件的时候，要尽量与之前的页面控件的使用方式和位置保持一致，同时考虑其样式和尺寸是否适合玩家所持设备的操作特征。

简洁的UI界面易于用户了解和使用，并能够降低用户误选的概率，因而在UI设计中尽量避免元素的重度堆砌和信息的繁杂描述[ 6 ]。界面内容需是用户所熟悉的语言和操作形式而不是游戏者自己所设想的样式。

界面整体的视觉效果要清晰且易于理解，所设计的页面需使一般用户凭借常识就能轻松掌握。简洁的UI界面在排序这方面当然要加以重视，所有元素都要有序放置，以便让用户易于使用。

游戏也要十分注重操作的合理性，在设计UI之前就要考虑。玩家要如何操作才能达到游戏目的，在进行了某一步操作之后会达到什么样的效果，是否和玩家的逻辑认识相一致，这些都是需要深入考虑的问题。

在拿到游戏UI需求之后，我们要根据整个UI需求合理规划好各个关联页面的关系，思考怎样设计操作流程才能让玩家更快、更方便的达到游戏目的。在这一过程中，我们要仔细考虑游戏操作的纵深度，尽量精简游戏的操作步骤，保证整个游戏的操作流程简单清晰。

在设计操作流程的时候，要让玩家时刻清楚自己在进行的是什么操作，同时为玩家提供明确的深入和返回方式，让玩家随时可以通过打开或者关闭的方式在多个页面之间进行切换[ 7 ]。玩家在进行游戏操作时最好是逐步进行，使用线性的流程，简单易懂，同时尽量让操作在一屏内完成。

在系统响应方面，我们要注意每个界面信息容量，不要将信息过分布置在某个界面内，在资源输出的时候要考虑好如何分区，合理分区输出才能使界面更好更快加载。同时要具体考虑每个部件的响应时间，既不能过慢也不能过快。

3 回合制手游UI实例探究

接下来让我们通过一个具体的实例来逐步探究回合制手游新增UI界面设计的规范性。该例源自于本人所在实习公司的一款回合制手游，本人的主要工作是针对该款手游进行新增游戏页面设计和迭代设计。在这个例子中，策划想做一个法宝系统的UI界面用以提升、合成游戏法宝。在和策划沟通之后，我们依据策划的想法，根据以往界面的布局方式，秉着主要功能重点突出的思路开始规划各个功能模块的位置，然后得到一个低保真原型图。在构思好页面的大致排版后，我们就要开始高保真页面的设计了。

我们首先根据目标设备尺寸设定好整个UI界面的高和宽。出于一致性要求，每一款游戏都会有自己的控件库，每一个控件库都包含着整个游戏的基本图标，因而当我们在进行设计时，需要将一些通用的标准控件比如背景底框、侧边导航等先放置在页面中，这是执行界面一致性准则的第一步。

在进行高保真原型（图1）设计时，我们一定要注意每个部件的位置。先规划好各功能位置区域，然后将主要的功能部件放在人们最易观察的位置。依照人们自左向右、自上而下的浏览习惯，这里我们将法宝的基本信息放在左上的关键位置，这样人们的注意力就会很容易集中到法宝信息的位置，同时为了更好的吸引玩家的眼球，我们还给法宝放置了一个底框。在设计的过程中，我们一定要注意好各元素之间的对齐和搭配，同时还要让所有的元素看起来像一个统一的整体。界面中的“更换法宝”按钮要放置在法宝的底框之上，这样做的目的一是为了让玩家注意到这个按钮，二是为了将其融入的整个页面中，以免给人以散碎的感觉。右侧的信息文字也是分列排开，同时与左侧法宝框保持对齐关系。

为了更好说明法宝框下面的两个元素的意义，我们在左侧加上了文字描述，同时在进度条中部加入了数值以方便玩家读取进度信息。底部的“消费银两”“确认祭炼”调用了控件库的标准控件，二者被调整成相同长度大小，放置在左侧部分居中位置，这样就能很好地阐释各个元素的功能用途。帮助按钮“！”也要放置在常规的位置，且要注意对齐。右侧面板的列表项按照以前的界面样式进行设计，并与左侧面板中相应元素的位置保持相一致。

在初步完成了高保真原型之后，我们需要对其进行局部的细节调整。首先，法宝图标那部分还是有点平淡，没有很好的表现出法宝的价值；法宝信息那块还是有点零散，没有整体性。针对这两点，我们又重新画了一个法宝底框，将法宝信息也放入其中，同时将法宝称谓以艺术字的形式表现出来，放在首行以凸显出来，修改后的界面如图2所示。按照游戏操作逻辑，在确定所有信息之后我们方可点击“确认祭练”按钮进行法宝的祭练，为了更好的表达逻辑先后关系，我们将“消耗银两”这一块进行了修改，使其与“升级进度”、“祭炼材料”的样式保持一致，这样就能更好的突出 “确认祭练”这一按钮，从而让玩家明晰整个页面的操作逻辑。

在完成了“祭练”的主页面之后，接下来就要考虑在点击“更换法宝”后其弹出的子级页面如何处理了。刚开始考虑的是点击之后直接弹出跟左侧面板同样大小的选项窗口，使得整个页面很好的融合在一起，如图3所示。

然而做出來之后就发现这样的界面设计会产生一定的逻辑误区。从我们前面提到的层级规范来看，显然其中的第二级頁面与第一级页面之间没有进行很好的区分，玩家在进到第二级页面之后很可能会疑惑自己所在的层级位置，同时在选择法宝的时候也无法知晓之前选择的法宝是什么，信息出现阻碍且没有与“祭练”主页面形成上下层的感觉。

基于这些方面的考虑，我们将法宝选择界面作为单独的一层放置在主页面之上，如图4所示，同时将之前选定法宝用高光显示出来，以便为玩家提供完整的信息。玩家在选择了其他法宝之后，法宝弹出界面就会自动消失，从而回到法宝主界面。倘若玩家误触“更换法宝”按钮或者突然不想更换了，按照以往的游戏逻辑直接点击法宝选择界面以外的空白区域就可以轻松返回到主页面，操作的逻辑性和一致性就得到了保障。

接下来我们要考虑的是当玩家点击“确认祭练”按钮之后会有什么样的反馈了。在与策划进行商讨之后，我们决定在玩家点击“确认祭练”按钮之后会弹出一个属性加成的提示界面，如图5所示。该界面同样浮于首页之上，为了更好的区分层级关系，我们为该页面添加了一个透明暗色背景，同时将“等级提升”四个字采用艺术字体的形式凸现出来，以便让玩家第一时间知晓整个页面的信息。整个页面要居中放置，同时注意好文字之间的对齐和排列，在该页面弹出之后，玩家可点击界面以外任何空白区域来关闭页面。通过以上种种步骤，我们的整个法宝“祭练”界面就完成了，剩下的界面也是按照同样的设计思路去不断的修葺和完善。

4 结语

通过对现有UI设计原则的解读我们了解到界面设计所需注意的问题，再经过实践研究总结并结合回合制手游的特点，我们探讨出了一些新增回合制手游UI界面设计的规范。当然也只是设计规范中的一部分，还有很多的小的细节规范由于篇幅的问题无法一一罗列开来，希望能够通过以上的这些研究能为今后游戏UI的研发发展贡献一份力量，也希望读过该篇论文的读者能够学到一点经验，做出更加不错的手游。

参考文献：

[1] UI设计.百度百科.

[2] 谢蛟.智能手机游戏UI设计的研究[D].中南民族大学，2012.

[3] 王彦.手机游戏UI设计的一般性原则研究[D].华中师范大学，2014.

[4] 马建军，华江林.手机游戏界面设计分析[J].绍兴文理学院学报（自然科学），2014，（03）：20-24.

[5] 金小能.基于智能手机的重度游戏交互设计研究[D].浙江大学，2015.

[6] 吴颖.驯服复杂——去繁为简的界面设计方法[J].中国包装工业，2015，（20）：56-57.

[7] 赵明明，王明时.基于用户体验的触屏手机游戏界面设计研究[J].科技创新与应用，2012，（12）：50.

作者简介：

范佳伟（1992-），男，汉族，河南固始人，硕士，华南理工大学设计学院，主要研究方向为交互设计、游戏页面设计；

王枫红（1972-），女，汉族，江苏沭阳人，教授，博士，华南理工大学设计学院，主要研究方向为主要研究领域为工程图学、工业产品设计、交互设计等。