使用键盘和游戏手柄创建原型

上次更新日期: 2022年1月4日

了解如何将键盘和游戏手柄用作触发器来构建原型。

键盘和游戏手柄触发器

Adobe XD 支持使用键盘快捷键和游戏手柄触发器来模拟本机桌面应用程序并构建丰富的游戏体验或设计原型。 在连接原型时,您可以从触发器下拉列表中选择按键和游戏手柄,并分配按键。 然后您可以在预览窗口、Web 浏览器或移动应用程序中播放或录制这些动画,与利益相关者分享它们以进行协作审阅。 这有助于您在为整体用户体验添加丰富图层的同时讲述更好的原型故事。

选择“按键和游戏手柄”可执行以下操作:

  • 将单个对象或一个画板连线到另一画板。
  • 连接两个组件状态。
  • 将组件状态连线到另一画板。
  • 播放语音、音频、视频或 Lottie。

使用键盘触发器

为某些桌面应用程序、辅助功能、快捷方式或游戏制作原型时,需要使用键盘与原型进行交互。 在原型中使用键盘快捷方式作为触发器在屏幕或组件状态间过渡,或者播放语音、音频、视频或 Lottie。

连接原型时,请选择“按键和游戏手柄”。 然后,按键盘上的任意键将它作为触发器分配给单个对象、某个组件状态或整个画板。 这意味着您可以在同一画板中使用多个触发器。

键盘触发器
键盘触发器

A. 触发器设置为键盘快捷键 B. 键盘快捷键 C. 操作设置为自动制作动画 D. 目标画板或组件状态 

您还可以结合按键和修饰键来定义触发器,使用 CMD S、CTRL R 等快捷键。您无法使用空格键和其他系统级按键,如功能键、睡眠键、音量键和电源键。在同一画板上使用相同快捷键分配多个触发器时,将分配最后一个触发器并在预览期间触发。

使用游戏手柄触发器

测试游戏原型的最佳方法是使用实际的游戏控制器硬件。 在原型中使用游戏手柄作为触发器在屏幕或组件状态间过渡,或者播放语音、音频、视频或 Lottie。 然后,在桌面播放器或 Web 浏览器中使用连接的游戏手柄控制器与原型进行交互。

通过蓝牙连接 Xbox 控制器(Series X/S 或 Series One)或者通过蓝牙或 USB 连接 PlayStation 控制器(DualSense 或 DualShock 4),然后选择“按键和游戏手柄”。 然后,您可以按连接的游戏手柄上的任意键将其指定为单个对象、某个组件状态或整个画板的触发器。

游戏手柄触发器
游戏手柄触发器

A. 选择游戏手柄的触发器 B. 游戏手柄快捷键 C. 操作设置为自动制作动画 D. 目标画板或组件状态 

确保使用相同的控制器设计和预览原型。 例如,如果原型是使用 Xbox 控制器设计的,您可以在桌面或 Web 上使用 Xbox 控制器测试原型。

移动应用程序和移动 Web 体验

XD 在桌面预览应用程序和 Web 原型中支持键盘游戏手柄。 如果您正在移动应用程序或移动浏览器上预览原型,可以通过“点击”在画板之间切换(因为它们没有连接键盘或游戏手柄设备)。

支持的游戏控制器和浏览器

USB 和蓝牙支持:

控制器

Mac (USB)

Mac(蓝牙)

Win (USB)

Win(蓝牙)

Xbox(Series X、Series S 和 Series One)

PlayStation(DualSense 和 DualShock 4)  

浏览器支持:

控制器

Chrome (Mac)

Chrome (Win)

Edge Chromium (Mac)

Edge Chromium (Win)

Edge(旧版)

IE

Firefox(Mac 和 Win)

Safari

Xbox (USB)

Xbox(蓝牙)


PlayStation (USB)



不推荐

PlayStation(蓝牙)


不推荐

使用键盘或游戏手柄键构建原型

切换到原型选项卡。

要定义交互,请单击源对象、组件状态或画板上的蓝色连接器。 在属性检查器中,设置以下选项:

  • 触发器:将触发器类型设置为“按键和游戏手柄”,然后选择键盘或游戏手柄上除空格键和其他系统级别按键(如 fn、睡眠、音量和电源)之外的任意键以分配触发器。
  • 类型:选择任何可用的操作类型:过渡Auto-Animate叠加滚动到上一个画板音频播放语音播放视频播放Lottie 播放
  • 目标:从下拉列表中设置目标画板或组件状态(不适用于某些操作类型)。

选择操作类型后,请设置该操作类型的具体选项。

要为一个对象、组件状态或画板定义多个交互,请执行下列操作:

  1. 将其选中,然后单击画板上的“+”按钮。 您也可以在属性检查器中单击“+”按钮。
  2. 在“属性检查器”中设置属性。

请记住,您可以应用一次点击、拖动悬停时间 触发器,而 语音按键和游戏手柄 触发器可以应用多次。 

1

要在桌面上预览更改,请选择“桌面预览” 图标。 

要在 XD 桌面应用程序中与利益相关者共享原型,请依次选择“共享”>“查看设置”>“设计审阅”“开发”

更多此类内容