互动

通过集合保持井井有条 根据您的偏好保存内容并对其进行分类。

像手机这样的小屏幕设备通常配有触摸屏。像笔记本电脑和台式电脑这样的大屏幕设备通常配有鼠标或触控板等硬件。人们很容易将小屏幕与触摸操作等同起来，将大屏幕与指针操作等同起来。

但实际情况更为微妙。有些笔记本电脑具有触摸屏功能。用户可以使用触摸屏和/或触控板进行互动。同样，也可以将外接键盘或鼠标与平板电脑等触摸屏设备配合使用。

与其尝试从屏幕尺寸推断输入机制，不如在 CSS 中使用媒介功能。

指针

您可以使用 pointer 媒介功能测试三个可能的值：none、coarse 和 fine。

如果浏览器报告 pointer 值为 none，则用户可能正在使用键盘与您的网站互动。

如果浏览器报告 pointer 值为 coarse，则表示主要输入机制不是很精确。触摸屏上的手指是一个粗略的指针。

如果浏览器报告 pointer 值为 fine，则表示主要输入机制能够进行精细控制。鼠标或触控笔是一个精细的指针。

您可以调整界面元素的大小以适应 pointer 值。尝试在不同类型的设备中访问此网站，了解界面如何适应。

在此示例中，按钮针对粗略指针进行了放大

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

也可以针对精细指针缩小元素，但对此要谨慎

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

即使某人的主要输入机制能够进行精细控制，在缩小互动元素的大小时也要三思。费茨定律仍然适用。即使使用精细指针，较小的目标也需要更高的注意力。较大的目标区域使所有人受益，无论使用何种指针设备。

任何指针

pointer 媒介功能报告的是主要输入机制的精细度。但许多设备具有多个输入机制。用户可能同时使用触摸屏和鼠标与您的网站互动。

any-pointer 与 pointer 媒介功能的不同之处在于，它报告的是任何指针设备是否通过测试。

any-pointer 值为 none 表示没有可用的指针设备。

any-pointer 值为 coarse 表示至少有一个指针设备不是很精确。但这可能不是主要输入机制。

any-pointer 值为 fine 表示至少有一个指针设备能够进行精细控制。但同样，这可能不是主要输入机制。

由于如果任何输入机制通过测试，any-pointer 媒介查询都会报告肯定结果，因此浏览器可能会为 any-pointer: fine 报告结果，也会为 any-pointer: coarse 报告结果。在这种情况下，您的媒介查询顺序很重要。最后一个查询将优先。

在此示例中，如果设备同时具有精细和粗略输入机制，则应用粗略样式。

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

悬停

hover 媒介功能报告主要输入机制是否可以悬停在元素上方。这通常表示屏幕上有一些光标，由鼠标或触控板控制。

与区分精细指针和粗略指针的 pointer 媒介功能不同，hover 媒介功能是二元的。如果主要输入设备能够悬停在元素上方，它将报告 hover 值。否则，值为 none。

在此示例中，某些补充图标在悬停时可用，但前提是主要输入设备能够悬停在元素上方。

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

如果您使用鼠标悬停在该按钮上方，图标将出现。但是，如果您使用键盘 Tab 键选择该按钮，则图标仍然不可见。当您使用键盘时，您是在聚焦而不是悬停。连接鼠标的台式设备将报告主要输入机制能够悬停，这是正确的。但是，任何在使用键盘的同时连接鼠标的人都无法获得 :hover 样式的优势。因此，最好结合使用 :hover 和 :focus 样式来涵盖这两种互动。

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

即使主要输入设备能够悬停在元素上方，也要谨慎地将信息隐藏在悬停互动之后。信息会变得更难以发现。不要使用悬停来隐藏重要信息或重要的界面元素。

任何悬停

hover 媒介查询仅报告主要输入机制。有些设备具有多个输入机制：触摸屏、鼠标、键盘、触控板。

正如 any-pointer 报告任何输入机制一样，如果任何可用的输入机制能够悬停在元素上方，any-hover 将为 true。

如果您决定反转上一个示例中的逻辑，您可以使悬停样式成为默认样式，然后在 any-hover 的值为 none 时移除它们。

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

在没有输入机制能够悬停的设备上，额外的图标始终可见。

虚拟键盘

人们使用光标和手指来浏览界面，但当需要输入信息时，他们需要键盘。如果他们的设备连接了物理键盘，这很好，但如果他们使用的是触摸屏设备，则会稍微复杂一些。这些设备提供屏幕上的虚拟键盘。

输入类型

与物理键盘不同，虚拟键盘可以进行定制以匹配预期的输入。如果您提供有关预期输入的信息，设备可以提供最合适的虚拟键盘。

HTML5 输入类型是描述您的 input 元素的绝佳方式。type 属性接受诸如 email、number、tel、url 等值。

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

输入模式

inputmode 属性让您可以精细地控制虚拟键盘。例如，虽然只有一个值为 number 的 input type，但您可以使用 inputmode 属性来区分整数和小数。

如果您要求输入整数（如某人的年龄），请使用 inputmode="numeric"。

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

如果您要求输入包含小数位的数字（如价格），请使用 inputmode="decimal"。

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

自动填充

没有人喜欢填写表单。作为设计师，您可以通过让用户自动填写表单字段来改善他们的体验。autocomplete 属性为您提供了大量选项，用于改进联系表单、登录表单和结账表单。

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

这些 HTML 属性 - type、inputmode 和 autocomplete - 是对您的表单字段的小小补充，但它们可以对用户体验产生重大影响。通过预测和响应用户的设备功能，您正在增强用户的能力。如需更深入的信息，请访问专门帮助您学习表单的课程。

本课程的下一步，是时候检查一些常用界面模式了。

检查您的理解情况

测试您对互动的知识