Material Design 是一种设计语言，由 Google 推出，主要应用于移动端和 Web 应用程序的设计。其中，按钮是 Material Design 中非常重要的一部分，也是用户与应用程序交互的主要方式之一。在本文中，我们将会探讨 Material Design 中的按钮组件设计原则和应用技巧，帮助你创建更加美观和易用的按钮组件。
按钮组件的基本设计原则
在使用 Material Design 的按钮组件时，需要遵循以下设计原则：
1. 普适性
按钮组件应该被广泛地应用于应用程序中。因此，按钮组件需要具有高度的普适性，可以适应不同的设备尺寸、分辨率和视觉样式。
2. 可访问性
为了适应不同的用户和使用场景，按钮组件需要被设计为易于使用和易于识别。这意味着按钮组件应该提供明确的标志来指示它们的功能，如按钮的颜色、形状和文本内容。
3. 按钮的交互行为
按钮组件的交互行为应该简单、明确和一致，并且应该遵循 按下、悬停、聚焦 和 禁用 等基本的交互行为。这将帮助用户轻松地理解和使用按钮组件。
4. 易于操作
按钮组件应该设计成易于操作，尽可能缩短用户操作的时间，并减少用户输入的次数。如，使用按钮代替需要用户手动输入的命令。
5. 兼容性
按钮组件应该在不同平台、浏览器和设备上具有良好的兼容性。这将有助于确保用户能够在任何情况下都能够使用按钮。
按钮组件的应用技巧
当我们设计按钮组件时，需要考虑以下的技巧：
1. 按钮的颜色
按钮的颜色是一个非常重要的设计决策，可以传达出按钮的重要性和功能性。在 Material Design 中，颜色被分为三个层次：主色调、次要色调和强调色。每个层次表达了不同的颜色含义和使用场景，以便为用户提供更详细的信息。
如下所示是不同颜色层次的使用场景：
1. 主色调
主色调通常用于页面的整体背景色或头部的导航条。它通常是页面布局和品牌标识的基础颜色，用于传达品牌的主要特点和特征。
2. 次要色调
次要色调通常用于页面的辅助元素，如表单控件和标签页。它通常被用于与主色调对比，突出次要元素的重要性。
3. 强调色
强调色通常用于突出按钮、进度条等重要的元素。它通常被用于与其他颜色对比，以便让用户更好地注意到这些元素。
2. 按钮的尺寸
按钮的尺寸是应该根据应用程序的不同页面设计来进行调整的。这需要在保持按钮易于操作的同时，保持与其他元素的视觉平衡。
如下所示是 Material Design 中常见的按钮尺寸：
1. 大按钮
大按钮用于需要最终用户的注意力和主要交互的地方。大按钮通常用于重要和关键的操作，比如提交表单。
2. 标准按钮
“标准按钮”尺寸是最广泛的，并且可以应用于大约 90% 的应用场景。标准按钮通常用于执行普通的操作，例如，保存表单、启动弹出菜单等。
3. 小按钮
小按钮通常被用于容纳更多的操作元素，如图标和其他控件，或者用于较小的页面空间。小按钮通常用于基于图形的命令操作，例如，放大图片。
3. 按钮的形状
Material Design 中按钮的形状也是非常重要的一部分设计决策。它可以传达出按钮的重要性和用途，使用户能够从一些简单的视觉标记中辨别出它的用途。
如下所示是 Material Design 中的常见按钮形状：
1. 常规按钮
常规按钮的形状是一个矩形或圆形，通常在大部分应用场景中使用。它们可以被应用于内部的页面提供良好的可视化效果，也可以被用于自定义控件，以便加强用户的认知能力。
2. 浮动动作按钮
浮动动作按钮通常用于主要交互区域，在屏幕上浮动以提供最佳体验。它通常用于主要的交互，例如，添加内容或启用全屏浏览。
3. 工具栏按钮
工具栏按钮在视觉上类似于常规按钮，但通常作为工具栏中的区块使用。它们通过一系列简短的图标和标签来提供基础的命令操作。
示例代码：
<button class="btn btn-primary">Primary</button> <button class="btn btn-accent">Accent</button> <button class="btn btn-error">Error</button> <button class="btn btn-flat">Flat</button>
结论
在本文中，我们深入了解了 Material Design 中的按钮组件设计原则和应用技巧。通过了解这些重要的设计原则，我们可以创建具有高度可用性和可访问性的按钮，简化用户的操作，并为他们提供更好的体验。同时，这也可以帮助我们设计更加美观和易用的按钮组件，使我们在 Web 或移动端应用中体验到更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67185ff6ad1e889fe22a8632