触控设备上的手势和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都会同样令人愉悦。