觸控互動

  • 發行項

本主題提供在 Windows 應用程式中建立自訂、觸控最佳化體驗的設計指南。

概觀

觸控是跨 Windows 和 Windows 應用程式的主要輸入形式，涉及使用一根或多根手指 (或觸控觸點)。 這些觸控接觸及其移動被解釋為支援各種使用者互動的觸控手勢和操作。

Windows SDK 和 Windows 應用程式 SDK 均包含全面的觸控最佳化控制項集合，可在 Windows 應用程式之間提供強大且一致的體驗。

為 Windows 應用程式建立自訂控制項、體驗和框架時，請使用這些指南。

設計原則

在設計 Windows 應用程式中的觸控體驗時請考慮以下事項。

觸控最佳化

Windows 應用程式體驗應該會讓人感覺易於觸摸、允許直接操作並適應不太精確的互動。 考慮觸摸加速器，包括手勢以及筆和語音整合。

各種姿勢保持一致

無論使用者採用何種輸入方法或姿勢，您的應用程式都應該具有一致的體驗。 從傳統桌面姿勢到平板電腦姿勢的變化 (請參閱推薦設定以獲得更好的平板電腦體驗) 以及方向的變化不應該讓人迷失方向，而應該是微妙的，並且僅在必要時進行。 您的應用程式應該以微妙的方式重新設計 UI，以建立熟悉的、有凝聚力的體驗，以滿足使用者的需求。

回應性

應用程式和互動應使用動畫在互動的每個階段 (觸摸、操作、觸控) 向使用者提供回饋，這些動畫回應使用者的現有狀態，同時指示可能的操作。 動畫也應該保持至少 60 fps，保持流暢和現代感。

接受觸控慣例

回應式反饋

與應用程式互動期間的適當視覺反饋可幫助使用者識別、學習和適應應用程式和 Windows 平台如何解釋他們的互動。 針對使用者的觸控提供即時、連續的回饋，該回饋是明顯的、易於理解的，並且不會因分心而失去。 這種即時回饋是使用者學習和探索應用程式互動元素的方式。

  • 觸控時應立即提供反饋，並且移動的物體應黏在使用者的手指上。
  • UI 應透過匹配使用者速度和動作來回應手勢，避免使用關鍵影格動畫。
  • 視覺回饋應該在使用者採取行動之前傳達可能的結果。

可行事項

禁止事項

Animated GIF of object sticking to user's finger on swipe up.

Animated GIF of object not sticking to user's finger on swipe up.

有關詳細資訊，請參閱 Windows 11 中的視覺反饋和動作指南

觸控互動模式

遵循這些常見的互動和手勢模式，為您的體驗帶來一致性和可預測性。

命令互動

有一組常見的觸控行為和手勢，使用者熟悉並希望在所有 Windows 體驗中保持一致。

  • 點擊以啟動或選擇一個項目
  • 短按並拖曳可移動物件
  • 按住可存取輔助內容命令功能表
  • 針對內容型命令撥動 (或拖曳和放開)
  • 順時針旋轉或逆時針旋轉以樞紐

互動

Animated GIF of user tapping an object to select or activate it.點選

Animated GIF of user dragging an object to reveal contextual commands. 撥動 (或拖曳放開)

Animated GIF of user pressing and dragging an object to rearrange it. 短按並拖曳

Animated GIF of user pressing with two fingers and rotating an object.旋轉

Animated GIF of user pressing and holding an object to display a menu of contextual, secondary commands.按住

有關詳細資訊，請參閱 Windows 11 中的視覺反饋和動作指南

手勢

手勢降低了使用者瀏覽和執行常見互動所需的工作量。 如果可能，透過觸控手勢支援 UI，以便使用者輕鬆在應用程式中瀏覽和操作。

如果在檢視之間瀏覽，請使用連接的動畫，以便現有狀態和新狀態在拖曳過程中均可見。 如果與 UI 互動，項目應跟隨使用者移動，提供回饋，並在釋放時根據拖曳位置閾值對其他操作做出反應。

手勢也應該可以根據慣性透過輕彈和滑動進行操作，並且處於舒適的運動範圍內。

  • 拖曳或輕拂可前後移動
  • 拖曳以關閉
  • 拉動以重新整理

手勢

Animated GIF of user dragging a carousel of objects back and forth.拖曳或輕拂可前後移動

Animated GIF of user pulling down on a collection of objects to refresh [2].拉動以重新整理

Animated GIF of user dragging an object off-screen to dismiss.拖曳以關閉

關於詳細資訊，請參閱頁面轉換和拉動重新整理。

自訂手勢

使用自訂手勢將高頻鍵盤快速鍵和觸控板手勢引入觸控互動。 透過動畫和視覺狀態的專用功能可供性來幫助發現和回應 (例如，將三根手指放在螢幕上會導致視窗縮小以獲取視覺反饋)。

  • 不要覆蓋常見手勢，因為這可能會給使用者帶來困惑。
  • 考慮使用多指手勢進行自訂操作，但請注意，系統保留了一些多指手勢，用於在應用程式和桌面之間快速切換。
  • 請注意源自螢幕邊緣附近的自訂手勢，因為邊緣手勢是為作業系統層級行為保留的，可能會被意外呼叫。

避免意外瀏覽

如果您的應用程式或遊戲可能涉及螢幕邊緣附近的頻繁互動，請考慮以全螢幕獨佔 (FSE) 模式呈現您的體驗，以避免意外啟動系統彈出視窗 (使用者必須直接在臨時標籤上滑動才能拉入關聯的系統彈出視窗)。

注意

除非絕對必要，否則請避免使用此功能，因為這會使使用者更難離開您的應用程式或與其他應用程式結合使用。

觸控鍵盤體驗

觸控鍵盤可以為支援觸控的裝置提供文字輸入。 當使用者點擊可編輯輸入欄位時，Windows 應用程式文字輸入控制項預設會呼叫觸控鍵盤。

The touch keyboard in default layout mode.

在文字欄位點擊上調用

當使用者點擊文字輸入欄位時，觸控鍵盤應該會彈出，這將透過使用我們的系統 API 顯示和隱藏鍵盤來自動運作。 查閱回應觸控式鍵盤的出現。

使用標準文字輸入控制項

使用通用控制可以提供預期的行為並最大程度地減少使用者的意外情況。

支援文字服務框架 (TSF) 的文字控制項提供形狀書寫 (滑動鍵盤) 功能。

觸控式鍵盤訊號

考慮輸入、姿勢、硬體訊號，使觸控鍵盤成為主要輸入模式 (硬體鍵盤分離，透過觸控呼叫入口點，明確使用者的打字意圖)。

適當地重排

  • 請注意，在較小的裝置上，鍵盤可能會佔據 50% 的螢幕。
  • 不要用觸控鍵盤遮擋活動文字欄位。
  • 如果觸控鍵盤遮擋了活動文字欄位，請向上捲動應用程式內容 (使用動畫)，直到該欄位可見。
  • 如果觸控鍵盤遮擋了活動文字欄位，但應用程式內容無法向上捲動，請嘗試移動應用程式容器 (使用動畫)。

Animated GIF of user invoking the touch keyboard from a search field.

點擊目標

確保能舒適點擊目標，且易於觸摸。 如果命中的目標太小或太擁擠，使用者必須更加精確，這對觸摸來說很困難，並且可能會導致體驗不佳。

可觸控

我們將可觸摸定義為最小 40 x 40 epx，即使視覺較小，或如果寬度至少為 120 epx，則高度為 32 epx。

我們的常用控制符合此標準 (它們針對滑鼠和觸控使用者進行了最佳化)。

觸控最佳化

對於觸控最佳化的 UI，請考慮將目標大小增加到 44 x 44 epx，目標之間至少有 4 epx 的可見空間。

我們建議兩種預設行為：始終觸摸最佳化或根據裝置訊號進行轉換。

當應用程式可以在不影響滑鼠使用者的情況下針對觸摸進行最佳化時，特別是如果應用程式主要用於觸摸，那麼請始終進行觸控最佳化。

如果您根據裝置姿勢的裝置訊號轉換 UI，請始終提供跨姿勢的一致體驗。

比對視覺效果與觸控目標

請考慮在觸控目標維度變更時更新視覺效果。 例如，如果當使用者進入平板電腦姿勢時命中目標增加，則代表命中目標的 UI 也應該更新，以幫助使用者了解狀態變化和更新的可供性。 關於詳細資訊，請參閱 Windows 應用程式的內容設計基礎知識、觸摸目標指南、控制項大小和密度。

人像最佳化

支援回應式配置，同時考慮高和寬的視窗，以確保應用程式針對橫向和縱向方向進行最佳化。

這也將確保無論方向和螢幕尺寸如何，應用程式視窗在多任務場景中正確顯示核心 UI 視覺效果 (應用程式以縱向長寬比並排捕捉)。