非滚动应用的常用布局

非滚动应用视图布局包括媒体播放器、确认对话框、选择器、切换器以及使用进度指示器的特殊健身或追踪屏幕。你可以限制任何屏幕的高度,这确保用户专注于一个任务或一组控件,而不是需要浏览选项列表。为了适应屏幕尺寸较小的设备,在设计时要考虑到有限的尺寸,确保内容一览无余,并在相关情况下拥抱圆形屏幕。

构建响应式和优化的设计

非滚动视图侧重于一览无余的信息,并以最少的交互为用户提供价值。然而,在这些布局中构建响应式行为可能具有挑战性。为了解决这个问题,我们更新了 Android UI 库布局和组件,使其具有内置的响应式行为,包括基于百分比的边距和内边距。如果你正在使用我们的 Compose 组件,你可以自动继承这种响应式能力。

对于独特的屏幕设计,请在各种屏幕尺寸上进行全面测试,确保组件和元素平滑适应并避免内容被剪裁。我们的百分比边距有助于 spacer 有效缩放,我们建议在 225dp 处使用断点,以便在较大的手表屏幕上引入额外信息和增强功能。

检查组件是否适应可用宽度和高度

所有组件都构建为响应式,这意味着它们会适应可用宽度(全屏时还适应高度)。确保你有必要的边距,以确保内容不会被屏幕的圆角曲线剪裁。此外,确保有必要的布局行为,以确保你的非滚动屏幕内容不会导致布局滚动或被截断。

构建自适应和差异化设计

为了最好地利用较大屏幕尺寸上的额外空间,请在 225dp 处添加一个尺寸断点。这个断点可以显示额外内容,包含更多信息、选项、数据,或改变布局以更好地适应更大的屏幕尺寸。

这需要为每个断点设计不同的布局。较大的屏幕设计 (225+) 可以包含以下附加元素

增加现有组件的尺寸或改变其状态

使用断点显示更多细节或使内容更易于一览无余。只需确保在小屏幕上体验或功能不会中断,并且大屏幕上的更改仅仅是额外的。

在当前布局中添加内容

通过添加组件或内容,布局提供了额外的选项、细节,最终提供价值。

这绝不应该以牺牲一览无余性为代价。

使用分页

在需要更多内容但希望保留非滚动布局的情况下,可以考虑使用带有垂直或水平分页的多页布局。

响应式和自适应行为

Compose 库中的所有组件都会自动适应更宽的屏幕尺寸,并获得宽度和高度。特别是对于这些视图,利用断点可以为所有用户提供特别丰富和有价值的体验。以百分比定义所有边距,并定义垂直约束,使中间的主要内容能够拉伸填充可用显示区域。

在设计时,最好将非滚动屏幕分成顶部、中间和底部三个部分。这样,你可以在顶部和底部部分添加内部边距以避免剪裁,但允许你的中间部分充分利用屏幕的完整宽度。考虑在屏幕尺寸有限时使用旋转滚动按钮来控制屏幕元素,因为仅靠点击交互可能无法提供最佳体验。

清单

  • 创建灵活的布局,使其在所有屏幕尺寸上看起来都合理。
  • 应用建议的顶部、底部和侧边边距。
  • 在内容可能被剪裁的地方,以百分比值定义边距。
  • 利用布局约束,使元素充分利用屏幕内的空间,并在不同设备尺寸上保持平衡。
  • 如果使用时间文本,请适应它,但不要与页面的顶部部分重叠(有关更多信息,请参阅顶部有间隔的进度指示器)
  • 考虑使用贴边按钮以利用更多有限空间。
  • 考虑在 225dp 处应用断点,以便在更大的屏幕尺寸上引入额外内容或使现有内容更易于一览无余。

全屏进度指示器

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

创建差异化体验

非滚动布局是可定制的,但在屏幕上可以添加多少内容以及哪种组件效果最好方面更受限制。使用图标按钮而不是更宽的药丸形按钮可以更好地利用有限的空间,而进度指示器和大型数据点等视觉图形有助于以图形方式传达关键信息。所有贴合屏幕边框的元素都会随着屏幕尺寸自动增长,因此它们变得更具影响力。