近期,我们发布了一系列关于在折叠设备和大屏幕设备上构建应用的文章:
答: 首先是思维的转变,过去为直板手机开发应用,如今要切换到为形状各异且尺寸不一的设备开发应用,开发者需要转变思维来考虑界面如何在各种尺寸的设备上运行,因为大屏设备的市场重要性已经毋庸置疑了。
数据显示,因为更大的屏幕空间,可折叠设备的多任务处理量增加了 7 倍,开发者有必要平衡布局的简单性与灵活性以优化应用,例如开发者在使用新的窗口尺寸类别和视口断点时,如果要优化断点的布局,可以将其视为 3 个基于宽度的断点。此外开发者还需要考虑可折叠设备的形态,如高级布局支持等。
在多任务处理方面,大屏幕提供给用户更多空间进行多项操作,如果用户在折叠设备上使用应用,开发者要考虑优化的是当用户展开设备时确保应用有良好的连续性、良好的界面显示效果和外观。手机以往通常是竖屏模式,当切换到大屏设备时,横屏模式变得十分重要。为了更好适配大屏幕,先优化确保应用在横屏模式下看起来不错。如果您已经做到了这一点,那么接下来您应该确保应用能够在多窗口模式下运行,并且应用的大小可动态调整。
在导航优化方面,以往在对直板手机竖屏模式的部分导航组件进行优化时,导航组件几乎始终停靠在屏幕底部,在可折叠设备或更大的设备中情况就不同了,用户实际上大多数时间是用双手持握设备,这就意味着导航组件最好是放置在设备边缘和侧面,而不是底部。另外建议开发者在进行导航项优化时,要切实考虑带状效果。在竖屏中大堆组件或元素占据设备边缘很合理,但在横屏中,用户大多数时间是双手持握设备,横跨两个边缘的元素就会占用大量空间且非常的显眼,这会给用户一种感觉——界面很笨拙,所以应尽量避免边缘停靠,考虑用其它方式放置组件和元素。
如需了解更多详情,请参阅:
支持不同的屏幕尺寸:
问: 对开发者而言,如何用最简单的方法在各种尺寸的屏幕上优化应用界面?
问: 对开发者而言,应该在平板电脑或可折叠设备上使用底部导航吗?
答: 从设计角度来讲,我们建议将底部导航组件更换为 Navigation Rail,它具有和底部导航组件类似的功能,内含多个主要的导航目的地。我们认为将导航组件放在侧边更易于使用,尤其是对于那些在应用内频繁通过导航栏切换界面的用户来说。二级导航也很重要,在移动设备中您可以使用标签页 (Tab) 或分段按钮 (Segmented Button) 等来实现二级导航,这些方法同样适用于可折叠设备,因此可以把它们与 Navigation Rail 结合起来使用。
从实现角度来讲,您可以通过多种方案实现,例如使用 View 或使用 Compose。对于基于 View 的应用,您可以使用资源限定布局,通过底部导航——如底部应用栏 (App Bar) 或底部导航菜单 (Navigation Menu)——形成窄小的布局,也可以使用 Navigation Rail 来打造更宽的布局。根据我们提供的窗口尺寸类别和指南,对于较小的布局,推荐使用底部导航菜单,对于中等和更大的展开布局,建议您考虑使用 Navigation Rail,因为使用这类设备的用户更多会使用双手而不是单手来操作设备。
Material Design 文档 Navigation Rail
https://m3.material.io/components/navigation-rail
导航目的地
https://developer.android.google.cn/guide/navigation/navigation-navigate
Navigation 组件使用入门
https://developer.android.google.cn/guide/navigation/navigation-getting-started
窗口尺寸类别
与此同时,当考虑到可拆卸设备时,另外需要考虑的一个问题将会是对设备输入的支持,可拆卸设备意味着它可以连接其他输入设备,比如键盘、触控笔、鼠标等,因此您还应该进一步考虑优化对输入设备的支持,您可以通过我们近期的文章《是时候为各式设备适配完善的输入支持了》了解更多。
布局和输入都很重要,尤其是当您开始考虑更大屏幕的设备时,如需创建适合不同屏幕尺寸的自适应布局,最好的方法是将 ConstraintLayout 用作界面中的基本布局。使用 ConstraintLayout,您可以根据布局中视图之间的空间关系指定每个视图的位置和大小。这样一来,当屏幕尺寸改变时,所有视图都可以一起移动和拉伸。虽然 ConstraintLayout 并不能应对所有布局场景,但无论您使用何种布局,都应该始终避免对布局大小进行硬编码。
窗口尺寸类别
问: 对开发者而言该如何适配可折叠设备的折叠形态,比如桌面模式?
答: 借助这个问题,我们想首先提一下可折叠设备的多种形态,它们分别是完全折叠形态、半折叠形态和完全展开形态。当设备处于半折叠形态的时候,设备还可能处于两种折叠状态,一种是桌面模式 (水平折叠边),类似把半折叠形态的手机放在桌子上;另一种是图书模式 (垂直折叠边),类似把半折叠形态的手机拿在手上,像在看书一样。设备处于半折叠形态的时候,靠近折叠边的部分不容易进行点按,因此应避免在这个区域设计交互,不过这也是一个很好的课题,可以研究一下在这些遮挡区可以放置哪些有趣的元素。
提及折叠形态,需要注意组件的过渡,将会在更大设备更大屏上使用各种组件,尤其是在桌面模式,需要特别注意界面,例如,在该模式下,关键操作或大多数操作是在底部屏幕完成的,而大多数内容组件实际上会放在另一个屏幕上;在折叠的桌面模式下,用户看起来像是在操作一部笔记本电脑,点触屏幕,手机可能会出现不稳晃动;这种模式下摄像头位置也可能会挡住后面的屏幕内容,虽然内容会被渲染,但因为被挡住而不可见。这些都是需要考虑的非常重要的事项,如何在不同折叠形态下操作起来符合人体工学设计。
如大家所知可折叠设备层出不穷,我们推出了 Jetpack WindowManager 库,帮助开发者对应用做出调整,以充分利用可折叠设备为用户提供全新的体验。如需了解更多,请参阅文章《详解 | 为可折叠设备构建响应式 UI》和 Codelab: 借助 Jetpack WindowManager 支持可折叠设备和双屏设备,我们邀请各位开发者尝试 WindowManager,同时希望您能向我们提供反馈以便我们进一步改进并尽快推出稳定版本。
可折叠设备的折叠状态
https://developer.android.google.cn/guide/topics/large-screens/learn-about-foldables#foldable_postures
Jetpack WindowManager
https://developer.android.google.cn/jetpack/androidx/releases/window
借助 Jetpack WindowManager 支持可折叠设备和双屏设备
https://developer.android.google.cn/codelabs/android-window-manager-dual-screen-foldables
答: 如果您想从头构建应用,强烈建议您优先考虑使用 Jetpack Compose。Jetpack Compose 是用于构建原生 Android 界面的工具包,可让您更轻松地设计和构建应用的界面,更快地打造更出色的应用。
如果您的应用基于很多 Activity,您希望在大屏上更好地呈现,推荐您使用 Activity 嵌入 (Activity Embedding)。Activity Embedding 只是允许您并排显示多个 Activity,不需重构应用架构,使用起来很简单。如果您使用了 Fragment 或者有可能已经在一个 Activity 应用中使用了 Compose,那么请勿使用 Activity Embedding,此时我们建议您检查所有应用的构建界面,具体实现方法请查看近期文章《为任意屏幕尺寸构建 Android 界面》。
Jetpack Compose
https://developer.android.google.cn/jetpack/compose
Activity 嵌入 (Activity Embedding)
https://developer.android.google.cn/guide/topics/large-screens/activity-embedding
如需了解更多,请参阅:
Material 的官方文档
https://m3.material.io
折叠设备的动效 (Motion) 指南文档
https://m3.material.io/foundations/adaptive-design/foldables/motion
Jetpack Compose
https://developer.android.google.cn/jetpack/compose
推荐阅读