从一开始就为大屏幕设计

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

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

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

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

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

  • 浏览视图中的轮播图可以呈现更多种类,以增加视觉吸引力,或者您的媒体应用可以通过在播放旁边提供可浏览的动态消息来保持用户参与。

请记住,您的媒体应用在标准手机、可折叠设备、平板电脑和 ChromeOS 设备上运行的是相同的代码,因此您应该从应用开发的最初阶段就为大屏幕进行设计。有关更多信息和视觉示例,请参阅大屏幕图库

默认情况下使您的媒体应用响应式

通过使您的应用布局在手机、平板电脑、可折叠设备和 ChromeOS 设备上具有自适应性,避免媒体应用中出现破碎的用户体验。

您的应用应响应不同显示尺寸、方向和外形设备。自适应布局会根据可用显示空间进行更改。有关更多信息,请参阅支持不同显示尺寸

根据指南设计

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

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

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

第 3 级

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

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

第 2 级

在此,您的应用针对所有屏幕尺寸和设备配置实施了布局优化,并增强了对外部输入设备的支持。有关详细信息,请参阅大屏幕优化

第 1 级

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

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

优化布局

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

导航栏和抽屉组件提供了方便 UI 和控制的离线导航。这些组件还通过将主要导航目的地放置在触手可及的范围内,同时占用最少的屏幕空间,来补充规范布局(列表-详情、动态消息和支持窗格)。

媒体布局

通过为列表-详情、动态消息和支持窗格实现媒体特定布局,使您的应用更具可用性。有关 MDX、Flutter 和 Compose 布局的信息,请参阅布局资源

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

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

  • 支持窗格:通过主显示区域和辅助显示区域,您的应用可以嵌入支持窗格以提供上下文、相关性或参考,例如类似标题的滚动列表、已发布的评论或同一艺术家或演员的其他作品。有关更多详细信息,请参阅支持窗格布局

有关精选媒体布局的集合,请参阅媒体图库

社交媒体布局

大屏幕为社交媒体用户提供了更多工作空间来创建、多任务处理、在应用之间拖放内容以及共享内容。凭借小屏幕设备无法实现 distinctive 功能和能力,您的大屏幕媒体应用可以利用列表-详情、动态消息和支持窗格布局。

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

  • 动态消息:这种布局风格中的常见组件是卡片和列表。例如,以灵活的网格格式创建帖子拼贴,或使用大小和位置吸引对突出帖子的注意力。用户可以快速查看大量内容。有关更多信息,请参阅动态消息布局

  • 支持窗格:搜索和参考应用或生产力应用可以从这种布局风格中受益。它使用户可以轻松获取内容创建工具。例如,您的应用可以允许用户调整设置、访问调色板、应用效果并即时查看更改。有关更多信息,请参阅支持窗格布局

有关精选社交媒体布局的集合,请参阅社交媒体图库页面。

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

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

方向和调整大小

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

例如,如果您的应用在平板电脑上,平板电脑会以横向停靠。如果您的应用仅限于纵向,这会导致出现黑边,这对于最终用户来说并不理想。您的应用应该让人们可以使用他们喜欢的方向,因此请在您的设计中利用大屏幕的可用尺寸。

任何方向限制都会减少用户与内容互动或消费媒体的方式,从而限制您的应用的使用。更改方向可能会在一定程度上影响尺寸,但调整大小不一定会改变方向。

键盘快捷键

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

用户希望在他们的媒体应用中实现这些功能。为了减少用户的摩擦点,请考虑使用物理键盘测试您的应用。这有助于您在设计开始时注意到并包含这些重要的快捷方式。

相机预览支持

对于大屏幕,拉伸、裁剪和旋转可能会出现更多问题。因此,您不能假设相机预览的大小是您的媒体应用中 UI 实际渲染的大小。

例如,如果用户用他们的平板电脑拍照,但在他们的平板电脑屏幕上渲染时颠倒了,这是一个次优体验。请为大屏幕提供相机预览支持。

有关更多信息,请参阅CameraX 预览Camera2 预览

可折叠姿态

为大屏幕设计您的媒体应用包括可折叠姿态。例如,您的应用可以允许用户在桌面配置下播放媒体,或者使用后显示屏和双屏模式进行预览和捕获。

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