应用设计最佳实践

针对垂直布局进行优化

通过使用垂直布局来简化应用设计,让用户只需沿单一方向滚动即可浏览内容。

此应用的目标是引导用户从 A 点到达 B 点。
同时使用垂直和水平滚动,因为这会让您的应用体验变得混乱。

显示时间

在顶部显示时间(覆盖层),因为这为用户查看时间提供了一个固定位置。

在覆盖层的顶部显示时间,因为这为用户查看时间提供了一个固定位置。
在临时对话框、确认覆盖层或选择器上显示时间;例如,用户可能只会非常短暂地看到确认屏幕。

无障碍的内联入口点

确保所有操作都以内联方式显示,并使用清晰的图标和标签以实现无障碍访问。这包括设置和偏好设置的入口点。

尽可能同时使用图标和标签。
仅依赖图标来提示用户执行操作。

使用标签引导用户

对于较长的对话框,请使用标签帮助用户在滚动浏览内容时确定位置。

使用分段符、标签和其他提示来组织内容,并帮助用户在滚动浏览包含混合内容的较长视图时确定位置。
为包含单一内容类型的对话框添加标签。

提升主要操作的地位

将主要操作置于覆盖层顶部,方便用户在您的应用中执行操作。

将明确的主要操作提升到顶部。
将主要操作放在超长页面的底部。

在滚动屏幕上显示滚动条

仅在滚动屏幕上使用滚动指示器,以避免产生错误的交互预期。同样,请记得在滚动屏幕上添加滚动指示器,以表明您正在查看屏幕的哪个位置。

如果整个视图可以滚动,请显示滚动指示器。
在不可滚动的视图上显示滚动指示器,或在可滚动视图上不显示滚动条。

为更大屏幕尺寸进行响应式设计

确保您使用的组件能够填充可用宽度,并在不可滚动的布局中考虑高度。

所有 Compose 组件均采用响应式构建,但我们鼓励进行任何旨在提升设计水平并在更大显示屏上增加额外价值的自定义。

确保内容填充可用宽度和高度,并确保全屏元素(ProgressIndicators、TimeText 等)在不可滚动的布局上能响应式地进行调整。
使用无法响应式填充屏幕的固定宽度组件,或不调整内容行为以填充可用空间。

使用响应式(百分比)边距

我们建议使用百分比边距,以便边距大小能适应显示屏的弯曲程度。

使用额外的百分比边距,确保内容不会在顶部和底部被裁剪。
组件不应在没有额外边距的情况下直接缩放以填充可用空间。