非滚动应用视图布局包括媒体播放器、确认对话框、选择器、切换开关,以及使用进度指示器的特殊健身或追踪屏幕。您可以限制任何屏幕的高度,这能确保用户专注于单一任务或一组控件,而无需浏览一系列选项。为了适应较小屏幕尺寸的设备,设计时需考虑到有限的尺寸,确保信息一目了然,并适当地利用圆形屏幕的特性。

构建响应式且经过优化的设计
非滚动视图侧重于让用户一目了然地获取信息,并以最少的交互提供价值。然而,为这些布局构建响应式行为可能具有挑战性。为解决此问题,我们更新了 Android UI 库布局和组件,使其具备内置的响应式行为,包括基于百分比的边距和内边距。如果您正在使用我们的 Compose 组件,则可以自动继承这种响应式特性。
对于独特的屏幕设计,请在各种屏幕尺寸上进行全面测试,确保组件和元素能够平滑适配,避免内容被裁剪。我们的百分比边距有助于间隔符(spacers)有效缩放,我们建议在 225dp 处设置断点,以便在更大的手表屏幕上引入额外信息并增强功能。
检查组件是否能适配可用宽度和高度
所有组件都是响应式构建的,这意味着它们会适应可用宽度(以及全屏时的可用高度)。请确保设置了必要的边距,以防内容被屏幕的圆角裁剪。此外,请确保采用必要的布局行为,防止非滚动屏幕的内容触发布局滚动或被截断。

构建自适应和差异化的设计
为了充分利用大屏幕上的额外空间,请在 225dp 处添加尺寸断点。此断点使显示额外内容、包含更多信息、选项、数据或更改布局以更好地适应更大屏幕尺寸成为可能。
这要求针对每个断点进行不同的设计。大屏幕设计(225+)可以包含以下额外元素:
增大现有组件的尺寸或更改其状态
利用断点展示更多细节或使内容更易于一眼即知。请确保小屏幕上的体验或功能不会受损,且大屏幕的更改仅为补充内容。

在当前布局内添加内容
通过添加组件或内容,布局可以提供更多的选项、细节,并最终提升价值。
这一切都不应以牺牲易读性(一目了然的特性)为代价。

使用分页
在需要更多内容但又希望保留非滚动布局的场景中,请考虑使用支持垂直或水平分页的多页面布局。

响应式和自适应行为
Compose 库中的所有组件都会自动适应更宽的屏幕尺寸,并相应增加宽度和高度。对于这些视图,利用断点可以为所有用户提供特别丰富且有价值的体验。请将所有边距定义为百分比,并定义垂直约束,使中间的主要内容能够拉伸以填满可用显示区域。
设计非滚动屏幕时,最好将其拆分为顶部、中部和底部三个部分。这样,您可以为顶部和底部添加内边距以避免裁剪,同时让中部区域利用屏幕的全宽。当屏幕尺寸有限时,请考虑使用旋转表冠(rotary scroll button)来控制屏幕元素,因为仅靠点击交互可能无法提供最佳体验。
检查清单
- 创建在所有屏幕尺寸上看起来都合理的灵活布局。
- 应用推荐的顶部、底部和侧边边距。
- 在内容可能被裁剪的地方,将边距定义为百分比值。
- 利用布局约束,使元素能最大限度地利用屏幕内的空间,并在不同设备尺寸间保持平衡。
- 如果使用了时间文本(Time Text),请为其留出空间,且不要覆盖页面顶部区域(详情请参阅带有顶部间隙的进度指示器)。
- 考虑使用紧贴边缘的按钮,以利用更多有限空间。
- 考虑在 225dp 处应用断点,以便在大屏幕上引入额外内容或使现有内容更易于一眼即知。

全屏进度指示器
进度指示器的行为没有变化,因为它会自动适应屏幕尺寸;但请考虑在中心区域应用比例(百分比)边距和内边距,以充分利用空间。此外,考虑使用断点在大屏幕上增加组件的尺寸或数量。

打造差异化体验
非滚动布局虽然可自定义,但在屏幕可添加的内容量以及适用的组件类型方面更为受限。使用图标按钮代替较宽的胶囊形按钮能更好地利用有限空间,而进度指示器和大号数据点等视觉图形有助于以直观的方式传达关键信息。所有紧贴屏幕边框的元素都会随屏幕尺寸自动增大,从而产生更强的视觉冲击力。