设计建议

借助 Android，您可开发在各种设备屏幕尺寸和设备类型上都能运行流畅的应用。这种广泛的兼容性有助于您设计一个可广泛分发到所有目标设备的应用。

不过，要让用户在每种屏幕配置下都能获得最佳体验，您需要针对不同的尺寸优化应用的布局及其他界面组件。在 ChromeOS 上，优化界面可让您充分利用额外的可用屏幕空间来提供新功能、展示新内容或改善体验，以改善与用户的互动。

适用于大屏设备的布局

如果您的应用是针对手机开发，而您想在 ChromeOS 和其他大屏设备上改进设计，则可以先对布局、字体和间距稍作调整。对于 7 英寸平板电脑或画布较大的游戏，您可能只需做这些调整。

对于更大的显示屏，您可以重新设计界面的各个部分，以将“拉伸变形的界面”替换为高效的多窗格界面、更便捷的导航控件以及其他内容。Material Design 团队的 Material Studies 提供了相关示例。例如，了解 Reply 如何适应不同的屏幕尺寸。

Reply 应用在不同屏幕尺寸下的显示效果

以下是一些建议：

  • 为这些大屏设备提供自定义布局。您可以使用屏幕的最短尺寸或最小可用宽度和高度来实现此目的。
  • 想象一下您的用户体验和布局在 ChromeOS 等横屏优先的环境中会如何运作。根据窗口大小调整布局，使其在这些屏幕方向上看起来效果良好且性能出色，或者使用 land 资源限定符提供特定的横屏布局。如需详细了解动态调整窗口大小以及针对大屏幕的其他注意事项，请参阅窗口管理页面。
  • 当应用拉伸为宽屏时，底部导航栏无法很好地进行缩放。不妨考虑将导航移至左侧菜单，这样用户可以更轻松地访问，并且可以显示更多选项。“回复”示例很好地说明了这一点。
  • 至少要针对大屏幕自定义字体大小、外边距和间距等尺寸，以提高空间利用率和内容易读性。考虑一下当用户离设备（例如 ChromeOS 设备或其他桌面环境）稍远时，界面会是什么样子。
  • 调整界面控件的位置，以便用户在使用鼠标或手持平板电脑时能触碰到这些控件，例如将控件放于两侧并远离中心。
  • ChromeOS 和其他大屏设备上界面元素的内边距通常应比手机上的大一些。边距和间距应随着屏幕尺寸的变化而相应调整。
  • 为文本内容设置合理的内边距，使其不会直接沿屏幕边缘对齐。内容与屏幕边缘间至少保留 16dp 的内边距。

尤其需要注意的是，不要让您的布局在屏幕上出现“拉伸变形”的情况：

  • 文本行的长度不应过长：经过优化后，每行最多 100 个字符，最好在 50 至 75 个字符之间。
  • 列表和菜单不应使用全屏宽度。
  • 使用内边距管理屏幕上元素的宽度，或切换为适用于大屏设备的多窗格界面（参见下一节）。

利用额外的屏幕区域

ChromeOS 设备可为您的应用提供更多的屏幕空间。为大屏设备设计应用界面时，请充分利用额外的空间。

在 Reply 和 Rally 示例中，应用采用不同的方法来利用增大的屏幕尺寸。Reply 增加了空间，使界面看起来更简洁；而 Rally 显示更多数据，以减少滚动和点按次数。

Rally 应用在不同屏幕尺寸下的显示效果

您可以先查看可能对用户隐藏的内容，以及如何让这些内容显示出来。这可能包括显示有关商品的更多信息、显示可能隐藏在右键点击或长按操作后面的菜单，或者显示不同或更深入的导航选项（现在您拥有更大的左侧导航区域）。这些都是在易用性方面取得的巨大进步，可以改善用户体验，并让您的应用更具桌面设备的感觉，而无需完全重新设计当前体验。

以下是一些针对您的应用的建议：

  • 在考虑这些不同的屏幕尺寸时，您的品牌决定了您应该采取的方向。决定优先考虑哪些内容并向用户展示哪些内容取决于现有的用户体验历程类型以及最常用的功能。如需获取灵感，请查看 Material Studies，了解每款产品如何以不同的方式响应更大的屏幕。
  • 考虑如何使用自适应网格系统来设计应用的行为，以及随着屏幕空间变大，内容、导航和选项应如何移动。
  • 确定要在哪些屏幕尺寸上使用不同的布局，然后在相应的窗口大小分桶（例如大/超大）或最小窗口宽度（例如 sw600dp/sw720）中提供不同的布局。请注意，当您进入这些布局时，用户所处的整体上下文不应发生变化，并且您应尝试在布局之间转换时保留所有用户状态（滚动位置、正在撰写的文本等）。

使用为更高密度和大屏设备设计的资源

为确保应用呈现最佳的视觉效果，请根据 ChromeOS 普遍支持的每种屏幕密度，提供相应图标和位图资源。具体而言，您应按图标准则为应用栏、通知和启动器设计图标，并以矢量格式提供这些图标，以便它们能够根据应用所显示的屏幕尺寸进行适当的缩放。

如需详细了解 Android 上的 VectorDrawable 和矢量资源，请参阅 Nick Butcher 撰写的这篇博文。

调整字体大小和触摸目标

若要确保应用在 ChromeOS 和更高密度的屏幕上可用，请针对您要适配的各种屏幕配置，调整界面中的字体大小和触摸目标。您可以通过可设置样式的属性或尺寸资源调整字体大小，也可以通过布局和位图可绘制对象调整触摸目标，如前所述。

以下是一些注意事项：

  • 对于较大的屏幕尺寸和密度，显示的文字不应过大或过小。请确保标签的尺寸与其对应的界面元素大小相宜，并且不得在标签、标题及其他元素中使用不恰当的换行符。
  • 建议将屏幕元素触摸目标的尺寸设为 48dp，但可能需要对大屏幕界面做一些调整。如需了解触摸目标和项间距如何随屏幕尺寸变化，请详细了解间距方法。这些建议还符合最低限度的无障碍功能指南。
  • 如果可能，对于较小的图标，请使用 TouchDelegate 将可触摸区域扩展到 48dp 以上，或将该图标居中放置在透明按钮中。