前言

毫无疑问，Google从一家技术公司转变为“设计公司”的关键一步，始于Material Design的推出。

在最近的Google I/O大会上，虽然AI相关的信息引起了广泛关注，但实际上，Material Design设计系统也迎来了重大更新。对于UI/UX设计师来说，这些更新值得深入了解和关注。 完整视频地址：

以下为文字版：

Material Design 十周年：回顾与展望

欢迎来到IO 2024。我是Material Design的产品负责人Mike Talvin-Sari。今年，Material Design迎来了它的第十个年头，我们将通过一整年的庆祝活动，回顾那些影响深远的时刻，聆听关键声音，并探讨我们对UI设计和物理世界的影响。

Material Design的起源

Material Design的故事可以追溯到2007年，当时Google聘请了第一位视觉设计师。在此之前，UI设计是由工程师们负责的。2011年，Larry Page要求为所有旗舰桌面应用创建一种新的视觉设计语言，这个项目被命名为Kennedy。Kennedy的成功为Google的设计团队建立了动能，使得设计在Google内部得到了应有的重视。

Material Design的诞生与演变

2014年，Material Design系统在Google I/O大会上正式亮相。它以大胆的色彩、清晰的导航和浮动操作按钮（FAB）为特色，旨在为开发者提供一个灵活的系统，以更快、更容易地构建美观、实用的设计。

2016年，Google Fonts加入了Material Design团队，这为开发者提供了更多的字体选择，帮助他们强化品牌识别。

2018年，Material Design 2在Google I/O大会上推出，引入了新的UI组件和主题功能。

2021年，Material Design 3发布，带来了更新的组件和个性化功能，如动态颜色。

Material Design的未来

在接下来的十年里，Material Design将更加注重帮助开发者创建个性化和富有表现力的体验。我们将继续与研究团队深度合作，确保产品的吸引力和易用性。

重要更新

Material Design团队在今年的Google I/O大会上发布了一系列重要更新，以下是详细内容：

1. Compose Material 1.2和1.3

颜色更新

在Compose Material 1.2中，我们对颜色方案进行了扩展，使其更加可定制和规范化。开发者现在可以更容易地理解和使用颜色，这意味着他们可以更精确地控制应用的外观和感觉。新的颜色方案不仅包括更多的颜色选项，还提供了更详细的使用指南，帮助开发者在各种情况下选择最合适的颜色。

分段按钮

分段按钮已经在视图中可用，现在我们将其引入Compose，使其在新体验中达到一致性。分段按钮在1.2版本中是实验性的，预计在1.3版本中稳定。这种按钮可以帮助用户在多个选项之间轻松切换，增强用户体验。例如，在一个购物应用中，分段按钮可以用于在不同类别的商品之间切换，如“男装”、“女装”和“儿童”。

下拉刷新组件

为了减少对外部库的依赖，我们引入了Compose Material的下拉刷新组件。此组件在1.3版本中将成为稳定API，开发者可以轻松迁移到这个版本。下拉刷新组件使得用户可以通过向下滑动屏幕来刷新内容，这在新闻应用和社交媒体应用中尤为重要。新的下拉刷新组件不仅易于使用，还提供了更流畅的动画效果，提升了用户体验。

2. 轮播组件

新的轮播组件

我们引入了一个新的轮播组件，结合了形状变换、视差滚动和动态布局，创造了一个功能强大且具有表现力的UI组件。这个组件不仅美观，而且支持键盘输入、减少动画设置和额外的UI提示，确保了无障碍性。轮播组件特别适用于展示多个图像或内容，如电商应用中的商品展示或旅游应用中的景点介绍。通过这种方式，开发者可以在不牺牲用户体验的情况下，展示更多内容。

3. 对比度控制

对比度选项

在Android 15中，我们引入了对比度控制，用户可以选择标准、中等和高对比度。如果你使用动态颜色，这些值会自动应用；如果你使用自定义颜色，你需要手动处理这些对比度选项。对比度控制对于提高可访问性非常重要，尤其是对于视力不佳的用户。通过提供不同的对比度选项，开发者可以确保他们的应用在各种光照条件下都能清晰可见。

4. Material Theme Builder

主题构建工具

Material Theme Builder是一个新的工具，帮助开发者更容易地创建和导出Material Design主题。它可以在网页和Figma中使用，输入颜色后，它会生成一个Material 3主题，包含所有必要的对比度级别和颜色选项。这个工具不仅简化了主题创建过程，还提供了实时预览功能，使得开发者可以在设计过程中立即看到效果。通过这种方式，开发者可以更快速地迭代设计，确保最终产品的高质量。

5. 非文本对比度

非文本对比度更新

我们还更新了非文本对比度，包括滑块、进度指示器和底部表单。这些更新确保了这些组件在任何背景下都具有良好的可读性和可访问性。例如，在一个音乐播放应用中，滑块用于调整音量或播放进度，通过提高对比度，用户可以更容易地看到和操作这些控件。

6. 适应性设计

适应性设计系统

我们推出了Material Adaptive Library，帮助开发者创建能够适应不同屏幕尺寸和输入方式的应用。这个库提供了逻辑导航范式和意见化布局，确保应用在各种设备上都能流畅运行。适应性设计对于现代应用尤为重要，尤其是在不同设备（如手机、平板和可折叠设备）之间切换时。通过使用Material Adaptive Library，开发者可以确保他们的应用在各种设备上都具有一致的用户体验。

7. 动态排版

Roboto Flex

我们推荐使用Roboto Flex，它提供了更细粒度的控制，帮助开发者在组件中更好地适应排版需求。你可以通过光学尺寸轴微调排版，提高可读性，并通过动画增强互动体验。动态排版不仅提升了视觉效果，还提高了用户体验。例如，在一个新闻应用中，通过动态排版，开发者可以确保标题和正文在不同设备上的可读性，从而提高用户的阅读体验。

8. Google Maps的应用

Google Maps中的Material Design

Google Maps团队已经开始在他们的应用中采用Compose Material组件，包括按钮、列表和底部表单等。通过这些组件，Maps团队能够更快、更高效地实现他们的设计需求，同时确保一致性和可访问性。例如，在Google Maps中，新的轮播组件可以用于展示热门景点的图片，而下拉刷新组件则可以用于更新附近餐厅的列表。通过这些更新，Google Maps不仅提升了视觉效果，还提高了用户的使用体验。

总结

Material Design在过去的十年里不断发展，成为了Google设计的基石。随着新功能和工具的推出，Material Design将继续引领UI设计的潮流，帮助开发者创建更美观、实用和个性化的产品。

让我们一起期待Material Design的未来，继续探索设计的无限可能。

---

感谢你阅读这篇文章！如果你对Material Design有任何问题或建议，请在评论区留言，我们会认真聆听并不断改进。祝你在接下来的设计旅程中一切顺利！

Material Design官网 | Material Design博客

好了，关于的分享介绍就到这里，有什么疑问或者问题，可以留言交流哦~ 关注我公众号（设计小站）：sjxz00，获取更多AI辅助设计和设计灵感趋势。