Что такое UI в играх? Гайд по дизайну, примеры и принципы
TL;DR - главные мысли
- Игровой UI - все экранные элементы, с которыми взаимодействует игрок: HUD, меню, попапы, диалоги, настройки, магазин, инвентарь.
- UI ≠ UX ≠ HUD. UI - визуальный слой; UX - ощущение от его использования; HUD - живой подслой UI во время геймплея.
- Три категории: HUD (в бою), меню-UI (вне боя), диегетический UI (вшит в мир, как в Dead Space).
- Мобильный UI требует крупных целей нажатия, thumb-зон и меньшей плотности, чем PC.
- Пять принципов: видимость, иерархия, постоянство, обратная связь, доступность.
- Производственный пайплайн: style guide → вайрфреймы → макеты → продакшен ассетов → интеграция в движок → QA.
Что такое UI в играх?
Игровой UI - это визуальный слой, через который игрок управляет игрой. Полоска здоровья поверх боя, главное меню до нажатия Start, инвентарь, который ставит игру на паузу, окно магазина, экран настроек - всё это UI. Слой работает поверх мира, но миром не становится. UI есть в каждой выпущенной игре, даже в тех, что стараются его спрятать.

На практике термин «игровой UI» покрывает длинный список компонентов, которые встречаются почти в любом современном проекте:
- HUD во время геймплея - здоровье, выносливость, патроны, мини-карта, трекер квестов, прицел.
- Главное меню и меню паузы - титульный экран, save/load, выбор уровня, опции.
- Модальные попапы - подтверждения, ачивки, награды, уведомления.
- Инвентарь и экипировка - сумка, снаряжение, способности, профиль персонажа.
- Настройки и доступность - звук, графика, управление, дальтонизм, субтитры.
- Магазин и монетизация - бандлы, валюты, дневные сделки.
- Диалоги и выбор - портреты, дерево реплик, кодекс.
- Обучение и онбординг - тултипы, подсказки «нажми X, чтобы присесть».
- Ачивки, лидерборды, соц-фичи - друзья, профили, ранги.
- Логин и аккаунт - вход, возрастной гейт, родительский контроль.
У каждого компонента свой визуальный язык, правила анимации и паттерны взаимодействия. Типовой AA или AAA-проект выпускает сотни уникальных экранов UI до того, как игрок увидит первый кадр геймплея.
UI vs UX vs HUD - быстрая разница
UI - это визуальный интерфейс; UX - ощущение от работы с ним; HUD - живой подслой UI во время геймплея. Игрок воспринимает «UI» как кнопки и полоски на экране, дизайнер думает о «UX», когда выстраивает потоки, а «HUD» - срез UI, который накладывается поверх моментального геймплея (здоровье, патроны, мини-карта, прицел).
| Термин | Что описывает | Пример |
|---|---|---|
| UI (user interface) | Любой экранный элемент, через который игрок управляет игрой | Полоска здоровья + главное меню + настройки + магазин + диалоги |
| UX (user experience) | Ощущение от навигации по этому UI | «От титульного экрана до боя - два тапа» |
| HUD (heads-up display) | Всегда видимый слой во время геймплея | Прицел, счётчик патронов, мини-карта, полоска здоровья |
У хорошо собранной игры все три части работают вместе: чистый и брендовый UI, низкое трение в UX и HUD, который растворяется в фоне, пока игрок не вспомнит про него. Путаница в терминах в разговоре безобидна, в продакшене важна: UX-дизайнер собирает потоки, UI-художник создаёт визуальный язык, дизайнер HUD балансирует плотность информации против погружения в живую сцену.
Основные элементы игрового UI
В любой выпущенной игре есть узнаваемый набор UI-компонентов. Названия различаются (одни студии говорят «screens», другие - «modals»), но категории стабильны: HUD, меню-UI, попапы, инвентарь-UI и мета-игровой UI вроде магазина и ачивок.
HUD во время игры. Здоровье, выносливость, патроны, мини-карта, трекер квестов, прицел, кулдауны способностей. Видны постоянно, читаются с одного взгляда и не отвлекают от боя.
Главное меню и пауза. Титульный экран с new game / continue / settings / quit. Экран паузы поверх остановленного мира с resume / restart / options. Это первое впечатление и самые часто пересматриваемые экраны игры.
Модальные попапы. Ачивка, награда за уровень, диалог подтверждения («Вы уверены, что хотите выйти?»), обучающая всплывашка. Каждый попап прерывает игрока, поэтому должен оправдать прерывание ясной пользой и быстрым выходом.
Инвентарь и экипировка. Сетка собранных предметов, слоты надетого снаряжения, лист персонажа со статами. Часто самый сложный UI в RPG и источник большинства фрустраций при плохой проработке (мелкие иконки, непонятная сортировка, отсутствие тултипов сравнения).
Настройки и доступность. Слайдеры звука, пресеты графики, перенастройка управления, режимы для дальтоников, размер субтитров, отключение тряски экрана. Раздел доступности перешёл из опционального в обязательный - современный игрок ждёт его ещё до покупки.
Магазин и монетизация. Баннеры бандлов, дневные сделки, паки валют, страница сезонного пропуска. Деликатный UI - у игрока просят деньги, поэтому доверие и ясность важнее визуальных фейерверков.
Диалоги и выбор реплик. Портрет говорящего, плашка имени, поле текста, список реплик с иконками skill-check (Disco Elysium, Baldur’s Gate 3). UI выбора - стержень сторителлинга в нарративных играх.
Обучение и онбординг. Контекстные тултипы, подсказка «нажми X, чтобы присесть», хинты при первом контакте с механикой. Самый тесный бюджет дизайна во всей игре, потому что туториал обязан учить, не ломая темп.

Диегетический vs недиегетический UI
Недиегетический UI плавает поверх экрана отдельным визуальным слоем. Типовая полоска здоровья в углу, постоянная мини-карта, счётчик патронов в HUD - всё это недиегетика. Сделано для игрока, персонаж этого не видит. Это дефолт и самый распространённый подход.
Диегетический UI живёт внутри игрового мира и видим и игроку, и герою. У Айзека в Dead Space здоровье встроено в спину костюма. В Far Cry 2 игрок физически вытаскивает бумажную карту, чтобы сориентироваться. Metro Exodus показывает статусы на наручных часах героя. Визор Metroid Prime накладывает интерфейс на внутреннюю сторону шлема Самус.
Классическая четвёрка из диссертации Fagerholt и Lorentzon о UI в играх различает четыре позиции элемента:
- Недиегетический - существует только для игрока, рисуется поверх мира (большинство HUD).
- Диегетический - существует в мире и для игрока, и для героя (Dead Space, Far Cry 2).
- Спатиальный - расположен в 3D-пространстве, но не часть фикшена (плавающие маркеры путевых точек, индикаторы прицела на земле).
- Мета - живёт в фикшене, но открыто сигналит игроку (края экрана краснеют от урона, вибрация контроллера).
В большинстве современных игр смешаны все четыре. Спатиальный маркер ведёт к следующей цели, недиегетический счётчик патронов в углу, мета-кровь по краям при низком HP, диегетический промпт взаимодействия на двери в мире. Спроектировать каждый слой отдельно и заставить их жить вместе - и есть основная работа дизайнера UI.

UI по жанрам
Жанр формирует UI сильнее любой другой переменной. Отличный UI battle royale провалится в пошаговой RPG. У каждого жанра свой набор плотности информации, реальной площади экрана, точности ввода и темпа.
FPS и TPS. Скоростной UI. Прицел, патроны, здоровье, мини-карта - всё в фиксированных углах для мгновенного скана. Низкая плотность, максимальный контраст, никаких вложенных меню во время боя. Примеры: Call of Duty, Apex Legends, Doom Eternal.

RPG и open-world. Тяжёлая нагрузка на информацию: инвентарь, журнал квестов, карта, диалоги, способности, статы. Прячется за меню, которые ставят игру на паузу или замедляют. Сравнительные тултипы, сортировка и поиск - не «было бы неплохо», а базовые UX-фичи. Примеры: The Witcher 3, Baldur’s Gate 3, Elden Ring.
Мобильные казуалки и match-3. Большие кнопки, низкая когнитивная нагрузка, анимации, которые отмечают каждое совпадение. Энергия и таймеры «бесплатный сундук» доминируют в мета-UI. Жизни и стамина гейтят прогресс. Примеры: Royal Match, Homescapes, Candy Crush.
Слоты и казино. UI плотно сцеплен со сценой - кнопка спина занимает низ экрана, paytable открывается тапом, бонусные празднования - фуллскрин-захват. Сигналы доверия (RTP%, бейджи fair play) обычно живут в настройках. Примеры: гибриды match-3 в стиле Jewels of Egypt, классические слот-барабаны с бонусками. SunStrike отгрузила UI для десятков слот- и казино-проектов - правила UI в этом жанре строже, чем где-либо ещё.
MOBA и стратегия. Плотность информации - дизайн-параметр. Портреты героев, бары способностей, золото, уровни, мини-карта, здоровье тиммейтов, магазин предметов - всё одновременно видно. Игрок параллельно читает несколько панелей. Примеры: League of Legends, Dota 2, StarCraft II.
Idle и incremental. Числа, очень много чисел. Большие читаемые счётчики, престижи, деревья апгрейдов, попапы offline-прогресса. UI и есть игра. Примеры: Cookie Clicker, AdVenture Capitalist.
Battle royale. Гибрид скорости FPS и инвентаря RPG. Таймеры зоны, здоровье отряда, индикаторы тира лута, система пингов - всё живёт в HUD. Экраны инвентаря streamlined, чтобы не ставить бой на паузу. Примеры: Fortnite, Apex Legends, PUBG.
Нарратив и приключения. Доминирует UI диалогов. Системы выбора, кодекс, журнал, трекеры отношений. Бой редок или отсутствует, поэтому HUD минимален или полностью диегетический. Примеры: Disco Elysium, What Remains of Edith Finch, Pentiment.

Иконические примеры игрового UI
Пять UI цитируются на дизайн-докладах постоянно, потому что каждый по-своему решил продакшен-задачу. Persona 5 превратил навигацию в театр. Hades II склеил эстетику с фикшеном. Dead Cells доказал, что pixel-art UI можно сделать читаемым. Cyberpunk 2077 растворил UI в мире. Honkai: Star Rail справился с экстремальной плотностью, не потеряв игрока. Каждый - референс, который стоит изучить.
Persona 5
Самый цитируемый UI последнего десятилетия. Яркие красный, чёрный и белый. Динамичные, асимметричные меню-композиции, которые анимируются при навигации. Каждая иконка, кнопка и переход усиливают «стильный бунт» темы. Система меню использует движение как индивидуальность - даже банальное «открыть инвентарь» работает кинематографично. Persona 5 доказала, что UI - это бренд, а не сантехника.
Hades II
Сиквел Supergiant расширяет язык UI оригинального Hades: рисованные портреты, узорчатые рамы, рунические мотивы, щедрое использование тёплого золота и глубокого красного. Экраны бонов используют жирную типографику и ясную иерархию, чтобы игрок успевал сканировать три варианта под давлением боя. Экраны паузы и мета-прогресса работают как самостоятельные иллюстрированные арты. Hades II - мастер-класс по сцеплению эстетики UI с фикшеном мира.
Dead Cells
Pixel-art UI в 2D-roguelite. Минимальный HUD - здоровье и иконки оружия по углам, валюта в верхней панели, и больше ничего во время игры. Инвентарь и магазин используют просторную сетку чётких пиксельных иконок. Главный челлендж pixel-art UI - читаемость в масштабе, Dead Cells решает его сильными силуэтами и высоким контрастом палитры.
Cyberpunk 2077
Сильно диегетический UI. Интерфейс телефона рендерится как голографический оверлей, которым пользуется сам герой. Экран инвентаря стилизован под внутриигровой «софт рипперов». Даже главное меню сидит внутри фиктивного продукта корпорации Arasaka. Cyberpunk - современный референс «UI как воркшоп worldbuilding».
Honkai: Star Rail
Стилизованный anime-UI с экстремальной плотностью. Профили персонажей, баннеры гачи, дневные миссии, simulated universe, четыре валюты, три боевых под-системы - всё всплывает через иерархические меню с карточками, табами и модальными оверлеями. Star Rail показывает, как выглядит современный free-to-play UI для mobile/PC, когда каждая retention-механика вшита в экран.

Мобильный игровой UI - тач, thumb-зоны и маленькие экраны
Мобильный UI - самый сложный из всех. Экран маленький (6-7 дюймов по диагонали), его держат двумя руками, единственный ввод - большие пальцы. Игрок часто прерывается уведомлениями, звонками и другими приложениями. Ни одно из этих ограничений не действует на PC и консоли.
Цели нажатия. Apple Human Interface Guidelines задают минимальную цель нажатия в 44 × 44 пункта; Android Material Design - 48dp. Ниже этого порога игроки промахиваются и frustration растёт. UI игры обычно делает цели крупнее (60-80 пикселей), потому что геймплей редко допускает точность спокойно используемого календаря.
Thumb-зоны. Когда игрок держит телефон двумя руками, комфортно дотягивается большой палец до нижней трети экрана без перехвата. Верхне-правый угол - самый сложный (одной рукой - практически невозможно). Кнопки действия идут в нижнюю половину. Инвентарь и пауза попадают в верхне-правый угол именно потому, что игрок не должен попасть в них случайно.
Портрет или ландшафт. Казуальные мобилки по умолчанию портретные, потому что так держат телефон вне выделенной игровой сессии. Action-игры по умолчанию ландшафтные - им нужно горизонтальное пространство. У каждой ориентации свои UI-конвенции, и игра выбирает одну. Хорошо поддерживают обе очень немногие.
Плотность информации. Мобильный UI несёт примерно 50-60 % плотности информации консольного UI в той же доле экрана. Игрок читает с вытянутой руки на маленькой панели, часто одним глазом следя за окружением. Большие числа, мало иконок, щедрые отступы.
Notch и bezel. Современные смартфоны имеют notch, вырезы под камеру и скруглённые углы. Safe-area insets обязаны соблюдаться, иначе UI обрежется. Тестировать на реальном iPhone с Dynamic Island и реальном Samsung с центральной дыркой под камеру.

Принципы хорошего игрового UI
Хороший игровой UI работает на пяти принципах, которые действуют в любом жанре и на любой платформе: видимость (критичная информация читается с одного взгляда), иерархия (главный элемент получает больше пикселей), постоянство (один визуальный язык во всех экранах), обратная связь (любой ввод получает отклик в течение одного кадра), доступность (дальтонизм, масштаб, контраст, перемаппинг). Большая часть пришла из общей теории usability и адаптирована под интерактивные развлечения.
1. Видимость. Критичная информация должна читаться с одного взгляда. Первая эвристика usability от Nielsen Norman Group прямо применима: держать состояние системы на виду. В играх это значит, что здоровье, патроны, текущая цель и положение игрока должны быть видны без захода в меню.
2. Иерархия. Не всё одинаково важно. Полоска здоровья на 5 % обязана доминировать на экране размером, цветом и движением; счётчик idle-валюты - быть тихим числом в углу. Иерархия UI - то, что отделяет информацию от шума.
3. Постоянство. Кнопка в меню не должна выглядеть совершенно иначе в магазине. Игрок учит визуальный язык игры в первые десять минут; каждый разрыв в этом языке стоит ему когнитивной энергии. Style guide UI собирается рано и соблюдается жёстко.
4. Обратная связь. Любой ввод игрока заслуживает мгновенного визуального или звукового отклика. Кнопку нажали - она должна вдавиться, засветиться, анимироваться или сыграть звук за 16 мс (один кадр 60fps). Без отклика игрок сомневается, что ввод прошёл, и нажимает ещё раз.
5. Доступность. Режимы для дальтоников, масштаб шрифта, регулируемый контраст, опции субтитров, перенастройка управления, переключатели тряски экрана и motion blur. W3C Web Content Accessibility Guidelines - кросс-медиальный референс; современная игровая доступность сошлась примерно на том же наборе опций, заданном Naughty Dog в The Last of Us Part II. Сейчас это базовая планка для большинства крупных студий.
Производственный пайплайн UI
Типовая доставка UI - от «нам нужен новый экран инвентаря» до «готово в движке» - проходит шесть гейтов. Каждый гейт ловит проблемы до того, как они станут дорогими.
1. Style guide. До того как нарисован первый экран, студия фиксирует визуальный язык: цвета, типографика, формы кнопок, тайминги анимаций, стиль иконок, layout-сетка. Style guide - единый источник истины, на который ссылается каждый художник UI. Без него первое меню и пятидесятое выглядят как из разных игр.
2. Вайрфреймы. Низкая детализация, чёрно-белые раскладки, в которых главное - иерархия информации и поток: «полоска здоровья сюда, мини-карта сюда, меню паузы открывается отсюда». Вайрфрейм дёшево менять. Большинство ошибок UI ловится здесь.
3. Макеты. Высокая детализация визуального дизайна вайрфреймного экрана. Реальная типографика, реальные цвета, реальные иконки. Макеты ревьюят вместе с остальной арт-командой - так UI остаётся в том же мире, что персонажи и окружение.
4. Продакшен ассетов. Финальное качество и экспорт каждого UI-элемента: иконки, кнопки, рамки, фоны, анимации. Экспорт в нужном разрешении и упаковка под целевой движок. Здесь профильный аутсорс-партнёр приносит больше всего пользы - выпускает сотни чистых ассетов быстрее, чем внутренний арт-отдел, который параллельно делает персонажей и окружение.
5. Интеграция в движок. UI-ассеты заводятся в Unity/Unreal или проприетарный движок. Анимации получают тайминг, кнопки - hover- и pressed-состояния, layout - responsive-правила под разные размеры экрана. Этот этап ведёт UI-инженер или технический художник.
6. QA. Визуальный QA на реальных устройствах (каждое соотношение сторон, локаль, опция доступности), QA ввода (контроллер, клавиатура, тач - все комбинации) и QA производительности (нагрузка на FPS, бюджет памяти). Список багов с этого этапа возвращается на все пять предыдущих гейтов.

Типовые ошибки в игровом UI
Паттерны, которые всплывают почти в каждом ревью проекта:
- Мелкие иконки в инвентарной сетке. То, что хорошо смотрится в 4K-макете дизайнера, становится нечитаемым на 6-дюймовом телефоне. Тестировать на целевом устройстве с самого начала.
- Несогласованные состояния кнопок. Hover, pressed и disabled расходятся между экранами, потому что никто не централизовал библиотеку компонентов. Библиотеку собираем первой.
- Спрятанная критичная инфа. Игроки умирали, потому что предупреждение о низком HP было того же цвета, что фон. Здоровью и патронам положен максимальный контраст.
- Перегруз модальных попапов. Три попапа подряд после прохождения миссии. Каждый по отдельности оправдан, вместе - убивают момент.
- Туториал без skip. Опытные игроки злятся на принудительный онбординг. Skip даём всегда, после первого абзаца.
- Нет бюджета под локализацию текстовых полей. Немецкий длиннее английского на 40 %; японский короче на 50 %. Кнопка, в которую попал английский, ломается в немецком. Закладывать запас в 1,5× максимальной длины.
- Мобильный UI без safe-area. UI обрезается notch на iPhone или вырезом на Samsung. Опираться на safe-area insets, а не на края экрана.
Когда брать UI-студию на аутсорс
In-house UI работает, пока проект помещается в одного-двух художников, которые параллельно ведут и весь остальной арт. На определённом масштабе - обычно когда нужны полная система меню, магазин, поток обучения и двадцать различных попапов - выбор стоит между наймом полноценной UI-команды и работой с профильной студией.
UI-аутсорс приносит:
- UI- и UX-дизайнеров, которые делают вайрфреймы, макеты и прототипы.
- Иллюстраторов и иконистов под объём ассетов.
- Аниматоров для переходов, обратной связи кнопок и празднований награды.
- Инженеров интеграции (Unity, Unreal), которые заводят ассеты в живой билд.
- QA-художников, которые тестируют на реальных устройствах в разных локалях и режимах доступности.
Фит лучше всего, когда нужна эластичная команда: контент-патч, новый игровой режим, сезонное обновление магазина, console-порт, в котором нужен controller-friendly UI поверх существующей мобильной версии. Студия аутсорса 2D-игрового арта SunStrike делает иконки, иллюстрации, арт меню и полные UI/UX-потоки; для проектов с упором на персонажей мы стыкуем UI-работу с дизайном 2D-персонажей и дизайном 3D-персонажей, чтобы вся визуальная поверхность жила в одном языке.
Если планируете новый тайтл или UI-рефреш существующего - напишите. Соберём оценку под вашу платформу, жанр и сроки.