Основные принципы создания игрового интерфейса

Я являюсь UX/UI дизайнером в компании Blackhub Games, занимающейся разработкой игр. Нашим продуктом является мобильная онлайн-игра Black Russia, которую ежедневно посещает свыше 800 тысяч человек, а одновременно в нее могут играть более 100 тысяч пользователей.

Создание игрового интерфейса — это важный аспект разработки, который может существенно повлиять на восприятие игры. Интерфейс служит связующим звеном между игроком и виртуальным миром, помогая ориентироваться, принимать решения и взаимодействовать с окружающей средой.

UX/UI дизайнер работает по описанию функционала интерфейса, созданному геймдизайнером, при этом минимизируя его ошибки и обеспечивая максимально качественный с технической точки зрения интерфейс.

В этой статье мы рассмотрим основные принципы дизайна игрового интерфейса, которые помогут сделать его интуитивно понятным, функциональным и эстетически привлекательным.

Игровой интерфейс состоит из многих элементов, но условно их можно поделить на две категории:

HUD (Heads-Up Display) — это информация, которая видна игроку непосредственно во время геймплея: индикаторы здоровья, боеприпасов, мини-карта и указатель прицела в центре. Эти элементы интерфейса максимально ёмко и быстро передают необходимую информацию без отвлечения от игрового процесса.

FE (Frontend) или Menus — это интерфейс, который позволяет игроку взаимодействовать с игрой вне активного игрового процесса. Эта категория включает в себя окна, вкладки и панели, такие как: главное меню, инвентарь и экран развития персонажа, карта. Меню должно быть интуитивно понятным и легко навигационным.

Диегетический - это интерактивный интерфейс, существующий в мире игры. Такие элементы видны персонажу игрока, с ними можно взаимодействовать, и они объясняются историей. Диегетический интерфейс, как основной, используется крайне редко, так как он вызывает трудности с быстрым считываением информации. А также часто разработчикам бывает сложно эффективно интегрировать такой интерфейс.

Недиегетические компоненты UI находятся вне истории и пространства игры. Это самый часто используемый и легкий в интеграции класс интерфейса.

Такие компоненты интуитивно понятны игроку, но в динамичных играх могут нарушать погружение, а в стратегических играх помогать игрокам более точно оценивать ресурсы и планировать действия.

Пространственные элементы интерфейса расположены в игровом мире, но остаются невидимыми для персонажей. Они часто служат визуальными подсказками, выделяя для игрока объекты, или указывают на важные ориентиры.

В Black Russia используются пространственные элементы в виде проекций, которые иллюстрируют цели в игровом мире.

Мета-элементы - это визуальные эффекты камеры, которые передают определённую информацию. Например, кровь на экране, когда персонаж ранен, и огибающая препятствия или трясущаяся камера. Эти компоненты стремятся максимально вовлечь пользователя в реальность игры.

Обычно игровой интерфейс совмещает в себе несколько подходов, ограничиваясь лишь жанром или техническими особенностями. Комбинирование разных подходов позволяет создать незабываемый игровой опыт.

Информативность и удобство

Когда человек сталкивается с новой информацией, его мозг сначала обращает внимание на яркие визуальные образы. Прежде всего это касается формы объектов. Форма — это основной элемент, который помогает мозгу понять, что изображено перед ним. Затем мозг начинает искать дополнительные детали и анализировать их.

Игры предоставляют пользователю большой объём информации, и для её эффективного восприятия важно использовать понятные и запоминающиеся иконки. Например, на представленном экране “Добыча” они достаточно простые и узнаваемые. Пользователю легко разобраться в их значении и запомнить их. Тексты являются дополнением к визуальному образу и повышают информативность.

Стройте информацию по движению взгляда

Проектирование любого экрана ориентировано на потребности и ожидания пользователя. Направление взгляда игрока соответствует определённым шаблонам движения глаз, а дизайн не должен этому препятствовать.

Рассмотрим данное правило на примере интерфейса крафта. В первую очередь это скачкообразные движения между ключевыми точками — акцентами. Взгляд перемещается между выделенными элементами интерфейса. Эти элементы должны быть наиболее значимыми.

Далее игроки чаще всего «сканируют» интерфейс слева направо и сверху вниз. Это связано с нашими привычками восприятия информации – именно так мы начинаем читать текст.

Унификация

Уже многие годы наблюдается тенденция к унификации пользовательского интерфейса в игровых проектах. Это означает, что элементы игрового интерфейса внутри одного жанра располагаются на одних и тех же местах. Унификация позволяет обеспечить более комфортное взаимодействие с игрой и облегчить процесс обучения.

Классическое расположение элементов HUD в RPG-игре VS HUD в Black Russia

При разработке HUD Black Russia за основу был взят классический интерфейс мобильных PRG. Новые игроки могут быстро освоиться в игре, так как они уже знакомы с расположением элементов управления и навигации.

Тем не менее, важно помнить, что общепринятые решения должны сочетаться с уникальными приемами, которые разработаны под конкретный проект.

Масштабирование

При наличии большого числа элементов в одном окне стоит поделить их на группы по функциональности. Такой подход обеспечит более структурированное представление информации, упростит навигацию по интерфейсу и сделает его более понятным. Например, собрать кнопки в одну панель.

А также часть информации можно спрятать в подсказки к элементам интерфейса или в другое справочное окно. Это позволит избежать перегруженности основного экрана и предоставить дополнительную информацию по запросу пользователя.

Если элементы интерфейса привязаны к конкретным координатам в игровом окне, пользователю легче понять, где они находятся и как с ними взаимодействовать.

Привязка элементов интерфейса к углам экрана, используемая в BR, позволяет легко адаптировать UI под разные размеры экрана и разрешения. Кнопки и элементы навигации расположены в определённых местах на экране, их можно легко переместить при изменении размера окна или устройства.

Отзывчивость

Отзывчивость интерфейса позволяет игроку легко и интуитивно взаимодействовать с элементами управления игры. Важным аспектом является визуализация состояния элементов на экране. Игрок должен сразу видеть, активен элемент или нет, а также какие действия с ним доступны.

Анимации и визуальные эффекты отлично работают для усиления игрового опыта, так как являются эмоциональной формой обратной связи. Они помогают игроку понять, какие действия привели к определённому результату.

Анимации открытия кейсов, используемых в Black Russia, создают ощущение успеха, подчеркивают важность момента и предоставляют игроку чувство удовлетворения и ценности награды.

Визуальные эффекты вызывают эмоциональную реакцию у игрока, что способствовало его дальнейшей мотивации продолжать игру. Однако стоит помнить, что чрезмерное их использование может отвлекать игрока от геймплея и вызвать раздражение. Это приводит к обратному эффекту – снижению интереса, поэтому важно найти баланс выразительностью и простотой интерфейса.

Стилизация

В зависимости от жанра игры интерфейс может иметь разную структуру и дизайн. Например, в шутерах обычно используется минималистичный интерфейс, который не отвлекает игрока от основного действия. В ролевых играх интерфейс может быть более сложным и детализированным, чтобы предоставить игроку больше информации о персонаже и мире игры.

Визуальный стиль Black Russia был разработан с учетом ключевых аспектов игрового мира. Основная задача — передать атмосферу криминальной России, сохраняя при этом ощущение современности.

Для создания нужного настроения была использована темная цветовая гамма. Оттенки черного, серого и синего цвета выделяют важные элементы интерфейса и повышают читаемость текста. Кроме того, “плоский” стиль придает игровому интерфейсу современный вид. Он является отражением трендов в области дизайна и облегчает взаимодействие с нагруженными игровыми интерфейсами.

Важно, чтобы UI отражал общую стилистику продукта. Это поможет создать целостное восприятие игры.

Также во время разработки не стоит забывать об оптимизации. Простой дизайн требует меньше ресурсов для рендеринга, что позволяет ускорить загрузку игры на мобильных устройствах с ограниченными ресурсами.

Эти принципы дизайна интерфейсов лежат в основе создания приятного игрового опыта. Они позволяют учитывать потребности пользователей, оптимизировать структуру и разрабатывать понятный и привлекательный дизайн. Для достижения наибольшего успеха необходимо применять различные методы анализа данных о пользователях, их предпочтениях и поведении. Подробнее об этом можно прочитать в другой нашей статье.

Анна, UI/UX Designer
Blackhub Games