Успех современного игрового проекта напрямую зависит от качества его интерфейса — инструмента, через который пользователь взаимодействует с виртуальным миром, считывает механики и контролирует ресурсы. Без грамотного UI даже самый перспективный геймдизайн становится хаотичным и отталкивающим для аудитории.

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

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

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

Идея

Проблема

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

2. Какие элементы интерфейса будут в моей видеоигре?

Ключевые понятия и метрики

Методы сбора

Методы анализа

Я выбрала игры, интерфейсы в которых подходят для моей игры и интерфейсы в которых являются хорошим примером не перегруженных и понятных UI.

Разработанный Riot Games автобаттлер Teamfight Tactics (TFT) [1] является ответвление от вселенной League of Legends и развивает идеи популярной модификации Dota Auto Chess. Игра предлагает сессионные онлайн-матчи на восемь человек. Главная цель каждого участника — собрать сильную команду, переиграть семерых оппонентов и остаться последним выжившим.

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

Zenless Zone Zero [2] — это экшен-RPG, где игрок в роли Прокси исследует опасные параллельные измерения (Каверны). Геймплей завязан на формировании команды героев для битв с монстрами-Эфириалами и эффективном использовании боевых питомцев-помощников — Банбу.

Этот источник был взят из-за схожих не только механик, но и самого жанра, а так же минималистично оформленного и понятного интерфейса. Также на примере этой игры можно убедиться в том, что обучение не стоит перегружать текстом. Наиболее полезным для себя выделила эти решения: визуальное отображение радиуса атаки и мест для расстановки.

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

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

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

Начну анализировать интерфейс с игры «Teamfight Tactics» [1], в ней я нашла сразу несколько хороших решений для механик, которые похожи на мои (Рисунок 3-4).

В игре есть персонажи, которых нужно покупать в магазине (Рисунок 4-5). У каждого персонажа есть своя редкость выпадения в магазине, что выделено стоимостью персонажа и цветом его рамочки в магазине, что очень удобно игроку визуально, потому что упрощает считывание редкости без нужды каждый раз отдельно смотреть на ценник. Цена также указана на карточке персонажа рядом с рисунком монеток, что интуитивно определяется как обозначение стоимости. Для удобства быстрого визуального считывания на карточке размещена картинка персонажа и его имя, а также индивидуальные пассивные особенности. На карточках указана только важная информация, которая нужна игроку первостепенно особенно в условиях нужды быстро принимать решения о покупке из-за ограничения по времени (Рисунок 6).

Чтобы получить второстепенную информацию: здоровье, сила, способности и дальность атаки, игроку нужно навестись на персонажа и нажать ПКМ по нему (Рисунок 7). Это хорошее решение как отобразить эту информацию в интерфейсе, но чтобы оно не вытесняло более нужную и полезную информацию для победы в игре. Это также делает карточки с персонажами в магазине более легкими для восприятия и визуально не перегружает интерфейс обилием текста.

Стоит отметить и то, что над интерфейсом магазина указана валюта, которая есть у игрока с той же иконкой, как и стоимость персонажей, благодаря чему игрок сможет быстрее связать стоимость и игровую валюту, тратя меньше времени на поиск и понимание нужной ему информации для игры (Рисунок 8).

Не менее важный элемент в игре — поле для расстановки персонажей. Цифрами прямо на поле выделено количество выставленных игроком персонажей и их максимальное количество. Иконка с шлемом подсказывает, что эти цифры относятся к персонажам интуитивно за счет примитивных ассоциаций (Рисунок 9-10).

Выделение границ ячеек удобно для игрока за счет того, что пространство для расстановки не только ограничено и разделено для каждого персонажа, но и обозначено визуально. Выделение границ другим цветом тоже хорошее решение из-за контраста их становится более отчетливее видно на фоне текстуры поля и они с ним не сливаются (Рисунок 9-10).

Продолжу анализ теперь на примере игры «Zenless Zone Zero», в которой есть временное событие (мини-игра) в жанре tower defence.

Несмотря на хорошие визуальные решения для интерфейса, обучение в игре мне очень не нравится, потому что это просто поток текста (Рисунок 11) — это снижает вовлеченность игрока, потому что его вынуждают читать вместо игры. Было бы лучше, если бы игрока научили в виде игровой формы, например, тестового уровня или последовательных действий, которые игрок должен сделать, чтобы понять механику, но без возможности нажать что-то другое, пока идет обучение — это более интересно, чем просто стена текста.

Однако положительная сторона в неудачном решении — маленькие гифки рядом с объяснением, которые помогают визуально игроку понять как выглядит в игре то, что описано в тексте обучения (Рисунок 11).

Остальной интерфейс выполнен понятно и минималистично (Рисунок 12), оставляя дополнительную информацию скрытой и появляющуюся только при наводке мыши на интересующего персонажа (Рисунок 14), как в «Teamfight Tactics» (Рисунок 7).

Рядом с числами есть уточняющие картинки, которые ассоциируются с тем, к чему эти числа относятся (здоровье = сердце, максимальное количество выставленных персонажей на поле = минималистичная картинка персонажа) (Рисунок 13).

У карточек с персонажами в магазине очень удобно и информативно полезно обозначена их дальность и стоимость, а также внешний вид самого персонажа (Рисунок 13).

После покупки визуально показывается радиус атаки купленного персонажа, а также места на поле, куда его можно поставить (Рисунок 15). У каждого персонажа (вражеского и союзного) над головой визуально показан уровень его здоровья в виде шкалы (Рисунок 15).

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

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

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

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

1. Оставить на экране только наиболее важную информацию нужную игроку для быстрых решений и игрового процесса в целом / Убирать второстепенную информацию в дополнительно вызывающие окна или подсказки, а не держать на экране постоянно.
2. Использовать цвет для обозначений редкости, границ, опасности, важности элементов игры.
3. Использовать интуитивно понятные иконки-ассоциации вместо текста (по возможности).
4. Использовать визуальные подсказки/выделение при взаимодействии с элементами игры.
5. Использовать обучение через действия и практику, а не текст.

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

По итогам моего исследования интерфейсов игр Teamfight Tactics [1] и Zenless Zone Zero [2], я выяснила, что более удобные интерфейсы строятся на минимализме, визуальных ассоциациях и разделении основной и второстепенной информации. Я выделила несколько решений, которые помогут мне создать понятный интерфейс в моей игре. Я буду использовать: подходящий игре стилем интерфейс, цветовые разделения и выделения элементов, иконок, скрытых подсказок и визуального обучения игрока через действия. Также на примере я поняла, что перегруженность текстом или визуальными элементами другими могут помешать восприятию игрока, его пониманию и интересу к игре. Однако минималистичные решения могут не подойти играм другого жанра или с другими механиками.

1. Teamfight Tactics [Электронный ресурс] — Riot Games, 2019 — URL: https://teamfighttactics.leagueoflegends.com/ru-ru/
2. Zenless Zone Zero [Электронный ресурс] — miHoYo, 2024 — URL: https://zenless.hoyoverse.com/ru-ru/main