Иерархия информации мобильного HUD: что показывать в бою, лобби и модальных окнах

Сбои HUD — это редко «мы забыли полоску здоровья»; обычно это слишком много элементов одного приоритета на одном экране: вкладки лобби во время боя, кликабельный магазин поверх катсцены или нижележащий HUD, который всё ещё перехватывает тапы при открытом модальном окне. Дизайн-макеты часто однокадровые и никогда не помечают «скрыть валюту в бою» — нужна спецификация состояние × слой, чтобы инженеры могли реализовать видимость, блокировку ввода и порядок отрисовки.

Ниже в основном используется терминология Unity UGUI (Prefab, Canvas.sortingOrder, raycasts Graphic). Godot: CanvasLayer layer + Control mouse_filter; Cocos: порядок отрисовки узлов + BlockInputEvents / полноэкранные блокировщики — те же критерии и таблицы. Детали Safe Area, всплывающего текста и порядка Canvas: Safe Area, всплывающие числа урона. Устройства, все локали и Release-сборки: чек-лист перед релизом пункты 1, 2 и 5.

Критерии провала (любой один = не пройдено): во время модальных окон / катсцен / платёжных потоков нижележащий HUD всё ещё интерактивен (если спецификация не говорит «половина экрана остаётся рабочей»); в бою небоевой промо-элемент, который нельзя закрыть, блокирует игровую область; одна и та же информация показана дважды (например, монеты в верхней панели плюс крупный боевой UI валюты) без продуктовой пометки; элементы управления из предыдущего состояния остаются (видимы или всё ещё блокируют raycast); в мультиязычных стресс-локалях минимальный боевой макет всё равно обрезает длинный текст (DE/ES и т. д.).

---

Сначала определите состояния, затем элементы управления

Игровое состояние (примеры)	Цель HUD	Обычно показывать	Обычно скрывать / понижать
Лобби / главный экран	Навигация + ресурсы + события	Валюта сверху, вкладки снизу, вход в события	Боевые навыки, прицел
Бой / внутри уровня	Действия + информация о выживании	Здоровье, навыки, пауза	Вкладки лобби, полноэкранные баннеры событий
Катсцена / CG	Нет ввода или только пропуск	Кнопка пропуска	Почти весь HUD (или только пропуск)
Модальное окно (магазин, настройки)	Фокус на диалоге	Элементы внутри окна	Нижележащий HUD без raycasts или весь слой скрыт
Платёж / комплаенс	Завершить поток	Условия, подтверждение	Игровые промо-оверлеи

Согласуйте перечисление состояний с дизайном + инженерией (например, GameUIState.Lobby | Combat | Cinematic | Modal). Корни UI подписываются на машину состояний (группы Prefab в Unity / ветки сцен в Godot / префабы в Cocos) — избегайте разбросанных SetActive / visible в скриптах каждой кнопки.

---

Слои и порядок сортировки (спецификация, не зависящая от движка)

Документируйте снизу вверх (большее число = впереди):

Слой	Содержимое	Ввод
L0	Полноэкранный фон / фоновый UI сцены	Нет
L1	Боевой HUD (здоровье, плейсхолдер джойстика)	Да
L2	Боевой всплывающий текст / подсказки	Без raycasts (всплывающие числа урона)
L3	Системный тост / бегущая строка	Обычно нет
L4	Модальное окно / полноэкранный диалог	Да; блокирует тапы L1–L3
L5	Обрыв сети, принудительное обновление	Да; блокирует всё

Unity: sortingOrder / несколько Canvas; Godot: CanvasLayer layer; Cocos: порядок соседних узлов под одним Canvas или слоистый Canvas + маска. Когда открывается модальное окно, поднимите L4 и отключите raycasts L1 / mouse_filter / BlockInput — а не просто «нарисовано сверху, но тапы проходят насквозь».

---

Приоритет информации (пример боя)

Если в бою на маленьких экранах можно оставить только N читаемых блоков, лимиты по умолчанию:

Приоритет	Блок	Стратегия понижения
P0	Здоровье / условие поражения	Не скрывать
P0	Пауза / выход из боя	Не скрывать
P1	Навыки / основные действия	Объединить в меньшее число кнопок
P2	Короткий текст цели	Иконка + подробности по долгому нажатию
P3	Валюта, вход в события	Скрыто в бою по умолчанию или в меню паузы
P3	Вход в чат	Свернуть до иконки

Понижения должны оставаться читаемыми в мультиязычных стресс-локалях (DE/ES и т. д.) — не только тесты сжатия на английском.

---

Приёмка (5 шагов)

1. Перечислите состояния — Из основного потока перечислите переходы (вход на уровень, открытие магазина, CG, переподключение).
2. Скриншот для каждого состояния — Editor Play и Release на устройстве (пункты 1 и 5 перед релизом); проверьте, что узлы с SetActive(false) / visible=false всё ещё блокируют ввод.
3. Точечная проверка модальных окон — При открытых магазине / настройках / платеже тапы по бывшим кнопкам HUD не должны ничего делать (полноэкранный прозрачный raycast или маска BlockInput).

4. Пересечение с Safe Area — Боевые элементы P0 внутри безопасного отступа (Safe Area).
5. Фиксируйте версионированные ассеты — Таблица состояний управляет видимостью (Unity ScriptableObject / Godot Resource / конфиг Cocos) — а не временные скрытия только в сцене.

---

Что должен добавить дизайн

Артефакт	Назначение
Вайрфреймы по состояниям (минимум Лобби / Бой / Модальное окно)	Инженерия настраивает видимость
Список «можно скрыть» для боя на макете	Избежать отрисовки всех элементов в одном кадре
Спецификация модального окна: затемнённый фон, разрешён ли tap-through?	Задаёт политику raycast
Z-порядок слоя промо / событий	Согласовать с L4/L5

Дизайнерам не нужно писать машину состояний — таблицы + аннотации уменьшают догадки.

---

Маршрутизация исправлений

Симптом	Вероятная причина	Действие	Ответственный
После диалога всё ещё можно тапать бой	Нижележащие raycasts включены	Отключить raycast Graphic на слое модального окна / полноэкранная маска	Инженерия
Полноэкранное событие в бою	Нет таблицы состояний	Скрыть P3 в бою; согласование с дизайном	Инженерия + дизайн
HUD остался после катсцены	Нет хука состояния Cinematic	Машина состояний единообразно скрывает HUD	Инженерия
Два отображения валюты	Панель лобби не выключена в бою	Скрыть верхнюю панель в Combat или объединить источник данных	Инженерия + дизайн
Длинная локаль обрезается в минимальном боевом макете	DE/ES не протестированы	Путь переполнения локали	Дизайн + инженерия

---

FAQ

Два Canvas для лобби и боя?
Нормально — или один Canvas с группами. Важна видимость по состояниям + raycasts, а не количество Canvas.

Магазин на половину экрана — это модальное окно?
Да. Укажите в спецификации, кликабельно ли нижележащее и ставится ли на паузу боевая логика.

Конфликтует с UX «меньше — значит больше»?
Таблица иерархии — это продуктовое правило, а не эстетика; P3 может снова открываться для событий через флаги машины состояний.

Полоски над головой в мировом пространстве в 3D?
Это боевая информация, управляется вместе с L1; Правила сортировки в мировом пространстве согласуются с всплывающие числа урона и Safe Area.