谷歌Material You 3 最全解析-Part1 代币tokens

2021年5月18日，Google 举行了为期三天的 Google I/O 大会，Material You3刷新了大家的眼球。谷歌设计对全世界设计的影响和推进，大家也了解过M2的设计内容，大体地来说，此次更新对颜色、字体、组件的呈现方式都进行了改变，M3看起来更具个性。

打开谷歌设计官网的第一页就显示M3是谷歌the most expressive and adaptable design system, 这会是此次设计更新最大的变化。

那么token大概就长这个样子，由三部分组成，a是系统的名称，b是token的类型，比如参考token，系统token，或组件token，c是token的属性和内容。他的描述方式是由最笼统的信息描述到最具体的信息。

前情提要

5、6年前响应性设计的是世界的主流设计方向，但是这几年间自适应设计渐渐地取代了响应性设计。

这两种设计的不同之处。响应性设计只需要设计一套去适配不同的机型和屏幕尺寸，但是自适应设计需要根据不同的机型去设计不同的尺寸甚至内容。听起来好像自适应设计更复杂了，增加了设计的工作量，但是考虑到不同的人会用不同的方式使用他们的系统和软件时，自适应设计显得十分必要。

这次的更新主要分四个部分，分别是颜色&字体、token、可折叠设备、小组件Widgets，本文先讲述token代币的部分，其余的后续更新。

那我们先来说一下token。什么是token？官方的说法是，token是用来存储样式值，如颜色和字体，并允许样式值在不同的设计、代码、工具和平台上进行统一应用的。

Token由两个部分组成，一个是类似代码的名称，用来表述token的作用和用处，另一个是相关的值，此处的值是不恒定的，可变化的硬编码。

那么token大概就长这个样子，由三部分组成，a是系统的名称，b是token的类型，比如参考token，系统token，或组件token，c是token的属性和内容。他的描述方式是由最笼统的信息描述到最具体的信息。

那么token大概就长这个样子，你可以理解他是一个文件夹、一个u盘、里面储存着随时可替换的内容。

谷歌的Token的种类有三种，分别是参考、系统和组件token。

参考token

以md.ref开头，他会指向一个静态值，比如颜色的HEX值，字体字重的具体名称。参考tokens也可以指替其他参考tokens；它们不会根据用户或设备的情况而改变。

系统token

以md.sys开头，他会根据不同的情景指向不同的参考token，比如深色或浅色主题。系统tokens应该尽可能地指向参考tokens而不是静态值。 

组件tokens

以md.comp开头，表示构成一个组件的元素和值，如容器、标签文本、图标和状态。组件token应该尽可能地指向系统token或参考token，而不是硬代码。此处有一个坑，Material Design组件token目前还没有开发完成。

所以我们可以看到这三类token的关系，他们有一定的从属关系，参考token决定组件的相关颜色，系统token定义了他在用户界面中的多个情景，组件token定义了构成该token是什么样的组件。

翻译过来就是，哪个组件上的哪个主题下的哪个角色的哪个颜色。

这张图更详细地表示了参考token和系统token之间的关系。

我总结了tokens的三个特性，分别是统一性，可替代性，和多样性。

Token统一性

Token统一性体现在，想象一下我们同时有5种产品都在同时使用同一套风格的ui设计，此刻我们发现产品A的关键色有点需要修改，那么ui设计师需要手动修改N张页面，开发也需要替换N张页面。这个时间成本是非常大的。但是如果我们使用了token，那这个修改的代价就变小了很多。

甚至，Token的使用方式与平台无关，可以在多平台进行使用。token就是设计和开发的一个中央资源库，为我们提供了各种集成点。

Token的灵活性

Token的灵活性体现在，一套提前设置好的token颜色，可以随意地替换成黑天白天以及更多的情景模式，给用户提供了独一无二的设备感受。

Token的原子级

使用时，必须对组件进行剖析，进行原子级的拆解。比如一个按钮可以拆分成，按钮颜色，icon颜色，阴影，文字等等。

颜色token

颜色的属性可以进行非常详细的剖析，例如根据按钮的状态，可拆分成可点击，悬浮等等，从可点击又可以拆分成容器颜色和icon颜色，容器颜色又可拆分为容器本身的颜色、阴影色，高度色。

文字token

本身的构成元素比较多，所以token的形式，只对字体、字重进行了参考token的设计，其系统token直接指向静态值。

以上是Material You3的token章节分享，欢迎各位设计师朋友点赞或留言~