Material Design 是 Google 推出的一套设计规范，旨在为 Android、iOS 和 Web 应用程序提供一致的外观和用户体验。其中，按钮是 Material Design 中非常重要的组件之一，它们不仅是用户与应用程序进行交互的主要方式之一，还可以帮助用户了解应用程序的功能和导航。
在本文中，我们将深入了解 Material Design 下的按钮设计及指南，并提供示例代码和实用的指导意义，以帮助您更好地设计和实现优秀的按钮。
按钮类型
Material Design 中有多种类型的按钮，包括浮动操作按钮（FAB）、扁平按钮、凸起按钮、图标按钮、文本按钮等。每种按钮类型都有其自己的设计风格和用途。
浮动操作按钮（FAB）
浮动操作按钮是 Material Design 中最具有代表性的按钮类型之一，它通常用于应用程序的主要操作，如发布新内容、添加新用户等。
FAB 的设计风格通常是圆形的，带有一个图标或文本。它通常放置在应用程序的底部右侧或左侧，可以帮助用户快速访问主要操作。
以下是一个基本的 FAB 示例代码：
<button class="fab"> <i class="material-icons">add</i> </button>
-- -------------------- ---- ------- ---- - --------- ------ ------- ----- ------ ----- ------ ----- ------- ----- -------------- ---- ----------------- -------- ------ ----- ---------- ----- ----------- ------- ------------ ----- ----------- - --- --- ------- -- -- ------ ------- -------- -
扁平按钮
扁平按钮是 Material Design 中最基本的按钮类型之一，它通常用于应用程序的次要操作，如搜索、过滤等。
扁平按钮的设计风格通常是矩形的，没有任何阴影或凸起效果。它通常是透明的，带有一个文本或图标。
以下是一个基本的扁平按钮示例代码：
<button class="flat">Search</button>
-- -------------------- ---- ------- ----- - ----------------- ------------ ------ -------- ------- --- ----- -------- -------------- ---- ---------- ----- -------- --- ----- ------- -------- -
凸起按钮
凸起按钮是 Material Design 中另一种常见的按钮类型，它通常用于应用程序的主要操作，如登录、注册等。
凸起按钮的设计风格通常是矩形的，带有一个明显的凸起效果。它通常是有色的，带有一个文本或图标。
以下是一个基本的凸起按钮示例代码：
<button class="raised">Sign In</button>
-- -------------------- ---- ------- ------- - ----------------- -------- ------ ----- ------- ----- -------------- ---- ---------- ----- -------- --- ----- ------- -------- ----------- - --- --- ------- -- -- ------ -
图标按钮
图标按钮是 Material Design 中最简单的按钮类型之一，它通常用于应用程序的小型操作，如删除、编辑等。
图标按钮的设计风格通常是圆形的，带有一个图标。它通常是透明的，可以带有一个文本标签。
以下是一个基本的图标按钮示例代码：
<button class="icon"> <i class="material-icons">delete</i> <span>Delete</span> </button>
-- -------------------- ---- ------- ----- - ----------------- ------------ ------ -------- ------- ----- -------------- ---- ---------- ----- -------- ---- ------- -------- -
文本按钮
文本按钮是 Material Design 中最普通的按钮类型之一，它通常用于应用程序的简单操作，如返回、取消等。
文本按钮的设计风格通常是矩形的，没有任何阴影或凸起效果。它通常是有色的，带有一个文本标签。
以下是一个基本的文本按钮示例代码：
<button class="text">Cancel</button>
.text {
background-color: transparent;
color: #2196f3;
border: none;
font-size: 16px;
cursor: pointer;
}按钮设计指南
为了设计出优秀的按钮，您需要遵循以下几个设计指南：
1. 明确按钮的用途
在设计按钮时，需要明确按钮的用途和功能，并确保按钮的设计能够充分反映其用途。例如，FAB 应该只用于应用程序的主要操作，而文本按钮应该只用于应用程序的简单操作。
2. 保持一致性
在设计按钮时，需要保持一致性，并确保所有按钮都具有相似的设计风格和外观。这将帮助用户更好地理解按钮的功能和用途。
3. 使用适当的颜色
在设计按钮时，需要使用适当的颜色，并确保按钮的颜色能够与应用程序的整体设计风格相匹配。例如，FAB 通常使用应用程序的主题色，而凸起按钮通常使用鲜艳的颜色。
4. 使用适当的动画效果
在设计按钮时，需要使用适当的动画效果，并确保按钮的动画效果能够与应用程序的整体设计风格相匹配。例如，FAB 通常使用浮动动画效果，而凸起按钮通常使用凸起动画效果。
5. 考虑按钮的位置和大小
在设计按钮时，需要考虑按钮的位置和大小，并确保按钮的位置和大小能够与应用程序的整体设计风格相匹配。例如，FAB 通常放置在应用程序的底部右侧或左侧，而凸起按钮通常较大，以便用户更容易点击。
结论
Material Design 下的按钮设计及指南是一个非常重要的主题，它涉及到应用程序的用户体验和设计风格。通过遵循上述设计指南和示例代码，您可以设计和实现优秀的按钮，并帮助用户更好地理解应用程序的功能和导航。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675442e11b963fe9cc4d6535