《王者荣耀》的操作交互设计研究

《王者荣耀》是国内最成功的手机版MOBA类型游戏。MOBA从PC的辉煌延续到了手游,当时很多人唱衰手机上的MOBA,主要还是操作上的问题,手机上无法实现鼠标的快速精确定位。为了优化手机版MOBA,大家进行了各种尝试,有触摸点击型(虚荣),有双摇杆型、单摇杆型,最终单摇杆+技能副摇杆结合的《王者荣耀》一统江湖,现在很少有人说王者手感不好的,它的很多设定都成了现在MOBA游戏的标杆。这里,我们就一步步地分解看看,王者的操作手感是如何设计的。...

《王者荣耀》的操作交互设计研究

王者荣耀》是国内最成功的手机版MOBA类型游戏。MOBA从PC的辉煌延续到了手游,当时很多人唱衰手机上的MOBA,主要还是操作上的问题,手机上无法实现鼠标的快速精确定位。

为了优化手机版MOBA,大家进行了各种尝试,有触摸点击型(虚荣),有双摇杆型、单摇杆型,最终单摇杆+技能副摇杆结合的《王者荣耀》一统江湖,现在很少有人说王者手感不好的,它的很多设定都成了现在MOBA游戏的标杆。

这里,我们就一步步地分解看看,王者的操作手感是如何设计的。

1、基本操作

我们从最简单的开始,一个单位的基础动作,无非就是以下两个:

《王者荣耀》的操作交互设计研究

王者(或是其他MOBA)严格遵循魔兽时代留下的规则:移动中,无法执行攻击动作;需要进行攻击,必须停下来,而且目标单位必须在其攻击范围内才会出手。暴雪系的即时战略游戏相当严谨地执行了这套规则。

这点区别与《孤胆枪手》、《奇幻射击》等可以同时移动+射击的双摇杆射击游戏。

《王者荣耀》的操作交互设计研究

继续延伸开,我们会发现,MOBA类游戏里,执行攻击动作前,必须先锁定一个目标。

魔兽争霸》内所有的单位都只能进行单体攻击,“溅射”、“分裂”被当成技能而存在。我们习惯“右键点击”需要攻击的目标,敌人脚下的“圈圈”就是锁定标志。

《王者荣耀》的操作交互设计研究

MOBA游戏脱胎于即时战略,“先锁定、后攻击”的特效被传承。可能有人觉得这很简单,但实际上后面的一系列攻击目标的判断,都是依托于这个框架进行展开的。

2、攻击范围

农药很贴心地把每个英雄的攻击范围标记了出来:

《王者荣耀》的操作交互设计研究

套入到之前的逻辑内, 那么攻击的判断流程如下:

《王者荣耀》的操作交互设计研究

大家看上图可能会有点蒙,啥叫“向前走几步”,具体是走几步?

如果敌人不在攻击范围内,你点了攻击键就傻站着不动了,其实明明敌人的位置也不远,向前走两步就能打到。

所以虽然你没有按移动键,系统也会“帮”你向前走几步,再执行后面的操作,这就引入了下面的这个概念。

3、警戒范围

我们先来看下图:

《王者荣耀》的操作交互设计研究

虽然木头人不在攻击范围内,但赵云也老远就锁定了它,向其发起了冲锋。

再看下图:

《王者荣耀》的操作交互设计研究

一定距离之外,赵云就不再锁定目标,原地玩起了耍花枪。

所以,英雄除了攻击范围之外,还有一个警戒范围,它才是判定是否要追击目标的依据标准。

《王者荣耀》的操作交互设计研究

警戒范围不可见,但确实存在,而且远程和近战是一样的(目测)。

《王者荣耀》的操作交互设计研究

照这样看,远程英雄需要跑动的范围小很多。

4、多目标选择

当然了,攻击范围内不仅仅只有一个敌人,就需要进行多目标的选择。

农药通过自定义设置来决定优先级:

《王者荣耀》的操作交互设计研究

这样就基本上可以解决优先级排列的问题了。此外还有一些极端情况,例如血量一样,位置也一样的情况如何判断?可以随机选择一个目标,或是其他处理方式,这样情况出现极少,这里我就不再继续展开。

由于多目标选择的锁定逻辑比较多,直接置入流程图内会比较庞大难以阅读,所以我把这部分模块单独拿出来,希望能理解:

《王者荣耀》的操作交互设计研究

这部分模块就可以单独处理了:

《王者荣耀》的操作交互设计研究

我们可以看到,两种偏好都是以“血少、最近”为原则,只是依次先后判断的区别。

针对自己英雄的特点或喜好进行选择(远程为了拉开距离减少位移,可能选择最近单位;近战或刺客为了集火点杀可能选择血少)。

5、特殊攻击按钮

虽然有了警戒范围、锁定优先级等设置,但还是有很多应用场景无法满足。

我们用“自由攻击模式(推荐)”的操作方式,经常会出现想去打敌方英雄,却在砍小兵的情况,更加致命的是,技能的释放也是同步攻击的目标的,所以会出现大招打在小兵身上的“惨剧”。

由于手机点击无法实现PC鼠标“指哪点哪”的精确定位,天美在这方面可谓是下了很大功夫,于是“自由攻击模式(进阶)”的操作方式出炉了:

《王者荣耀》的操作交互设计研究

这种操作方式说明看似简单,加入了两个单独的特殊攻击按钮(补刀、推塔),实际上,连普攻按钮的逻辑也发生了改变。

在这之前的操作方式,小兵和英雄视为等同(敌人),而功能键的加入,让其各司其职,以应对不同场景的需求(对线、团战)。

按钮有了针对敌人类型的优先级,分别如下:

普攻:英雄>塔>小兵

补刀:小兵>塔>英雄

推塔:塔>小兵>英雄

那么,“多目标选择锁定”模块相应进行修改:

《王者荣耀》的操作交互设计研究

相当于在原有的机制之上,再套加一层筛选,如果筛选目标唯一,则确定锁定目标。不唯一,就继续下层筛选。

6、特殊锁定按钮

前面几种设定的攻击按钮,实际上是把“锁定”、“攻击”两个绑定在一起,而这种操作模式,则单独将“锁定”功能剥离开来:

《王者荣耀》的操作交互设计研究

点击“小兵”、“英雄”按钮,自己的英雄不会进行任何移动或攻击动作,重复点击根据优先级,在范围内不断切换锁定目标。判断逻辑和第二种基本类似,这里就不再赘述。

锁定功能遵循,有“锁一直锁“”的原则,如果不进行特殊方式切换锁定的目标,则一直保持锁定状态。

那要如何解除锁定呢,目标死亡,消失(隐身或入草丛)或是跑远了,脱离锁定范围,就解除锁定。脱离锁定的范围比警戒范围略大,几乎都要出屏了。(也就是说,脱离锁定的范围>进入锁定的范围)

另外,王者的锁敌头像功能可谓是相当高级,看起来很别扭,实际是非常好用的,可以说,天美可真的是用尽了各种办法,最大限度地还原了鼠标操作的需求,赞一个!

《王者荣耀》的操作交互设计研究

另外,还有自动攻击,不仅仅是对单个目标的持续攻击,并且在目标死亡或消失后,可以自动攻击警戒范围内其他目标,可谓是非常用心。

今天这里介绍完了《王者荣耀》的普通攻击逻辑,仅仅普攻就有这么多小心机设定。如今大热的各类吃鸡手游,虽然各种操作不便,但依然对其有信心,因为大家相信,只要有设计师的精心设计和持续的版本迭代,就没有满足不了的需求。

今日推荐

多人游戏关卡设计视觉化指南

好用大于好看?关于游戏UI界面设计的思考

十分钟,看懂研发、发行和渠道的那些事儿

一键添加

《王者荣耀》的操作交互设计研究
《王者荣耀》的操作交互设计研究

加小编微信,享双重福利

1.加入GAD策划交流群,获取行业干货;

2.领取17G腾讯内部分享等独家策划资料。

《王者荣耀》的操作交互设计研究

《王者荣耀》的操作交互设计研究

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35357/

(0)
交互精选交互精选
上一篇 2018-02-26
下一篇 2018-02-26

相关推荐

  • 不以用户体验为目标的人工智能都是耍流氓

    上周末,老刘在家整理了一下旧物,忽然发现了这个。估计现在很多人都会觉得这简直是土到爆了,但在当年那可是先进到不行。听歌、拍照、玩游戏、上QQ,绝对是功能最强大的手机,每当老刘拿出来,那内心简直不要太骄傲。曾经把诺基亚这款手机当成宝贝的老刘,绝对没有想到,短短几年后,那些曾值得炫耀的功能,会变得不值一提。看看现在的手机,拍照都是自带PS的,玩游戏都是屏幕上直接操作的,买东西手机是可以直接付钱的,出门迷路了是可以直接导航的。老刘不禁感叹,科...

    2018-02-01
  • 用户体验对于SEO而言有多重要?

    用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键的位置,也是现在最具潜力的网络营销方式之一。我们先来了解一下:在百度算法中,如何判定一个页面是否有价...

    2018-02-28
  • Axure RP 8 入门手册 – 第6章(二)

    第5节检视功能-元件命名千语:楼叔,我才问一个问题,你就给我讲了这么多!好感动哦!小楼:嘿嘿,因为这个群里你最大嘛!千语:切!反正你也有空,顺便把元件的设置也给我讲讲吧!我看不管是元件的样式还是属性,都很复杂呢。小楼:您好!因为网络原因,您发送的消息是乱码。千语:还想等你给我讲完,发张我昨天泡温泉的照片给你呢!小楼:你看,其实这个元件设置也非常简单,你看在点中一个元件后,检视面板中就会呈现与该元件相关的设置……从上至下,首先看到的是元件...

    2018-04-22
  • 全国高校“用户体验、视觉界面(UI) 设计、交互设计新技术实践教学与应用师资研修班

    商务合作联系QQ:3158521867 或加微信号:jujiao01一、会议背景近年来新技术、新趋势不断爆发,同时掀起了互联网的蜕变热潮,行业和用户更加成熟理性,随着网站和平台开发需求不断增多,智能手机广泛应用,用户体验、视觉界面(UI) 设计、交互设计对于网络产品来说是赢得用户的关键特性。苹果、google等顶级企业的成功案例已经深刻说明了这一点。打破传统界限,连接商业与技术,在新商业环境中实现更大的价值,把设计领域、设计概念向外延展...

    2018-03-30
  • 交互设计笔记整理

    PC与手机对比使用环境pc:固定位置,干扰少,注意力集中,输入方式强大。手机:任何地方,干扰多,注意力难集中,输入方式单一。交互媒介pc:操作精准快速,桌面大显示内容多,过大屏幕会有视觉盲点。手机:手指操作,精准度低、速度慢。使用特点pc:需处理复杂任务,多任务切换,讲究效率和强互动,没有电池流量问题。手机:适合处理简单任务,多任务切换困难,适合各种姿势使用,电池流量问题严重。web与APP界面对比web是书架,内容繁多,一目了然。更直...

    微信热点 2018-04-07
  • 这样学Axure,效果更好,面试更容易拿高薪|1433人的经验贴

    众所周知,Axure是产品经理必备的工作软件。但为什么要学好Axure,仅仅是因为它是必备的软件?为了不错过更好的发展机会BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别等要用时,才发现自己没有!别让Axure阻碍你的高薪产品路。怎样学Axure,效果更好?想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没到一个周,就想放弃按教程操作,却出不了效果,又不知错在哪里难的知识内容看着费劲,...

    2018-04-20
  • 交互设计 | UX设计想法表达太难?——试试故事版StoryBoard

    UX设计中一些针对用户调研的方法Workshop、Observation、Interview调研结束后需要将调研结果整合反馈单纯以文字去呈现无法将设计信息最大化故事板、线框图等视觉化的信息传达方式直观准确的解决设计问题下面小编将为同学们详细介绍故事板在交互设计作品集创作中的应用及优点,帮助大家在设计过程中能更高效的完成设计想法的交流和沟通。故事板的应用故事板可看作代表镜头的插画,同学们在设计时需要把图像排列在一起,使自己的设计能够故事化...

    2018-03-17
  • Axure实验室 | 带放大效果的轮播图

    提起轮播图,相信大家已经非常熟悉了,脑海中自然而然的会浮现出轮播图的交互效果——几张图片,可以逐一的左右切换显示,而每次只能显示一张。这是最基本的轮播图,当然,我今天要讲的不是这种。还有一种轮播图,会同时显示三张图片,中间的图片会放大显示(相比左右两边的两张会大一些),像下面这样。阅读原文预览然后左右切换的时候(通过点击左右按钮或者左右滑动),左右两边的图片移动到中间位置时会动态放大,而中间的图片移动到左右两边时会动态缩小。另外,这种轮...

    2018-03-15
  • 喊话优酷:求别再强奸用户体验了好吗

    之前,我给大家做过腾讯视频、爱奇艺视频国际版与国内版的应用对比,可以说,有着谷歌商店的规范,这些国内的视频软件巨头,几乎看不见广告。不管是视频开头那丧心病狂,长达120秒,两分钟的广告,还是应用内Banner处各种穿插的广告,都没有了。看视频没有广告,点开就看,这种感觉可以说是相当nice的。但是!谷歌商店里却没有优酷视频!emmm...颇有种老奸巨猾的既视感。所以,优酷用户不想忍受广告,好想只能开会员,破财消灾...但是!开了会员,也...

    2018-03-21
  • SEO营销之浅谈用户体验

    好的产品不是做出来的,而是改出来的。任何一个产品都不可能一招致胜,都需要不断的打磨,改进,尝试过失败之后,才能更为光彩的进入用户的视野。在这个反复修改的过程中,大家提到最多的词恐怕就是“用户体验”了,没有之一。今天,山哥就来跟大家交流一下我对“用户体验”的理解,希望各位看官手下留情。什么是用户体验标准定义:人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应。通俗讲法:这个东西好不好用,用起来方不方便。总的来说,用户体验是用户...

    2018-03-23