Material Design 中的按键与交互设计

阅读时长 5 分钟读完

Material Design 是由 Google 设计的一款全新的设计语言,它的目标是让设计师和开发者在移动应用、桌面应用以及 Web 应用中实现一致的视觉风格和用户体验。其中,按键与交互设计是 Material Design 中重要的一部分,本文将详细介绍这方面的内容,并提供实例代码和指导意义。

1. 普通按键和扁平化设计

在 Material Design 中,按键具有较为明显的立体效果,即在键面上有浮起的阴影和深度感,使用户能够感知到按键的存在和点击反馈,提高用户的操作体验。同时在设计方面,Material Design 更加推崇扁平化设计,采用简洁大方的风格,这与传统的 3D 效果相反。因此,在实现 Material Design 中的按键设计时,需要综合两者的特点。

下面是实现 Material Design 的普通按键的代码示例:

-- -------------------- ---- -------
---- -
  -------- -------------
  ----------- -------
  --------------- -------
  -------- ------ -----
  ------------ --------- -----------
  ---------- -----
  ------------ ----
  ------------ ----
  ----------- ---------- ----- ------------ ---------------- ----- ------------
  -------------- --------
  ------- --------
  ------------ -----
-

------------ -
  ------ -----
  ----------------- --------
  ------------- --------
-

---------- -
  -------- -----
  ----------- - - - ------ ------- ---- ---- -----
-

----------- -
  ----------------- ------- ---- ---- -----
  ------------- ------- ---- ---- -----
-

效果如下:

添加阴影效果,使其更加 Material Design:

2. 悬浮动作按钮

悬浮动作按钮(Floating Action Button,FAB)是 Material Design 中常用的交互元素之一,用于强调应用的主要动作和重要内容。FAB 通常位于页面右下角,形状为圆形,同时拥有浮起的阴影和微小的转场动画。

下面是实现 Material Design 的悬浮动作按钮的代码示例:

-- -------------------- ---- -------
---- -
  --------- ------
  ------ -------
  ------- -------
  -------- -----
  -------- -----
  ---------------- -------
  ------------ -------
  ------ -----
  ------- -----
  -------------- ----
  ----------------- --------
  ----------- - --- --- ------- -- -- ------
  ------- --------
-

---------- -
  ----------------- --------
-

---- - -
  ------ -----
  ---------- -----
-

效果如下:

3. 按键组

在 Material Design 中,按键组可以将相关操作进行组合,并且可以用于不同的视图,从而提高界面的可重用性和一致性。

下面是实现 Material Design 的按键组的代码示例:

效果如下:

结语

通过本文的介绍,我们了解了 Material Design 中的按键与交互设计,并提供了实例代码和指导意义。在实践中,我们可以根据需求进行相应的调整和完善,以提高用户体验和界面一致性。

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

纠错
反馈