自适应设计确保您的 Roblox 游戏在各种屏幕尺寸、方向和输入类型上看起来和感觉都很好。超越传统的设备类别，比如移动设备、桌面和控制台，今天的设备具有更动态的能力，能够在不同的输入和显示之间无缝过渡。想象一下，一个支持多种方向（横屏和竖屏）、多种输入类型（触控、手柄、鼠标和键盘）以及多种显示尺寸（本机显示到大型电视）的平板电脑。
这些指南将帮助您交付一流的游戏，这些游戏能够智能地适应任何设备和输入类型，以吸引广泛的受众。有关帮助实施这些指南的工作流程和 API 的更多详细信息，请参阅 跨平台开发 指南。
要探索一个展示以下自适应设计概念的预制游戏，请查看 交互性展示。
核心原则
每个游戏都是独特的，但遵循几个关键原则将帮助您为每个玩家、每个设备提供直观和精致的游戏体验。
- 输入流畅性 — 确保您的 UI 与多种输入类型（如手柄、触控、键盘和 VR 控制器）兼容。这包括根据输入类型改变您的 UI 布局和提供辅助提示。
- 响应式布局 — 设计自动调整不同屏幕尺寸和方向的 UI 布局。
- 动态大小 — 根据需要缩放 UI 元素，以适应各种屏幕尺寸。
- 可读性和视觉清晰度 — 确保所有 UI 组件（包括文本和按钮）易于阅读且视觉清晰。
输入流畅性
确保您的游戏在各种输入设备上感觉自然，包括手柄、鼠标/键盘、触控和 VR。
- 为多种输入设计控件和快捷方式 — 确保游戏中的每个动作都可以使用手柄按钮/D‑pad、键盘快捷键和触控触发。控件应在视觉上和功能上可以聚焦，以便使用方向键或摇杆导航。测试每种输入模式，以确保核心游戏玩法、菜单和 UI 对于任何设备都可访问且自然。
- 根据输入类型提供视觉反馈 — 更新 UI 标签、提示和工具提示，以反映当前的输入方法，例如在手柄上显示 按 A、在触控上显示 捏合 或在键盘上显示 ShiftA。使用每个平台玩家熟悉的图标和语言。
响应式布局
您的游戏 UI 的布局应适应不同的屏幕尺寸和方向。在大型计算机显示器上，您有很多空间可以同时显示所有按钮。然而，在小型手机屏幕上，所有这些按钮看起来会显得拥挤和杂乱。
- 根据屏幕尺寸和方向调整布局 — 使用响应式模式，使您的 UI 适当地重新排列或紧凑。例如，将不太重要的按钮移入可折叠菜单（"汉堡"/菜单按钮）在小屏幕上，同时在桌面上完整显示。您的游戏 UI 应优雅地适应横屏和竖屏方向（如果支持）。
- 实现根据父级大小反应的布局组件 — 构建 UI 面板和小部件，以根据其父容器调整大小或位置。例如，使用视图分割布局，当屏幕窄时，侧面板折叠，但在更宽时展开。
动态大小
这与您的 UI 元素的大小有关，而不仅仅是它们的位置。您的 UI 应随着屏幕的缩放而缩放，以保持一切的合适大小，并始终容易互动。
- 支持内容驱动的大小和自动换行 — 实现自动调整行为：让文本框随内容增长或缩小，并支持自动换行，以便标签在屏幕尺寸变化时不会溢出或变得难以阅读。
- 暴露并尊重无障碍/用户偏好 — 允许您的 UI 响应用户指定的文本或 UI 缩放设置，将这些设置直接与 UI 元素大小绑定，以便增加的 无障碍偏好 总是会转换为更大、更易读的 UI。
可读性与视觉清晰度
玩家能够在小手机屏幕或者离他们较远的大电视上阅读您的文本吗？您的按钮在 3D 世界的背景下容易看清吗？
- 为小屏幕选择字体大小和样式 — 始终选择在移动设备上可读的字体大小，而不是仅在桌面上。实际设备上进行测试，并确认文本在最小预期尺寸下是清晰可读的。避免过于花哨或细长的字体。
- 确保对比度高和视觉层次清晰 — 使用足够对比度的文本和背景颜色，以便在不同的游戏内光照条件下可读。采用强烈的视觉层次，通过大小、颜色或位置使关键动作和标签脱颖而出。
结束思考
自适应设计是关于在玩家所在的位置提供体验，无论是在他们的手中、在他们的桌子上，还是在大屏幕上。遵循这些指南的 Roblox 创作者交付有意义、可访问和有趣的跨平台游戏。今天就开始适应吧，让您的创作蓬勃发展！