《天天酷跑》交互:极简操作的极致乐趣体验

发表于2015-05-01
评论1 1.2w浏览

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

167422913

       随着智能手机的普及和移动游戏的高速发展,手机游戏已经慢慢成为了大众消费品。移动游戏的用户有着和pc或者主机玩家使用的差异性,比如:

n  使用的场景不同

在乘地铁玩,排队中玩,课间休息时候玩…… 移动游戏用户肯定不同于pc游戏或者主机游戏,不同的场景点注定了移动用户不太有很多的机会可以在一个固定的地点放松并全情投入的玩游戏。场景的不确定性导致他们只能迅速的点屏幕,无心去探索更多的细节。

http://km.oa.com/files/post_photo/651/221651/93201950a212f93635cfbf58547b3aa2.png

 

n  移动用户的习惯不同-利用碎片时间

移动游戏的游戏时间不可能等同于一般pc游戏,玩家可以再一段固定的时间专心享受游戏,各种不同的场景导致玩家使用的都是碎片时间。玩家需要随时玩,想到就拿出来玩一下,但是随时可能停止,过一会又会需要接下去玩一会。

总结起来就是:快速开始,轻松结束,随时继续

 

http://top.oa.com/pictures/201411/1416221615_52.png

n  App的来源非常简单,用户耐心空前降低

App store内游戏非常多,随时会有新游戏刷上排行榜,每天用户被海量的新游戏淹没。忠实度变得极容易动摇。

所有这些因素都导致了玩家对于一款游戏的耐心变得非常小,如果设计让他们有疑惑或者带来不便,他们马上可能放弃流失。一旦让他们感到困扰,或者说他们感觉无聊就会迅速转移方向。所以对于移动游戏的玩家,他们根本目的就是想通过极度简单的操作行为和学习成本,达到最极致的乐趣体验。

    这就给了游戏交互设计十足的挑战,作为移动游戏的交互设计我们能做到哪些呢? 尽量把操作退回到幕后,把玩家的任务(换装,升级,布阵,好友互动)和娱乐体验放到前面!

我们在设计天天酷跑游戏的时候是如何考虑移动用户使用的特点,达到设计目的的呢?归纳一下主要从以下三点来着手:

 

    创造流畅感,减少认知障碍和造成操作卡顿的因素

    游戏的流畅感也可以被称作沉浸感,它指的是一种暂时性,主观的经验,当人们在进行活动的时候如果完全的投入情境中,就是进入了一种沉浸的状态。在界面交互的过程中需要尽可能的做到流畅操作,帮助玩家沉浸游戏体验,而不是产生疑问和卡顿。

1.    更大的控件,点击区域

   IOS界面指导手册规定,可触摸元素至少有44 X 44point,毫无疑问太小的点击区域不适合指控。但这个概念有时被误解为做更大的按钮控件,事实上我们在处理某些特定设计细节的时候,视觉上的按钮可以处理为只起到提示点击的作用,实际响应的点击区域可以放大到保证准确点击。

酷跑游戏操作按钮(跳,蹲)的点击区域各为半屏充分容错

 

http://top.oa.com/pictures/201411/1416221645_38.png可视的按钮非常小,点击响应区域大,金币,钻石购买等,部件列表升级按钮小,点击区域大。

部件升级的按钮很小,并且具关联性的出现在进度条旁边,起到在视觉上起到提醒的作用,但是响应区域大,让玩家可以轻松点击。

 

http://top.oa.com/pictures/201411/1416221657_90.png

2.    切分功能步骤,避免一屏内过多元素

我们常常因为考虑要减少操作步骤而把功能都堆砌在屏内,以为这样可以达到直观简单呈现功能的作用。且不说移动设备的屏幕通常尺寸都比较小不适合放置太多的元素。单单这里的直观和简单就是矛盾的,看到越多的东西玩家的认知成本就越高,过多的视觉元素会干扰玩家对主要信息的注意力,他需要停下来思考和判断下一步该点什么。这种反复的停顿,反而破坏了流畅感。

 

在设计天天酷跑世界对战界面的时候,由于包含多个游戏模式,我们曾经有过一个类似下面这个界面的设计方案:把游戏模式选择和对战类型选择放在一屏里,本想着让玩家可以在一个屏幕里完成选择模式和选择对战类型两个选择,但事实上这个界面展现出来的选项过于密集,重复性高,反而让选择变得困难。而且也不利于今后模式的拓展。

 

http://top.oa.com/pictures/201411/1416221677_100.png经过调整我们拆分了这两个功能步骤,独立出游戏模式选择,让它成为一个统一的弹框步骤出现在几个需要的地方,事实证明这样的调整让玩家的选择更加集中和简单,并且由于有了更多的屏幕空间,让这两个界面都可以有更多的余地去做视觉上的提升—使用了图片,加了界面过渡动画。反而增强了表现力。

遇到功能复杂的页面,我会建议能够合理拆分步骤,而且移动设备上的操作成本要小于pc,试想一下你平时操作iphone时是不是会不由自主的在屏幕上任何你认为可以点击的地方点点戳戳滑动,以期待应有的反馈。说实话拿个鼠标你绝对不会这样。

所以说,合理的划分功能步骤,谨慎的处理每一屏信息,是移动设备游戏界面保证玩家流畅操作的关键。

 

 

http://top.oa.com/pictures/201411/1416221687_12.png

3.    突出主要功能,次要功能隐藏

移动游戏用户的特点造就他们对移动游戏的关注度有限,时间有限。而设备的局限又造就了有限的屏幕空间。每增加一个功能都会抢夺这些有限的资源,所以在界面上更需要突出核心的内容和吸引人的点。可能游戏设计有若干的功能点,但是交互不应把这些功能点无脑的全摆在玩家面前,而是应当甄选其优先级,把玩家最需要的功能放在表面,隐藏其他次要功能。

比如酷跑的主界面随着版本迭代增加了更多的功能,于是我们就把不常用的功能做在了隐藏按钮内:

        http://top.oa.com/pictures/201411/1416221716_29.png

http://top.oa.com/pictures/201411/1416221745_27.png

 

值得一提的是有时候把复杂的功能做的看起来不复杂是很重要的, 把主要的信息放在表面,让玩家自己去进行信息的探索,把那些更详细的信息放在与之关联的按钮内。让玩家通过点击来“提问”。有一个很好的例子,全民打飞机的结算界面默认显示的是主要信息,包括最高分和金币所得,但是玩家如果需要获悉详细信息的时候,只需要点击详情按钮就可以打开更为详细的结算信息数据:

 

http://top.oa.com/pictures/201411/1416221759_53.png

 

4.    内容至上操作在下

这个很容易理解,由于移动设备游戏的操作特点屏幕底部一般是拇指点击最舒适的区域,如果操作按钮在屏幕上方的话,拇指操作过程中会遮挡大多数屏幕区域。这点和鼠标操作有很大的差别。但并不是所有的操作都可以和内容划分的,所以尽量建议把主要和常用操作放在底部。

      

 

http://top.oa.com/pictures/201411/1416221779_65.png设计还需要考虑手持设备的实际操作情况, 针对不同的情况做处理.比如我们在做炫飞模式的时候,导弹是从右边出现的,最早的提示方式设计了出现在屏幕右边缘的“惊叹号”,但在玩家右手操作的时候被拇指挡住,同时由于玩家视线集中在角色周围,对于屏幕边缘的注意力有限,导致玩家根本来不及意识到可能就被导弹击毙。经过调整,我们设计了出现在玩家角色前方的准星和辅助线提示,使提示元素出现在玩家的视线注意区域内。有效避免了失误的可能。

 

http://top.oa.com/pictures/201411/1416221789_40.png

 

5.    一致性包括交互层面的一致性和功能概念的一致性

一致性带来最少的学习和认知记忆成本。玩家从一开始有意识, 缓慢操作进步到无意识, 快速操作,受到一致性的严重影响. 一致性也带来开发成本的最小化。

酷跑部件统一的信息视觉结构用在各个界面:

 

 

http://top.oa.com/pictures/201411/1416221802_83.png另外,这里想说的是一致性不但包括结构操作层面一致性,还包括概念功能的一致性。有时候过渡复杂最根本的原因是不同又太过于相似的概念。在新模式的功能设计阶段我们曾经在几个功能的统一性上做了很多调整。

 

6.    及时响应

越来越多的研究表明,响应性已经成为影响体验最重要的因素。这里所说的相应性和性能无关,而是关乎是否交互系统能跟上用户,及时告诉他们当前状态而不是让他们无故等待。在玩家做出操作指令,系统处理指令并反馈给玩家正在处理的表示按照程度来分可以有以下:

系统给予反馈告知玩家正在处理指令 {转菊花,拼命加载中。。。Loading,,,}

系统明确告知玩家所做出的指令需要等待多久 {进度条,加载百分数,动画表现形式}

让玩家在等待的时间内有事可做,转移注意 {tips 小游戏}

 

http://top.oa.com/pictures/201411/1416221865_69.png

另外,在玩家做了某些操作后给予及时生动的反馈来预知和强化结果也是增强体验关键。比如换装界面在玩家装备不同部件之后,有及时的动画显示战力的提升或下降。

 

http://top.oa.com/pictures/201411/1416221877_88.png     

7.    用动画交代操作过程

操作过程中界面跳转往往使用户迷失在虚拟环境中的方向,玩家的视线被强行跳转,他需要重新定位新界面,这往往也是造成不流畅的因素。所以在处理操作转换界面的时候如果能用动态表达操作过程往往能帮助玩家理解。

酷跑界面的动画过渡:

http://top.oa.com/pictures/201411/1416221891_18.png

 

尽量用小过渡来替换大跳转:

 

http://top.oa.com/pictures/201411/1416221921_14.png   

 

用动画提升获得体验,如分解部件后的经验获得:

 

http://top.oa.com/pictures/201411/1416221947_69.png

 

二.更便捷和效率的操作

在操作流畅的基础上,仍然可以采用聪明的方式去减少费事的,机械性的步骤,提高操作效率,优化使用体验。

1.    精炼,结构化使信息被更快更容易的识别

酷跑部件信息:

 

http://top.oa.com/pictures/201411/1416221966_24.png

部件详情界面中把信息按照类别分成区块,让视觉上的结构体现出内部逻辑关联,使信息能更快更好的识别。

2.    减少页面层级

在换装界面中,点击右边的不同装备槽可以直接切换相应部件列表进行查看和装备,减少了关闭,切换再打开的重复步骤。

 

 

http://top.oa.com/pictures/201411/1416222068_43.png

http://top.oa.com/pictures/201411/1416222088_54.png

3.    减少文字,运用图标传达信息

在小精灵界面中用图标直接显示该小精灵的技能特征,让玩家可以更直接快速的判断:

http://top.oa.com/pictures/201411/1416222129_33.png

 

4.    运用手势做更直观和方便的操作

触屏设备本身提高了操作效率,更直接的手势操作替代了其他控制方式(鼠标,遥感,控制器等),合理利用手势操作能提升体验增加乐趣。

酷跑炫飞模式中金币奖励关,通过直接拖动角色上下移动的方式来“吃金币”

 

http://top.oa.com/pictures/201411/1416222159_40.jpg

夺宝船长的阵型布置界面,通过直接拖动下排列表内船只入九宫格来轻松实现布阵

 

 

http://top.oa.com/pictures/201411/1416222172_95.png

5.    符合玩家需要的快捷入口

提供减少思考的无脑自动选择方式。比如,模式选择时的快速游戏入口可以在玩家有选择综合症的时候帮助玩家快速体验到游戏乐趣:

 

http://top.oa.com/pictures/201411/1416222210_27.png   

    准备界面的其他相关界面的快速入口帮助玩家更方便的进行必要的战前准备:

 

http://top.oa.com/pictures/201411/1416222225_85.png

    另外,各种操作中的“自动功能”提供更便捷效率的操作,比如仓库分解过程中的全选B,全选C功能让玩家可以更方便的处理“垃圾”。以及进阶界面的系统自动选择进阶素材的功能让玩家省去手动机械性点击选择的麻烦。提高了操作效率,优化了体验

 

http://top.oa.com/pictures/201411/1416222237_40.png

 

三.    强化过程体验的表现力

让游戏界面各元素高效发挥其作用的基础上增加游戏的代入感,是游戏交互的设计精髓。表现力是游戏交互有异于软件交互的关键。游戏需要通过具有表现力的交互形式调动玩家的情感,达到一定虚拟情境。有时候增强表现力的过程中可以牺牲一部分易用性。

 

1.    拟物化设计

拟物化提供给玩家来自现实环境中熟悉的关联性使用感受和情感体验,更提升了乐趣。

抽奖界面的扭蛋机和寻宝仪器设计增加了真实感,更增添了博彩的实际关联性:

 

http://top.oa.com/pictures/201411/1416222277_21.png    

2.    时刻的目标导向性

游戏过程中始终显示前一名玩家的距离,随着奔跑过程不断缩短差距,让玩家时刻处于有目标追赶的紧迫状态。强化过程感受。

 

http://top.oa.com/pictures/201411/1416222288_75.png

3.    营造特定氛围,激发玩家情感

抽奖界面 奖池内的高级装备轮播,配合界面特效营造视觉营销的氛围。

 

http://top.oa.com/pictures/201411/1416222298_79.png

4.    自我展示,自我优越,以我为主

游戏结尾处根据玩家奔跑的距离设置抽宝箱环节,让玩家获得额外的开箱乐趣。由于奖品大小和玩家的成绩相关联,给玩家创造了自我控制的感受。

 

http://top.oa.com/pictures/201411/1416222308_57.png

说实话交互设计的细则很多,而且有些甚至是互斥和冲突的。(比如上述讲到的“切分功能步骤,避免一屏内过多元素”和“减少界面层级和操作步骤”)因为它们在具体的设计情境上的适用性是不同的。这和交互设计师具体设计过程中所关注的层面有关。

但是未必所有人都能够理解和运用好这些准则,这在做设计决策的时候也会存在争议。比如讨论设计点的时候,有些人觉得减少操作步骤是重要的,那势必会增加一屏内显示元素。而有些人觉得避免过多元素展示是重要的。未免产生很多争议,让设计决策变得艰难。

如何能让大家充分理解并合理运用设计准则呢?

于是我把这些细则分类,归属于三个层面。分别是我前面说到的:

1.     创造流畅感,减少认知障碍

2.     边界和效率的操作

3.     强化体验

http://top.oa.com/pictures/201411/1416222319_17.png这三个层面处于一个渐进的关系,沉浸感的创建 需要以上这三个层面循序渐进 逐一满足。需要先满足能顺畅操作,在操作流畅的基础上尽量做到效率操作,之后在可调节的范围内强化操作过程中的体验,达到逐步递进满足。

 

http://top.oa.com/pictures/201411/1416222340_83.png

而且任何交互界面设计规则都不应生搬硬套盲目使用,是需要对其充分理解,对应具体的情况进行灵活运用。找到最适合用户体验的方案。

这个三角理论提升了设计细则运用的实际可操作性,同时提供给大家一种做设计的思路,提高了设计决策的效率。让其他设计师和项目组收益。

 

利用玩家心理,结合巧妙的交互形式刺激消费

在游戏高度商业化的现在,适当的利用一些心理学手段,在交互过程中刺激玩家消费也是值得探讨的。呵呵了~~

首先我们通过对玩家的用户调研,了解到玩家在游戏中的核心动机在于社交追求和成就追求两点。而玩家的付费诉求最高点在于追逐排行榜的名次成就,以及玩家有个性化要求,需要有渠道满足玩家的炫耀感等社交需求。

1.    增加成绩,资产曝光率,激发玩家攀比炫耀的心理

排行榜作为玩家在酷跑游戏中社交的主要方式,我们最大程度的利用好友排行榜。在排行榜上增加了玩家成绩,资产曝光率激发玩家攀比炫耀心理。显示玩家游戏相关的成绩,角色,坐骑,头衔,特殊称呼。使玩家获得广泛的炫耀途径。

 

http://top.oa.com/pictures/201411/1416222353_79.png

除此之外,我们也充分利用个人信息界面,增加资产列表。使之成为“财富榜”,更好的互动展示方式。激起玩家的收集欲和“虚荣心”。

 

http://top.oa.com/pictures/201411/1416222377_91.png

2.    把能影响成绩的关键付费功能点放在与之相关的功能页面内

寻宝功能按钮放置在和装备相关的界面中,让玩家在需要的时候可以最快速的点击。

 

http://top.oa.com/pictures/201411/1416222389_10.png

把几个重要的付费点设置快捷入口,统一集中放置在玩家进游戏之前的最后一步(游戏准备界面),刺激玩家开局之前冲动型爆发式消费。

 

http://top.oa.com/pictures/201411/1416222424_66.png 

 

3. 更多途径,更具表现力的方式展示能提升成绩的新品装备

 

 

http://top.oa.com/pictures/201411/1416222455_15.png

 

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

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台