第 2 层级:响应式且经过优化

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

响应式布局可动态设置按钮、文本字段和对话框等元素的格式和位置,以提供最佳用户体验。通过采用自适应设计做法,在更大的屏幕上自动为应用用户提供额外价值。无论是一次可查看更多文字、屏幕上显示更多操作,还是更大、更易于访问的点按目标,响应式做法都能为使用大屏设备的用户提供更出色的体验。

通过响应式设计提升价值

  • 使用内置响应式和自适应行为的 M3 Compose 组件库。
  • 利用自适应布局,可自动顺畅地调整以填充各种屏幕尺寸的可用空间。
  • 拉伸界面元素(包括文本字段、按钮、对话框)以填充多余的空间。
  • 增大字体大小,除非它们主要用于图形目的。

为 Wear OS 构建快速响应的应用和功能块

自适应界面会拉伸和更改,以便尽可能充分利用所有可用的屏幕空间,无论它们在何种尺寸的屏幕上呈现。

在圆形屏幕上设计响应式布局时,滚动视图和非滚动视图各有不同的要求,以便保持界面元素缩放并保持平衡的布局和组合。对于滚动视图,请使用百分比定义所有上边距、下边距和侧边距,以避免剪裁并按比例缩放元素。对于非滚动视图,请对所有边距使用百分比和垂直约束条件。这样,中间的主要内容就可以延伸以填满可用区域。

滚动视图

所有上边距、下边距和侧边距都应以百分比定义,以避免剪裁并按比例缩放元素。

非滚动视图

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

示例

以下图片展示了自适应且经过优化的应用示例。

紧贴边缘的按钮

卡片列表

切换器和按钮列表

包含图片卡片的功能块

包含图片的卡片列表

包含图表的功能块