Material Design 是 Google 推出的一种设计风格，它的设计原则是基于纸张和墨水的，旨在提供更真实的体验，并提供更好的可用性和可访问性。在 Material Design 中，输入和按钮设计是非常重要的一部分，因为它们是用户与应用程序互动的主要方式。在本文中，我们将详细介绍 Material Design 中的输入和按钮设计。
输入设计
在 Material Design 中，输入设计是以文本框为主。文本框是用户输入信息的主要方式，因此在设计时需要考虑以下几个方面：
样式
在 Material Design 中，文本框的样式应该符合材料的设计原则。它们应该有明确的边界，有清晰的标签，并且应该具有一致的外观和感觉。此外，输入框应该是可定制的，这意味着可以根据应用程序的需要进行颜色、字体和大小等方面的调整。
以下是一个基本的文本框样式示例：
<label for="input">输入框</label> <input type="text" id="input" name="input" placeholder="请输入内容">
标签
在 Material Design 中，标签应该是清晰的。标签应该告诉用户输入框中应该输入什么内容。标签应该具有明确的字体和颜色，以便用户能够清晰地看到它们。此外，标签应该在用户输入时消失，以便用户能够看到他们输入的内容。
以下是一个带有标签的文本框示例：
<label for="input">名字</label> <input type="text" id="input" name="name" placeholder="请输入你的名字">
错误提示
在 Material Design 中，应该提供错误提示。如果用户输入的内容不符合要求或格式不正确，应该提供错误提示。错误提示应该是明确的，并且应该告诉用户他们需要更正的内容。
以下是一个带有错误提示的文本框示例：
<label for="input">年龄</label> <input type="number" id="input" name="age" placeholder="请输入你的年龄" required> <div class="error">请输入正确的年龄</div>
按钮设计
在 Material Design 中，按钮是用户与应用程序互动的主要方式之一。因此，在设计时需要考虑以下几个方面：
样式
在 Material Design 中，按钮的样式应该符合材料的设计原则。按钮应该有明确的边界和背景颜色，并且应该具有一致的外观和感觉。此外，按钮应该是可定制的，这意味着可以根据应用程序的需要进行颜色、字体和大小等方面的调整。
以下是一个基本的按钮样式示例：
<button>提交</button>
文本
在 Material Design 中，按钮的文本应该是清晰的。按钮上的文本应该告诉用户按钮的功能。按钮的文本应该具有明确的字体和颜色，以便用户能够清晰地看到它们。此外，按钮的文本应该在用户点击时变暗，以便用户知道他们已经点击了按钮。
以下是一个带有文本的按钮示例：
<button>提交</button>
状态
在 Material Design 中，按钮的状态应该是明确的。按钮应该在不同的状态下显示不同的颜色和文本。例如，在按钮被禁用时，应该显示不同的文本和颜色。
以下是一个带有不同状态的按钮示例：
<button>提交</button> <button disabled>已禁用</button>
结论
在 Material Design 中，输入和按钮设计是非常重要的一部分。在设计时应该考虑样式、标签、错误提示、文本、状态等方面。通过遵循这些设计原则，可以提高应用程序的可用性和可访问性，提供更好的用户体验。
参考文献：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673bef4df24678537e0ac3e8