本主題提供設計指引,幫助在 Windows 應用程式中打造自訂且觸控優化的體驗。
概觀
觸控是 Windows 及 Windows 應用程式中主要的輸入方式,涉及使用一根或多根手指(或觸控接觸點)。 這些觸控接觸及其移動被解讀為觸控手勢與操作,支援多種使用者互動。
Windows SDK 與 Windows App SDK 皆包含完整的觸控優化控制套件,提供 Windows 應用程式間穩健且一致的體驗。
在為你的 Windows 應用程式建立自訂控制項、體驗和框架時,請參考這些指引。
設計原則
在設計 Windows 應用程式的觸控體驗時,請考慮以下幾點。
觸控優化
Windows 應用程式的體驗應該讓人感覺親切,允許直接操作,並容納較不精確的互動。 考慮包括手勢操作、數位筆與語音整合在內的觸控加速功能。
姿勢間一致性
你的應用程式應該能有一致的體驗,不論使用者處於什麼輸入方式或姿勢。 從傳統桌面姿勢切換到平板姿勢(請參見 推薦設定以獲得更好的平板體驗),以及方向的改變,不應造成迷失方向,而是在必要時才會進行。 你的應用程式應該以細微的方式重新調整使用者介面,打造熟悉且連貫的體驗,滿足使用者的感受。
響應式
應用程式和互動應在每個互動階段(按下、執行、放開)透過動畫來依據使用者當前狀態回應,並指示可能的動作,以提供使用者回饋。 動畫也應該維持至少 60 fps,才能感覺流暢且現代。
尊重觸控會議
快速回饋
與應用程式互動期間的適當視覺反饋可幫助使用者識別、學習和適應應用程式和 Windows 平台如何解釋他們的互動。 對使用者的觸碰提供即時且持續的回饋,且要明顯、可理解,且不會因干擾而失去。 這種即時回饋是使用者學習並探索應用程式互動元素的方式。
- 觸地時回饋應該立即,移動物體也應該能黏在使用者的手指上。
- UI 應該會根據使用者速度和動作來回應手勢,避免使用關鍵影格動畫。
- 視覺回饋應在使用者做出行動前,先傳達可能的結果。
做
不要
欲了解更多資訊,請參閱 Windows 11中視覺回饋與動態指引
觸控互動模式
尊重這些常見的互動與手勢模式,讓你的體驗保持一致且可預測。
常見互動
有一套使用者熟悉且期望能在所有 Windows 體驗中穩定運作的常見觸控行為與手勢。
- 點擊 即可啟動或選擇物品
- 短按並拖曳 即可移動物件
- 按住 可進入次要、情境指令選單
- 滑(或拖曳並放開)以執行情境指令
- 順時針或逆時針旋轉進行旋轉調整
互動
使用者
輕觸
使用者
滑動(或拖曳放開)
短按並拖曳
旋轉
動畫 GIF 顯示使用者按住物件以顯示上下文式次要命令選單。按住
欲了解更多資訊,請參閱 Windows 11中視覺回饋與動態指引
手勢
手勢降低使用者在常見互動中導航與行動所需的努力。 盡可能支援觸控手勢的介面,讓使用者在應用程式中輕鬆導航與操作。
在切換視角時,使用連結動畫,讓現有和新狀態都能在拖曳中看到。 若與使用者介面互動,物品應跟隨使用者移動,提供回饋,並在發布時根據拖曳位置閾值做出額外反應。
手勢也應該能根據慣性進行彈撥和滑動,且在舒適的活動範圍內。
- 拖曳或輕撥來回切換
- 拖曳以關閉
- 拉取來刷新
手勢
使用者拖曳
拖曳或輕撥來回切換
使用者向下拖曳一組物件以重新整理的動畫GIF【2】。下拉重新整理
動畫 GIF 顯示使用者拖曳物件離開螢幕以關閉。拖曳以關閉。
自訂手勢
使用自訂手勢,將高頻鍵盤快捷鍵和觸控板手勢帶入觸控互動。 透過專門的動畫與視覺狀態功能(例如將三根手指放在螢幕上,視窗會縮小以獲取視覺回饋)來協助發現與回應。
- 請勿覆蓋常見手勢,否則可能會造成使用者混淆。
- 建議使用多指手勢來執行自訂動作,但系統會保留部分多指手勢用於快速切換應用程式與桌面。
- 請注意自訂手勢可能出現在螢幕邊緣,因為邊緣手勢是保留給作業系統層級行為的,這類行為可能會被意外觸發。
避免意外導航
如果你的應用程式或遊戲可能涉及頻繁的螢幕邊緣互動,建議以 全螢幕專屬(FSE)模式 呈現你的體驗,以避免系統跳出視窗的意外啟動(使用者必須直接滑動臨時分頁才能拉出系統跳出視窗)。
備註
除非絕對必要,否則避免使用,因為這會讓使用者更難離開你的應用程式或與其他應用程式一起使用。
觸控鍵盤體驗
觸控式鍵盤可針對支援觸控的裝置啟用文字輸入。 當使用者點選可編輯的輸入字段時,Windows 應用程式文字輸入控件預設會叫用觸控式鍵盤。
在文字欄位點擊時呼叫
當使用者點擊文字輸入欄位時,觸控鍵盤應會跳出——這將透過系統 API 自動顯示與隱藏鍵盤。 請參見 「回應觸控鍵盤的存在」。
使用標準文字輸入控制
使用常見控制措施能提供預期行為,並減少使用者的意外。
支援文字服務框架(TSF)的文字控制項提供形狀書寫(滑動鍵盤)功能。
觸控鍵盤訊號
考慮輸入、姿勢、硬體訊號,這些都使觸控鍵盤成為主要輸入模式(硬體鍵盤是分離的,入口點是透過觸控呼叫,且明確使用者有打字意圖)。
適當回流
- 請注意,鍵盤在較小的裝置上可能佔用螢幕的 50%。
- 不要用觸控鍵盤遮擋正在顯示的文字欄位。
- 如果觸控鍵盤遮擋了正在進行的文字欄位,請向上捲動應用程式內容(並有動畫),直到該欄位可見。
- 如果觸控鍵盤遮住了主動文字欄位,但應用程式內容無法向上捲動,試著移動應用程式容器(並有動畫)。
命中目標
確保擊中目標是舒適且易於觸摸的。 如果命中目標太小或過於擁擠,使用者必須更精準,這在觸控操作上很困難,可能導致不良體驗。
可觸及
我們定義可觸摸大小至少為 40 x 40 epx,即使視覺上較小;如果寬度至少為 120 epx,則高度為 32 epx。
我們的通用控制項符合此標準(同時優化滑鼠與觸控使用者)。
觸控優化
為了觸控優化的使用者介面,可以考慮將可點擊區域的尺寸增加到 44 x 44 像素,並且目標間至少留出 4 像素的可見空間。
我們建議兩種預設行為:始終觸控優化或根據裝置訊號進行轉換。
當應用程式能在不影響滑鼠使用者的情況下進行觸控優化時,尤其是當此應用程式主要以觸控來使用,應優先進行觸控優化。
如果您根據裝置訊號調整 UI,務必在不同姿勢間提供一致的使用體驗。
將視覺效果與觸控目標相匹配
當觸控目標尺寸改變時,考慮更新視覺內容。 例如,若使用者進入平板模式時點擊目標增加,代表點擊目標的介面也應同步更新,以幫助使用者了解狀態變化和更新的功能。 更多資訊請參閱 Windows 應用程式內容設計基礎、 觸控目標指引、 控制大小與密度。
人像優化
支援能夠因應視窗高寬的響應式版面設計,以確保應用程式在橫向和直向操作時皆能夠獲得最佳化。
這也能確保應用程式視窗在多工情境(以直式長寬比並排拍攝)中,無論方向與螢幕大小,都能正確顯示核心介面視覺效果。