近日,华为推出了10多款新产品,其中包括多款手机,P50家族也迎来了P50E,这款手机依然不支持5G网络,不过发布会上现场余承东表示他们的4G依然很快,信号比iPhone 13 Pro更好。

/   正文   /

近期,我们发布了一系列关于在折叠设备和大屏幕设备上构建应用的文章:

  • 折叠屏上应用设计规范,了解一下?(https://zhuanlan.zhihu.com/p/465050225)
  • 是时候为各式设备适配完善的输入支持了(https://zhuanlan.zhihu.com/p/458366880)
  • Android 与 Chrome OS 中针对大屏幕设备的更新(https://zhuanlan.zhihu.com/p/457282080)

我们在后台和社区等各渠道收到了很多来自开发者们的反馈,也把一些开发者们常见的问题进行了简单的收集和梳理,整理成这一篇关于为折叠屏和大屏幕设备构建应用的常见问题和解答,如果您在构建过程中有任何其他的问题,欢迎通过留言的方式让我们知道。

问: 在大屏幕这一细分市场中,存在哪些新的机会、新的产品和使用场景呢?

答: 根据国际数据公司 (IDC) 的报告,2020 年新增激活的 Android 平板设备约有 1 亿台,这个数字是惊人的。与此同时,如今激活的搭载 Android 系统的大屏幕设备总量已超过 2.5 亿台,这是个庞大的市场,当然就存在巨大的机会。如今随着可折叠屏幕使用量的增加,围绕折叠设备进行的开发方式更加多样,将应用延伸至手机之外的机会也就随之增加了。

例如 LumaFusion 这款产品,在进入教育市场时,Chromebook 起到了至关重要的作用。因为用户在编辑视频时需要在屏幕上进行大量的操作,更大尺寸的屏幕为用户带来了更多的屏幕使用空间。简而言之,在大屏幕上使用该产品是最理想的使用场景。

从设计角度来讲,可折叠设备将应用从常规手机屏幕转换到更大尺寸的屏幕,这为设计师带来了更多发挥的机会,这确实是一个引入不同功能、展示各种元素的好机会,这并非意味着要用更多内容来塞满更大的屏幕空间,屏幕更大通常意味着为用户提供更身临其境的体验。另外也大大增加了多任务处理的机会,用户可以利用多窗口模式同时执行多项任务,那么我们就有新的机会来考虑,比如,多个应用在彼此相邻时的形态、交互、状态切换等,这些都是不错的切入点。

问: 开发者针对于大屏幕应进行哪些优化,需要考虑哪些问题?

答: 首先是思维的转变,过去为直板手机开发应用,如今要切换到为形状各异且尺寸不一的设备开发应用,开发者需要转变思维来考虑界面如何在各种尺寸的设备上运行,因为大屏设备的市场重要性已经毋庸置疑了。

数据显示,因为更大的屏幕空间,可折叠设备的多任务处理量增加了 7 倍,开发者有必要平衡布局的简单性与灵活性以优化应用,例如开发者在使用新的窗口尺寸类别和视口断点时,如果要优化断点的布局,可以将其视为 3 个基于宽度的断点。此外开发者还需要考虑可折叠设备的形态,如高级布局支持等。

在多任务处理方面,大屏幕提供给用户更多空间进行多项操作,如果用户在折叠设备上使用应用,开发者要考虑优化的是当用户展开设备时确保应用有良好的连续性、良好的界面显示效果和外观。手机以往通常是竖屏模式,当切换到大屏设备时,横屏模式变得十分重要。为了更好适配大屏幕,先优化确保应用在横屏模式下看起来不错。如果您已经做到了这一点,那么接下来您应该确保应用能够在多窗口模式下运行,并且应用的大小可动态调整。

在导航优化方面,以往在对直板手机竖屏模式的部分导航组件进行优化时,导航组件几乎始终停靠在屏幕底部,在可折叠设备或更大的设备中情况就不同了,用户实际上大多数时间是用双手持握设备,这就意味着导航组件最好是放置在设备边缘和侧面,而不是底部。另外建议开发者在进行导航项优化时,要切实考虑带状效果。在竖屏中大堆组件或元素占据设备边缘很合理,但在横屏中,用户大多数时间是双手持握设备,横跨两个边缘的元素就会占用大量空间且非常的显眼,这会给用户一种感觉——界面很笨拙,所以应尽量避免边缘停靠,考虑用其它方式放置组件和元素。

如需了解更多详情,请参阅:

  • 为任意屏幕尺寸构建 Android 界面(https://zhuanlan.zhihu.com/p/456753578)
  • 折叠屏上应用设计规范,了解一下?(https://zhuanlan.zhihu.com/p/465050225)
  • MAD Skills 系列之导航组件系列文章(https://zhuanlan.zhihu.com/p/405298741)
  • 支持不同的屏幕尺寸(https://developer.android.google.cn/guide/topics/large-screens/support-different-screen-sizes)

问: 对开发者而言,如何用最简单的方法在各种尺寸的屏幕上优化应用界面?

答: 有多种解决方案可供选择,具体取决于您应用当前实际情况和未来计划。例如,您现在有一款基于很多 Activity 的应用,则可借助在 12L 功能中提供的 Activity 嵌入 (Activity Embedding),将多个 Activity 同时并排显示。这是一个很好的方法,无需重写所有布局代码和整个应用即可优化应用界面。

如果您正在考虑重写部分界面或整个应用,那么 Jetpack Compose 也是很好的选择之一。初期可以借助 Jetpack Compose 更轻松地构建自适应的界面,在未来的开发周期中可以更轻松地进行维护和执行其他类似操作。除此以外,还可以使用兼容模式,但兼容模式并不能为用户提供理想体验。所以强烈建议您优先选择使用 Jetpack Compose。

如需了解更多轻松优化应用的指南,请参阅:

  • Android 与 Chrome OS 中针对大屏幕设备的更新(https://zhuanlan.zhihu.com/p/457282080)
  • Material 网站(https://material.io/)
  • 借助 Jetpack WindowManager 支持可折叠设备和双屏设备(https://developer.android.google.cn/codelabs/android-window-manager-dual-screen-foldables#0)

问: 对开发者而言,应该在平板电脑或可折叠设备上使用底部导航吗?

答: 从设计角度来讲,我们建议将底部导航组件更换为 Navigation Rail,它具有和底部导航组件类似的功能,内含多个主要的 导航目的地。我们认为将导航组件放在侧边更易于使用,尤其是对于那些在应用内频繁通过导航栏切换界面的用户来说。二级导航也很重要,在移动设备中您可以使用标签页 (Tab) 或分段按钮 (Segmented Button) 等来实现二级导航,这些方法同样适用于可折叠设备,因此可以把它们与 Navigation Rail 结合起来使用。

从实现角度来讲,您可以通过多种方案实现,例如使用 View 或使用 Compose。对于基于 View 的应用,您可以使用资源限定布局,通过底部导航——如底部应用栏 (App Bar) 或底部导航菜单 (Navigation Menu)——形成窄小的布局,也可以使用 Navigation Rail 来打造更宽的布局。根据我们提供的 窗口尺寸类别 和指南,对于较小的布局,推荐使用底部导航菜单,对于中等和更大的展开布局,建议您考虑使用 Navigation Rail,因为使用这类设备的用户更多会使用双手而不是单手来操作设备。

如需了解更多,请参阅:

  • Navigation 组件使用入门(https://developer.android.google.cn/guide/navigation/navigation-getting-started)

问: 为大屏幕构建应用的时候,平板和桌面设备这两种类型有哪些需要注意的?类似 Chromebook Duet 这种可拆卸平板电脑有哪些需要注意的?

答: 从不同屏幕尺寸的角度来说,平板设备需要考虑的是横屏模式下的中等高度 (Medium height) 和展开宽度 (Expanded width),断点分别是 480dp+ 和 840dp+,桌面设备需要考虑展开高度 (Expanded height) 和展开宽度 (Expanded width),断点分别是 900dp+ 和 840dp+,更多屏幕尺寸相关的大小可以参考下面的表:

Android折叠屏生命周期_Android折叠屏生命周期

与此同时,当考虑到可拆卸设备时,另外需要考虑的一个问题将会是对设备输入的支持,可拆卸设备意味着它可以连接其他输入设备,比如键盘、触控笔、鼠标等,因此您还应该进一步考虑优化对输入设备的支持,您可以通过我们近期的文章《是时候为各式设备适配完善的输入支持了》(https://zhuanlan.zhihu.com/p/458366880)了解更多。

布局和输入都很重要,尤其是当您开始考虑更大屏幕的设备时,如需创建适合不同屏幕尺寸的 自适应布局,最好的方法是将 ConstraintLayout 用作界面中的基本布局。使用 ConstraintLayout,您可以根据布局中视图之间的空间关系指定每个视图的位置和大小。这样一来,当屏幕尺寸改变时,所有视图都可以一起移动和拉伸。虽然 ConstraintLayout 并不能应对所有布局场景,但无论您使用何种布局,都应该始终避免对布局大小进行硬编码。

如需了解更多,请参阅:

  • 窗口尺寸类别(https://developer.android.google.cn/guide/topics/large-screens/support-different-screen-sizes#window_size_classes)

问: 对开发者而言该如何适配可折叠设备的折叠形态,比如桌面模式?

答: 借助这个问题,我们想首先提一下可折叠设备的多种形态,它们分别是完全折叠形态、半折叠形态和完全展开形态。当设备处于半折叠形态的时候,设备还可能处于两种折叠状态,一种是桌面模式 (水平折叠边),类似把半折叠形态的手机放在桌子上;另一种是图书模式 (垂直折叠边),类似把半折叠形态的手机拿在手上,像在看书一样。设备处于半折叠形态的时候,靠近折叠边的部分不容易进行点按,因此应避免在这个区域设计交互,不过这也是一个很好的课题,可以研究一下在这些遮挡区可以放置哪些有趣的元素。

提及折叠形态,需要注意组件的过渡,将会在更大设备更大屏上使用各种组件,尤其是在桌面模式,需要特别注意界面,例如,在该模式下,关键操作或大多数操作是在底部屏幕完成的,而大多数内容组件实际上会放在另一个屏幕上;在折叠的桌面模式下,用户看起来像是在操作一部笔记本电脑,点触屏幕,手机可能会出现不稳晃动;这种模式下摄像头位置也可能会挡住后面的屏幕内容,虽然内容会被渲染,但因为被挡住而不可见。这些都是需要考虑的非常重要的事项,如何在不同折叠形态下操作起来符合人体工学设计。

如大家所知可折叠设备层出不穷,我们推出了 Jetpack WindowManager 库,帮助开发者对应用做出调整,以充分利用可折叠设备为用户提供全新的体验。如需了解更多,请参阅文章《详解 | 为可折叠设备构建响应式 UI》(https://zhuanlan.zhihu.com/p/412759415)和 Codelab: 借助 Jetpack WindowManager 支持可折叠设备和双屏设备(https://developer.android.google.cn/codelabs/android-window-manager-dual-screen-foldables#0),我们邀请各位开发者尝试 WindowManager,同时希望您能向我们提供反馈以便我们进一步改进并尽快推出稳定版本。

如需了解更多,请参阅:

  • 可折叠设备的折叠状态(https://developer.android.google.cn/guide/topics/large-screens/learn-about-foldables#foldable_postures)

问: 12L Activity Embedding 与其他构建大屏幕应用的方法相比有哪些利弊?如果从头构建,首选哪个?

答: 如果您想从头构建应用,强烈建议您优先考虑使用 Jetpack Compose。Jetpack Compose 是用于构建原生 Android 界面的工具包,可让您更轻松地设计和构建应用的界面,更快地打造更出色的应用。

如果您的应用基于很多 Activity,您希望在大屏上更好地呈现,推荐您使用 Activity 嵌入 (Activity Embedding)(https://developer.android.google.cn/guide/topics/large-screens/activity-embedding)。Activity Embedding 只是允许您并排显示多个 Activity,不需重构应用架构,使用起来很简单。

如果您使用了 Fragment 或者有可能已经在一个 Activity 应用中使用了 Compose,那么请勿使用 Activity Embedding,此时我们建议您检查所有应用的构建界面,具体实现方法请查看近期文章《为任意屏幕尺寸构建 Android 界面》(https://zhuanlan.zhihu.com/p/456753578)。

问: 当开发者在 Chrome OS 上调整窗口尺寸时,如何将应用组件顺畅转换为新的尺寸?

答: 请关注 Material 的官方文档(https://m3.material.io/),关于这个类型的问题未来我们可能会专门安排一个章节来说明。就目前来说,我们已经为 可折叠设备的动效 (Motion)  这个话题加入了一些指南文档,因为在这些设备中会遇到大量的转换场景,这些也适用于 Chrome OS。关于组件转换有一个要点需要注意: 当用户把自己的设备从一种状态转换到另一种状态时,通常界面上必须至少保留一个元素以帮助他们确定元素位置或了解元素是否发生变更。

从技术实现来说,要手动实现这些转换效果并在不同的设备形态下有着顺畅的交互并非易事,您可以借助我们为 Android 打造的界面工具包 Jetpack Compose 来进行构建。

如需了解更多,请参阅:

  • 使用 Material Design 组件实现 Material 动效(https://zhuanlan.zhihu.com/p/391368612)

欢迎您向我们提交反馈(https://services.google.cn/fb/forms/androiddevfeedback2022/),或分享您喜欢的内容、发现的问题。您的反馈对我们非常重要,感谢您的支持!