从一开始就针对大屏幕进行设计

Android 设备有多种外形规格,包括手机、平板电脑、折叠屏设备和 ChromeOS 设备,屏幕尺寸也各不相同。Android 支持多种显示模式,包括多窗口、多显示器、自由形式和画中画。折叠屏设备可以处于各种状态或姿势,例如桌面或书本。

在开始设计应用时,请考虑不同的用例,例如:

  • 大屏幕设备为用户提供了更多空间,可以以不同的方式参与您的媒体应用内容。

  • 用户可以在多窗口配置中观看视频的同时执行多任务处理,或者利用更大的屏幕在捕捉图像后应用更复杂的编辑。

  • 用户可能会使用平板电脑进行视频通话,更清晰地看到朋友和家人。您的应用可以在自定义播放叠加层中显示关于标题或场景更丰富的上下文信息,或在屏幕上提供更多控制选项。

  • 浏览视图中的轮播可以展现更多内容,增强视觉吸引力;或者,您的媒体应用可以通过在播放内容旁边提供可浏览的 Feed 来保持用户参与度。

请记住,您的媒体应用在标准手机、折叠屏手机、平板电脑和 ChromeOS 设备上运行相同的代码,因此您应该从应用开发的早期就开始设计大屏幕适配方案。更多信息和视觉示例,请参见 大屏幕示例库

默认情况下,使您的媒体应用具有响应式设计

通过使您的应用布局能够适应手机、平板电脑、折叠屏手机和 ChromeOS 设备,避免在您的媒体应用中出现用户体验中断的情况。

您的应用应该能够响应不同的屏幕尺寸、方向和外形尺寸。自适应布局会根据可用的屏幕空间进行调整。更多信息,请参见 支持不同的屏幕尺寸

根据指南进行设计

核心应用质量是所有 Android 应用的基础,无论显示尺寸、设备姿态或其他设备特定因素如何。在开始设计大屏幕适配方案之前,您的应用应该满足这些基本要求。更多信息,请参见 核心应用质量

您的应用应该提供卓越的用户体验,无论设备外形尺寸、屏幕尺寸、显示模式或姿态如何,因此请根据以下 1、2 和 3 级指南设计您的应用。

这些指南定义了大多数类型 Android 应用的全面质量要求。

3 级

在这个基本级别,您的应用仍然必须遵守 UI 和图形 要求。您的应用已准备好用于大屏幕,用户可以完成关键任务流程,但用户体验可能并非最佳。

应用布局可能并不理想,但它确实可以全屏运行,或在多窗口模式下全窗口运行。它不会出现黑边,也不会在兼容模式下运行。该应用为包括键盘、鼠标和触控板在内的外部输入设备提供基本支持。更多信息,请参见 大屏幕就绪

2 级

在此级别,您的应用针对所有屏幕尺寸和设备配置实现了布局优化,并增强了对外部输入设备的支持。详情请参见 大屏幕优化

1 级

这是最佳的支持级别,并为用户提供最出色的应用体验,因为它指定了高级功能和特性。

在适用的情况下,该应用支持多任务处理、折叠姿态、拖放和触笔输入。在这个级别,应用具有高度差异化,因此请密切关注多任务处理和折叠姿态等方面的指南。要了解更多信息,请参见 大屏幕差异化

优化的布局

利用大屏幕的额外空间,避免出现黑边(由于限制方向)或拉伸。通过针对媒体和社交媒体优化应用布局,您可以扩展应用的覆盖范围,并在所有大屏幕外形尺寸(平板电脑、折叠屏手机和 ChromeOS 设备)上创造更好的用户体验,并支持所有手机尺寸。

导航栏和抽屉组件提供便捷的 UI 导航和控制。这些组件还通过将主要导航目的地放置在触手可及的位置,同时占用最少的屏幕空间,从而补充规范布局(列表-详情、Feed 和辅助面板)。

媒体布局

通过为列表-详情、Feed 和辅助面板实现特定于媒体的布局,使您的应用更易于使用。有关 MDX、Flutter 和 Compose 布局的信息,请参见 布局资源

  • 列表-详情:使用交互式媒体浏览器设计您的应用,使用户可以在观看或收听时浏览不同的媒体。媒体标题与正在播放的视频或音频文件并排显示。如果设备方向发生变化,列表-详情布局会相应地做出调整以保留应用状态。要了解更多信息,请参见 列表-详情布局

  • Feed:Feed 布局以可配置的网格排列等效的内容元素,以便快速、方便地查看大量内容,例如应用中的音乐 Feed 或电影和电视信息亭。更多信息,请参见 Feed 布局

  • 辅助面板:使用主要和次要显示区域,您的应用可以嵌入辅助面板以提供上下文、相关性或参考,例如类似标题的滚动列表、已发布的评论或同一艺术家或演员的其他作品。更多详情,请参见 辅助面板布局

要查看精选的媒体布局集合,请参见 媒体示例库

社交媒体布局

大屏幕为社交媒体用户提供了更多工作空间来创建内容、进行多任务处理、在应用之间拖动内容和共享内容。凭借小型设备上无法实现的独特功能和特性,您的媒体应用可以充分利用列表-详情、Feed 和辅助面板布局。

  • 列表-详情:这非常适合消息应用、联系人管理器或文件浏览器。例如,您的应用可以并排显示对话列表和详细信息,以便随时了解最新的消息。更多信息,请参见 列表-详情布局

  • Feed:此类布局中的常见组件包括卡片和列表。例如,以灵活的网格格式创建帖子的拼贴画,或使用大小和位置来吸引用户对重要帖子的关注。用户可以快速查看大量内容。更多信息,请参见 Feed 布局

  • 辅助面板:搜索和参考应用或生产力应用可以从这种类型的布局中受益。它使用户可以方便地使用内容创建工具。例如,您的应用可以让用户调整设置、访问调色板、应用效果并立即查看更改。更多信息,请参见 辅助面板布局

要查看精选的社交媒体布局集合,请参见 社交媒体示例库页面。

大屏幕媒体应用的最佳实践

使用大屏幕最佳实践可以帮助您避免不必要的应用返工。它们还可以从一开始就使您的应用在更多设备上更易于使用,尤其是在方向、键盘快捷键、相机预览支持和折叠姿态方面。

方向和调整大小

如果您的媒体应用声明了方向和调整大小限制,Android 将激活兼容模式。尽管兼容模式确保您的应用行为可以接受,但可用性会大大降低,并且用户体验会受到影响。

例如,如果您的应用在平板电脑上,平板电脑以横向模式停靠。如果您的应用限制为纵向模式,这会导致黑边,这对最终用户来说并不理想。您的应用应该允许用户使用他们喜欢的方向,因此请在设计中充分利用大屏幕的可用空间。

任何对方向的限制都会降低用户与内容互动或使用媒体的方式,从而限制了应用的使用。更改方向会在某种程度上影响大小,但调整大小不一定改变方向。

键盘快捷键

在大屏幕上,物理键盘上的键盘快捷键(如启动、停止、暂停、倒带和快进)更有可能被使用,从而使用户体验与键盘保持一致。

用户期望他们的媒体应用具备这些功能。为了减少用户的摩擦点,请考虑使用物理键盘测试您的应用。这有助于您在设计之初就注意到并包含这些重要的快捷键。

相机预览支持

在大屏幕上,您可能会遇到更多拉伸、裁剪和旋转问题。因此,您不能假设相机预览的大小就是您的媒体应用 UI 实际呈现的大小。

例如,如果用户使用平板电脑拍照,但在平板电脑屏幕上呈现倒置,这是一种次优体验。请为大屏幕包含相机预览支持。

更多信息,请参见 CameraX 预览Camera2 预览

折叠姿态

为大屏幕设计您的媒体应用包括折叠姿态。例如,您的应用可以让用户将平板电脑设置为桌面配置以进行媒体播放,或使用后置显示屏和双屏模式进行预览和捕捉。

将折叠姿态纳入您的开发计划中,您的应用就可以支持更多设备,并产生更广泛的影响。您以其他设备在没有折叠姿态的情况下无法实现的方式,扩大了用户的媒体体验。更多信息,请参见 折叠姿态