非滚动应用视图布局包括媒体播放器、确认对话框、选择器、切换器,以及使用进度指示器的特殊健身或跟踪屏幕。您可以限制任何屏幕的高度,以确保用户专注于一项任务或一组控件,而无需浏览选项列表。为了适应屏幕尺寸较小的设备,请在设计时考虑到尺寸限制,确保一目了然,并在适用时采用圆形屏幕。
制作自适应且经过优化的设计
非滚动视图侧重于提供一目了然的信息,并通过最少的互动为用户提供价值。不过,要将自适应行为构建到这些布局中可能并非易事。为解决此问题,我们更新了 Android 界面库布局和组件,使其具有内置的自适应行为,包括基于百分比的内边距和内边距。如果您使用的是我们的 Compose 组件,则可以自动继承这种响应能力。
对于独特的屏幕设计,请在各种屏幕尺寸上进行全面测试,确保组件和元素能够顺畅自适应,并避免内容被剪裁。百分比边距有助于有效缩放分隔符,我们建议在 225dp 处使用断点,以便在较大的手表屏幕上显示更多信息和增强功能。
检查组件是否会根据可用宽度和高度进行自适应
所有组件均采用自适应方式构建,这意味着它们会根据可用宽度(以及全屏时的高度)进行调整。请确保您设置了必要的外边距,以确保内容不会被屏幕的圆角剪裁。此外,请确保必要的布局行为,以确保非滚动屏幕内容不会推送布局以进行滚动或被截断。
构建自适应且差异化的设计
为了充分利用大屏幕尺寸的额外空间,请在 225dp 处添加尺寸断点。借助此断点,您可以显示更多内容、添加更多信息、选项和数据,或更改布局以更好地适应较大的屏幕尺寸。
这需要为每个断点采用不同的设计。较大的屏幕设计(225 英寸以上)可以包含以下额外元素:
增加现有组件的大小或更改其状态
使用断点可显示更多详细信息或让内容更一目了然。只需确保在小屏幕上体验或功能不会中断,并且大屏幕更改只是额外的更改即可。
在当前布局中添加内容
通过添加组件或内容,布局可以提供更多选项和细节,最终提升价值。
但这绝不应以牺牲一目了然为代价。
使用分页
如果某个体验需要更多内容,但希望保留非滚动布局,不妨考虑采用采用垂直或水平分页的多页面布局。
响应式和自适应行为
Compose 库中的所有组件都会自动适应更大的屏幕尺寸,并获得宽度和高度。特别是对于这些视图,利用断点可以为所有用户提供特别丰富且有价值的体验。以百分比定义所有边距,并定义垂直约束条件,以便中间的主内容可以延伸以填充可用的显示区域。
在设计时,最好将非滚动屏幕分为顶部、中部和底部三部分。这样,您就可以为顶部和底部部分添加内边距以避免剪裁,同时让中间部分充分利用屏幕的整个宽度。如果屏幕尺寸有限,不妨考虑使用旋转滚动按钮来控制屏幕元素,因为仅点按互动可能无法提供最佳体验。
核对清单
- 创建在所有屏幕尺寸上看起来合理的灵活布局。
- 应用建议的顶部、底部和侧边外边距。
- 在内容可能会被剪裁的位置,以百分比值定义边距。
- 利用布局约束条件,让元素尽可能充分利用屏幕空间,并在不同设备尺寸之间保持平衡。
- 留出显示时间文本(如果使用)的位置,但不能与页面顶部重叠(如需了解详情,请参阅顶部留有间隙的进度指示器)
- 考虑使用紧贴边缘的按钮,以充分利用有限的空间。
- 考虑在 225dp 处应用断点,以在更大的屏幕尺寸上显示更多内容或使现有内容更易于浏览。
全屏进度指示器
进度指示器的行为不会发生变化,因为它会自动适应屏幕大小,不过,请考虑在中央区域应用比例(百分比)外边距和内边距,以充分利用空间。此外,还应考虑使用断点来增加大屏幕上的组件大小或数量。
打造差异化体验
非滚动布局可自定义,但在可向屏幕添加的内容量和最适合使用的组件类型方面受到更多限制。使用图标按钮(而非更宽的药丸形按钮)可以更好地利用有限的空间,进度指示器和大数据点等直观图形有助于以图形方式传达关键信息。贴合屏幕边框的所有元素都会自动随屏幕尺寸而增大,从而产生更大的视觉冲击力。