互動

手機等小螢幕裝置通常都有觸控螢幕。大螢幕裝置 (例如筆記型電腦和桌上型電腦) 通常配備滑鼠或觸控板等硬體。他們原本很想將觸控功能和大螢幕的螢幕填滿,

但實際情況卻有些不同。部分筆記型電腦提供觸控螢幕功能。使用者可以與觸控螢幕和/或觸控板互動。同樣地,你也可以透過觸控螢幕裝置 (例如平板電腦) 使用外接鍵盤或滑鼠。

您不必嘗試根據螢幕大小推論輸入機制,而是改用 CSS 中的媒體功能。

指標

您可以使用 pointer 媒體功能,測試三個可能的值:nonecoarsefine

如果瀏覽器回報 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-pointerpointer 媒體功能不同,它會回報是否有指標裝置通過測試。

如果 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;
  }
}

將滑鼠懸停在該按鈕上方,圖示隨即會顯示。但如果您使用鍵盤前往按鈕,圖示會保持隱藏。使用鍵盤時,可以將焦點移至其他位置,而非懸停遊標。配備滑鼠的電腦會回報主要輸入機制支援懸停動作 (是)。但任何人在連接滑鼠時使用鍵盤,並不能享有 :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 屬性可接受 emailnumbertelurl 等值。

  <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">

輸入模式

瀏覽器支援

  • Chrome:66.
  • Edge:79,
  • Firefox:95。
  • Safari:12.1.

資料來源

inputmode 屬性可讓您精細控管虛擬鍵盤。舉例來說,由於有一個值為 numberinput 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 屬性 (typeinputmodeautocomplete) 是表單欄位額外加入的小型屬性,但也可能是影響使用者體驗的一大要素。藉由預測並回應使用者的裝置功能,有助使用者做好萬全準備。歡迎參考我們的學習表單課程,瞭解更多資訊。

接下來,我們來看看一些常見介面模式

隨堂測驗

測試你對互動的瞭解程度

與其嘗試從螢幕大小推斷使用者的輸入類型,請問你該使用哪項功能?

CSS 媒體功能
類似「@media (pointer: coarse)」或「@media (-any-pointer: coarse)
使用 JavaScript 的 prompt() 詢問使用者
不建議直接提問。
CSS 媒體類型:handheld
這項功能已在媒體查詢 4 中淘汰。

@media (pointer)@media (any-pointer) 有何不同?

任何指標都會包含您的手指等項目。
指標原本就包含觸控做為輸入類型。
指標不可包含滑鼠等項目。
指標確實包括滑鼠做為輸入裝置。
如有其他非主要的輸入內容 (例如觸控筆) 通過測試,任何指標都會回報為 true。
any-pointer 會查詢所有相符的裝置輸入類型,

哪些輸入類型會向使用者顯示更合適的虛擬鍵盤?

type="url"
鍵盤會提供支援輸入網址的按鈕。
type="tel"
鍵盤會提供可以輸入電話號碼的按鈕。
type="number"
鍵盤會提供按鈕,讓你只要輸入數字。
type="email"
鍵盤會提供可以輸入電子郵件地址的按鈕。