Material Design 是 Google 推出的一种设计语言，旨在提供一种整合性的设计解决方案，以便于 UI 设计师和开发人员构建现代化的应用程序。Material Design，特别是其中的按钮样式和大小，对于前端开发人员来说至关重要。
本文将深入探讨 Material Design 中的按钮样式和大小，以及如何在前端开发中使用它们。
Material Design 按钮概述
Material Design 中的按钮从根本上来说是一个图标按钮，但也可以拥有文本标签。按钮在设置宽度和高度时具有固定的比例（大致为 2:1），因此您可以根据需要将其缩放。此外，每个按钮都具有圆角，无论大小如何都保持一致。
Material Design中的按钮共有四种类型：文本按钮、图标按钮、文本和图标按钮和浮动操作按钮（FAB）。
文本按钮
文本按钮只包含一个标签，不带任何图标。它通常用于导航、提交或执行特定的操作。
------- ---------------- --------- ------------ ---- ---------
图标按钮
图标按钮只包含一个图标，而不是文本。该图标通常用于操作某些特定功能或导航。
------- --------------------- ------------ -- ----------------------------------- ---------
文本和图标按钮
文本和图标按钮同时包含一个标签和一个图标，通常用于执行特定操作或导航。
------- ---------------- -------------- ------------ -- ------------------------------- ---- ---------
浮动操作按钮（FAB）
浮动操作按钮（FAB）是一个圆形的按钮，其中包含一个图标。它通常用于显示主要操作元素，如创建、共享或锁定。
------- ------------- ------------ -- ------------------------------ ---------
按钮大小
Material Design 中有几种按钮大小可以使用。这些大小具有不同的标签和图标大小、圆角大小和间距等属性。
默认大小
默认的按钮大小应该被用于大多数文本按钮和图标按钮。该大小具有适度的按钮高度和适度的圆角。
------- ---------------- --------- ------------ ------ ---------
小型
小型按钮大小应该被用于页面上需要包含大量按钮的地方。该大小具有较小的按钮高度和较小的圆角。
------- ---------------- --------- ---------- ---------- ---- ---------
大型
大型按钮大小应该被用于需要吸引用户注意的特殊操作。该大小具有较高的按钮高度和较大的圆角。
------- ---------------- --------- ---------- ---------- ---- ---------
增加按钮交互性能
Material Design 中的按钮样式并不仅仅是有关外观。它们也是一种交互体验，可以增强整个应用程序的可用性和易用性。
以下是一些技巧，可以使 Material Design 按钮更具交互性能：
使用动画过渡
当用户单击一个按钮时，通过添加动画过渡来引导他们的注意力。这可以通过在单击按钮时使用 CSS 转换来完成。
---------------- -
------------------------ -----------
-----------
-----------------------------
---------------------
------------------------------------ ---- --------- ---------------- ---- ---------
---------------------------- ---- --------- ---------------- ---- ---------
-------------------- ---- --------- ---------------- ---- ---------
-------------------- ---- --------- ---------------- ---- --------- ----------------- ---- ---------
-移动端的按钮效果
在移动设备上，用户可能会因为触摸屏幕，而不是单击按钮，从而更改按钮的颜色或样式。为了在移动设备上提供更好的用户体验，可以使用以下样式：
----------------- -
------------------------ -----------
-------------------- --- --------
------------ --- --------
--------------------------
-设置禁用按钮样式
禁用按钮应使用以下 CSS 样式来提供视觉反馈提示用户该按钮不可用。
--------------------- -------------------------- - ----------------- ----- ------ ----- ------- -------- -
结论
Material Design 中的按钮样式和大小的重要性，在前端开发和 UI 设计中不言而喻。本文介绍了 Material Design 中四种类型的按钮，并探讨了 Material Design 中的三种不同按钮大小。此外，还提到了一些技巧，可以帮助开发人员提高 Material Design 按钮的交互性能。
在设计应用程序或开发网站时，应该深入了解 Material Design 中的按钮样式和大小，以确保提供最佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673453ae0bc820c5824867d4