防止文本截断和内容剪切

智能手表的屏幕尺寸小于手持设备,因此以用户可以访问并高效利用可用屏幕空间的方式排列和显示元素至关重要。为了帮助您的内容适应屏幕,请按照 Material 指南中指定的方式使用正确的内边距和外边距。

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

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

务必在考虑这些因素的情况下测试您的设计,以确保它们能够无缝适应不同的用户环境。

保持交互式元素完全可见

如果您的界面包含交互式元素,请确保用户可以完全滚动这些元素使其显示在视图中,特别是当这些元素位于页面边缘时。如果您的应用使用了 Horologist 库,请使用 responsive() 布局工厂。否则,请使用间隔符并为 ScalingLazyColumn 对象的顶部和底部添加外边距,以防止第一个和最后一个列表项始终被剪切。

对于密集布局,请使用纸片而不是卡片

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

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

根据 Wear OS 设备的屏幕尺寸,用于显示额外文本和按钮的空间可能更小或更大。

设计时使用百分比外边距,而不是固定外边距

为了创建能够响应 Wear OS 设备屏幕尺寸的内容,请应用百分比外边距,其中每个外边距的大小相对于屏幕尺寸。当项目位于屏幕顶部或底部时,请应用额外的内边距,以最大程度地减少内容因屏幕弯曲边缘而被剪切。相反,当一组内容足够小,可以在一个屏幕上显示时,顶部和底部的空间会增加。

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

不要在不考虑文本在较小屏幕上如何被截断以及如何影响设计功能的情况下,使用可用的最大空间来放置文本。

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

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

例如,按钮在较大屏幕上可能在截断前有更多字符空间,但如果它是对用户体验至关重要的重要操作号召,那么请使用足够短的文本,以便在小型设备的屏幕上完全显示,而不会被截断。

或者,如果图块显示可变内容,例如从服务器获取的文本,则应规划文本在较小屏幕上可能被截断的情况。

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

不要编写占用较大屏幕上可用最大空间的文本,而不考虑它在较小屏幕上如何被截断以及如何影响设计功能。