网络是一个美丽且富有表现力的媒介,随着趋势和技术的变迁而不断发展。令人愉悦和充满创意的时刻是企业脱颖而出的关键。与此同时,当今的顶级产品依赖于可扩展的、基于组件的设计系统来高效地开发一致的品牌。并且,从一开始就将可访问性和可靠的用户体验融入其中比以往任何时候都更加重要!但是,这两个世界——创意网页设计和系统化网页设计——并不需要剑拔弩张。网页设计世界的美丽核心是我们能够找到一种方法将创意网页设计与我们的系统融合在一起的地方,幸运的是,两者兼得是可以实现的!
其中一个设计系统被称为 Material Design(我刚刚 加入 Google 的团队!)。Material 基于多年的研究和最佳实践,旨在让设计师和开发人员能够轻松创建美观、易访问的 UI。但在最初发布时,等式中缺少了一环:以一种易于实现的方式表达品牌个性。团队收到了两条关键反馈
- Material 在风格上缺乏灵活性,无法满足所有产品、品牌和用户的需求。
- 在产品中系统地应用和构建品牌体验不够容易。
截至去年(具体来说,是 2018 年的 I/O 大会),Material 发布了新的 主题 功能!主题允许开发人员和设计师利用 Material 成为世界级设计系统的所有部分,并使其成为自己的东西!换句话说:您可以通过对产品的颜色、形状和排版应用全局更改来自定义 Material 组件的外观和感觉。
Material 组件适用于多个系统,例如 Android、iOS 和 Flutter,并且我们将在本文中重点介绍 Web(毕竟这是 CSS-Tricks)。让我们从使用 Material Web 组件的基本登录模板开始,看看在此基础上实现主题是多么容易
关于主题
当前的主题实现允许对颜色、排版和形状进行调整,这些调整会传递到产品中的每个组件。这三个子系统听起来可能选项不多,但它们共同对设计产生了重大影响,并且是基于更精细的级别进行更多设计更改的绝佳起点。
颜色

第一个可主题化的选项是颜色。Material.io 上有一个很棒的 颜色选择器 工具,您可以使用它来查看对比度并辅助您的颜色选择过程。由于这是 CSS-Tricks,让我们编写一些 CSS(好吧,更像是 SCSS)来开始一个示例。在我们的 my-theme.scss
文件中几行代码,我们就可以完全改变这个登录屏幕的外观和感觉
我们设置了
$mdc-theme-primary: #26418f;
$mdc-theme-secondary: #d1c4e9;
$mdc-theme-background: #fdf6f9;
即使我们没有指定 $mdc-theme-on-primary
,系统也知道现在将其设为白色(使用 Sass 对比度函数)以帮助我们确保可访问的颜色对比度。我们还可以使用 $mdc-theme-on-primary
和 $mdc-theme-on-secondary
覆盖主主题和次主题上的文本颜色。但是,如果未显式设置值,则这些值将根据背景颜色自动设为黑色或白色。有关更多信息,请参阅 颜色选择器。
排版
Material 设置了一个 基本排版比例尺,可以通过主题进行自定义。您可以调整每个标题级别的排版,并通过两种方式将其应用到整个产品中
- 使用 CSS 类应用样式。例如
<h1 class="mdc-typography--headline1">
- 使用 mixin 将样式从标题组件扩展到另一个组件(例如
h1 {@include mdc-typography(headline1);}
)。您可以在我们 Glitch 上的入门套件示例 中看到此示例。
更改字体的快速方法是使用 Google Fonts——一个非常棒的免费网页字体目录。我们将简化操作,选择一个名为 Josefin Sans 的 Google 字体。为了在我们的项目中使用它,我们需要导入它,然后可以设置基本排版以使用它
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
$mdc-typography-font-family: unquote("Josefin Sans, sans-serif");
我们在这里使用 unquote
,因为 Material 中的排版存储在一个映射中。我们可以这样指定更多样式
$mdc-typography-styles-button: (
font-size: 14px,
font-weight: 600,
letter-spacing: 0.05em,
);
现在我们的登录页面如下所示
形状
形状是另一种通过代码展现创意的方式!我所说的形状是什么意思?在 Material 中,形状会影响组件的圆角,例如 按钮、卡片 和 底部表单。在产品设计中,形状有助于 定义您的品牌。它是棱角分明且机器化的,还是更圆润且自然的?更改形状 会传递到系统的其余部分。以下是一些 Material 中形状的示例

Material 组件中关于形状的另一个很酷的事情是,您不必在每个角上都使用相同的形状,甚至可以在不同尺寸的相同组件上使用不同的形状。Material 中有小型、中型和大型组件,您可以为这些不同类型的组件应用不同的样式,并且可以混合搭配并逐个指定每个角,方法是在空格分隔的值列表中指定,就像您使用 border-radius
一样。
MDC Web 目前不支持其他平台所具有的切角,因为对于当前的 Web 标准来说,这是一个非平凡的操作。这也是我个人非常喜欢 Houdini 并认为它将在未来的 CSS 开发中产生很大影响的原因!
在我们正在处理的示例中,我们同时有大型和小型组件。大型组件是文本字段输入,小型组件是“登录”按钮。我们可以使用以下方法为它们应用不同的形状
$mdc-shape-small-component-radius: 12px 4px;
$mdc-shape-large-component-radius: 8px;
瞧!我们在 12 行代码中就改变了应用程序的外观。

主题,无处不在!
现在是您发挥创意的时候了。有许多方法可以混合搭配颜色、排版和形状的元素,让您的品牌真正脱颖而出。以下四个截然不同的示例应用程序使用颜色理论、排版和形状来区分其产品,每个应用程序都基于基线 Material 组件

现实中的主题 IRL
Google 本身对其产品自定义并扩展了基线 Material 组件。这称为 Google 材质主题,它由多个产品团队定义,包括 Gmail、Google 新闻、Google Play 和 Google Home

但它们并不是唯一一家使用 Material Design 及其原则的公司。一些公司还在 其大型产品 中扩展了 Material 组件。
Lyft 是一家拼车服务公司,就是一个例子。他们使用 扩展 FAB 组件来突出显示关键操作,并使用渐变设计它,使其具有独特的感觉,同时用户仍然熟悉它。Lyft 还利用了 Material 的海拔系统 在其自己的产品中。

Anchor 是一款免费应用程序,可帮助人们录制、分发和托管播客,是另一个将 Material 设计成自己的风格的绝佳示例。他们展示了其大胆的调色板,并将其与 选择芯片 集成在一起以区分显示选项,卡片列表 用于内容选择,以及一个锚定到底部的 扩展 FAB 以持续提供用户操作。

开始使用
现在您拥有了使用Material Components for the web创建自己的 Material 主题所需的一切。使用我们的Material Starter Kit开始构建您的 Web 项目非常容易,并且可以通过我们刚刚发布的构建 Material 主题 Glitch 项目探索主题。更改my-theme.scss
中的变量以探索它们如何自定义各个组件。然后,您可以打开任何模板,将这些变量粘贴到my-theme.scss
中,然后开始构建。
TL;DR:如果您过去认为 Material Design 不适合您,现在是开始探索的好时机。祝您主题设计愉快!
我一直避免使用 Material 主题,因为它似乎很难自定义。感谢您向我展示了它可以实现,以及您发布的内容,并且很容易实现。❤️❤️
无论如何看待,Material 一直都很糟糕,而这些较新的版本则更糟糕
当然,可以强制使其看起来更好,但这将是“违反”Material 指南的,那么为什么要从一开始就使用它呢?
好吧,我喜欢 Material Design,并且我尝试在我的每个 Web 项目开始时都使用它,尽管我确实会稍微调整一下组件。
从去年开始我就一直在寻找这样的详细文章,终于找到了。感谢您的解释。
Material 很好,但设计师还有很多工作要做。我希望看到 Google 提供模板。就像 Material 的 Illustrator 一样。可能性是无限的。
感谢您的反馈,Darren!这绝对是我们之前听到过的事情(模板),我们一直在努力改进产品,使其尽可能易于使用!
喜欢新的主题方向,会尝试一下!