Material Design 中列表项的敲击反馈设计-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是一种流行的设计语言，它的标志性特点之一是强调给予用户视觉和运动反馈的重要性。在列表中，当用户点击其中一项时，敲击反馈是非常关键的，因为它直接影响了用户体验。本篇文章将介绍 Material Design 列表项的敲击反馈设计需注意的细节，并提供相应的示例代码，帮助读者理解。

敲击动画

在 Material Design 中，当用户点击一个列表项时，动画效果是必不可少的。这个动画效果需要通过 CSS 动画来实现。具体来说，可以使用 "scale" 和 "opacity" 属性来控制元素的缩放和透明度。通常情况下，点击时缩放比例为 0.9，透明度为 0.6，然后经过 300 毫秒恢复原始状态。

以下是示例代码：

li:active {
  transform: scale(0.9);
  opacity: 0.6;
  transition: all 300ms ease-out;
}

上述代码表示在用户点击 li 元素时，执行缩小、降低透明度以及渐变恢复到原始状态的过渡动画，过渡时间为 300 毫秒，缓动函数采用 ease-out。

触摸反馈

Material Design 提供了一种特殊的辅助功能，称为 “触摸可见性”。该功能通过增加阴影和模糊半径来匹配触摸轮廓，并更明显地突出元素。这使得用户在触摸屏幕时能够更容易地看到他们点击的元素。

以下是示例代码：

li:active {
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);
}

上述代码表示在用户点击 li 元素时，执行增加阴影的过渡动画，以增强用户对列表项的感知。

微交互

在 Material Design 中，微交互是非常重要的一环，它可以改善用户体验并让用户更容易理解应用程序的工作方式。因此，在设计敲击反馈时，需要考虑一些细节。

例如，可以添加一个简单的文本提示，将提示显示在列表项上方，以显示用户已经完成了某个操作。此外，当用户在列表项上向左滑动时，可以显示一个“删除”按钮，以方便用户删除该列表项。

以下是示例代码：

// javascriptcn.com 代码示例
<ul>
  <li>
    Item 1
    <span class="tooltip">Completed</span>
    <button class="delete-button">Delete</button>
  </li>
  <li>
    Item 2
    <span class="tooltip">Not completed</span>
    <button class="delete-button">Delete</button>
  </li>
</ul>

// javascriptcn.com 代码示例
.tooltip {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%, -5px);
  background-color: #555;
  color: #fff;
  padding: 5px;
  font-size: 12px;
}

.delete-button {
  display: none;
}

li:hover .delete-button {
  display: inline-block;
}

上述示例代码表示在列表中添加了文本提示和删除按钮，并通过 CSS 控制其显示。当用户将鼠标悬停在列表项上方时，将显示“删除”按钮。

总结

Material Design 中的列表项敲击反馈设计需要注意很多细节。需要使用缩放和透明度等动画效果来增强视觉和运动反馈的可见性，使用阴影和

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651bbdeb95b1f8cacd35d796