Material Design 是由 Google 设计的一款全新的设计语言,它的目标是让设计师和开发者在移动应用、桌面应用以及 Web 应用中实现一致的视觉风格和用户体验。其中,按键与交互设计是 Material Design 中重要的一部分,本文将详细介绍这方面的内容,并提供实例代码和指导意义。
1. 普通按键和扁平化设计
在 Material Design 中,按键具有较为明显的立体效果,即在键面上有浮起的阴影和深度感,使用户能够感知到按键的存在和点击反馈,提高用户的操作体验。同时在设计方面,Material Design 更加推崇扁平化设计,采用简洁大方的风格,这与传统的 3D 效果相反。因此,在实现 Material Design 中的按键设计时,需要综合两者的特点。
下面是实现 Material Design 的普通按键的代码示例:
<button class="btn btn-primary">按钮</button>
-- -------------------- ---- ------- ---- - -------- ------------- ----------- ------- --------------- ------- -------- ------ ----- ------------ --------- ----------- ---------- ----- ------------ ---- ------------ ---- ----------- ---------- ----- ------------ ---------------- ----- ------------ -------------- -------- ------- -------- ------------ ----- - ------------ - ------ ----- ----------------- -------- ------------- -------- - ---------- - -------- ----- ----------- - - - ------ ------- ---- ---- ----- - ----------- - ----------------- ------- ---- ---- ----- ------------- ------- ---- ---- ----- -
效果如下:
添加阴影效果,使其更加 Material Design:
.btn { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); /*浮起的阴影*/ }
2. 悬浮动作按钮
悬浮动作按钮(Floating Action Button,FAB)是 Material Design 中常用的交互元素之一,用于强调应用的主要动作和重要内容。FAB 通常位于页面右下角,形状为圆形,同时拥有浮起的阴影和微小的转场动画。
下面是实现 Material Design 的悬浮动作按钮的代码示例:
<div class="fab"> <i class="material-icons">add</i> </div>
-- -------------------- ---- ------- ---- - --------- ------ ------ ------- ------- ------- -------- ----- -------- ----- ---------------- ------- ------------ ------- ------ ----- ------- ----- -------------- ---- ----------------- -------- ----------- - --- --- ------- -- -- ------ ------- -------- - ---------- - ----------------- -------- - ---- - - ------ ----- ---------- ----- -
效果如下:
3. 按键组
在 Material Design 中,按键组可以将相关操作进行组合,并且可以用于不同的视图,从而提高界面的可重用性和一致性。
下面是实现 Material Design 的按键组的代码示例:
<div class="btn-group"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> </div>
.btn-group { display: flex; flex-wrap: wrap; } .btn + .btn { margin-left: 0.5rem; }
效果如下:
结语
通过本文的介绍,我们了解了 Material Design 中的按键与交互设计,并提供了实例代码和指导意义。在实践中,我们可以根据需求进行相应的调整和完善,以提高用户体验和界面一致性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67972921504e4ea9bde31cfa