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. 前言

项目中需要一个输入提示框, 之前是使用ng-bootstrap实现的. 但是由于系统框架完全迁移到了material design. 所以所有bootstrap的依赖项都要迁移到angular material design.

如果您的web表单有一个包含许多选项的下拉列表，那么您可能希望通过提前键入来简化用户的生活。幸运的是，Angular Material组件可以让你很容易地做到这一点。在本指南中，我将向您展示如何实现这一点。

顺便说一句：如果你不熟悉typeahead(提前输入)，这是一种在下拉列表中过滤结果的方法。用户刚开始在字段中键入字符，列表将缩小为仅以用户键入的字符开头的选项。
typeahead是一种用户友好的输入方式，因为用户不必在看似无穷无尽的列表中滚动才能找到他们想要的内容。

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 是 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元素在低密度屏幕上显示得更大，而在高密度屏幕上显示得更小。

1. 响应式布局网格

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

1.1. Columns, gutters, and margins

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