Основы UX и UI видеоигр: Как игры взаимодействуют с игроками
Команда Unity - Unity Technologies
Эта веб-страница была переведена с помощью машинного перевода для вашего удобства. Мы не можем гарантировать точность или надежность переведенного контента. Если у вас есть вопросы о точности переведенного контента, обращайтесь к официальной английской версии веб-страницы.
Руководство для начинающих по пользовательскому интерфейсу и опыту в видеоиграх: что такое HUD, четыре места, где может располагаться интерфейс, простой процесс проектирования и основы доступности, необходимые каждой игре.
Каждая игра постоянно с вами разговаривает. При получении урона полоска здоровья уменьшается. Кнопка светится, когда её можно нажать. Когда вы что-то берете в руки, раздается звук. В большинстве случаев вы ничего из этого не замечаете, и в этом вся суть: Удачный дизайн интерфейса помогает вам играть, не отвлекаясь ни на что.
В этом руководстве рассматриваются основы пользовательского интерфейса и пользовательского опыта в видеоиграх для начинающих разработчиков : из чего состоит интерфейс, где он может располагаться, простой процесс его проектирования и основы доступности , которые помогут большему количеству людей насладиться вашей игрой.
UI против UX: В чём разница?
Дизайн пользовательского интерфейса игры (UI) — это планирование и создание всего, что игроки используют для понимания и управления игрой: меню, кнопки, интерфейс пользователя (HUD), значки, подсказки, карты и эффекты обратной связи. Пользовательский опыт (UX) — это более широкая картина: насколько легко, понятно и комфортно пользоваться игрой в целом.
Проверка в обоих случаях проста. Удобный пользовательский интерфейс позволяет игрокам сосредоточиться на игре. Плохой пользовательский интерфейс мешает, сбивает с толку или вызывает разочарование.
Типичный, недиегетический игровой интерфейс. Слева на земле стоит оранжевая фигура в форме таблетки на фоне холмистой местности и солнечного неба с тремя облаками. Имеется две плавучие платформы. Первый объект парит перед персонажем в виде оранжевой таблетки; над ним парят три маленькие монетки. Справа находится слегка приподнятая парящая платформа с сундуком с сокровищами, для открытия которого игроку нужно нажать клавишу «E». В верхней части изображения, слева направо, расположены: система здоровья, представленная тремя сердечками (два полных и одно пустое); таймер; счетчик, показывающий 1250 собранных монет; и значок паузы, указывающий на то, что игра приостановлена. В нижней части изображения по центру расположен элемент пользовательского интерфейса, отображающий доступные предметы, включая три морковки, фиолетовое зелье и золотой ключ. Изображение создано с помощью Unity Spark (Unity Ultra), 22 октября 2026 г.
Основные элементы интерфейса видеоигры
Интерфейсы большинства игр состоят из нескольких хорошо знакомых элементов:
- HUD: Информация, отображаемая на экране во время игры, например, здоровье, счет, таймер или мини-карта. Ключевые элементы обычно располагаются по краям экрана, чтобы центр оставался свободным для действия.
- Меню: Экраны, которые вы используете до и во время игры — запуск игры, изменение настроек, управление предметами.
- Подсказки: Краткие подсказки, указывающие игрокам, какую кнопку нажать или с чем они могут взаимодействовать. Отображение подсказок избавляет игроков от необходимости запоминать всё досконально.
- Обратная связь: Звуки, анимация и эффекты, подтверждающие произошедшее. Каждое нажатие кнопки должно сопровождаться видимой и слышимой реакцией в течение долей секунды.
Четыре места, где может располагаться ваш интерфейс
Разработчики игр часто описывают интерфейс, указывая его положение относительно игрового мира. Широко используемая методика делит их на четыре типа:
Недиегетический пользовательский интерфейс
Этот тип интерфейса находится вне игрового мира и виден только игроку. Большинство классических элементов интерфейса, таких как полоска здоровья в углу, здесь уместны.
Пример недиегетического пользовательского интерфейса для системы учета запасов, выполненного в простом плоском стиле. В левой части инвентаря расположены 28 ячеек, организованных в четыре ряда по семь ячеек. В первом ряду находятся зелья (пять красных зелий, три синих зелья, два зеленых зелья и восемь зелий в форме слезы). Во втором ряду находится оружие (меч, топор и щит). В третьем ряду находятся материалы (12 листьев, восемь перьев, два аметиста, четыре красных листа и девять металлических кубиков). В 4-м ряду находятся предметы для выполнения задания (один ключ и один свиток). Справа выделено лечебное зелье, с возможностью его использования, выбрасывания или экипировки. Также отображается важная информация о лечебном зелье (оно восстанавливает 50 единиц здоровья за 3 секунды и может быть продано за 25 золотых монет). Изображение создано с помощью Unity Spark (Unity Ultra), 22 октября 2026 г.
ДиегетическийUI
Этот тип интерфейса существует внутри игрового мира , поэтому персонажи тоже могут его видеть или слышать — например, индикатор здоровья, встроенный в костюм персонажа, или карта, которую персонаж держит в руках.
Пиксельная графика, демонстрирующая диегетический пользовательский интерфейс. Карта из игры, которую держит в руках персонаж игрока в зелёной куртке с меховыми манжетами и красных варежках. На левой руке игрок носит нарукавник с интерфейсом, отображающим общее количество очков здоровья, представленное в виде сердца и красной полосы. В правой руке они держат фонарь с оранжевой полосой, указывающей на количество оставшегося топлива. Изображение создано с помощью Unity Spark (Unity Ultra), 22 октября 2026 г.
Пространственный пользовательский интерфейс
Пространственные элементы пользовательского интерфейса отображаются в 3D пространстве игры, но не являются частью самого игрового мира, например, контуры вокруг товарищей по команде или значки, парящие над головами персонажей.
Meta UI
Мета-элементы пользовательского интерфейса — это эффекты, которые передаются через сам экран, а не через объекты в игровом мире, например, брызги крови или красная вспышка по краям экрана при получении игроком урона.
Видеоролик с примерами пространственного и мета-интерфейса пользовательского интерфейса. По обе стороны от двери лифта стоят два абстрактных персонажа в форме таблеток. Левая фигура (Ладья) изображена синим цветом, а над головой у неё синий ромб, указывающий на её дружелюбие. Персонаж справа выделен красным цветом, на нем предупреждающий знак и частично уменьшенная полоска здоровья, указывающая на то, что это враг. Дверной проем обозначен надписью «РЕАКТОР» и находится в 140 метрах от игрока. Вся сцена окружена мигающим красным светом, указывающим на то, что игрок находится в опасности. Видео создано с помощью Unity Spark (Unity Ultra), 22 октября 2026 г.
В большинстве игр сочетаются несколько типов пользовательского интерфейса. Полностью диегетический подход особенно сложен: Встраивание всей информации в игровой мир может усложнить игру, поэтому обычно приходится идти на компромиссы. Если вы хотите создать интерфейс, который будет взаимодействовать с окружающим миром, планируйте это с самого начала, а не добавляйте в конце.
7-шаговый процесс разработки пользовательского интерфейса видеоигры
Чтобы разработать понятный интерфейс, не обязательно быть дизайнером. Вот семиэтапный процесс, который упростит разработку пользовательского интерфейса вашей видеоигры.
- Перечислите входные и выходные данные: Запишите все действия, которые должен совершить игрок (переместиться, прыгнуть, поставить на паузу, выбрать предметы), а также все, что игра должна ему сообщить (здоровье, очки, цель, опасность). Определите, какие устройства вы будете поддерживать — сенсорное управление, контроллер или клавиатура.
- Приоритизация: Расположите результаты в порядке важности и укажите частоту их изменений. Важная, постоянно меняющаяся информация размещается там, где её легко увидеть. Редко используемые опции размещаются в меню.
- Используйте возможности взаимодействия: Выбирайте формы, значки и действия, которые подсказывают, для чего предназначен тот или иной элемент — выпуклая кнопка выглядит так, будто на нее можно нажать. По возможности придерживайтесь привычных правил.
- Оставьте мгновенный отзыв: Любой ввод должен сопровождаться немедленной видимой и слышимой реакцией.
- Уменьшать: Удалите все ненужное. Может ли число превратиться в простую полосу? Может ли некоторая информация отображаться только тогда, когда это действительно важно, например, счетчик патронов, который показывает, когда они заканчиваются?
- Прототип: Набросайте быстрые макеты на бумаге или на экране.
- Тестирование игры: Наблюдайте за тем, как люди используют ваш интерфейс, отмечайте, где они сомневаются, и повторяйте процесс.
Общие принципы создания понятных интерфейсов для видеоигр
Набор широко используемых рекомендаций по юзабилити прекрасно подходит для игр. Вот несколько наиболее полезных:
- Покажите, что происходит: Сообщите игрокам, сохранена ли игра, что загружается и сколько у них здоровья.
- Используйте символы, которые людям уже известны: Сердце как символ здоровья, иконка для карты.
- Позвольте игрокам вернуться назад: Позвольте им отменить заказ, исправить ошибки и пропустить сцены, которые они уже видели.
- Будьте последовательны: Кнопка подтверждения должна быть везде одной и той же, а каждый значок должен иметь одно значение.
- Предотвращайте ошибки: Перед удалением сохранения спросите «Вы уверены?» и заблокируйте действия, которые невозможно выполнить.
- Соблюдайте чистоту: Показывайте только то, что важно прямо сейчас.
Несколько советов по планировке тоже не помешают:
- Для комфортной игры оставляйте центральную часть экрана свободной.
- Сделайте текст читаемым с расстояния, с которого смотрит игрок — на телевизоре, расположенном в другом конце комнаты, текст должен быть крупнее, чем на телефоне.
- На телефонах используйте большие сенсорные области; на консолях убедитесь, что все меню работают с контроллером.
Основы доступности в разработке видеоигр
Доступный дизайн интерфейса помогает большему количеству людей играть в вашу игру, и многие из наиболее эффективных шагов просты. В руководстве по обеспечению доступности игр (Game Accessibility Guidelines) эти рекомендации входят в число основных и широко применимых рекомендаций:
- Разрешить игрокам переназначать элементы управления.
- Используйте легко читаемый размер шрифта по умолчанию и простой, понятный язык.
- Обеспечьте высокий контраст между текстом или интерфейсом и фоном.
- Не следует передавать важную информацию исключительно с помощью цвета.
- Не следует передавать важную информацию исключительно с помощью звука.
- Предусмотреть субтитры для важных реплик с отдельными регуляторами громкости для звуковых эффектов, речи и музыки.
- Убедитесь, что все элементы интерфейса работают с тем же методом ввода, что и игровой процесс.
- Делайте экранные кнопки большими и располагайте их на достаточном расстоянии друг от друга, особенно на сенсорных экранах.
- Предоставьте игрокам возможность выбора уровня сложности и сохраните их настройки.
В целом, использование цвета, формы и звука одновременно — это хорошая привычка, поскольку она предотвращает потерю информации, если один из этих сигналов будет упущен.
Стандартное, настраиваемое меню параметров открывает экран настроек специальных возможностей. Включает в себя: три варианта размера текста; переключатель субтитров; ползунки для регулировки уровня громкости музыки, звуковых эффектов и речи; переключатель высокой контрастности; и возможность переназначения элементов управления. Изображение создано с помощью Unity Spark (Unity Ultra), 22 октября 2026 г.
Хороший и плохой пользовательский интерфейс в видеоиграх
Вот как небольшие решения в совокупности приводят к результатам:
Таблица, сравнивающая хорошие и плохие пользовательские интерфейсы в видеоиграх. Изображение создано программой Claude Opus 5.5 23 октября 2026 года.
Изображение, демонстрирующее плохо разработанный пользовательский интерфейс. На земле, на фоне холмистой местности и солнечного неба с тремя облаками, стоит фигура в форме оранжевой таблетки. Различные элементы пользовательского интерфейса сгруппированы и перекрывают друг друга в центре экрана, закрывая обзор игроку. Текст мелкий и трудночитаемый, как и пункты меню в правом нижнем углу. Изображение создано с помощью Unity Spark (Unity Ultra), 22 октября 2026 г.
Контрольный список для проектирования пользовательского интерфейса вашей игры
Прежде чем поделиться своей игрой, спросите:
- Игроки всегда могут видеть необходимую им информацию?
- Оказывается ли мгновенная обратная связь по каждому действию?
- Есть ли на экране что-нибудь лишнее?
- Важная информация отображается несколькими способами – не только цветом или звуком?
- Сможет ли новичок разобраться с управлением без посторонней помощи?
- Вы видели, как в неё играет кто-то другой?
Позвольте игрокам сосредоточиться на игре.
Лучшие интерфейсы кажутся незаметными. Они сообщают игрокам именно то, что им нужно знать , когда им это нужно знать, а затем не мешают. Начните с того, что игроки должны делать и видеть, не усложняйте и тестируйте с реальными людьми.
Готовы создать свой первый пользовательский интерфейс для игры? Вам не обязательно быть разработчиком. Попробуйте Unity Spark— браузерную платформу Unity для создания игр с использованием искусственного интеллекта, которая позволяет описать вашу игру, доработать её в настоящем веб-редакторе и опубликовать, чтобы другие могли в неё поиграть.
Примечание к изображению в заголовке: Абстрактное изображение пустого документа по дизайну игры, наложенное на размытый синий и оранжевый фон. Изображение создано программой Claude Opus 5.5 7 октября 2026 года.