深度研究 Material 3 的颜色系统后,发现其设计中有几个一开始反直觉但是非常实用的设计:
1. 品牌色不等于 primary color:使用 material theme builder 输入你的品牌色大概率会生成一个色值不同的颜色作为 primary 的色值,这其实是考虑到这个颜色作为核心元素在诸如 button 使用时,在不同深度的背景和上面又要放不同颜色的文字等多重情况时,为了保证足够的对比度,会取一个最能满足上述情况的色值,这个颜色甚至也不在Tonal Palette的11 个颜色中,但会接近 T30-60 的色值;
2.material theme builder 输入颜色后会生成一堆颜色:没有学习 M3 的颜色设计规则就直接使用 material theme builder 在 Figma 生成颜色系统的时候,会发现颜色选择面板中多了一堆 variables 和 styles,估计直接懵逼了。
这里首先要去学习下官方的 roles 章节中对每个颜色命名的场景介绍,理解了规则以后会发现其实很简单。
然后就是实际设计工作中该使用 styles 还是 variables 的问题。我看了官方的 Figma Material 3 Design Kit 和用 material theme builder 生成的颜色体系对比,发现差异在官方的 UI kit 里,所有 styles 在 light 模式下映射的不是 hex 色值而是对应的 variables(Dark 下就直接映射 hex 色值了,估计时受限于 Figma 中 style 没法直接映射 variables 的特定 mode下颜色的问题),而 material theme builder 生成的则没有。这里猜测下就是这样更方便设计师设计时直观的选择,因为在颜色选择面板中,style 的分类展示目前要比 variables 的展示友好很多;
3.没有专为文字使用的的颜色变量:浏览所有 variables 时会发现,没有一个包含 text 或 font 等字眼命名的变量,实际浏览 M3 kit 又会发现它的文字颜色也没有使用 Neutral 色系中的任何一个。而是用了「On XXXXX」命名的 variables。例如 primary button 上的文字用了 on primary 的颜色变量。这即合并了图标和文字同时出现在一起时,省去再给图标命名一个的多余变量,同时也简化了记忆方式,直观的使用位置关系来确定颜色变量的使用。
以上内容不完整阅读并查看官方的 UI KIT 后实际体验 material theme builder,估计上面的文字很难看懂,虽然这对规范使用者其实不太重要,但对规范的设计者来说,能帮助其在设计初期阶段就设计出满足深浅模式甚至更多动态配色的方案,并且覆盖到了非常全面的 UI 使用场景(一共 49 个,不包含 state layers,理解这个也花了我一点时间,有空再说这部分)。
听起来很复杂,但这本身也是一种复杂性的转移,把复杂性转嫁给设计者,简化使用者的体验。
学习链接:
m3.material.io