大家好，我是 Annie，在完成 Google 工程驻场轮岗后，我最近加入了 Angular Components 团队。在我的第一次实习期间，我致力于闭包编译器并实现了一些新的 ES2020 功能，包括 nullish 合并和可选链接。之后，我的第二个旋转项目是 Angular Components，在那里我为Material.angular.io进行了期待已久的整容。

如果您最近访问过 Angular Materials 文档站点，您会注意到一些新的视觉更新。我们在组件页面上添加了新的充满活力的图像、主页更新、指南页面改造等等！今天我想重点介绍一下我们是如何生成这些有趣的彩色图像的。

我们受到Material Design 组件页面上插图的启发，这些插图具有代表每个组件的美学抽象设计。我们希望将这个想法应用于material.angular.io，但需要考虑一些限制和要求。首先，由于我的驻地期限很紧，我们没有专门的插画师或设计师来负责这个项目。其次，我们希望图像紧凑但能清楚地展示每个组件及其用法。最后，我们希望能够在组件的外观发生变化时轻松更新这些图像。对于团队来说，选择变得很明确：我们需要自己构建一些东西来解决这些需求。

在权衡我们的设计选项时，我们决定更喜欢更现实的组件视图而不是抽象表示。这就是我们提出为每个组件创建“场景”并捕获它们在使用中出现的想法的想法。我们需要一种有效捕获这些组件的方法。我们转向了一种称为屏幕截图测试的技术。屏幕截图测试是一种捕获所提供 URL 的页面图像并将其与预期图像进行比较的技术。使用这种技术，我们能够生成所有 35 个组件的场景。

我们是这样做的：

1. 使用实际材质组件为包含“场景”的每个组件设置一条路线
2. 创建端到端测试环境并使用量角器对每条路线进行截图
3. 保存屏幕截图，而不是将其与预期图像进行比较
4. 从网站加载屏幕截图

我们的方法的好处之一是，每当我们更新组件时，我们都可以拍摄新的屏幕截图。这个过程可以节省大量的时间和精力。

为了创建每个场景，我们举办了一场迷你黑客马拉松，以提出有趣的想法！

例如，对于按钮组件（顶部），我们想要展示可用按钮的所有不同类型和样式（图标、FAB、凸起等）。对于按钮切换组件（底部），我们希望在有人可能使用按钮切换的现实场景中显示两种状态下的切换。

结论

看到新网站上线以及我们所做的所有更改真是令人兴奋，我们希望您也喜欢它们！请务必查看该网站并让我们知道您最喜欢的部分是什么！快乐编码，朋友们！

文章来源地址：https://blog.angular.dev/giving-material-angular-io-a-refresh-d869850026bd