更好的大屏幕设计

Material You 如何支持美观、高效的平板电脑和可折叠体验?

近年来，我们看到了更大屏幕的增长趋势。这在一定程度上是由于平板电脑、大型智能手机和台式机的日益普及。

在今年的 Google I/O 大会上，Material Design正在深入研究针对设计师和开发人员的大屏幕设计的最新指南。请关注我们的演讲并继续阅读，了解 Material如何帮助您应对针对多种设备进行设计的挑战和机遇，以满足应用程序用户不断增长的需求。

1. 设计基础：窗户尺寸类别

大屏幕设计的最大挑战之一是创建既具有视觉吸引力又用户友好的布局，而无需针对每种外形尺寸完全重新设计应用程序。因此，我们没有针对不断增加的屏幕尺寸进行设计，而是创建了窗口大小类来确保布局在各种设备上无缝适配。

窗口尺寸分为三种：紧凑型(compact width < 600dp)、中型(medium 600dp<= width < 840dp)和扩展型 (expended width >= 840dp)

对于更复杂的布局场景，您还可以考虑合并宽度和高度类。但是，对于大多数应用程序，尤其是那些具有垂直滚动 UI 的应用程序，三个窗口宽度大小类别可以满足您的需求。要了解更多信息，请参阅Android 的窗口类大小文档。

2. 布局解析

典型的应用程序布局由两部分组成：导航和正文。

紧凑型设备使用导航栏，中型设备可以使用导航栏，扩展设备可以利用导航抽屉

当需要平衡您的设计与人体工程学等用户需求时，为您的屏幕选择最佳的导航组件是重要的一步。

窗格(Panes)最适合组织应用程序主体的需要。窗格有助于组织内容并为组件创建清晰的包含结构。它们可以是固定的，也可以是灵活的；它们可以容纳持久性组件，例如顶部应用程序栏或搜索栏，以及特定于上下文的元素，例如图像、文本、列表、卡片和按钮。

窗格中的内容可以对齐并显示在多列中。列是窗格独有的，不在窗口级别使用，从而允许对窗格内的布局进行更精细的控制。详细了解 Material Design 如何定义布局的各个部分.

3. 硬件

新硬件总是令人兴奋，但也带来了处理新的、特殊用例的挑战。Material的更新指南着眼于您的设计如何适应一系列硬件规格，同时减少自定义和调整布局的工作。

一个看似棘手的硬件因素的例子出现在带有中心铰链的折叠设备上，该铰链将屏幕分为两半。对于某些折叠设备，该区域没有显示屏幕，因此屏幕将作为两个不同的窗格运行。打开可折叠设备时，应用程序应在几秒钟内自动从前屏幕转换到展开屏幕。

显示屏切口（例如前置摄像头）也是需要考虑的约束示例，因为这可能会阻碍某些屏幕设计。在这些场景中，它有助于偏移主体区域，以确保 UI 的任何部分都不会被遮挡。

4. 展望大屏幕Material的未来

Material Design未来如何规划大屏设计和开发，是Material You视觉语言的延续。我们的目标是继续发布基于 M3 精神的充满活力的自适应元素，以实现大屏幕体验。

请继续关注I/O 2023，了解 Material Design 的一些正在进行的工作想法！

5. Material Design 系列文章

最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客-Material Design