针对垂直布局进行优化
使用垂直布局简化应用设计,允许用户沿一个方向滚动浏览内容。

建议做法
此应用的目标是将用户从 A 点引导至 B 点。

不建议做法
同时使用垂直滚动和水平滚动,因为这样做可能会造成令人困惑的用户体验。
显示时间
在顶部显示时间(叠加层),确保用户始终可在此位置看到时间。

建议做法
在叠加层顶部显示时间,确保用户始终可在此位置看到时间。

不建议做法
在临时对话框、确认叠加层或选择器中显示时间,例如,用户可能只会非常短暂地看到确认屏幕。
可访问的内嵌入口点
确保所有操作以内嵌方式显示,并使用清晰的图标和无障碍标签。其中包括设置和偏好设置的入口点。

建议做法
尽可能同时使用图标和标签。

不建议做法
仅依靠图标来提示用户采取行动。
使用标签引导用户
对于较长的对话框,在用户滚动浏览内容时,使用标签为用户提供引导。

建议做法
借助分节符、标签和其他提示来整理内容,在用户滚动浏览包含混合内容的较长视图时,为用户提供引导。

不建议做法
为包含单一内容类型的对话框添加标签。
提升主要操作
将主要操作拉取到叠加层顶部,让用户能够轻松在您的应用中执行操作。

建议做法
将含义清晰明确的主要操作提升到顶部。

不建议做法
在篇幅较长的页面中,将主要操作放在底部。
在滚动屏幕上显示滚动条
请仅在滚动屏幕上使用滚动指示器,以免用户产生错误的互动预期。同样,请务必在滚动屏幕上添加滚动指示器,以指明您正在查看屏幕的哪个位置。

建议做法
如果整个视图滚动,则显示滚动指示器。

不建议做法
在不可滚动的视图上显示滚动指示器,或在可滚动的视图上不显示滚动条。
针对更大的屏幕尺寸进行响应式设计
确保您使用的组件填满可用宽度,并考虑非滚动布局的高度。
所有 Compose 组件都是自适应构建的,但我们建议您进行任何自定义,以提升设计效果并在更大的显示屏上增添额外价值。

建议做法
确保内容填满可用宽度和高度,并且全屏元素(ProgressIndicator、TimeText 等)在非滚动布局中能响应式自适应。

不建议做法
使用固定宽度的组件,但这些组件无法响应式地填满屏幕,或者未调整内容的行为以填充可用空间。
使用自适应(百分比)边距
我们建议使用百分比边距,以便边距大小能适应显示屏的增长曲线。

建议做法
使用额外的百分比边距,确保内容不会在顶部和底部被剪裁。

不建议做法
组件不应仅仅放大以填充可用空间,而应留出额外的边距。