Как создать интерфейс игры: основные принципы и типичные ошибки

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

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

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

Особенности и принципы проектирования интерфейсов

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

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

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

Game gui design раскладывается на основные принципы, позволяющие разработчикам добиться наилучших результатов:

• Правильное зонирование пространства. Проектирование интерфейсов игр предполагает выделение одного экрана каждой пользовательской задаче. Разработчики не любят “прятать” остальные функции, поскольку существуют значительные риски путаницы. Четкое определение “одной задачи” также вызывает сложности, практически любой процесс включает несколько этапов. Важно организовать пространство экрана так, чтобы геймер мог интуитивно использовать интерфейс мобильной игры, понимая назначение каждого элемента. 
• Соответствие ориентации гаджета. Жанр, тип игры предполагают определенную ориентацию экрана, имеющая вертикальную или горизонтальную развертку.
• Использование дополнительных областей. Создание интерфейса игр происходит с учетом запасных зон – слайд-панелей, разворачиваемых жестом, либо нажатием скрытой кнопки. Пользователь никуда не перемещается, но быстро сворачивает рабочую область, возвращаясь к основному дисплею. Важно учитывать собственные скрытые области операционной системы и жесты вызова, поскольку игрока явно смутит случайно открытая “шторка” при вызове инвентаря. 
• Следование минимализму. Перед тем, как нарисовать интерфейс для игры, стоит удалить из него лишние детали. Просмотрите элементы, исключите неподходящие по параметру функционала или стилистическому оформлению. Например, Manor Matters имеет главный игровой экран, включающий главные элементы для упрощения восприятия. Похожим образом интерфейс организован по части заданий – помимо подсказок, блока бустеров, таймера, кнопки паузы, дисплей исключает лишние части. В реализации данного принципа дадим дополнительный совет – убирайте информационные дубли, переводите текстовые данные в графический контент, преследуя понятность, интуитивность интерфейса.

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

Как создать интерфейс игры: основные стратегии

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

• Хрустальный шар. Придумать игру нового жанра практически невозможно, зато существует основа – опыт предшественников. Перенять из него получится наиболее удачные “фичи”, органично образующие интерфейс и учитываемые на самом старте проектирования. От этого стратегия получила название – ведь проектировщик буквально заглядывает в будущее. Другие подходы также предполагают предугадывание, хотя хрустальный шар дает конкретику, предусматривая планируемые функции. Результат отличается от предполагаемого изначально, но подготовка позволяет легче рисовать интерфейс игры. 
• Стандарты и шаблоны. Использование имеющихся, отработанных функций поможет пользователю быстрее втянуться в использование UI. Войдя в игру, геймер увидит знакомые иконки, названия разделов, представляя результат применения. Первоначальное проектирование интерфейса позволяет использовать шаблоны, но индивидуального формата, чтобы выделить авторские фичи и не допустить плагиата. 
• Гайды. Они важны в процессах проектирования дизайна, особенно по части масштабирования. Следует изучить, как сделать рамку для интерфейса в игре, какие элементы добавить, поскольку гайды построены на пробах и ошибках коллег. Важны правила сочетаемости, возможные состояния элементов, максимально подробно описанные гайдами. Акцент внимания смещен на современность и обновление, возможно именно вы подкорректируете рабочий гайд
• Свобода навигации. Стратегия предполагает получение пользователем большого количества разделов, возможностей удобного использования. Потенциально геймер имеет бесконечно много желаемых пунктов, идеальным является “вечный интерфейс”. Мобильный экран предлагает минимум свободного пространства, поэтому рекомендованы дополнительные ходы. Задействуйте интуитивные свайпы переводящие пользователя между зонами меню или создайте сквозные переходы. Последнее понятие предполагает переход игрока внутрь основных разделов из любой точки меню. Например, перейти к донату можно с главного экрана или инвентаря, не затрачивая лишнее время. 

По теме: UX/UI-дизайнер: как освоить востребованную профессию в геймдеве

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

Разновидности интерфейсов

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

• диегетический – интерфейс встроен в историю игры, не приводит к отвлечению от геймплея. Иногда он является частью костюма персонажа, приобретает вид естественных элементов мира;
• недиегетический – наиболее популярный тип, предполагающий сугубо функциональную составляющую интерфейса, его существование для конкретного игрока;
• пространственный – в UI элементы не привязаны к дисплею, часто такая концепция перемежается с недиегетическим интерфейсом. Подобный подход использует Assassin’s Creed, которая использует подсвечиваемые маршруты для некоторых заданий, а информация о противниках размещается над ними, а не в общем меню;
• мета – перед тем, как убрать интерфейс в играх, следует изучить визуальные эффекты, обязательно уделив внимание шаблонам. Например, окрашивание экрана в красный цвет будет означать получение урона и дополнительной информации об этом не потребуется. Важно, чтобы цветовые вспышки были понятными, например, если рамки экрана будут сигнализировать об уровне желтым цветом, это запутает пользователя. 

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

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

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

Если вы реализовали уникальные “фичи” в интерфейсе, которые выбиваются из общепринятой картины UI/UX-дизайна, не спешите от них отказываться. Проведите тестирование и получите фидбэк от игроков – элементы, которые устраивают всех пользователей и комфортны для них, не нужно трогать, даже стараясь следовать шаблонам. 

По теме: Пропустить нельзя пофиксить: баги в играх и почему их не избежать

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

Нулевой дизайн игровых интерфейсов

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

До недавних пор рисовать интерфейс игры такого типа могли разработчики десктопного ПО для компьютеров, последний тренд – внедрение внутрь мобильных программ. Мобильная FIFA предлагает игроку управление виртуальными кнопками, аналогом является управление тапами, перемещающими спортсменов бескнопочным способом.

Некоторые игры предлагают отдельную кнопку отключения большей части UI, например, Truck Simulator: Ultimate и Bus Simulator: Ultimate компании Zuuks. Выбрав соответствующий пункт внутри настроек, пользователь убирает нижнее меню со спидометром, функциональными кнопками, оставляя больше пространства игровому миру. 

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

В чем рисовать интерфейс для игры: основные инструменты

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

1. Figma. Сравнительно новое приложение, работающее в браузере, хотя существует десктопная версия ПО. Изменения дизайна сохраняются на облаке в реальном времени, дополнительно система поддерживает совместную работу с другими членами команды. 
2. Sketch. Проверенный комплексный инструмент с серьезным набором плагинов, дающий возможность выполнения различных дизайнерских задач. Но программа работает исключительно на Mac, не поддерживая многопользовательский режим. 
3. InVision Studio. Инструмент для дизайна интерактивных систем с внедрением продвинутой анимации. Пользователь получает бесплатный продукт для Windows и MacOS, который обладает информативным таймлайном, предлагая тестирование прототипов на мобильных устройствах. 
4. Adobe XD. Один из наиболее быстрых инструментов прототипирования за счет продвинутого клонирования, правда уступает конкурентам проработкой анимации
5. Framer X. Позволяет создавать UI-компоненты для React, отлаживать UX/UI без выходя из ПО. Это инструмент продвинутых юзеров, предполагающий программирование и наличие опыта, зато функционал превосходит большинство схожих программ. 

Интерфейс любой игры – главный инструмент взаимодействия пользователя с функционалом ПО. Его делают максимально простым и понятным, следуя традициям дизайна. Рекомендации позволяют создать UI, понятный любому пользователю, но поддерживающий интерес к игре.