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

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

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

1. 什么是Material Design？

Material Design 是由 Google 设计师和开发人员构建和支持的设计系统。Material.io包含针对 Android、Flutter 和 Web 的深入 UX 指南和 UI 组件实现。

Material于2014年推出，多年来不断发展。
材料设计1（M1）：第一代Material Design于2014年推出，存档并可访问：https://Material.io/archive/guidelines。
材料设计2（M2）：2018年推出的第二代材料设计引入了Material主题和Material组件。
Material Design 3（M3）：2021年推出的第三代Material包括Material You功能，支持个性化、自适应和富有表现力的体验 - 从动态颜色和增强的无障碍功能，到大屏幕布局和设计Tokens的基础。
Material You：新的Material视觉风格和一系列功能，满足个人用户的个人和表达需求，是Material Design 3的一部分

最新版本 Material 3 支持个性化、响应式和富有表现力的体验 - 从动态颜色和增强的可访问性，到大屏幕布局和Design tokens的基础。

Material foundations是任何优秀用户界面的基础，从无障碍标准到布局和交互的基本模式。

1. 文字系统 （The type system）

使用排版尽可能清晰有效地呈现您的设计和内容。

1. 前言

Material设计为提高密度改善用户体验的用例提供高密度间距指导。

1. 颜色系统

Material设计颜色系统可以帮助您创建反映您的品牌或风格的颜色主题。

1.1. 颜色用法和调色板

Material设计颜色系统可帮助您以有意义的方式将颜色应用于 UI。在此系统中，您可以选择主要颜色和次要颜色来代表您的品牌。然后，每种颜色的深色和浅色变体可以以不同的方式应用于 UI。

1. 说明

导航允许用户在应用程序中移动。

1.1. 导航类型

导航是在应用程序的屏幕之间移动以完成任务的行为。它是通过几种方式实现的：专用导航组件、将导航行为嵌入内容以及平台功能。

1. 前言

本页描述组件在布局中的行为，包括与网格以及断点的关系。

2. Position术语

UI元素在每个分界点范围内的行为方式不同。UI元素、组件和表面在网格中的位置用以下术语描述。

1. Elevation（标高）

Elevation（标高）是沿 z 轴的两个Surface之间的相对距离。

2. 测量标高

Material Design中的标高为Material surfaces之间的距离。从一个Material surface的前部到另一个Material surface前面的距离沿 z 轴以与dps(density-independent pixels)为单位进行测量，并使用阴影进行描绘（默认情况下）.

1. 响应式布局网格

Material Design的响应式布局网格可根据屏幕大小和方向进行调整，确保布局的一致性。

1.1. Columns, gutters, and margins

响应式布局网格由三个元素组成：Columns, gutters, 和 margins。

1. spacing methods

spacing methods使用基线网格、关键线、填充和增量间距来调整比率、容器和触摸目标。

1. 介绍

Material 是 Google 创建的一个设计系统，旨在帮助团队为 Android、iOS、Flutter 和 Web 构建高质量的数字体验。

2. 原则

2.1. 材料是隐喻

Material design 的灵感来自物理世界及其纹理，包括它们如何反射光线和投射阴影。Material surfaces 重新构想了纸张和墨水的介质。

• Bold, graphic, intentional
  材质设计由印刷设计方法（排版、网格、空间、比例、颜色和图像）指导，以创建让观看者沉浸在体验中的层次结构、意义和焦点。

• Motion provides meaning
  Motion 通过微妙的反馈和连贯的过渡来集中注意力并保持连续性。当元素出现在屏幕上时，它们会通过交互来转换和重新组织环境，从而生成新的转换。

1. 理解layout

material设计布局使用统一的元素和间距，以鼓励在多种平台、环境和屏幕尺寸之间的一致性。

1.1. 原则

• Predictable(可预测的) 使用直观且可预测的布局，并具有一致的UI区域和空间组织。

• Consistent(一致的) 布局应始终使用网格、关键线和填充。

• Responsive(响应的) 布局是自适应的。它们对用户、设备和屏幕元素的输入做出反应。

1. 光线和阴影

material surface阻挡光源时会投射阴影。

在material设计环境中，虚拟灯光照亮UI。关键灯光创建更清晰的方向性阴影，称为关键光阴影。环境光从各个角度出现，以创建漫射的柔和阴影，称为环境光阴影。

1. 像素密度(Pixel Density)

一英寸屏幕上存在的像素数称为像素密度。

屏幕像素密度和分辨率因平台而异。

1.1. 屏幕密度变化

高密度屏幕的每英寸像素数比低密度屏幕的多。因此，相同像素尺寸的UI元素在低密度屏幕上显示得更大，而在高密度屏幕上显示得更小。