Material Design 是一套由 Google 设计的跨平台视觉风格,并为此提供了一些规范和指南。其中,按钮作为交互设计中的重要元素,也有着一系列的规范。在本文中,我们将为您介绍 Material Design 中按钮规范的详细内容,包括按钮的类型、尺寸、颜色和交互设计等方面。同时,我们也将为您提供一些示例代码帮助您更好地理解这些规范。
按钮类型
Material Design 中的按钮分为主要按钮(Raised Button)和次要按钮(Flat Button)两种类型,它们分别适用于不同的场景。
Raised Button
Raised Button 通常被用作应用或页面的主要操作按钮,具有凸出的效果。Raised Button 的最小尺寸为 88dp,建议的最大宽度为 288dp,并且按钮角的半径为 4dp。
<button class="md-raised md-primary">Primary Button</button>
Flat Button
Flat Button 和 Raised Button 相比,相对平面,更加适合作为次要操作按钮、页内操作的导航按钮等场景。Flat Button 的最小尺寸为 36dp,建议的最大宽度为 264dp。
<button class="md-flat md-accent">Accent Button</button>
按钮尺寸
为了满足不同场景下的需求,Material Design 还规定了不同尺寸的按钮,分别为大号(Large)、标准(Normal)和小号(Small)。
Large Button
大号按钮适用于需要强调主要操作、需要进行大范围点击的场景。它们的尺寸是标准按钮的 150%。
<button class="md-raised md-primary md-large">Large Button</button>
Normal Button
标准按钮适用于绝大部分场景,在文本和图标之间有适当的空白,宽度不适合使用按钮时使用此类按钮。
<button class="md-raised md-primary">Normal Button</button>
Small Button
小号按钮适用于紧凑、有限空间的场景,可以放置在紧密的布局中,并减小其宽度,但是需要保留其高度。
<button class="md-flat md-accent md-small">Small Button</button>
按钮颜色
在 Material Design 中,颜色对于按钮的分类非常重要,主要有主色、次要色、警告色和禁用状态。默认情况下,按钮的主色是应用的主要颜色,次要色和警告色都是通过调整主色的明度和饱和度来获得的。
Primary Button
主要按钮是应用的主色,用于表明当前操作的重要性,例如提交表单、打开菜单等。用户并不希望在同一页面中存在多个此类按钮,以防止干扰用户的视觉焦点。
<button class="md-raised md-primary">Primary Button</button>
Secondary Button
其次要颜色是通过调整主颜色亮度和饱和度实现的。它用于强调次要的操作或是弱化激活的按钮。
<button class="md-raised md-secondary">Secondary Button</button>
Warning Button
警告状态表示用户的某一操作可能引发一些风险或更改数据,或正在进行一些十分重要的操作,因此需要对其进行更改或验证。
<button class="md-raised md-warn">警告按钮</button>
Disabled Button
禁用状态表示按钮当前不能使用或者当前操作并不适用,例如已经达到限额或者没有更多内容。
<button class="md-raised" disabled="true">Disabled Button</button>
按钮交互设计
Material Design 还规定了许多有关按钮交互行为的规范,本节我们将介绍其中几个重要的规范。
点击
用户点击按钮时应该立即得到反馈,这可以通过按钮的动画来实现。点击事件的效果通常为类似于涟漪的动画,称为彩虹动画。
<button class="md-raised md-primary md-clicked">Clicked Button</button>
长按
长按是指用户长时间点击按钮时触发的事件,用于执行一些专门针对按钮的操作。
<button class="md-raised md-primary md-longpressed">Pressed Button</button>
Hover
当用户将光标悬停在按钮上时,按钮会显示一个微小的动态元素,用于引导用户。
<button class="md-raised md-primary md-hover">Hover Button</button>
综上所述,Material Design 中的按钮规范详细、完整,可以为前端开发人员提供了不少指导和参考,也为产品体验设计提供了很好的参考。希望本文对您有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6781225d4b0a96d284d860f9