Дизайн-проект ГИП для Entropos

Маленькая контекстная справка — секунд на 30 или на минуту

Жанр

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

Платформа

Игра разрабатывается для ПК.

Аудитория

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

Команда

Шипов Александр \\ UX&UI игры \ Разрабатывал хорошие и плохие решения \ tg: Brumaren

Макс Ульман \\ Глава студии \ Апрувил и критиковал решения типа сверху \ email: max@junefolks.com

И Команда JUNE FOLKS \\

Какого опыта для игрока
хотели добиться
и какие были ограничения

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

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

Инди-разработка даёт нам свободу экспериментировать и проверять гипотезы, которые
кажутся команде интересными. Мы позволяем себе пробовать спорные решения и выяснять,
как они работают на практике. За что иногда и получаем обоснованный хейт)

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

Когда речь заходит о работе с UE5, Данил, лид разработки, сравнивает Figm'у с Lamborghini, а UE5
— с трактором. Из трактора тоже можно собрать Lamborghini, но многое придётся разрабатывать с нуля)

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

Некоторые гипотезы проверяем уже после реализации. Это позволяет увидеть решение в игре,
но к моменту проверки команда уже тратит на него время разработки.

Состояния и обратная связь

Цвет и градиенты придают кнопкам объём. Этот приём легко реализовать и в Figm'е, и в UE5.
Мы хотим передать ощущение механических клавиш магнитофона, нажал — кнопка утопилась.

Возможно, характерные щелчки таких клавиш станут основой звуков интерфейса.

Сложность возникает с radiobutton'ами, где нужно выбрать один вариант,

"утопленное" состояние не всегда позволяет сразу понять, что выбрано.

Поэтому в текущей версии эти элементы остались плоскими.

Ниже будет экран из v6.0, в которой продолжаем развивать эту идею

и приближаемся к ощущению "магнитофона".

Выбор стороны и точки появления

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

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

С точками появления всё сложилось проще, на второй или третьей итерации я пришел
к системе, которую я считаю удачной и хочу сохранить:
• Квадрат обозначает союзную точку, а ромб нейтральную или точку противника.

• Маленькие ромбы и квадраты по краям обозначают закреплённое состояние,
⠀которое в данный момент игры нельзя изменить.

• Стрелки, направленные внутрь, показывают, что точка атакована.

Контекстная информация в HUD

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

R1–R4 — пороги расстояния от игрока до объекта. При их пересечении меняется отображение
ников и других динамических элементов HUD.

На схеме зелёная зона соответствует маркеру, синяя — значкам, оранжевая и розовая
— значкам и полному нику. Два состояния с полным ником отличаются прозрачностью,
чем дальше объект, тем прозрачнее подпись.

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

Нам нужно лаконично показать игроку, как выполнить действие. Для взаимодействия с окружением
используем четыре типа ввода: нажатие, удержание, двойное нажатие и сочетание клавиш.

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

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

Что оказалось понятным игрокам, где возникли трудности
и что предстоит изменить

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

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

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

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

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

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

Часть замечаний уже учли в новом экране настроек. Ниже показываю обновлённое распределение информации и действий на панелях, а также интерфейс с правками после pre-alpha.