Material Design 中的按钮规范详解

阅读时长 5 分钟读完

Material Design 是一套由 Google 设计的跨平台视觉风格,并为此提供了一些规范和指南。其中,按钮作为交互设计中的重要元素,也有着一系列的规范。在本文中,我们将为您介绍 Material Design 中按钮规范的详细内容,包括按钮的类型、尺寸、颜色和交互设计等方面。同时,我们也将为您提供一些示例代码帮助您更好地理解这些规范。

按钮类型

Material Design 中的按钮分为主要按钮(Raised Button)和次要按钮(Flat Button)两种类型,它们分别适用于不同的场景。

Raised Button

Raised Button 通常被用作应用或页面的主要操作按钮,具有凸出的效果。Raised Button 的最小尺寸为 88dp,建议的最大宽度为 288dp,并且按钮角的半径为 4dp。

Flat Button

Flat Button 和 Raised Button 相比,相对平面,更加适合作为次要操作按钮、页内操作的导航按钮等场景。Flat Button 的最小尺寸为 36dp,建议的最大宽度为 264dp。

按钮尺寸

为了满足不同场景下的需求,Material Design 还规定了不同尺寸的按钮,分别为大号(Large)、标准(Normal)和小号(Small)。

Large Button

大号按钮适用于需要强调主要操作、需要进行大范围点击的场景。它们的尺寸是标准按钮的 150%。

Normal Button

标准按钮适用于绝大部分场景,在文本和图标之间有适当的空白,宽度不适合使用按钮时使用此类按钮。

Small Button

小号按钮适用于紧凑、有限空间的场景,可以放置在紧密的布局中,并减小其宽度,但是需要保留其高度。

按钮颜色

在 Material Design 中,颜色对于按钮的分类非常重要,主要有主色、次要色、警告色和禁用状态。默认情况下,按钮的主色是应用的主要颜色,次要色和警告色都是通过调整主色的明度和饱和度来获得的。

Primary Button

主要按钮是应用的主色,用于表明当前操作的重要性,例如提交表单、打开菜单等。用户并不希望在同一页面中存在多个此类按钮,以防止干扰用户的视觉焦点。

Secondary Button

其次要颜色是通过调整主颜色亮度和饱和度实现的。它用于强调次要的操作或是弱化激活的按钮。

Warning Button

警告状态表示用户的某一操作可能引发一些风险或更改数据,或正在进行一些十分重要的操作,因此需要对其进行更改或验证。

Disabled Button

禁用状态表示按钮当前不能使用或者当前操作并不适用,例如已经达到限额或者没有更多内容。

按钮交互设计

Material Design 还规定了许多有关按钮交互行为的规范,本节我们将介绍其中几个重要的规范。

点击

用户点击按钮时应该立即得到反馈,这可以通过按钮的动画来实现。点击事件的效果通常为类似于涟漪的动画,称为彩虹动画。

长按

长按是指用户长时间点击按钮时触发的事件,用于执行一些专门针对按钮的操作。

Hover

当用户将光标悬停在按钮上时,按钮会显示一个微小的动态元素,用于引导用户。

综上所述,Material Design 中的按钮规范详细、完整,可以为前端开发人员提供了不少指导和参考,也为产品体验设计提供了很好的参考。希望本文对您有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6781225d4b0a96d284d860f9

纠错
反馈