材料设计颜色系统使用有规律的方法将颜色运用到UI中。在这个系统里,通常会选择一个主色和一个辅助色来代表品牌,每个颜色的深浅衍生色也能在UI中通过不同的方式来使用。
app的主色、辅助色以及它们的衍生色有助于创建和谐的颜色主题,确保了文本的可读性以及元素与界面之间的对比。
基准材料颜色主题
材料设计有设计内置的基准主题,可直接作为通用框架。
这些颜色包括
- 主色、辅助色
- 主色衍生色和辅助色
- 其它UI颜色,例如背景色、前景色、错误色、文本色以及图标色等
所有这些颜色都能根据你的app来自定义。
主色
主色是整个app界面以及组件中出现频率最高的颜色。
如果没有辅助色,主色也可用于强调元素。
主色的衍生色
主色和其衍生色可用来创建一个颜色主题。
为了使UI元素间形成对比,例如区分顶部应用栏和系统栏,可以在两个元素上应用不同明度的主色衍生色。你也可以使用衍生色来区分组件,例如将不同的衍生色分别用于浮动操作按钮的容器和其内部的图标。
辅助色给强调和突出产品提供了更多的途径。可根据实际情况决定是否选用辅助色,在强调UI选项部分时应谨慎使用。
辅助色适用于:
- 浮动操作按钮
- 选择控件,如滑块和开关
- 选中文本高光
- 进度条
- 链接和标题
和主色一样,辅色也有深浅衍生色。你可以使用主色、辅助色以及它们的衍生色来创建颜色主题。
无障碍颜色
为确保浅色或深色文本后面是无障碍的背景色,可以使用主色或辅助色的深浅衍生色。
相反,也可将这些颜色用于浅色或深色背景前面的内容中。