Material Design 是 Google 推出的一套设计规范，旨在为 Web 应用程序和移动应用程序提供一致的外观和感觉。它强调简单、直观和有层次感的设计，以及使用真实物理属性和动画来提高用户体验。在这篇文章中，我们将深入了解 Material Design 的元素样式，包括颜色、阴影、图标、按钮、输入框等等。
颜色
Material Design 中的颜色是经过精心挑选和搭配的，以确保在各种情况下都能提供清晰、有层次感的视觉效果。它们被分为两类：主色和辅助色。
主色
主色是应用程序的主要颜色。它应该是应用程序的标志性颜色，用于突出重点、强调和品牌识别。Material Design 中的主色包括：
- Red：用于表示警告、错误和危险。
- Pink：用于表示浪漫、温柔和女性。
- Purple：用于表示神秘、奢华和独特。
- Deep Purple：用于表示创新、科技和未来。
- Indigo：用于表示知识、洞察和思维。
- Blue：用于表示信任、和平和稳定。
- Light Blue：用于表示清新、晴朗和沉静。
- Cyan：用于表示清新、自然和科技。
- Teal：用于表示平衡、自然和和谐。
- Green：用于表示生命、成长和健康。
- Light Green：用于表示活力、自然和健康。
- Lime：用于表示活力、创新和活力。
- Yellow：用于表示快乐、智慧和温暖。
- Amber：用于表示活力、温暖和乐观。
- Orange：用于表示热情、活力和创新。
- Deep Orange：用于表示豪华、创新和独特。
- Brown：用于表示稳定、自然和温暖。
- Grey：用于表示平静、中性和稳定。
- Blue Grey：用于表示稳定、自然和平衡。
辅助色
辅助色是用于补充主色的颜色，用于强调和突出特定元素。它们可以是鲜艳的或柔和的，但应该与主色相匹配。Material Design 中的辅助色包括：
- Red：用于表示警告、错误和危险。
- Pink：用于表示浪漫、温柔和女性。
- Purple：用于表示神秘、奢华和独特。
- Deep Purple：用于表示创新、科技和未来。
- Indigo：用于表示知识、洞察和思维。
- Blue：用于表示信任、和平和稳定。
- Light Blue：用于表示清新、晴朗和沉静。
- Cyan：用于表示清新、自然和科技。
- Teal：用于表示平衡、自然和和谐。
- Green：用于表示生命、成长和健康。
- Light Green：用于表示活力、自然和健康。
- Lime：用于表示活力、创新和活力。
- Yellow：用于表示快乐、智慧和温暖。
- Amber：用于表示活力、温暖和乐观。
- Orange：用于表示热情、活力和创新。
- Deep Orange：用于表示豪华、创新和独特。
- Brown：用于表示稳定、自然和温暖。
- Grey：用于表示平静、中性和稳定。
- Blue Grey：用于表示稳定、自然和平衡。
阴影
阴影是 Material Design 中的一个重要元素，它用于为元素提供深度和层次感。在 Material Design 中，阴影被分为两类：卡片和按钮。
卡片阴影
卡片阴影用于为卡片元素提供深度和层次感。它们由 1 到 24 的数字级别组成，数字越大，阴影越深。以下是一些常用的卡片阴影级别：
------- - ----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------ - ------- - ----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------ - ------- - ----------- - ---- ---- ------- -- -- ------ - --- --- ------- -- -- ------ - ------- - ----------- - ---- ---- ------- -- -- ------ - ---- ---- ------- -- -- ------ - ------- - ----------- - ---- ---- ------- -- -- ----- - ---- ---- ------- -- -- ------ -
按钮阴影
按钮阴影用于为按钮元素提供深度和层次感。它们由 1 到 5 的数字级别组成，数字越大，阴影越深。以下是一些常用的按钮阴影级别：
------ - ----------- - --- --- - ------- -- -- ------ - --- --- - ------- -- -- ------ - --- --- ---- ------- -- -- ----- - ------ - ----------- - --- --- - ------- -- -- ------ - --- --- - ------- -- -- ------ - --- --- ---- ------- -- -- ----- - ------ - ----------- - --- --- - ------- -- -- ------ - --- --- ---- ------- -- -- ----- - --- --- - ------- -- -- ------ - ------ - ----------- - --- --- ---- ------- -- -- ------ - --- --- - ------- -- -- ------ - --- ---- - ------- -- -- ----- - ------ - ----------- - --- --- ---- ------- -- -- ------ - --- --- - ------- -- -- ------ - --- ---- - ------- -- -- ----- -
图标
图标是 Material Design 中的另一个重要元素，它们用于表示特定的操作或功能。Material Design 中的图标是矢量图形，可以按比例缩放而不失真。以下是一些常用的 Material Design 图标：
-- ------------------------------ -- ------------------------------- -- --------------------------------- -- ------------------------------- -- --------------------------------- -- -------------------------------- -- ----------------------------------- -- ------------------------------- -- ----------------------------------- -- ----------------------------------------- -- ---------------------------------------- -- -----------------------------------------
按钮
按钮是 Material Design 中的另一个重要元素，它们用于触发特定的操作或功能。Material Design 中的按钮有多种类型，包括浮动操作按钮、扁平按钮、凸起按钮等等。
浮动操作按钮
浮动操作按钮是一种圆形的按钮，通常用于触发主要操作或导航。它们应该是应用程序中最突出的元素之一。以下是一个浮动操作按钮的示例：
------- ------------------- --------- ----- -- ------------------------------ ---------
扁平按钮
扁平按钮是一种不带阴影的按钮，通常用于次要操作或导航。它们应该与主色相匹配。以下是一个扁平按钮的示例：
------- --------------- ------------ ------------- ------ ---------
凸起按钮
凸起按钮是一种带有阴影和边框的按钮，通常用于强调或突出特定元素。以下是一个凸起按钮的示例：
------- ---------- ------------ ------------- ------ ---------
输入框
输入框是 Material Design 中的另一个重要元素，它们用于收集用户输入。Material Design 中的输入框有多种类型，包括文本输入框、选择器、开关等等。
文本输入框
文本输入框用于收集文本输入。它们可以是单行或多行，可以包含标签、图标和帮助文本。以下是一个文本输入框的示例：
---- -------------------- ------ --------------- ----------- ----------------- ------ --------------------- ------------- ------
选择器
选择器用于从一组选项中选择一个或多个选项。它们可以是下拉菜单、单选按钮或复选框。以下是一个下拉菜单的示例：
---- --------------------
--------
------- -------- -------- --------------- ---- ---------------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
---------
------------------ --------------
------开关
开关用于表示二进制状态，例如开/关或是/否。它们可以是单选按钮或复选框。以下是一个单选按钮的示例：
---
-------
------ ------------ ------------- --------
----------- -------------
--------
----结论
Material Design 是一套非常强大和灵活的设计规范，它提供了大量的元素和样式，可以用于构建各种类型的 Web 应用程序和移动应用程序。在本文中，我们深入了解了 Material Design 的元素样式，包括颜色、阴影、图标、按钮、输入框等等。希望这篇文章能够帮助你更好地理解 Material Design 并在你的项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673bfc026fb5f33badde30a2