防止文本截断和内容裁剪

智能手表的屏幕尺寸比手持设备小,因此以用户能够访问且高效利用可用屏幕空间的方式排列和显示元素至关重要。为了帮助您的项目适配屏幕,请使用 Material 设计指南中指定的适当内边距和外边距。

即使您的设计适配了屏幕,当用户执行以下任一操作时,界面元素仍可能被截断或裁剪:

  • 更改显示语言。
  • 更改文本大小。
  • 启用粗体文本系统设置。

在设计时考虑到这些因素并进行测试至关重要,以确保设计能够无缝适应不同的用户环境。

保持交互元素完全可见

如果您的界面包含交互元素,请检查用户是否可以将这些元素完整地滚动到视图中,特别是当这些元素位于页面边缘时。如果您的应用使用了 Horologist 库,请使用 responsive() 布局工厂。否则,请使用间隔符(spacers)并为 ScalingLazyColumn 对象添加顶部和底部外边距,以防止列表的第一项和最后一项总是被裁剪。

在密集布局中使用小巧的卡片(Chips)而非普通卡片

如果您需要更密集的布局,请使用 CompactChip 而不是卡片。卡片较大的表面积使得防止文本截断和内容裁剪变得更加困难。

考虑屏幕尺寸对截断和裁剪的影响

根据 Wear OS 设备的屏幕尺寸,您拥有更多或更少的空间来显示额外的文本和按钮。

针对百分比外边距进行设计,而非固定外边距

为了创建能够响应式适应 Wear OS 设备屏幕尺寸的内容,请应用百分比外边距,使每个外边距的大小相对于屏幕尺寸。如果项目位于屏幕顶部或底部,请应用额外的内部填充(inner padding),以最大限度地减少屏幕弧形边缘带来的内容裁剪。相比之下,当一组内容足够小以至于可以容纳在一个屏幕上时,顶部和底部的空间会增加。

组件必须遵循百分比外边距,以便其尺寸随屏幕大小而缩放。这样,屏幕内容始终能填满可用空间,且不会被屏幕边缘裁剪。

不要在未考虑小屏幕上可能出现的截断及其对设计功能影响的情况下,就使用文本所能占用的最大空间。

使用小屏幕所需的字符限制

在大多数情况下,较大的屏幕在截断前可以显示更多的文本和内容。但是,即使可能有更多的水平空间,也请始终针对最小的屏幕尺寸进行设计,以在不同设备上创造一致的体验。

例如,按钮在大屏幕上截断前可能有容纳更多字符的空间,但如果这是一个对用户体验至关重要的号召性用语(CTA),请使用足够短的文本,以便在小设备屏幕上无需截断即可完全显示。

或者,如果磁贴显示的是可变内容(例如从服务器获取的文本),请规划好该文本在小屏幕上被截断的可能性。

影响设计功能的文本(如号召性用语按钮)在设计时应考虑到最小的屏幕。大屏幕上的额外空间可以在断点之后显示额外的文本行。行数取决于组件和上下文。

不要在未考虑文本在大屏幕上可能占用的最大空间,以及它在小屏幕上可能被截断并影响设计功能的情况下,就盲目编写文本。