界面类型与控件规则

游戏界面主要由信息、图标和控件构成，图标在之前的文章里介绍的差不多了，今天主要是让大家了解常见的界面类型，和界面中通用到的控件，他们的样式、效果，以及在设计界面的时候，如何进行取舍。通过了解来明确学习的目标以及他们的使用方式。

界面类型

1、全屏界面（一级界面）

优势：

① 信息容纳性强，方便以功能为主的信息归类和排布

② 表现力强，方便展示对世界观以及角色的刻画，营造强烈的代入感

③ 引导性强，能够让玩家注重当前的目标

劣势：

① 打断性强，不太适合游戏玩法与界面关联性强的游戏， 如MMORPG这种，需要通过界面边缘区域来判断自己当前所处的位置、角色状态..

② 信息层级多：交互设计难度较大，需要处理好界面之间的跳转关系

2、弹窗界面（二级界面）

优势：

① 打断性较弱，打开界面后仍然可以关注游戏里的场景信息

② 表现力较强，针对框体的包装设计，具有较强的表现力（指活动弹窗）

③ 信息层级简单，不会涉及过多的界面跳转，交互逻辑简单易理解

劣势：

① 干扰性较强，自动且多次弹出的弹窗，会打断玩家当前的游戏体验

3、小弹窗界面（三级界面）

优势：

① 提示性强， 提示弹窗是交互设定的防错机制，以防玩家误操作，造成严重的后果

② 信息层级简单，操作单一，引导性强，可作为功能的讲解说明

劣势：

① 干扰性强，因此适合用在玩家做重要决定的时候作为引导提示，如玩家付费，货币兑换，物品销毁..

界面层级又被称为信息框架，一般情况下是三层，一级界面承担了一个系统的主要信息，二级界面承担了这个系统的某一个功能，三级系统承担了二次确认或说明的提示功能。信息间根据内容重要程度以及逻辑顺序进行层级的划分，彼此间呈现递进关系。在信息量不变的情况下，每级界面承载信息量越大，层级就越浅即操作效率变高，但由于信息过多，玩家理解和学习的难度也就越高，反之信息承载量越小，操作效率降低，但玩家更容易理解学习。

（注：界面层级是指一个系统的信息按照逻辑划分，层级之间有从属关系，因此跳转到不同的系统，是不计算在层级内的，都属一级界面）

4、提示界面

公告提示：在主界面进行走马灯播报，用以显示全服的公告、个人的提升、抽卡获得、战斗力变化等信息，起到提示以及炫耀的作用，引导玩家相互竞争

状态提示：用于反馈当前状态，方便玩家及时调整当前操作，如掉血跳字、自动战斗，战斗开始等

成就提示：给予正向的反馈，提高玩家的成就感，如等级提示、获得成就、任务完成等，常常伴随着华丽的动效，营造获得荣誉感的氛围

通用控件

1、按钮

按钮的作用是通过点击作出反馈并触发对应的事件，因此在设计按钮的时候注意的两个点别分是：反馈和触发对应事件的跳转行为

反馈：

当前状态需要告知玩家，如按钮的常用状态：

①通用按钮：通常有两种样式，一种是颜色与界面形成强烈对比，凸显按钮的引导性，通常用来表示重要的功能，一种是颜色与界面为同类色，凸显按钮的功能，却不过分吸睛，用来表示常规功能。

②灰色按钮：表示禁用无法点击

③红色按钮表示警示，引导玩家谨慎使用

④特殊按钮，为了美术氛围的渲染所特殊设计的按钮，常见在重要系统或活动界面

当前信息需要告知玩家，如按钮的描述：

一般用的是动词＋名词，比如升级技能，创建角色，前往组队....再加上按钮空间比较小，所有文字描述一定要精简，保持在2-4个字最佳

点击跳转：

当前位置需要有足够的区域，一是方便点击，二是避免误触，造成不好的用户体验

2、页签

通常处于信息的边缘，以成组的形式出现，用于快速切换界面，检索信息，页签与页签之间有一定的关联性，属于同一层级的信息，简单来说就是切换信息的按钮组，因此显示当前选中状态尤其重要。

反馈：

按钮的常用状态：分别是选中和未选中两种，手势一般只有点击一种，点击即选中

3、步进器

用于给玩家控制数量的控件，是由一个增加按钮、一个减少按钮和一个自定义控制数值的输入框组成，为了更好的用户体验，减少玩家操作的步骤，因此还有最多和最少两个按钮。

4、文本框

文本框的作用是给与玩家提供输入文本，来实现不同的功能效果，常见的如搜索、聊天，编辑

反馈：

①需要指引清晰，通过文本提示，引导玩家输入什么样的文本。

②需要考虑好默认状态和输入完成状态，给予玩家反馈，建议默认状态文字用灰色，输入完成状态用亮色。

5、开关按钮

最初源于对现实开关按钮的模拟，用于表示可打开或关闭某项功能的状态，常用于设置界面。

反馈：

①需要具有识别性，一眼就能看出来是开关按钮，并识别当前状态，状态切换成功后可通过颜色区别，例如开用绿色，关用灰色

②需要指引清晰，若状态比较难理解，可以用文本来说明

6、小红点

小红点的主要功能是引导性，引带玩家在有效的时间内完成更多有效的操作，使信息的获取更高效

反馈：

①需要提醒玩家做什么，利用红点去引导玩家操作，如任务完成，技能升级等，不过需要挑选重点系统提示，不然全是红点就没有意义了

②需要提醒玩家看什么，特别是推荐的内容，如最新的活动，奖励等

7、数据图表

主要用于显示系统提供的信息数据，当前状态，数值对比，完成度等功能，而不同的功能需求，因侧重点不同，因此在设计表现上也有所不同

反馈：

①雷达图：强调每个数值之间的对比差异，通过S/A/B/C/D来区别属性强弱，能够使玩家快速了解角色的作用和属性偏向

②进度条：强调精准的数值属性，并通过数据描述，进度条的方式呈现，能够引导玩家追求角色养成

了解每个类型的控件特点，才能在了解需求后，选取最合适的控件进行设计，并且结合世界观以及游戏的整体风格进行设计，做到给玩家提供更精准反馈的同时，也给玩家带来更加有趣且具有代入感的交互体验。

群作业：

① 收集素材1：整理3款不同类型的游戏，并将他们的常规系统和活动系统按照界面层级分类好，对比两者的区别

② 收集素材2：整理3款不同类型的游戏，并将他们不同样式的控件整理成一张，共3张

③ 作业练习：自定义画风、世界观、功能，并做出2-3套控件设计

全栈设计交流公众号