防止文本截断和内容裁剪

智能手表比手持设备的屏幕尺寸更小,因此必须以用户可以访问的方式排列和显示元素,并有效地利用可用屏幕空间。为了帮助您的项目适合屏幕,请使用 Material 指南 中指定的适当填充和边距。

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

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

务必牢记这些注意事项测试您的设计,以确保它们能无缝适应不同的用户环境。

保持交互元素完全可见

如果您的界面包含交互元素,请检查用户是否可以完全滚动这些元素进入视图,尤其是在这些元素位于页面边缘的情况下。如果您的应用程序使用 Horologist 库,请使用 responsive() 布局工厂。否则,请使用空格并在 ScalingLazyColumn 对象的顶部和底部添加边距,以防止第一个和最后一个列表项目始终被裁剪。

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

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

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

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

设计百分比边距,而不是固定边距

要创建能够自适应 Wear OS 设备屏幕尺寸的内容,请应用百分比边距,其中每个边距的大小相对于屏幕尺寸。在项目位于屏幕顶部或底部的案例中,请应用额外的内部填充以最大程度地减少屏幕弯曲边缘的内容裁剪。相反,当一组内容足够小以适合一个屏幕时,顶部和底部的空间会增加。

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

不要使用文本可用的最大空间,而不考虑它在较小屏幕上可能如何截断以及如何影响设计的可操作性。

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

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

例如,按钮可能在较大屏幕上截断之前有更多字符的空间,但如果它是一个对用户体验至关重要的重要号召性用语,那么请使用在小设备屏幕上完全显示(不截断)的文本。

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

影响设计可操作性的文本(如号召性用语按钮)是针对最小的屏幕尺寸进行设计的。较大屏幕上的额外空间可以在断点之后显示更多行文本。文本行数取决于组件和上下文。

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