第三层级:自适应且差异化

指专门根据屏幕尺寸定制用户体验的应用,它们在关键屏幕尺寸断点*处利用新的布局,为使用大屏幕设备的用户带来更多价值,从而实现小屏幕设备无法匹敌的用户体验。

*在用户界面 (UI) 设计中,断点是指特定的屏幕宽度或视口大小,在此处内容布局和呈现方式会发生变化,以优化跨各种设备的用户体验。开发者使用代码(例如 CSS 媒体查询)定义这些点,建议您在设计规范中为这些断点提供两种设计。Wear OS 屏幕尺寸从 192dp 开始,较大屏幕的默认断点为 225dp。

在 Wear OS 上使用断点

在 225dp 处使用断点 (BP) 有助于优化一系列尺寸上的布局。

  • 在 225dp+ 处设计自定义布局和行为,以利用额外的屏幕空间。
  • 在断点后尽可能增加价值。
  • 在断点后使用更大的组件选项,以获得更易于一瞥的 UI。
  • 富有表现力和大胆。
  • 只为一种设备尺寸进行设计。在多种屏幕尺寸上测试您的设计。
  • 只依赖响应式行为。
  • 让您的应用或图块平平无奇。

示例

以下图片展示了自适应且差异化应用的示例。

媒体播放器

在 225dp 断点后,主要控件尺寸增大,底部增加了一个额外按钮 - 增加了价值,更好地利用了较大屏幕上的额外空间,并提高了易于一瞥性。

带按钮组的图块

在 225dp 断点后增加一行按钮 - 通过额外的按钮增加了价值。

选择器

在 225dp 断点后数字尺寸增大 - 更好地利用了较大屏幕上的额外空间,并提高了易于一瞥性。

带图表的卡片列表

在 225dp 断点后,主要数字和图表尺寸增大 - 更好地利用了较大屏幕上的额外空间,并提高了易于一瞥性。

带卡片的图块

在 225dp 断点后增加一行卡片 - 通过额外的卡片增加了价值。

地图

在 225dp 断点后增加一行卡片 - 通过额外的卡片增加了价值。

易于一瞥的通知

在 225dp 断点后,图片、应用图标和文本尺寸增大 - 更好地利用了较大屏幕上的额外空间,并提高了易于一瞥性。