游戏开发论坛

 找回密码
 立即注册
搜索
查看: 10855|回复: 2

移动游戏UI设计原则:提示信息和反馈

[复制链接]

8360

主题

9283

帖子

2万

积分

论坛元老

Rank: 8Rank: 8

积分
29940
发表于 2015-12-1 11:57:18 | 显示全部楼层 |阅读模式
  根据IEG市场与用户研究中心2015年5月的研究数据,15Q1移动游戏新增用户631万人,其中71.0%为纯新用户,即没有PC游戏经验的小白玩家。而对于小白玩家来说,进入游戏的前10-15分钟——众所周知的流失多发阶段——最可能造成障碍的就是糟糕的UI设计,我们来看看UI问题会给玩家带来哪些影响:

image001.png

  对这些UI问题进行分类可以看到三类主要的问题:信息呈现问题,界面布局和操作流程问题以及提示信息和反馈问题,其中前两类与游戏类型和具体玩法规则的关联更密切,更适合面向单产品有针对性的评估(单产品CE和可用性测试项目中解决),而提示信息和反馈问题具有跨游戏类型的通用性,可以提炼普适性的设计原则,以便帮助已有产品发现体验问题,帮助新产品提前规避问题,并提供设计方案的参考。

  好的提示信息和反馈的评价标准

  首先,明确我们的研究对象,在玩家与游戏UI(用户界面)的交互过程中,系统主动呈现的起到提醒和解释作用的即提示信息;系统对玩家操作/行为给予的响应信息即反馈。

  提示信息和反馈是为游戏体验服务的,大家在游戏中是否有过这样的体验:“全神贯注的投入,心无杂念,忘记时间以及周围的环境,感觉自己处于巅峰状态,完全的享受这一过程的乐趣。”这就是“心流”体验,在游戏研究领域,“好的游戏应该引发心流体验”已经被众多游戏开发者认同,业界也普遍将“心流”作为评估游戏体验的核心指标。

  好的提示信息和反馈应促进心流的形成和持续,应支持心流各要素的产生:

image003.png

  提示信息的设计原则

image005.png

  一、使提示信息易于发现

  1.1增大提示信息的面积

image007.png

  提示面积越大,玩家自然越容易发现。

image009.png

  给设计师的tips

  • 如果布局允许,将玩家必须注意到的,对玩家十分重要的提示信息做成大面积

  1.2合理的颜色搭配突出提示信息

image011.png
image013.png

  给设计师的tips

  • 常用对比颜色搭配
  • 黄和蓝、紫和绿、红和青等
  • 任何色彩和黑、白、灰
  • 深色和浅色、冷色和暖色、亮色和暗色

  1.3使用晃动、闪烁等动效引起注意

image015.png

  人类祖先靠边缘视觉(余光)警戒周边的危险,因此人的周边视觉对会动的物体具有很高的灵敏度。这是一种强烈的注意力获取方法。

image017.png

  给设计师的tips

  • 这类提示只在显示重要信息时使用,如果数量过多或使用过于频繁,“习惯化”的现象便会出现,从而被玩家忽略。
  • 图标本身的运动或闪烁必须简短,只能延续1/4秒到1/2秒之间,否则很快它会从无意识的提醒变成有意识的打扰。图标外的光效打扰程度略低,可以更灵活使用。

  1.4合理运用“食物”“危险”“性”三大元素

image019.png

  大脑有一部分(通常称为旧脑)会观察周围的环境,并只关心这三个问题:“可以吃吗?可以和它性交吗?它会杀死我吗?”,这是人类进化带来的本能,因此合理运用“食物”“危险”“性”等元素能自然的吸引玩家的注意。

image021.png

  二、避免提示信息的干扰

  2.1提示以游戏世界中的事物呈现

image023.png

  提示若为游戏世界外的UI,会对玩家沉浸在游戏世界中造成不同程度的打断,若提示能合理的以游戏世界中的事物呈现,玩家会主动识别,进而形成心智模型。

image025.png

  给设计师的tips

  • 此类提示信息要符合玩家在真实世界中的经验和由经验形成的认知模型,这样才能易于发现和理解,如路标的指路作用、公告板上张贴公告、boss来了人群会恐慌逃窜等。

  2.2降低操作提示引起的游戏中断感

image027.png

  游戏过程中进行操作提示,会使玩家在继续游戏进程与理解提示信息中切换,产生中断感,尤其在高投入度需要快速反应的游戏类型中,中断感对体验的影响更大,应该尽量降低这种中断干扰。

image029.png

  给设计师的tips

  • 操作提示出现时,角色动作先变缓而非停止,若玩家对提示反应及时,角色的动作仍较连贯,对游戏体验的打断较小。
  • 利用环境元素的持续运动暗示游戏世界的正常运行,即使角色动作停止,也不会产生游戏进程中断之感。

  2.3减少同一屏的提示数量

image031.png

  人的注意资源是有限的,多个提示信息同时出现,彼此抢夺注意资源,会对玩家产生干扰,而且当数量较多的与玩家任务无关的刺激重复出现,提示就会被习惯化忽略,失去提示作用。所以应该尽量减少同一屏出现的提示数量。

image033.png

  给设计师的tips

  • 从布局考虑,通过收纳图标到二级菜单来减少同一屏出现的红点提示数量,这样点进二级菜单才会看到更多的图标和提示,避免红点数过多导致玩家习惯而忽略

  2.4根据使用场景,提供触发式的提示

image035.png

  在相同的游戏进程中,不同玩家可能会有截然不同的需求和行为,依据这些需求和行为,提供有针对性的触发式提示,是提供极致体验的一种设计思路。

image037.png

  给设计师的tips

  • 提供触发式提示,需要对玩家目标和行为习惯有较深的理解,预测行为,设置出发条件

  2.5通过减小面积/削弱颜色/不用动效的方式减弱干扰

image039.png

  面积,颜色,动效是影响提示可发现性的三大属性,在满足玩家易发现的前提下减弱其中一至两个属性,能减轻提示对玩家注意力的干扰。

image041.png
image043.png

  给设计师的tips

  • 先明确需要强调的(如战斗过程),才能确定需要弱化的(如不常用功能),再选择弱化的手段。
  • 动效是一种强烈的注意力获取方法,如果有必须要玩家集中注意的内容,不能在其周边放置“动”的元素,见《节奏大师》错误示例。

  三、使提示信息易于理解

  3.1每次只呈现少量信息点

image045.png

  人更擅长处理小块信息,大脑一次只能有意识地处理少量信息。提示信息常犯的错误就是一次给玩家提供太多信息。运用“渐进呈现”的设计理念,每次只展现玩家当前需要的信息,能避免信息过量给玩家带来不适。

image047.png

  给设计师的tips

  • 让玩家思考的认知负荷耗费最多脑力资源,如果在让玩家点击和动脑之间做取舍,多几次点击会优于让玩家思考。
  • 呈现的信息应该是当前玩家需要的或有帮助的。

  3.2特殊操作提示结合演示与实践

image049.png

  根据观察学习理论,人们观察他人的行为及其结果,就能学会复杂的行为,可以是对示范行为的简单模仿,亦或获得行为规则或原理。在游戏中,对于特殊的或重要的操作,先演示一遍给玩家看,玩家通过观察来学习,可促进理解并加深记忆。

image051.png

  给设计师的tips

  • 动作示范与文字说明相结合的效果最好,这样实现了对行为和规则两方面的理解,对示范的再现更准确。
  • 演示后的实践十分必要,玩家需要根据反馈调整行为作出正确的反应,最终理解掌握。

  3.3提供文字的视觉层次,确保关键信息的简洁

image053.png

  根据调研的经验,大部分玩家不会仔细阅读提示信息,而是很快的扫描,所以,提示的文字应该更容易浏览,为扫描而设计。保持关键信息的简洁是前提,还可以通过文字信息的视觉层次来突出关键点。

image055.png

  给设计师的tips

  • 将信息分段,把大块整段信息分割为各个小段
  • 使用大小、颜色等形式显著标记关键信息
  • 关键信息的文字要简洁易懂

  3.4使用图像帮助理解和记忆

image057.png

  人们能够快速识别图像,而且对图像的识别也触发了对相关信息的回忆。图像优势效应理论认为图像总是比文字更容易被人理解和记住,尤其表达的是常见又具体的事物而非更加抽象的概念时。

image059.png

  给设计师的tips

  • 涉及具体事物的说明更适合使用图像表达。
  • 需要玩家快速识别的更适合使用图像提示,如单局内操作按钮、各种功能入口。
  • 图像的隐喻需要符合玩家的认知,使用“图像+文字”可以避免对图像的理解歧义。

  四、使提示信息指向明确

  4.1操作路径的提示应完整连续

image061.png

  当提示针对一个多步骤的操作路径时,应该保持提示信息的完整和连续,每一步操作都给予提示,此时提示就如路标,确保玩家能跟着路标一步步走向终点。

image063.png

  给设计师的tips


  • 操作路径的提示应完整和连续,每一步操作都给予提示,直至玩家完成目标。


  4.2操作提示应靠近和指向操作对象
image065.png

  根据格式塔原理,人们会认为相互靠近(相对于其他物体)的物体属于一组,相反的,如果相关的物体之间距离太远,人们就很难感知到它们是相关的。操作提示如果远离操作对象,提示的作用减弱甚至会产生误导

image067.png

  给设计师的tips

  • 操作提示应靠近操作对象,从视觉上形成一个整体。
  • 规则说明的提示信息可以放在固定位置,但操作提示并不适合这种形式。

  五、利用提示信息促进追求

  5.1帮玩家设立目标,并提示完成目标的进度
image069.png

  人们喜欢自己有所进步的感觉,进步能给人带来强大的动力,即使很小的进步也能产生很大的效果,激励人们去完成下一步任务。帮玩家设立目标并追踪显示进度,可以强化不断达成子目标的行为。

image071.png

image073.png

  给设计师的tips


  • 不仅近期目标要具体清晰,使玩家有明确的追求,总体目标也需描绘出轮廓,给予玩家愿景;
  • 从视觉上给玩家向目标不断推进和进步的感觉,强调子目标(如关卡)在空间上的前后次序


  5.2显著标识可获得的特殊奖励
image075.png

  根据目标设置理论,一个吸引人且可达成的目标本身就具有激励作用,奖励可以提高目标的吸引力,增强人实现目标的恒心和努力程度,而目标达成与奖励之间的关系越密切,实际得到的奖赏与期望值一致,奖励的正向作用越明显。
image077.png

  给设计师的tips

  • 明确对玩家有吸引力的奖励是什么。
  • 使用视觉化的提示,显著标识达成目标即可获得的奖励。

  反馈的设计原则

image079.png

  一、通过反馈信息给予控制感


  1.1对玩家的操作即时反馈
image081.png

  根据心理学研究,0.14s是人们感知因果的最长时限,如果一个交互系统延迟超过0.14s才对玩家的操作做出反应,玩家就不会觉得那个反应是他的操作造成的,就会有“无法控制”之感。

image083.png

  给设计师的tips

  • 对玩家操作的响应时间不超过140ms(0.14s)

  1.2需长时间等待时,让玩家有事可做,做有意义/有趣的事

image085.png

  Christopher Hsee(2010)的心理学实验表明,相比有意义的忙碌而言,无所事事会令人感到不耐烦和不悦。在长时间等待时,系统也要给予玩家响应,使玩家理解系统正在运作,老旧的做法是进度条和沙漏,如今许多游戏已有更多有趣做法。
image087.png

  给设计师的tips

  • 需要长时间等待时,使玩家理解系统正在运作,显示加载进度,即还需等待时间。
  • 等待过程中,可以为玩家提供有意义的(如给设计师的tips),或者有趣的(如小游戏),总之不要“无所事事”。

  1.3提供动作调节的辅助反馈
image089.png

  根据认知负荷理论,人的注意和记忆资源是有限的,若同时进行不同的活动,资源就要在活动之间进行分配。而在移动游戏中,由于屏幕较小,角色形象较小,靠不明显的角色姿势动作反馈来调整玩家操作,会耗费玩家较多的注意资源,从而影响对战局动态的注意。因此在角色动作发起时给予明显的辅助反馈,能提高控制感,帮助玩家更专注于战局上。

image091.png

  给设计师的tips

  • 对高精准度的动作调节,可以给予角度或力度上的辅助反馈。

  二、利用反馈信息促进理解

  2.1使用动画说明较复杂的行为结果关系
image093.png

  游戏场景中的很多反馈集中在玩家视觉中央凹的位置或玩家熟悉的固定位置,玩家很容易发现和理解自己的行为与结果之间的关系,但对于一些概念陌生或受其他反馈影响干扰的(如战斗时获得金币)的反馈,玩家会比较难理解自己行为与结果之间的关系,此时使用简单的动画说明归属等关系可以帮助玩家理解。

image095.png

  给设计师的tips

  • 使用动画说明资源的来源、去向等问题是很好的选择。

  三、通过反馈信息给予目标感


  3.1对精准度高的操作给予即时的评价反馈
image097.png

  玩家实施动作后给予即时的评价反馈,有助于玩家检查自己的操作并加以改进,同时让玩家有追求高评价的动机。

image099.png

  给设计师的tips


  • 如果提升操作的精准度是游戏的主要挑战,应该在玩家每一次操作后都给予即时的评价反馈,方便玩家自我评价进而树立更高的目标。
  • 评价的不同等级应有明显的视觉差异,可以快速识别判断。


  3.2对不同等级的结果成绩给予差异明显的视觉奖励
image101.png

  达成目标后的结果反馈是玩家最直接感受成就感的渠道,此时由画面视觉冲击带来的积极情绪是最直接的情绪激励,如果一个目标由多个子目标(额外任务)组成,通过不同等级的结果成绩评价玩家应对挑战的能力,那么对应不同等级的评价,应该呈现区别明显的视觉奖励,给予玩家层次分明的情绪奖励。

image103.png

  给设计师的tips

  • 在最高成就时给予最大的视觉奖励,次一级成视觉效果稍减,再次一级效果锐减,让玩家形成显著的心理落差,激励玩家为获得最高等级奋斗。
  • 除了使用更华丽的图标等形式,还可以通过强化角色动作、表情和环境氛围等方式提升视觉奖励。

  四、通过反馈信息给予临境感

  4.1角色与环境物体互动丰富反馈合理
image105.png

  当玩家把游戏场景当作“真实的”来感知时,玩家就会感觉自己在空间意义上,置身于游戏场景中,游戏就使玩家产生一种空间临境感,这种临境感会使玩家的注意力更集中在游戏世界中。如果玩家感觉游戏世界的各个部分是合理的、紧密结合在一起的,临境感会更强烈。与NPC对话、与怪物战斗、物理现象、与环境物体互动,都能增强“一个世界”的感受。

image107.png


  给设计师的tips

  • 使可互动的环境物体更丰富。
  • 当玩家与环境物互动时,提供与当前环境相关的真实合理的反馈。

  4.2游戏场景声音反馈丰富多样模拟真实
image109.png

  在游戏场景中,感觉信息的渠道多,视觉听觉等信息联系紧密,玩家临境感就会更强。例如,看见一只鸟飞过头顶,如果能听到它的叫声就会更真实。游戏场景中的声音反馈丰富且真实的话,会带来更强的临境感。

image111.png



image113.png


  给设计师的tips

  • 当玩家与游戏世界中物体交互时,模拟真实世界中对应的声音效果可以增强临境感,如脚步声、击碎瓦罐的声音。
  • 游戏世界外的界面操作音效应保持简洁,种类尽量少,且在不同位置的相同操作音效反馈保持一致。

GAD授权游资网发布











1

主题

303

帖子

3029

积分

论坛元老

Rank: 8Rank: 8

积分
3029
发表于 2015-12-1 13:53:43 | 显示全部楼层
写这么多,辛苦!

5

主题

120

帖子

745

积分

高级会员

Rank: 4

积分
745
发表于 2015-12-1 18:10:01 | 显示全部楼层
写的很好~ 学习了!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-11-25 15:21

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表