材料主题：制作材料！

网络不断发展的景观既需要创造性的才能，又需要高效，可扩展的设计。现在，顶级产品依靠强大的设计系统来保持品牌连贯性，同时优先考虑可访问性和用户体验。材料设计，一种Google设计系统，弥合了创意表达与系统发展之间的差距。

最初，材料设计缺乏完全表达个人品牌身份的灵活性。反馈强调了改进的两个关键领域：有限的风格适应性和系统的品牌实施工具不足。

在Google I/O 2018上介绍的材料设计的主题功能解决了这些问题。主题使设计师和开发人员能够利用材料的优势，同时定制其外观。这涉及调整颜色，版式和形状以创造独特的品牌体验。

这篇文章着重于使用CSS（特别是SCSS）的Web主题。让我们用一个使用物料Web组件构建的基本登录模板来说明。

主题解释了

材料设计主题允许全球调整颜色，版式和形状，从而影响所有组件。尽管看似有限，但这些调整会大大改变了设计的整体感觉。

颜色自定义

Material.io提供了一个颜色选择器，以帮助选择和对比度检查。使用SCSS，我们可以轻松地修改登录屏幕的外观：

 $ MDC-THEME-PRIMARY：＃26418F;
$ MDC-Theme-Secardary：＃D1C4E9;
$ MDC-Theme-Background：＃fdf6f9;

材料会自动设置$mdc-theme-on-primary to White以供可访问性。您可以使用$mdc-theme-on-primary和$mdc-theme-on-secondary覆盖文本颜色。

版式调整

材料提供了可通过主题自定义的基本版式量表。可以使用CSS类或混音素对每个标题级别的标题级别进行版式调整。我们会轻松使用Google字体：

 @Import url（'https://fonts.googleapis.com/css?family=josefin sans'）;
$ MDC类型 - 家庭：Unquote（“ Josefin Sans，sans-serif”）;

$ MDC型式式按钮：（
 字体大小：14px，
 字体重量：600，
 信件间隔：0.05EM，
）；

形状修改

形状自定义改变组件角半径（按钮，卡片，床单）。材料允许各种角和组件尺寸的不同形状。例如：

 $ MDC形状 - 符号 - 典型 - 成员：12px 4px;
$ MDC形状 - 大型-radius：8px;

只有几行代码，我们已经急剧改变了应用程序。

释放您的创造力

存在许多颜色，版式和形状的组合，以创造独特的品牌标识。下面的示例使用材料组件展示了这些元素的多种应用。

现实世界的例子

Google本身在Gmail，Google News和Google Play等产品中使用定制的材料组件（Google材料主题）。 Lyft和Anchor等其他公司也利用了材料设计的灵活性来创造独特的品牌体验。

入门

使用材料入门套件和“构建材料主题”故障项目开始构建材料主题。实验SCSS变量以自定义组件。只需将这些变量粘贴到您的my-theme.scss文件中，然后开始构建即可。

简而言之：材料设计的主题功能提供了前所未有的灵活性。今天开始探索！

以上是材料主题：制作材料！的详细内容。更多信息请关注PHP中文网其他相关文章！