游戏交互的基础!详细解读游戏中最常用的11个控件

发表于2021-10-19
评论0 1.7k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学堂游戏策划行业精英群

361498939

编者按 最近时间比较多,笔者趁这个机会写了这篇文章,一方面是把自己基本功牢固牢固,另一方面也希望能够帮到一些对控件不太熟悉的设计师。

 

作者:小王

(本文内容由公众号“小王的交互笔记”提供,转载请征得同意。文章仅为作者观点,不代表GWB立场)

 

 

一、写在前面

 

我一直认为游戏交互本质是一门语言学,设计师通过游戏中界面,音效,动效等形式传达给玩家信息。而“控件”类似于英语中的“词组”,都是通过把几个基本的元素以固定的形式组合起来,传达出可以立马理解的信息。若是后面有空则会写几篇关于交互语言学中更基础的存在的文章,例如“设计规范”,“网格系统”等,他们其实就对应着英语中的“单词”,“语法结构”等。

get?code=NmRmZTUwNjJmZDY5NGM1Y2QxZjAzNWYyNGNiMTFhMDUsMTYzNDU2NTIwNDQxMg==

本篇文章会通过“官方定义”,“我的理解”,“基本构成”,“操作手势”,“详细说明”,“特别注意”六大个维度来分析游戏中最常用的11种控件,其中“详细说明”又分了“①设计准则”,“②样式”,“③状态”,“④构成说明”,“⑤手势”五个小维度来加强分析,方便大家理解。

get?code=OTYyZmM1OWFkZjYyNjM0YTdlZjBlMDkxOGVlYTRkZjAsMTYzNDU2NTIwNDQxMg==

好啦,废话不多说,让我们进入正题。

 

二、几个最常用的控件

 

按钮(Button)

 

官方定义:命令按钮的作用是对用户的鼠标单击作出反应并触发相应的事件,在按钮中既可以显示正文,也可以显示位图。(百度百科)

 

我的理解:按钮在游戏中通常作为触发某种事件的钥匙,作为最基础的控件,在游戏中几乎每个界面都会使用,使用频率极高,比如游戏首页的进入游戏,创角界面的创建角色。

 

基本构成:背景图片,文本。

 

操作手势:点击,长按,拖动。

 

详细说明:

①按钮应该保持一个准则:玩家学习成本越低越好。要像按钮,让玩家知道可以点击;热区大小需要方便点击;当前状态需要告知玩家,要不用颜色,要不用文字。

②按样式通常情况下分为三个种类:通用按钮,异型按钮和其他。通用按钮是指设计初期制定下来的,在游戏中最为常用,也是最符合游戏风格的按钮。异型按钮是指在某些页面,为了美术氛围的渲染所特殊设计的按钮。其他是指游戏中一些基本的组件,他们更多是承担着显示信息的功能,比如头像框,道具框等。

③按钮的状态一般用颜色分四种。跟UI颜色相符合的通常按钮,采用UI对比色的推荐按钮,灰色的禁用按钮,红色的警示按钮。、

④按钮的文本一定要准确精简。一般用动词+名词,比如升 级技能,创建角色,前往组队,接下来打开的界面名称,要不就叫名词,要不就是名词+动词,比如技能/技能升级,角色/角色创建。

⑤手势一般以点击为主,长按一般是用作调整状态,比如长按技能图标进入编辑状态。拖动较为少见,类似的有技能的拖动确定释放的方向,背包仓库界面,通过拖动存入仓库。

 

特别注意:前期制定按钮规范的时候一定要逻辑清晰,注意细节。热区多大,状态几种,使用规则都需要考虑清楚。后期设计的时候严格遵守规范,不然会因为按钮出现场景太多,造成玩家认知困难,以及编辑器维护成本过大。

get?code=ZGE4ZGY1Y2E2NWZkZGY3NTEyYmM5YTY2ZjYwZjVkYmIsMTYzNDU2NTIwNDQxMg==

开关(Switch)

 

官方定义:开关可打开或关闭单个项目的状态。它们是在移动设备上调整设置的首选方法。(Material Design)

 

我的理解:游戏中的开关和终端设备UI(Ios,Android)中的开关稍微有些区别。游戏中开关是按钮的一个变体,它是触发固定事件的钥匙(状态切换),局限性比较大,使用频率很低,一般只会在需要切换状态的界面上使用,比如设置界面,切换某项功能的开启或关闭。

 

基本构成:背景图片,开关图片,文本。

 

操作手势:点击,滑动。

 

详细说明:

①开关作为按钮的变体首要的准则为“易懂”,要让玩家一眼看出是开关以及当前的状态

②若状态只有两种,样式则比较统一,都是模拟现实中开关的样式。若状态大于两种一般都用类似页签的表现形式。

③开关的状态只有选中和未选择两种,一般都是用文本的颜色以及底图图片的颜色来区分。

④底图因为面积最大,所以一般都会在这里通过颜色做状态的区分,例如开用绿色,关用灰色。开关图片只要符合UI风格就好。若状态较难理解的情况需要用文本来说明的状态名称,例如“魔法”“物理”。

⑤因为开关热区过小,点击滑动两种手势的区别不大,所以通常情况下都会采用点击的方式切换状态。

 

特别注意:开关按钮的状态切换建议做成位位移动效,强化体验。根据界面的不同来决定开关按钮的UI样式复杂程度,例如重功能的设置界面,开关按钮尽量简单,文本也可以省略。状态切换成功后需要给出反馈(音效,文字)。

get?code=MjZjNGYyZDE5ZWFkMjFhODFjNDA5N2M4ZDUwN2M3OWEsMTYzNDU2NTIwNDQxMg==

切换按钮(Toggle)

 

官方定义:切换按钮可用于从一组选项中进行选择。(Material Design)

 

我的理解:切换按钮在游戏中起到对某个功能进行开关状态切换的作用,其实可以算是开关的一个子集。切换按钮局限性也比较大,使用频率较低,一般只会使用在功能需要开关状态切换的界面上,比如装备强化界面,勾选是否使用绑定材料。

 

基本构成:勾选框图片,勾选图片,文本。

 

操作手势:点击。

 

详细说明:

①切换按钮的首要准则为“便捷”,一般情况下该控件操作频率不高,但是却很重要。所以一定要热区够大,让玩家一次成功。

②切换按钮的样式通常都比较统一,左侧是勾选框,右侧是文本。

③切换按钮的状态只有两种:“开”“关”,默认为“开”,通常情况下是通过勾选图片的显示隐藏来表达状态。

④勾选框和勾选的图片需要区别于单复选框,文本简洁明了,一般是动词加名词,动词为“开启”“打开”之类的正向词语,也可以直接是名词。

⑤手势只有点击一种。

 

特别注意:切换按钮的状态区分需要一目了然,操作需要有反馈。多个切换按钮同时出现时,需要注意接近性原则,控件内部勾选框和文本的距离要小于控件和控件之间的距离。

get?code=NjkyZDhhZmQxZjRhYmJiMDVhMTJiY2Q2MGU0ZmNkYWEsMTYzNDU2NTIwNDQxMg==

页签(Navigation)

 

官方定义:分页,又称为页签,指的是在账册或是资料夹边缘用来索引用的标签,抓住的话可以来快速检索特定页面。(维基百科)

 

我的理解:页签一般都是成组的出现,组中的页签存在互斥性,在游戏同一界面内作为多段信息之间切换的桥梁。使用频率较高,一般使用在界面内的信息为父父关系的情况下,比如技能界面,用页签切换技能的不同成长线(父父关系)。

 

基本构成:图片,文本。

 

操作手势:点击。

 

详细说明:

①页签其实可以粗暴的看成是触发事件固定为切换信息的按钮组,所以设计准则也应该是方便点击和阅读。

②页签按重要程度,一般分三个层级就好了,需要在视觉样式上体现出层级高低来,全屏界面一般用1,3两个层级的页签,弹窗一般用2,3层级的页签。比如邮件界面左侧的邮件列表,伙伴界面的伙伴列表也都算是页签的一种,特殊的情况,需要特殊处理。

③页签在状态上只需要考虑选中和未选中两种就好。

④页签的文本同样需要准确和简洁,一般用名词

⑤手势一般只有点击一种,点击即选中,同时只能选中一个。

 

特别注意:前期设计页签需要重点考虑三个层级的设计以及使用原则,体现出层级高低。后期设计的过程中,需要好好考虑默认选中的规则,因为默认选中在一定程度上是高于其他页签的,最好根据每个界面的特殊性制定不同的规则,比如组队副本界面,建议默认选中的副本根据玩家等级来变化。

get?code=NjI2Y2NmYmY1NDg3ODQwYTNhMWUxMjhlZWIwNzAxODAsMTYzNDU2NTIwNDQxMg==

垂直菜单

 

官方定义:暂无。

 

我的理解:垂直菜单类似Android中的Navigation drawer。可以理解为按钮和页签的组,在游戏内也是作为同一界面中多段信息之间切换的桥梁,使用频率较低,一般使用在界面内的信息含有父子关系的情况下,比如活动弹窗,通过垂直菜单切换不同的活动。

 

基本构成:标题图片,标题文本,箭头,子标题图片,子标题文本。

 

操作手势:点击,垂直拖动。

 

详细说明:

①垂直菜单是由按钮及页签构成,主要目的也是为了切换信息,所以设计原则同样是便捷性以及易读性

②根据7±2原则,我们需要把标题以及子标题的数量控制在5个或以下。根据格式塔原理,标题与子标题之间的间距需要小于标题和标题的间距。因为标题和子标题是作为信息的题目,按照视觉阅读的顺序需要把垂直菜单放在界面左侧(限阅读顺序为从左往右的地区)

③垂直菜单中的标题以及子标题都需要考虑选中和未选中两个状态。

④因为是标题,所以文字一般都为名词。一般都会在标题上设计一个“小箭头”表达可展开收起的意思。

⑤控件上的手势会有点击以及垂直拖动两种,点击为选中,标题只能同时选中一个,子标题亦然,默认选择第一个,选中的标题会展开,未选中的会收起。当垂直菜单太长的时候,通过拖动,上下拉动。

 

特别注意:垂直菜单重在初期规范的制定,需要详细的考虑所有细节,除去上面的一些内容外还包括以下内容:文本字数的限制以及对齐方式;箭头显示的逻辑,默认和点击以后分别朝向。这里对设计样式给个建议,尽量让子标题的宽度小于标题的宽度,更好的传达父子关系这个信息。

get?code=NmY5MWE5NWFkOGMwNzgzYmU3NzgyZjk4OTI3NjBlYzMsMTYzNDU2NTIwNDQxMg==

下拉框(Menus)

 

官方定义:下拉菜单是显示多个选择的紧凑方式。它在与元素(例如图标或按钮)交互时或用户执行特定操作时出现。(Material Design)

 

我的理解:下拉框在游戏中起到切换选择项的作用,有时候可以代替页签。使用频率为中等,一般在选择项非常多,或者选择项之间存在第一优先级的时候使用,比如伙伴界面,利用下拉框来筛选满足需求的伙伴列表(第一优先级为“全部”)。

 

基本构成:框体图片,框体文本,箭头,下拉列表图片,列表文本,选中状态图片。

 

操作手势:点击,垂直拖动。

 

详细说明:

①下拉框的目的是为了了解当前的选择项以及切换不同的选择项,所以设计准则为“信息的易读性”以及“操作的便捷性”

②下拉框的样式比较统一,满足准则即可。尽量放在内容的上方,因为下拉框也有标题的意思。

③箭头需要根据状态的不同而变化,选择项需要在下拉列表中表现出来

④文本尽量简洁,一般是作为标题使用。

⑤一般为点击下拉框切换状态,显示下拉列表,垂直拖动列表,再次点击切换选择项,列表隐藏。

 

特别注意:设计初期考虑好逻辑就好,比如选中的选项是不是一直处于下拉列表的第一个;切换了选择项以后,下拉列表需要隐藏嘛;下拉列表有几种隐藏方式;切换选择项的时候需不需要做特效作为点击反馈;下拉列表显示的方式。

get?code=ODljYjI1MmRmY2Q3M2Q2ZmVhNDkxYTc3ZGJmMTY5NTQsMTYzNDU2NTIwNDQxMw==

文本框(Text fields)

 

官方定义:文本字段允许用户在UI中输入文本。它们通常显示在表单和对话框中。(Material Design)

 

我的理解:文本框的作用是在游戏中给玩家提供文本输入,一般会搭配别的不同控件实现功能。使用频率比较低,一般使用在需要玩家输入文本的情况下,比如拍卖行界面搭配搜索按钮,实现搜索物品的功能。

 

基本构成:框体图片,默认文本,输入文本。

 

操作手势:点击。

 

详细说明:

①文本框设计的准则有两个,一是“方便点击”热区需要够大,保证玩家的点击是有效的,二是“指引清晰”这个是指默认文本的文字需要简洁明了,指引玩家输入什么样的文本。

②文本框在游戏中的样式也比较单一,设计的时候给右侧的按钮留好空间就好。

③文本框在游戏中因为会调用系统的键盘,所以考虑好默认状态和输入完成状态就好,默认状态的默认文本层级不要高于输入文本。

④默认文本建议用灰色,输入文本建议用亮色,一定要拉开层级

⑤手势比较简单,只有点击一种。点击文本框触发系统键盘,进行输入,然后点击搭配的功能,完成流程。

 

特别注意:文本框因为涉及到调用系统键盘,需要注意不要让键盘遮盖住重要的信息。比如聊天界面,建议弹出键盘的同时,把界面也往上拉,保证玩家能看到最新的消息。

get?code=NGVkY2ExZWM4MGNlZDc1MGI5NmQ5N2U5NGViNmQzNGIsMTYzNDU2NTIwNDQxMw==

单选框(Radio buttons)

 

官方定义:暂无。

 

我的理解:单选框在游戏中的作用是让玩家对某项功能的选项进行切换,这项功能的选项必须选且只能选其中的一个,而且所有选项需要显示出来,比如设置界面的画质选择。在游戏中的使用频率比很低

 

基本构成:选框图片,选中图片,文本。

 

操作手势:点击。

 

详细说明:

①首要的准则为“易懂”,要让玩家一眼看出是单选框以及当前的状态,其次是方便操作。

②单选框样式比较统一,需要注意的是要和复选框以及切换按钮区分开

③状态只有两种,选中和未选中,一般用选中图片的显示或隐藏来表达。

④选框图片和选中图片一般是用“圆形”来设计。

⑤手势比较简单,只有点击一种。玩家点击单选框来切换两种状态。

 

特别注意:单选框只适用于所有选择项都显示出来的情况,若空间较小,显示不了则使用下拉列表。

get?code=NjI4MWEyODJjZTM4ZTAwYzY4MzczNzM5MDQzNTMxODgsMTYzNDU2NTIwNDQxMw==

复选框(checkboxes)

 

官方定义:复选框允许用户从一组中选择一个或多个项目。复选框可用于打开或关闭选项。(Material Design)

 

我的理解:若要对某项功能的选项进行切换,并且选项之间不互斥,则使用复选框,比如道具分解中选择道具品质。复选框在游戏中使用频率比较低

 

基本构成:选框图片,选中图片,文本。

 

操作手势:点击。

 

详细说明:

①首要的准则为“易懂”,要让玩家一眼看出是单选框以及当前的状态,其次是方便操作。

②复选框样式比较统一,需要注意的是要和单选框以及切换按钮区分开

③状态只有两种,选中和未选中,一般用选中图片的显示或隐藏来表达。

④选框图片和选中图片一般是用“方形”来设计。

⑤手势比较简单,只有点击一种。玩家点击单选框来切换两种状态。

 

特别注意:如果某功能有多个选择项那么就用复选框而不是开关。

get?code=NzkxMjAzN2M5MGJhYWQ5NmY1Zjk1MDBlZDRlMjJkNTMsMTYzNDU2NTIwNDQxMw==

滑动条(Sliders)

 

官方定义:滑块允许用户从一系列值中进行选择。(Material Design)

 

我的理解:滑动条是采用条形图反应一系列数值,并且提供给玩家选取单个值的控件。在游戏中使用频率很低,例如设置界面中对音量的调整用的就是滑动条。

 

基本构成:背景图片,进度图片,滑动杆图片,文本。

 

操作手势:点击,拖动。

 

详细说明:

①滑动条的设计准则应该是“及时反馈”,给予玩家操作的反馈一定要及时。其次才是“便捷"以及”易懂“

②滑动条的样式一般都是用“长条形”去设计。

③滑动条有开启以及关闭两个状态,一般是用滑动杆图片是否置灰来表达。

④进度图片和背景图片一样要拉开,滑动杆图片的两个状态也需要拉开,文本能够看清就好,滑动杆图片上建议加上当前值的信息。

⑤滑动条的手势一般都是拖动,建议加上点击

 

特别注意:滑动条一定要给反馈,建议用音效。进度条是滑动条的变体,只需要去掉滑动杆图片就好。

get?code=NDA5MTk3YmJhODA2MDQ1OWJiM2I2NGEyZTQwMjdkMzYsMTYzNDU2NTIwNDQxMw==

步进器(Stepper)

 

官方定义:步进器由一个增加按钮、一个减少按钮和一个由按钮控制的数值组成。每次点击按钮数字变化的数量是恒定的。(知乎《这个控件叫:Stepper/步进器》)

 

我的理解:步进器在游戏中是专门给玩家控制数量的控件,一般总是会伴随着“购买”“出售”等情况出现,例如商城界面,玩家选择购买多少个物品。总的来说,步进器在游戏中使用频率为中等

 

基本构成:按钮底图,按钮文字,输入框底图,输入框文字。

 

操作手势:点击,长按。

 

详细说明:

①步进器的设计准则是“方便点击”因为玩家大概率会有高频操作。

②样式上一般都是由两个按钮中间加一个输入框的组合。

③按钮需要考虑因达到阈值所以“禁用”的状态。

④“加”“减”按钮一定要区分开,并且要说明每次操作的数量。输入框只需要把数量信息展示出来就好。

⑤手势一般都是用点击来操作,少部分游戏也有添加长按手势的,玩家长按按钮数量不断地增加或减少,直至达到阈值或者玩家松开。

 

特别注意:步进器设计时需要考虑下输入框带不带交互,比如点击出数字键盘这就是一种常用的带交互的设计。若加了长按,建议每次改变的数量不要是均匀的,而应该是越往后,改变的数量越大。

get?code=NzlmZWFhMmZjMGFkZjk1ZWMwZDkyMThjYmE1ZDQxZTQsMTYzNDU2NTIwNDQxMw==

三、疑难解答

 

切换按钮,开关,单选框的具体区别?

 

我的理解:

get?code=MDczNTQzNDE1Y2M4MDk4NzMxMjUyNzJkMjRmMDBlYmYsMTYzNDU2NTIwNDQxMw==

 

get?code=YzY5YWI2MGY4N2U2YmFmZDlhOGM4OTllNWRiZTMyYmQsMTYzNDU2NTIwNDQxMw==

 

get?code=ZjdhNWFiZTAxMGQzY2FjNTYzZTRhMzgzYmJlNTgxZTAsMTYzNDU2NTIwNDQxMw==

页签和下拉框的区别?

 

我的理解:页签比下拉列表的层级更高,适用于需要并且能够把所有内容选择项显示出来的情况。

 

 

四、最后

 

整篇文章比较主观,总结的一些结论是根据目前市场上最常见的设计所得出的,也是最符合大部分用户认知的,学习成本最小。11种控件中有几个是其他控件的变体,因为使用频率较高所以也放在常用控件里面,其实游戏中绝大部分控件都是变体或者几个基础控件的组合,万变不离其宗,掌握好基础控件的本质然后融会贯通就好了。

 

其实大家不妨多去看看谷歌的material和苹果的Ios,游戏中的控件基本上都可以从这两个系统UI中找到对应的,比如游戏的系统文字提示对应着Toast,底部弹出的消息比如成就获得就对应着snackbar,二次确认弹窗对应着Dialogs。参考他们的底层,再根据自己的游戏进行针对性的设计,这样才能事半功倍。

 

最后谢谢大家的观看,希望能够帮到你们,感谢!


 

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

  • 允许他人重新传播作品,但他人重新传播时必须在所使用作品的正文开头的显著位置,注明用户的姓名、来源及其采用的知识共享协议,并与该作品在磨坊上的原发地址建立链接
  • 可对作品重新编排、修改、节选或者以作品为基础进行创作和发布
  • 不可将作品进行商业性使用
  • 需在以作品基础上创作的演绎作品上适用相同类型的知识共享许可条款

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

移动官网
公众号
在线反馈
返回顶部