可折叠设备、平板设备和大屏设备更新一览

image

作者 / Oscar Wahltinez, Developer Relations Engineer, Google

用户们正在看到大屏幕的更多价值,也正在发现用一个设备做更多事情好处多多。专为大屏幕设计的应用无疑能够为用户提供更多助力。可以观看 可折叠设备,平板电脑和大屏幕更新一览 了解更多详情。

可折叠的屏幕也为大型设备提供了更好的人机工程学效果。折叠后,您可以把原本和平板电脑一般大的屏幕放进口袋里,这是以往的便携设备无法做到的。考虑到我们的应用生态系统,我们对此表示非常振奋,硬件的变迁正在让人们对手持设备抱有更多的期待。我们看到,用户对大屏幕的需求也延伸到了平板电脑,鉴于两者类似的应用体验,平板电脑的受欢迎程度现在也已经大幅增加。

△ 技术上的突破以及人们对人体工程学需求的变化导致了设备形态的变迁

△ 技术上的突破以及人们对人体工程学需求的变化导致了设备形态的变迁

本文将带您了解应该如何为大屏幕设备做好准备,以及我们最近的更新将会如何简化应用开发流程。但首先,让我们来谈谈大屏幕本身,以及为什么您应该为大屏幕专门优化您的应用。

为什么要支持大屏设备

△ 可折叠设备的用法有很多,这里只是其中一部分

△ 可折叠设备的用法有很多,这里只是其中一部分

在过去的一年里,设备制造商们发布了大批令人兴奋的全新可折叠设备和平板设备。用户能用这些设备做的事情比以往任何时候都多,相关需求也随之增加。如今,通过 Android 大屏设备,开发者们可以覆盖超过 2.5 亿台活跃的可折叠设备、平板电脑和 Chromebook。2020 年,平板电脑设备的销售量增长了 16%。分析师预计,到 2023 年市面上将有超过 4 亿台 Android 平板电脑。另外,可折叠设备也正在重新定义高端设备。Android 应用也可以在 Chrome OS 上运行,而 Chrome OS 现在是世界第二大桌面操作系统。

为大屏设备做好准备

更大的屏幕正在改变用户与设备互动的方式。您可以一边看笔记一边编辑幻灯片,一边规划晚上的出行计划一边查看餐厅推荐,或者在和朋友聊天时观看视频。让我们来谈谈基础支持,也就是让应用 "大屏幕就绪" 必须支持的功能。谈到大屏幕就绪,有三个重点课题:

  • 为大屏幕设计
  • 多任务
  • 输入模式

下面让我们逐一展开介绍。不过本文依然只是大概的讨论,请您务必查看 大屏幕应用质量指南 进一步了解这方面的细节知识。

为大屏幕设计

第一步是确保您的应用是为大屏幕设计的。为了简化这个过程,我们已经定义了具体的窗口尺寸断点和设备类别,以便您进行优化。如果显示设备的最短尺寸大于 600dp,请为应用添加平板电脑布局,并确保应用实现 边到边 (edge-to-edge) 全屏体验。开发者还应该让应用支持纵向和横向模式,因为更大的屏幕更可能在横向模式下使用。稍后我们会介绍 Material 自适应组件,来帮助您更好地利用更大的屏幕空间。

△ 由于可折叠和大屏设备的窗口尺寸是可变的,使用自适应布局比根据屏幕尺寸分割体验效果更好

△ 由于可折叠和大屏设备的窗口尺寸是可变的,使用自适应布局比根据屏幕尺寸分割体验效果更好

多任务处理

在大屏设备上,用户会默认期待应用支持分屏 (或多窗口模式) 和拖放等互动模式。您的应用应该允许调整窗口大小,来无缝地支持多任务。请正确处理折叠和展开事件,并让您的应用支持多窗口模式,避免应用窗口区域内出现黑边。

image

△ 在大屏幕布局中,拖放 是一种自然的交互,即使是在同一个应用中也是如此

image

△ 通过使用多实例功能,用户可以并排运行应用的多个副本。用户可以并排比较两个产品,在写文档时参考笔记,或者在规划事件时保持日历可见

输入模式

由于许多人使用大屏幕来提高生产力,平板电脑应该支持基本的键盘、鼠标和手写笔输入。

image

△ 在 Chrome OS 设备上使用 Android 应用的用户通常会配置实体键盘;应用应该支持标准的键盘导航和快捷键,以提供更全面的无障碍使用体验

组件更新

我们更新了 Jetpack 和 Material Design 库中的许多 UI 组件,以帮助您构建灵活的用户体验,并将手机 UI 扩展到更大的屏幕。

SlidingPaneLayout

为大屏幕优化应用时,最常见的自适应布局之一便是列表-细节 UI。比如短信应用在一边显示信息列表,另一边显示信息细节。

△ SlidingPaneLayout 会自动适应配置的变化,在不同的布局尺寸下提供良好的用户体验

△ SlidingPaneLayout 会自动适应配置的变化,在不同的布局尺寸下提供良好的用户体验

在较小的屏幕上不得不堆叠起来的 UI,在大屏幕上则可以轻松实现并排布局。为此,您可以使用更新的 SlidingPaneLayout 库。这个库如今支持双窗格布局,SlidingPaneLayout 会使用两个窗格的宽度来决定如何布局 UI。具体做法是根据内容的宽度和可用空间,自动确定是否可以进行并排布局。例如,如果列表窗格的最小宽度为 200dp,而细节窗格需要 400dp,那么当窗口总宽度在 600dp 或以上时,SlidingPaneLayout 会自动将两个窗格并排显示。

image

△ SlidingPaneLayout 在我们的示例应用 IOSched 中使用的情况

我们已经更新了该库,以识别和适应 折叠和铰链。如果您使用的是带铰链的设备,并且铰链挡住了部分屏幕,它将自动把内容放置在铰链两边。

我们还引入了锁定模式,允许您控制窗格重叠时的滑动操作 (也支持编程切换)。例如,为了防止用户划进一个空窗格,您可能会让用户必须点击一个列表项来加载该窗格的信息,但允许用户通过划动返回列表。而在可折叠设备或平板电脑上,如果有空间并排显示两个视图,锁定模式会被忽略。

NavRail

垂直导航栏 在功能上等同于底部导航,并在大屏幕上提供了更符合人体工程学的导航体验。当您扩展用户界面到大屏幕上时,使用 NavRail 会更利于手指点击,因为用户通常会握住大屏幕的两边。而在手机上,用户则可能会握住设备的底部。

△ NavRail 会根据配置的变化自动改变导航菜单的位置

△ NavRail 会根据配置的变化自动改变导航菜单的位置

如果您的应用很强调垂直滚动,那使用 NavRail 就非常合适。因为在这种情况下,使用底部导航栏会造成遮挡,从而减少可见内容的数量,特别是当平板设备横向使用时。

其他组件

我们还对其他多个组件进行了更新。当应用适配到更大的屏幕时,最大的一个隐患就是 UI 被拉伸到整个屏幕的边缘。为了防止这种情况出现,我们为某些经常发生这种情况的 Material 组件添加了默认最大宽度值,包括:

  • Buttons (按钮)
  • TextFields (文本框)
  • Sheets (表单)

我们未来会将更多的组件添加至上述列表中。这些变更通过提供恰到好处的默认尺寸,让您的应用在大屏设备上看起来更棒。您可以在 Material Design 设计指南 中找到更多关于组件尺寸限制的信息。

△ 大多数 UI 元素应该具备最大宽度值

△ 大多数 UI 元素应该具备最大宽度值

WindowManager Jetpack 库

除了更新组件以帮助您扩展 UI 外,我们还提供了 WindowManager Jetpack 库 来帮助您在大屏幕设备上构建更好的体验。这个库现已发布 alpha 版本,它提供了一套通用的 API 界面,以支持不同的设备类型,包括折叠设备和平板电脑。

您可以使用 WindowManager 来查看显示屏特性,如折叠或铰链。它还会提供这些特性如何影响应用的信息,方便您创建最佳体验。比如,当用户一边观看视频一边把设备折叠成桌面模式时,您可以对可折叠设备的状态变化做出响应。

△ 应用应该无缝地适应越来越多的设备配置

△ 应用应该无缝地适应越来越多的设备配置

WindowManager 还提供了几个便捷的方法,以向后兼容 (从 API 级别 14 开始) 的方式检索当前和最大的 WindowMetrics 信息。

平台变化

显示 API 的废弃

您的应用需要确定屏幕或显示尺寸,以便为每个设备适当地渲染内容。随着 WindowMetrics API 的引入,一些与显示尺寸有关的方法已经被废弃。您应该使用 Window Manager Jetpack 库 作为向后兼容的替代方法。

独占资源

Android 10 提供了同时恢复多个应用的功能,并设有单一的 "顶层恢复" 应用。大多数应用无需更新即可受益于这一变更。最明显的例外则是当您的应用使用了独占资源,如麦克风或摄像头的时候。这方面的更多细节请参阅我们 之前的博文。

案例分享

为大屏幕优化应用不仅可以改善用户体验,还可以收获商业成果。我们在 Google Play 上看到越来越多的应用正在把握大屏幕带来的机遇。例如,Google Duo 实现了对平板电脑和可折叠设备的支持,以提升用户体验,在这之后其应用评分和用户粘性均有增加。

△ Google Duo 针对可折叠设备优化体验

△ Google Duo 针对可折叠设备优化体验

除了 Google Duo 之外,我们还对许多其他应用进行了现代化改造,以使其支持自适应布局,从而活用大屏幕和可折叠设备的优势:

  • Chrome 浏览器为大屏幕改进标签页导航;
  • YouTube 重新设计了用户界面,以提高在可折叠设备上的可用性;
  • Google Photos 在大屏幕上会显示更多的界面元素,如搜索栏;
  • Google Calendar 在大屏幕上提供了更符合人体工程学的用户界面。

了解更多

要了解更多关于可折叠设备和大屏幕设备的信息,请参考以下资源:

  • 适用于平板电脑、大屏设备和可折叠设备的自适应布局
  • 为可折叠设备构建应用
  • 大屏幕应用质量指南
  • Material Design 博文: 大屏幕设计

您对产品的反馈及问题对我们非常重要,欢迎向我们 提交反馈。您的问题有可能出现在下一期的 FAQ 中并获得解答。感谢您的支持!

你可能感兴趣的:(可折叠设备、平板设备和大屏设备更新一览)