Игрок умирает не от босса. Умирает, потому что палец скользнул мимо кнопки уклонения на 3 миллиметра. Игра честно отработала физику — тач-таргет был 32×32 пикселя, палец лёг на границу. Дизайнер решил, что «это достаточно».
Хорошая кнопка в мобильной игре — невидима. Игрок не думает «нажал», он думает «уклонился». Кнопка становится продолжением намерения. Материал ниже — чек-лист того, как добиться этого эффекта системно, а не интуитивно.
Что такое тач-таргет — и почему визуальная кнопка обманчива
Визуальная кнопка — то, что рисует художник. Тач-таргет — невидимая зона, которую слушает движок. Они редко совпадают, и в этом корень большинства проблем.
Пальцем не попадают в точку. Пальцем попадают в область: эллипс 8–10 мм по большему диаметру у большого пальца, 6–8 мм у указательного. Если тач-таргет меньше — игрок промахивается. Это не неловкость, это физиология.
Правило минимального тач-таргета
44×44 pt (iOS) / 48×48 dp (Android) — базовый порог. Для игровых действий в реальном времени: 56×56 и выше. Меньше — только для второстепенных UI (настройки, инфо).
Пять функциональных типов — и как их отличать визуально
Первичное действие
Прыжок, атака, выстрел. Одна на экран в момент геймплея. Крупнейшая, ярчайшая, с максимальным тач-таргетом (64+ px).
Вторичные действия
Смена оружия, инвентарь, карта. 2–3 штуки. Визуально тише первичного, но тач-таргет не ниже 56 px. Группируются по краям экрана.
Тертичные / меню
Настройки, пауза, магазин. Могут быть 44×44 pt. Иконки без текста допустимы, если метка понятна без подписи (шестерёнка, гамбургер).
Направление / джойстик
Не кнопка, а зона. Внутренний круг — мёртвая зона, внешний — предел дефлекции. Визуал: полупрозрачная основа + стик. Тач-таргет = вся нижняя треть экрана.
Жестовые зоны
Свайп для уклонения, pinch для зума, длинное нажатие для заряда. Нет визуальной кнопки — есть подсказка (hint) при первом заходе. Тач-таргет = вся доступная область.
Антипаттерн: «Карпет бойнинг»
Кнопки прилеплены к краям экрана без учёта зоны досягаемости большим пальцем. Игрок вынужден перехватать телефон или тянуться — разрыв иммерсии, усталость, ошибки.
Признаки проблемы
- Кнопка прыжка в верхнем углу при ландшафте
- Меню паузы в противоположном от руки углу
- Тач-таргеты касаются safe-area инсетов
Паттерн: «Зона комфорта большого пальца»
Первичные действия — в нижней трети экрана, ближе к краю, где естественно покоится палец. Вторичные — по диагонали (противоположный нижний угол). Меню — в верхних углах (требуют намеренного движения).
Чек-лист размещения
- Jump / Attack — нижний правый (или левый для левшей)
- Move / Joystick — нижний левый (противоположный)
- Pause / Settings — верхние углы, тач-таргет 44+ px
- Свайп-зоны — не пересекаются с кнопками
Шкала размеров: от «проходит по гайдлайнам» до «чувствуется идеально»
Состояния кнопки: незаметные 120 миллисекунд, которые создают ощущение контроля
Default (Idle)
Полная непрозрачность, тень отдыхает. Иконка/текст в базовом весе.
Hover / Focus (геймпад/мышь)
Лёгкое подсветка (+10% яркости), масштаб 1.02×. Не для тача — только внешние контроллеры.
Pressed (Active)
Ключевой момент. Масштаб 0.92–0.96× за 16 мс, затемнение фона +20%, риппл-эффект от центра касания. Звук/вибрация — тут.
Disabled / Cooldown
Прозрачность 40–50%, без тени, иконка серой. Тач-таргет сохраняется — нажатие ничего не делает, но визуально понятно «не сейчас».
Тайминги, которые работают без настройки под движок
Схема процесса: от макета к ощущению «своей» кнопки
ИИ-персонаж, с которым хочется говорить 💬
Он реагирует на ваши слова, помнит, о чём вы говорили раньше, и ведёт себя в характере. Можно отыгрывать дружбу, флирт, ссоры и примирения — всё по-настоящему. Отличный способ переключиться после работы, развеяться в дороге или просто провести интересный вечер.
Начать общение 👉 https://clck.ru/3Ta8kQ
