Жесты и UX на сенсорных устройствах

1) Зачем жесты и когда они уместны

• Предсказуемы (соответствуют платформенным ожиданиям).
• Обнаруживаемы (пользователь догадывается, что жест доступен).
• Подкреплены обратной связью (визуальной/аудио/тактильной).
• Надежны при ошибочных касаниях и разных хватах устройства.

Принципы: сначала явные элементы UI → потом жесты-подсказки → затем продвинутые скрытые жесты. Критические действия — всегда дублировать явными кнопками.

2) Таксономия жестов

Tap / Double-tap / Long-press — выбор/доп.меню/расширенные действия.
Swipe (гор./верт.) — навигация, удаление/архивация, раскрытие действий.
Drag-and-drop — сортировка, перенос, изменение иерархии.
Pinch / Spread (zoom) — масштаб (галереи, карты, графики).
Rotate — редко, уместен в редакторах/просмотрах.
Pull-to-refresh / Release-to-action — обновление/вторичное действие.
Edge-swipe — системная навигация (назад/меню), осторожно в вебвью.
Multi-touch — жесты с 2–3 пальцами для продвинутых сценариев.
System gestures — скриншоты, PiP, системная «Назад» (Android) — учитывайте конфликты.

3) Эргономика и зоны большого пальца

Thumb-zones: досягаемая зона — нижняя половина экрана; ключевые CTA, чип-фильтры и вкладки — внизу.
Hit-target: минимум 44×44 pt / 48×48 dp. Добавляйте hit-slop (невидимую зону докасания) для мелких элементов.
Отступы от краев: снижают ложные edge-swipe; критичные интеракции — не вплотную к краю.
Ориентация: портрет — по умолчанию; ландшафт — оптимизировать для двух больших пальцев (особенно в играх/видео).

4) Обнаруживаемость и обучение

Affordance: намеки на жест (полу-видимая карточка сбоку, «ручка» снизу для sheet).
Микро-онбординг: одноразовые подсказки («Смахните, чтобы удалить»), не навязчивые, с «Понял».
Пробный жест: демонстрационная анимация при первом появлении паттерна.
Повторяемость: жесты должны работать одинаково во всех местах с похожим контентом.

5) Обратная связь: визуальная, тактильная, звуковая

Визуальная: тень, параллакс, прилипание к направляющим, прогресс-индикатор при pull-to-refresh.
Тактильная (haptics): легкий импульс при захвате drag, более «тяжелый» — при drop/успехе.
Аудио (умеренно): короткие клики/щелчки в играх или ощутимые события (выигрыш/ошибка).
Состояния отмены: визуальная «красная зона» при destructive-свайпе, вибро-намек перед удалением.

6) Конфликты жестов и приоритеты

Иерархия распознавания: внутренний скролл > карточка свайпа > системный edge-back (в вебе — наоборот). Настройте gesture-arena/приоритеты.
Вертикальный скролл vs горизонтальный свайп: блокируйте одну ось после 10–15 px движения.
Edge-swipe vs собственные жесты: добавляйте внутренний отступ или жест-«ручку», чтобы не перехватывать системные.
Глобальный back-gesture (Android/iOS): не ломайте ожидаемую навигацию — важные действия дублируйте кнопкой «Назад».

7) Паттерны по сценариям

7.1 Списки и карточки

Swipe-actions: короткий свайп — подсказка действий (иконки), длинный — мгновенное действие.
Undo-парадигма: после destructive-жеста показывайте snackbar «Отменить».
Drag-reorder: перетягивание по «ручке»; фиксируйте вертикальную ось.

7.2 Карты, галереи, графики

Pinch-zoom + двойной тап для масштабирования.
Inertia & bounds: упругие границы, плавная инерция.
Tap-hold для «лупы»/деталей точки на графике.

7.3 Навигация и шиты

Bottom-sheet: жест «потяни» из ручки, состояния collapsed/partial/full; swipe-down для закрытия.
Tabs/Chips: горизонтальный свайп между вкладками с индикатором прогресса.

7.4 Игровые и «быстрые» сценарии

One-hand play: крупные зоны ставок/действий у нижнего края.
Двойные жесты: двойной тап как «повторить ставку» (подтверждение haptic).
Порог на destructive: «зафиксируйте» палец на 300 мс или пройдите «красную зону», чтобы выполнить.

8) Доступность (A11y)

Все жесты дублируются кнопками или пунктами меню.
VoiceOver/TalkBack: корректные описания и порядок фокуса.
Motor accessibility: альтернативы long-press (иконка «⋮»), увеличенные зоны касания.
Контраст и масштаб: жесты не должны быть единственным способом попасть к действию.

9) Перформанс и надежность

INP (Interaction to Next Paint) ≤ 200 мс для ключевых жестов.
Touch latency: цель < 50–100 мс до первого отклика (визуальный захват/подсветка).
60 FPS: плавность для drag/scroll; отключайте тяжелые тени и blur при перемещении.
Hit-testing: избегайте перекрытий (z-index/overflow) — ловушки «нежмется».
Тесты хватов: правша/левша, большой/малый палец, стоя/в транспорте.

10) Web vs Native

Web/PWA: пассивные слушатели (`passive: true`) для скролла, `touch-action` для блокировки осей, избегайте перехвата системных жестов без нужды.
iOS/Android натив: используйте системные распознаватели (UIGestureRecognizer/Android GestureDetector), штатные haptics, предиктивный «Назад» (Android 14+).
Вебвью: мосты и безопасные зоны, предиктивное закрытие шитов — внутри веба, не ломая системное «Назад».

11) Мульти-тач и продвинутые жесты

Два пальца: панорамирование при заблокированном zoom; на картах — жест «два пальца вниз» для доп. слоя.
Три пальца: только для power-users; всегда давайте альтернативу.
Комбинации: long-press + drag для выбора диапазона/группового перемещения.

12) Валидация, телеметрия, метрики

События: `gesture_start`, `gesture_commit`, `gesture_cancel`, `latency_ms`, `distance_px`, `overscroll`, `misfire` (ложный жест), `undo_used`.
KPI: Success Rate, Misfire Rate, Undo Rate, INP, Time-to-Action, Drop-off при конфликте жестов.

13) Локализация и культурные различия

RTL-языки: зеркалируйте горизонтальные жесты и иконки.
Символика: «смахнуть влево = удалить» не универсально — подтверждайте в онбординге.
Тактильные паттерны: используйте системные профили, они уже знакомы пользователю.

14) Безопасность и ошибки

Destructive-жесты — только с undo/подтверждением.
Edge-свайпы не должны случайно закрывать критические процессы (оплата/KYC).
Защита от дрожи: порог движения (5–10 px) перед началом жеста.
Отключение жестов при блокирующих состояниях (лоадер оплаты, модал подтверждения).

15) Паттерны для сенсорных столов/планшетов

Двуручные сценарии: разделение зон управления.
Мультипользовательский режим: жесты не конфликтуют, приоритет по времени касания.
Крупные hit-targets: 56–64 dp; визуальные направляющие для drag-операций.

16) Антипаттерны

Скрытые критические действия только жестом (без кнопки).
Жесты, конфликтующие с системными (edge-back, notification shade).
Long-press без визуальной «схватки» и звука/вибро.
Горизонтальный свайп внутри вертикального скролла без осевого лока.
«Тяжелые» тени/blur при drag → лаг и падение FPS.
Несогласованные жесты в разных частях приложения.

17) Чек-лист внедрения (пошагово)

1. Карта жестов: где и какие — с альтернативами для A11y.
2. Приоритеты распознавания: осевой лок, edge-safe зоны, gesture-arena.
3. Обратная связь: визуальная ловушка, haptics-профили, анимации ≤ 200 мс.
4. Перформанс: INP/60 FPS, профилирование при drag/scroll.
5. Онбординг: подсказки и пробные жесты с возможностью выключить.
6. Телеметрия: success/misfire/undo, heatmap касаний.
7. Тест-матрица: девайсы, плотности, левша/правша, кейсы плохой сети.
8. Документация: гайд по жестам в дизайн-системе, примеры и анти-кейсы.

18) Итог

Грамотный жест — это быстро, понятно и надежно. Он сокращает путь к цели, не ломая системные ожидания и обеспечивая доступность для всех. Проектируйте жесты как часть дизайн-системы: единые паттерны, четкие приоритеты, богатая обратная связь и строгий контроль перформанса — тогда сенсорный UX будет одинаково приятным на любом устройстве и в любых сценариях.