前面
Material You 是由google设计师提供的一套设计规范，同时也包含google开发者提供的一套符合这套设计规范的组件，这些组件适配了Android、Flutter以及Web不同平台。google官方希望通过设计规范以及对应的适配组件可以让公司或者独立开发者能够快速、高效地开发出更具有特色的产品。
为什么需要 Material You
个性化的主题
1.实现主题色切换(国庆、公司年庆等主题，切换App的主题色)；
2.实现更加沉浸式的用户体验(例如：音乐播放器的颜色与专辑照片颜色一致，卡片内的按钮与图片颜色一致)；
提升产品开发效率
1.体系化产品设计(设计规范化)
在日常开发的过程中，我们实现某个功能的交互UI部分往往都是如下流程：
这样的过程会频繁使用到之前经常使用的资源信息，类似颜色、字体大小、圆角等信息，对于这些资源如果没有进行规范化，非常容易造成设计比较随意，研发也会每次单独处理一些资源。如果进行规范化以后，设计只需要进行相应的示意，研发就会从规范中使用对应的资源。
2.更好的服务独立开发者
使用Material You可以让独立开发者轻松解决交互设计，因为Material You提供了一定的资源，其中包括基础icon、字体库等，同时可以利用figma软件进行简单的设计，完成独立设计App。
Materail You
主要包括三部分内容：颜色(color)、图标(icon)、形状(shap)、排版(typography)以及动画(motion)
颜色
Material You首先对于颜色进行了很多系统化的规范设计，其中包括怎样获取颜色、怎样生成丰富的颜色列表、怎样使用这些颜色，以及如何实现动态化实现配色都进行了详细的说明。接下来进行详细的介绍。
颜色系统
在使用Material You的颜色之前，首先需要做的将使用的颜色系统进行确定，对于这个颜色系统的确定是需要经历一定的步骤，下面将这些步骤进行分析。
1.关键颜色与调色板
首先需要做的是定义5个关键性的颜色，对于关键颜色的命名如下所示：
以上选取的5个关键色针对使用的场景不同又被分为，一组为重点色主要应用在需要被强调的控件以及区域，另一组为中性色主要应用在背景和层级的场景。
使用这5个关键颜色当然无法提供比较丰富的颜色系统，为了让设计具有更加丰富的颜色，需要对这些关键色进行一定的处理，生成更加丰富的颜色。这个时候就需要介绍一下调色板，调色板就是一个将某个颜色的明亮度在0-100的变化生成一个包含13种颜色(这里主要是关于HSL和HSB色彩空间的知识，大家可以自行学习)的一组颜色表。
综上我们就得到了一个利用5个关键色生成的5个调色板，每个调色板是根据明亮度生成的一组具有13个颜色组合。这里会有一个小小的思考，为什么会根据明亮度进行颜色变化，我的理解是人会对明亮度比较敏感，同时根据明亮度也会生成一组具有颜色渐变效果的一组颜色，在使用的时候也不会出现颜色跳跃。
2.颜色的角色
前面利用5个关键色生成了5个含有13个不同颜色的调色板，但是这些颜色并不是都会被使用，只是使用部分颜色，并且这些颜色根据使用场景的不同分配了不同的角色，这些角色也会有一定的命名。google官方的设计是取调色板如下图所示的4个，primary 如下：
其中明亮度主要是40%、100%、90%、10%
| 颜色角色 | 色调 |
|---|---|
| Primary | 亮度40%的Primary |
| OnPrimary | 亮度100%的Primary |
| PrimaryContainer | 亮度90%的Primary |
| OnPrimaryContainer | 亮度10%的Primary |
不同角色的名字其实已经表明了它们的使用场景，对于Primary是在至关重要的元素上使用该颜色，当需要在Primary上使用一个元素时，需要使用OnPrimary颜色。如果是一个容器需要使用Primary的颜色应该是PrimaryContainer，同样地，在其上面需要使用OnPrimaryContainer。
3.颜色的令箭(token)
前面我们定义了一些不同颜色的角色，这些角色可以方便的让我们知道应用在什么元素之上，但是在实际应用开发中无法直接使用这些名称或者直接使用对应的16进制色值。对于Android平台一般在应用资源的时候都会定义一个唯一的ID标识符，方便我们进行资源的引用。对于Material You中的颜色资源同样采取了这样的方式。这里简单列举了一组关于角色对应的token之间的关系列表。
| 角色 | 系统token | 浅色模式token | 暗黑模式token | 浅色模式的色值 | 暗黑模式的色值 |
|---|---|---|---|---|---|
| Primary | md.sys.color.primary | md.ref.palette.primary40 | md.ref.palette.primary80 | #6750A4 | #D0BCFF |
| Primary container | md.sys.color.primary-container | md.ref.palette.primary90 | md.ref.palette.primary30 | #EADDFF | #4F378B |
| Secondary | md.sys.color.secondary | md.ref.palette.secondary40 | md.ref.palette.secondary80 | #625B71 | #CCC2DC |
| Secondary container | md.sys.color.secondary-container | md.ref.palette.secondary90 | md.ref.palette.secondary30 | #E8DEF8 | #4A4458 |
| Tertiary | md.sys.color.tertiary | md.ref.palette.tertiary40 | md.ref.palette.tertiary80 | #7D5260 | #EFB8C8 |
| Tertiary container | md.sys.color.tertiary-container | md.ref.palette.tertiary90 | md.ref.palette.tertiary30 | #FFD8E4 | #633B48 |
| Surface | md.sys.color.surface | md.ref.palette.neutral99 | md.ref.palette.neutral10 | #FFFBFE | #1C1B1F |
| Surface variant | md.sys.color.surface-variant | md.ref.palette.neutral-variant90 | md.ref.palette.neutral-variant30 | #E7E0EC | #49454F |
| Background | md.sys.color.background | md.ref.palette.neutral99 | md.ref.palette.neutral10 | #FFFBFE |
上面表格中的token可能会让人感觉到比较疑惑，这里的token到底是什么，其实我们可以简单的理解就是我们定义的资源ID，这个ID与对应的角色颜色值相匹配。对于这个ID的名称定义可以参考如下：
A：基于的设计体系：md表示的是基于Material Design
B：token的类型：sys表示为系统类型，ref表示为参考类型(自定义)，comp表示为组件类型
C：表示设计的属性以及toke的应用场景
4.自定义颜色
以上使用了部分颜色作为关键颜色生成了一系列的调色板颜色，但是为了让色彩更加丰富，Material You提供了自定义更多的颜色。通常会对于给定的输入颜色定义如下的颜色名称：
动态化配色
动态配色是Material You具有的一个特色设计，能够让应用具有更加特点的能力。让用户能够随时使用到色彩更加一致，同时具有一定沉浸式体验的应用。
图标
在日常的应用中，存在大量的基础图标，这些基础图标具有一定的通用性的，所以google官方将这些基础的图片进行了设计和归类，以便开发者能够快速使用。同时这些通用的图标也提供了一定的扩展能力，方便开发者在不同的场景下使用。
图标基本信息
1.图标类型
图标的类型主要支持：1.轮廓；2.圆角；3.尖角：
2.获取图标资源
为了获得对应的资源，google官方提供了两种方式获取，第一种直接通过官方获取，获取地址： fonts.google.com/icons
如果想实现更多的定制更多需要使用插件：goo.gle/material-sy…
自定义图标
1.图标的尺寸和布局
一般使用的是24dpx24dp的大小；其他可使用的尺寸包括20x20、40x40、48x48；对于这些图标一般需要保留2dp的边缘值，类似如下所示：
带有颜色的区域是图标的实际内容，方格区域为图标的实际布局区域。
2.图标定制参数
为了适配不同的业务场景，对于图标的要求也会有所不同，所以google官方针对上面提供的图标资源也提供了几个不同的参数进行定制，从而方便开发者直接使用，主要参数如下：
| 参数类型 | 主要含义 | 图标对比 |
|---|---|---|
| fill | 图标是否填充满 | |
| Weight | 图标的重量 | |
| Grade | 图标的等级 | |
| Size | 图标的大小 |
不同参数类型生成的图片对比：
形状
在应用开发过程中我们会使用卡片、按钮、输入框等控件，这些控件通常也会使用一定的圆形或者胶囊形状，Material You针对这些形状也定义了自己的一套标准。
形状类型分为cut与round，针对每种类型又定义了不同的角度类型，具体定义如下图所示：
不同的圆角比例是会应用到控件上的，官方也给出了一些应用这些不同比较角度的控件，具体列表如下：
| 圆角比例 | 控件名称 |
|---|---|
| None | Banners Bottom app bars Full-screen dialogs Lists Navigation bars Navigation rails Progress indicators Search view (full-screen) Side sheets (docked) Tabs Top app bars |
| Extra small | Autocomplete menu Select menu Snackbars Standard menu Text fields |
| Small | Chips Rich tooltip |
| Medium | Cards Small FABs |
| Large | Extended FABs FABs Navigation drawers |
| Extra large | Bottom sheets (docked) Dialogs Floating sheets Large FABs Search view (docked) Time picker Time input |
| Full | Badge Buttons Icon buttons Sliders Switches Search bar |
以上圆角的比例是固定不变的，开发者如果希望应用自己自定义的效果当然也是可以的。 为了更好的使用这些不同比较的圆角，google官方定义了一套标记，在应用开发中直接使用这些标记就可以方便的访问到对应的圆角尺寸：
| 类型名称 | 系统token | 对应的尺寸 |
|---|---|---|
| No rounding | md.sys.shape.corner.none | 0dp SHAPE_FAMILY_ROUNDED_CORNERS |
| Extra small | md.sys.shape.corner.extra-small | 4dp SHAPE_FAMILY_ROUNDED_CORNERS |
| Extra small top | md.sys.shape.corner.extra-small.top | 4dp,4dp,0dp,0dp, SHAPE_FAMILY_ROUNDED_CORNERS |
| Small | md.sys.shape.corner.small | 8dp SHAPE_FAMILY_ROUNDED_CORNERS |
| Medium | md.sys.shape.corner.medium | 12dp, SHAPE_FAMILY_ROUNDED_CORNERS |
| Large | md.sys.shape.corner.large | 16dp SHAPE_FAMILY_ROUNDED_CORNERS |
| Large end | md.sys.shape.corner.large.end | 0dp,16dp,16dp,0dp SHAPE_FAMILY_ROUNDED_CORNERS |
| Large top | md.sys.shape.corner.large.top | 16dp,16dp,0dp, 0dp SHAPE_FAMILY_ROUNDED_CORNERS |
| Extra large | md.sys.shape.corner.extra-large | 28dp SHAPE_FAMILY_ROUNDED_CORNERS |
| Extra large top | md.sys.shape.corner.extra-large.top | 28dp,28dp,0dp,0dp SHAPE_FAMILY_ROUNDED_CORNERS |
| Full | md.sys.shape.corner.full | - SHAPE_FAMILY_CIRCULAR |
排版
在每个应用中都会使用到文字进行内容展示、用户提示等功能，那么对于这些文本的排版也是我们需要特别关注的一点。在日常开发中我们也会遇到设计师设计稿以后我们需要获取对应的文字大小进行开发。针对这些文字的大小、字体等排版信息，google也定义了一套规则，方便我们在实际开发中使用。
字体
google官方默认提供了大量的字体资源，在产品中可以利用这些字体资源打造出更加优雅的文字排版效果，字体资源地址可以参考这里
尺寸和token
在实际应用字体的过程中，针对文字重点关注的参数是字体的大小，所以Material3也定义了一套针对字体大小设置的规范类型，具体的类型名称是显示(Display)、标题(Headline)、题目(Title)、标签(Label)、正文(body)，每种类型还包含有更加细分的尺寸大小。
开发过程过程中对于一段文字进行排版时，一般需要确定字体的类型、基线高度、厚度、大小等参数才能确认这段字体排版后的最终效果，Material3针对这些参数定义了一套token，以便在实际开发应用中直接进行应用。
| 名称 | 系统token | 自定义字体token | 标记的默认值 |
|---|---|---|---|
| Display large | md.sys.typescale.display-large.font | md.ref.typeface.brand | Roboto Regular |
| md.sys.typescale.display-large.line-height | - | 64 | |
| md.sys.typescale.display-large.size | - | 57 | |
| md.sys.typescale.display-large.tracking | - | 0 | |
| md.sys.typescale.display-large.weight | md.ref.typeface.weight-regular | 400 | |
| Display medium | md.sys.typescale.display-medium.font | md.ref.typeface.brand | Roboto Regular |
| md.sys.typescale.display-medium.line-height | - | 52 | |
| md.sys.typescale.display-medium.size | - | 45 | |
| md.sys.typescale.display-medium.tracking | - | 0 | |
| md.sys.typescale.display-medium.weight | md.ref.typeface.weight-regular | 400 |
以上为部分标记的示意，具体的详细内容可以参考：
遗留问题
以上是参考了Material You(Mateiral3) 官方网站对于它进行了比较详细的分析。但是还有一部分问题并没有得到很好的解答，所以在后续的学习我会持续的将这些问题弄清楚：
1.不同的颜色角色具体应用在哪些控件上是比较合理的？
2.颜色、形状等使用到的token为什么不直接命名为资源ID？
