视觉效果
让玩家保持专注且知悉
原文地址
翻译: @Liuyuxuan(liuyuxuan-sptf8)
审校: @MoneyKitty(money-kitty)


焦点状态

要通过菜单引导玩家,请提供标线或指针。一个小指针就有助于玩家识别屏幕上的焦点。当指针悬停在按钮上时,更改按钮的外观以指示该区域交互可用。在大多数基于手柄的游戏中,指针被焦点状态代替:一种通过更改按钮或图形视觉效果凸显指针位置的技术。焦点状态类似于用键鼠控制的游戏中的悬停状态。在触控设备上,通常没有悬停状态或聚焦状态。玩家的手指充当光标,触摸直接用于与屏幕界面交互。

四个常见的焦点状态是:

  • 默认状态是按钮或图块没有发生任何交互时在屏幕上的外观。
  • 禁用状态表示按钮或图块无法被交互。显示禁用状态的常用方法是在默认状态基础上改为半透明或叠底颜色。
  • 聚焦状态表示按钮或图块在界面中可以被选中。在基于键鼠的游戏中,这也可以称为悬停状态。显示聚焦状态的常用方法是将按钮更改为聚焦颜色、和/或添加效果、轮廓或动画。
  • 选中状态表示按钮或图块当前处于活跃状态。选中的状态通常出现在列表或网格(设置、商店、装备菜单)中,用户可以在其中自由导航菜单,同时仍可以选择/激活设置或对象。为了指示选定状态,通常使用例如添加选中标记小图标、增加轮廓或改变颜色的方式。

不太常见的焦点状态是:

  • 锁定状态与禁用状态不同,因为按钮或图块仍可以与之交互。显示锁定状态的常用方法是添加锁定图标,锁定文本或所需的货币。
  • 状态用于在菜单内吸引玩家的注意力。指示新项目的常用方法是添加一个闪烁的图标,例如在按钮或图块旁加上“!”。

新状态和锁定状态通常在游戏的商店、存档槽位和技能树中使用。尽管可以使用锁定的图标来表示锁定的物品,但是这样的图标几乎不会提供有关玩家如何解锁物品的信息。

:::tips 最佳实践
为了有助于引导玩家在屏幕上浏览,请注意整个UI中使用焦点颜色和效果的一致性。具有不同的焦点状态有助于传达给玩家什么是可交互的,什么是提供信息的,就像在 PC 游戏中使用鼠标悬停状态或更换光标一样。
如果解锁锁定的物品需要一定的金钱或成就,那么请清楚地说明。 :::

尽早决定想要拥有的按钮状态可以确保突出显示、不突出显示、锁定、和禁用的元素清楚地传达游戏核心组件之间的交互关系。这些决定还会影响配色方案和形状语言的选择,驱动 UI 的整体样式和色调。

为了提高可读性,请在每个状态之间使用明显的区别。保留细微的视觉差异,以进行较小的动作,例如翻转,突出显示和选择设备。对于诸如导航和菜单项选择之类的用户操作,请使用粗体,清晰的更改状态,以帮助加强反馈。

创建具有所有主要组件的 UI 工具包,这些组件可用于模拟各种前端菜单和 HUD 布局:

  • 输入控件:按钮、文本字段、复选框、单选按钮、下拉列表、列表框、切换和日期字段
  • 导航组件:面包屑路径、滑块、搜索字段、分页、标签和图标
  • 信息组件:工具提示、图标、进度条、通知、消息框和阻塞式窗口(模态窗口)
  • 容器:折叠栏(Accordion,译注:直译为 手风琴)、拾色器和色板

可能并不需要以上的所有组件,但是在开发的早期阶段处理边缘情况则可以进行试验和迭代。在某些情况下,可能必须创建自定义组件才能最好地展示游戏的独特功能。

以模块化的方式进行思考,将所有组件分解为其单个核心元素。例如,滚动条可能由滑块,条和箭头组成。在诸如 Adobe Photoshop 和 Illustrator 之类的内容创建软件中将这些元素设计为单独的“符号”可以快速迭代。更改一个符号将影响其在所有原型中的每个实例。

焦点状态 - 图1

图标也一样。确定如何在保持一致性的同时传达不同的状态:
HUD 游戏功能可能需要唯一的状态表示形式,例如需要主动使用的和冷却状态的能力。在下面的示例中,主动使用的能力由逆时针转动地清空来表示,冷却状态为顺时针转动地填充,与使用方法相反。

焦点状态 - 图2
从上到下,从左到右依次为:

锁定;图标:黑色(100%);背景:黑色(25%)
准备中;图标:黑色(100%);背景:黑色(25%);进度背景(50%)
解锁;图标:白色(100%)>(50%);背景:#FF9900(100%)
禁用;图标:黑色(50%);背景:模糊
已装备;图标:白色(50%);背景:模糊
选中;图标:白色(100%);背景:模糊
被动使用;图标:阴刻白色(100%);背景:模糊
主动使用(顺时针);图标:阴刻白色(100%);背景:模糊
冷却(逆时针);图标:模板白色(100%);背景:模糊

焦点状态 - 图3焦点状态 - 图4焦点状态 - 图5
空闲 准备中 已装备

焦点状态 - 图6焦点状态 - 图7
锁定 未锁定

焦点状态 - 图8焦点状态 - 图9
主动使用 被动使用

HUD 准星与锁敌

HUD 准星用于在游戏过程中锚定玩家的焦点。准星用于指示锁定的目标、选中的武器或物品、弹药数量和血量水平。

HUD 准星是游戏中使用最广泛的 UI 组件之一。HUD 准星带来的焦点状态的沉浸感越强,玩家感觉游戏制作的打磨程度就越高。

在第三人称视角游戏中,区分选中的武器或弹药可能会很困难,因此要使游戏世界内的效果和模型脱颖而出:

焦点状态 - 图10
《光环 5》准星锁定在屏幕中央

焦点状态 - 图11
《EA NHL 18》标线取决于玩家的位置_