互動

手機等小螢幕裝置通常配備觸控螢幕。筆電和桌上型電腦等大螢幕裝置通常會隨附滑鼠或觸控板等硬體。您可能會想將小螢幕視為觸控裝置，大螢幕視為指標裝置。

但實際情況更加複雜。部分筆電具備觸控螢幕功能。使用者可以透過觸控螢幕、觸控板或兩者與裝置互動。同樣地，你也可以在平板電腦等觸控螢幕裝置上使用外接鍵盤或滑鼠。

請使用 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 媒體功能會回報主要輸入機制是否能懸停在元素上。這通常表示螢幕上出現游標，且游標是由滑鼠或觸控板控制。

hover 媒體功能是二進位，與 pointer 媒體功能不同，後者會區分精細和粗略指標。如果主要輸入裝置可以懸停在元素上，就會回報 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) 只是表單欄位的小幅增修，但對使用者體驗的影響卻很大。預測並回應使用者的裝置功能，有助於提升使用者體驗。如需更深入的資訊，請參閱表單學習課程。

本課程的下一節將探討一些常見的介面模式。

隨堂測驗

測試你對互動的瞭解程度