层级 2:响应式和优化

采用响应式布局并自动适应不同屏幕尺寸的应用可为用户提供额外价值,并带来更高效、更具吸引力的用户体验。

响应式布局可动态调整和定位按钮、文本字段和对话框等元素,以提供最佳用户体验。利用响应式设计实践,自动为使用大屏幕的用户提供额外价值。无论是只需扫一眼就能看到更多文本,屏幕上更多可操作项,还是更大、更易于触达的点击目标,响应式实践都能为大屏幕用户带来增强的体验。

通过响应式设计增加价值

  • 使用内置响应式和自适应行为的 M3 Compose 组件库。
  • 利用响应式布局,它会自动平滑地调整以填充不同屏幕尺寸下的可用空间。
  • 拉伸 UI 元素(包括文本字段、按钮、对话框)以填充额外空间。
  • 不要增加字体大小,除非其主要目的是用于图形。

为 Wear OS 构建响应式应用和卡片式微件

响应式 UI 会伸展和改变,以充分利用所有可用的屏幕空间,无论其呈现在何种尺寸的屏幕上。

在圆形屏幕上设计响应式布局时,可滚动视图和不可滚动视图各有独特的要求,以保持 UI 元素缩放并保留均衡的布局和构成。对于可滚动视图,请使用百分比来定义所有顶部、底部和侧边距,以避免裁剪并提供元素的比例缩放。对于不可滚动视图,请使用百分比和垂直约束来定义所有边距。这样,中间的主要内容就可以伸展以填充可用区域。

可滚动视图

所有顶部、底部和侧边距都应使用百分比定义,以避免裁剪并提供元素的比例缩放。

不可滚动视图

所有边距都应使用百分比定义,并应定义垂直约束,以便中间的主要内容可以伸展以填充可用区域。

示例

以下图片展示了响应式和优化应用的示例。

边缘按钮

卡片列表

切换器和按钮列表

带有图片卡片的卡片式微件

带有图片的卡片列表

带有图表的卡片式微件