觸控設備上的手勢和UX

1）手勢為何及何時

• 可預測性（符合平臺期望）。
• 可檢測（用戶猜測手勢可用）。
• 由反饋（視覺/音頻/觸覺）支持。
• 在錯誤的觸摸和不同的設備抓地力下可靠。

原則：首先是顯式的UI元素→然後是手勢提示→然後是高級隱藏手勢。關鍵動作-始終用顯式按鈕復制。

2）手勢分類

Tap/Double-tap/Long-press-選擇/dops。菜單/高級操作。
Swipe（山區/山脈。）-導航、刪除/存檔、活動披露。
Drag-and-drop-排序、轉移、更改層次結構。
Pinch/Spread（縮放）-縮放（畫廊、地圖、圖形）。
Rotate-很少見，適用於編輯/視圖。
Pull-to-refresh/Release-to-action-升級/輔助操作。
Edge-swipe-系統導航（向後/菜單）,在網絡視圖中小心。
Multi-touch是用於高級腳本的2-3手指手勢。
System gestures-截圖、PiP、系統「Back （Android）」-考慮沖突。

3）人體工程學和拇指區域

Thumb-zones：觸及區域-屏幕的下半部分；關鍵的CTA、芯片過濾器和選項卡-底部。
Hit-target：至少44 × 44 pt/48 × 48 dp。為小元素添加熱插槽（不可見的接觸區域）。
從邊緣撤退：減少假邊緣掃蕩；關鍵的相互作用-不接近邊緣。
方向：預設肖像；景觀-優化兩個大手指（尤其是在遊戲/視頻中）。

4）可探測性和培訓

Affordance：手勢提示（側面有一張半可見的卡片,下面是表的「把手」）。
Micro-onbording：一次性提示（「Smahnite to remove」）沒有侵入,帶有「理解」。
試用手勢：模式首次出現時的演示動畫。
可重復性：在所有內容相似的地方，手勢必須以相同的方式工作。

5）反饋： 視覺，觸覺，聲音

視覺：陰影,視差,粘在導軌上,進度-指示器在向上伸展。
觸覺（haptics）：抓取阻力時輕微沖動，投擲/成功時更「沈重」。
音頻（適度）：在遊戲中短點擊或點擊或有形事件（獲勝/錯誤）。

取消狀態： 視覺「紅色區域」在拆卸前刷卡,振動提示.

6）手勢沖突與優先事項

識別層次結構：內部滾動>刷卡>系統邊緣背面（在網絡中反之亦然）。定制gesture-arena/優先級。
垂直滾動vs水平滑動：10-15 px運動後鎖定一個軸。
Edge-swipe vs自己的手勢：添加內部縮排或「手柄」以免攔截系統。
全局後退（Android/iOS）：不要中斷預期的導航-使用後退按鈕復制重要操作。

7）情景模式

7.1個列表和卡

Swipe-actions：短刷卡-動作提示（圖標）,長刷卡-即時動作。
Undo範式：在刪除手勢之後，顯示snackbar「取消」。
Drag-reorder：在「手柄」上拉伸；鎖定垂直軸。

7.2地圖,畫廊,圖形

Pinch-zoom+雙重縮放。
Inertia&bounds：彈性邊界,平滑慣性。
圖表中「放大鏡「/點部件的打孔。

7.3導航和縫制

Bottom-sheet：手勢「拉出」手柄，狀態collapsed/partial/full；swipe-down關閉。
Tabs/Chips：在帶有進度指示器的選項卡之間進行水平滑動。

7.4遊戲和「快速」腳本

單手遊戲：較低邊緣的大型投註/動作區域。
雙手勢：雙擊為「重復投註」（確認快感）。
destructive的閾值：「固定」300毫秒的手指或通過「紅色區域」執行。

8）可用性（A11y）

所有手勢均由按鈕或菜單項復制。
VoiceOver/TalkBack：正確的描述和焦點順序。
機動性：長新聞的替代品（圖標「⋮」），增加的觸摸區域。
對比度和規模：手勢不應該是采取行動的唯一途徑。

9）性能和可靠性

INP（接下來繪畫的互動）≤ 200毫秒用於關鍵手勢。
Touch latency：目標<50-100 ms首次響應（視覺捕獲/背光）。
60 FPS： drag/scroll的平滑度；移動時禁用沈重的陰影和blur。
擊中測試：避免重疊（z-index/overflow）-陷阱「柔和」。
抓地力測試：右手/左手，拇指/小手指，站立/運輸。

10) Web vs Native

Web/PWA：被動收聽器（「passive：true」）用於滾動，「觸摸動作」用於鎖定軸，避免不必要地攔截系統手勢。
iOS/Adroid：使用系統識別器（UIGestureRecognizer/Android GestureDetector）,全職快照,謂語「Back （Android 14+）」。
Webview：橋梁和安全區，預測縫合線閉合-在網絡內部，而不破壞系統「後退」。

11） Multi-tach和高級手勢

兩根手指：鎖定變焦時平移；在地圖上-兩根手指向下的手勢。
三根手指：僅用於電源用戶；總是讓我們選擇。
組合：long-press+ drag用於範圍/組移動選擇。

12）驗證、遙測、度量

События: `gesture_start`, `gesture_commit`, `gesture_cancel`, `latency_ms`, `distance_px`, `overscroll`, `misfire` (ложный жест), `undo_used`.

KPI：成功率，不幸率，Undo率，INP，時間到行動，在手勢沖突中脫穎而出。

13）本地化和文化差異

RTL語言：鏡像水平手勢和圖標。
符號：「向左揮動=刪除」不是普遍的-請在onbording中確認。
觸覺模式：使用系統配置文件,用戶已經熟悉它們。

14）安全和錯誤

Destructive手勢-僅帶有undo/確認。
Edge刷卡不應意外關閉關鍵流程（付款/KUS）。
顫抖防禦：手勢開始前的運動閾值（5-10 px）。
在鎖定狀態下禁用手勢（支付助推器、確認模式）。

15）觸摸桌/平板電腦模式

雙手腳本：分離控制區域。
多用戶模式：手勢不沖突，按觸摸時間優先。
主要熱門目標：56-64 dp；用於拖曳操作的視覺參考線。

16）反模式

僅通過手勢隱藏關鍵動作（無按鈕）。
與系統沖突的手勢（邊緣背面、通知面）。
沒有視覺「回合」和聲音/顫音的長新聞。
在沒有軸向鎖的垂直滾動中水平滑動。
拖曳時的「沈重」陰影/blur → lag和FPS下降。
應用程序不同部分中的不一致手勢。

17）實施支票（逐步）

1.手勢圖：在哪裏和哪裏-還有A11y的替代品。
2.識別優先：軸向鎖,邊緣安全區,gesture-arena。
3.反饋：視覺陷阱，快感配置文件，動畫≤ 200毫秒。
4.表演：INP/60 FPS, drag/scroll分析。
5.提示：線索和試用手勢，可以關閉。
6.遙測：success/misfire/undo, heatmap觸摸。
7.測試矩陣：設備、密度、左撇子/右撇子、不良網絡案例。
8.文檔：設計系統中的手勢海德，示例和反案例。

18）結果

有能力的手勢是快速，理解和可靠的。它通過不打破系統期望並確保所有人的可用性來縮短目標的路徑。將手勢設計為設計系統的一部分：單一模式、清晰的優先級、豐富的反饋和嚴格的性能控制-然後在任何設備和場景中,觸摸屏UX都會同樣令人愉悅。