Idle Berserker UI solutions

В IDLE BERSERKER есть ряд очень крутых решений которые хорошо реализованы и вполне могут быть примером для реализации в любом продукте!

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

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

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

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

1. Создавать яркие кнопки, чтобы они были видны на тусклом экране или на солнце. Однако использование мобильного телефона на максимальной яркости под прямыми солнечными лучами может быть не всегда комфортным, особенно во время игры. Кроме того, читаемость элементов следует достигать за счет контраста, а не только яркости. Некоторые разработчики следуют этому правилу без учета контекста экрана и состояния кнопок, всегда делая их яркими. Примером прекрасного исполнения этого правила можно назвать "Берсеркер" - здесь яркость используется в нужный момент.
2. Осветлять всю игру. Это правило часто применяется из-за умеренной яркости экрана мобильных телефонов. В результате получается яркая, светлая игра с яркими кнопками без достаточного контраста, что приводит к плохой видимости элементов и заставляет применять третье правило.
3. Каждая кнопка должна иметь уникальное начертание, быть объемной и привлекать внимание. Это правило, в общем, верное, но когда на экране 30 кнопок, каждая из которых уникальная и привлекающая внимание, возникает хаос и путаница. К тому же, если кнопка в магазине не мигает или не привлекает внимание анимацией, игрок может просто ее пропустить и не совершить покупку.

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

Можно взять на вооружение следующие принципы:

Нейтральная гамма у второстепенных иконок.

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

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

Использование черно-белых кнопок. Не страшно делать активными кнопки и контролы, выполненные в черно-белых тонах. Игроки быстро привыкнут к этому и не будут путать такие кнопки с заблокированными.

Яркий контраст на кнопках которые требуют внимания игрока.

Когда кнопка доступна для нажатия, сделайте ее заметно ярче, чем остальные элементы. Например, в игре "Берсеркер" достаточно просто добавить цвет к кнопкам на фоне черно-серого интерфейса. Это позволит сразу привлечь взгляд игрока и, что самое важное, только в нужный момент.

Недоступные кнопки должны быть золочены.

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

Размер кнопок может быть мелким.

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

Берсеркер 15 кнопок по широкой стороне! 15 Карл!!! при этом из них 5 акцентных.

Акценты по смысловым блокам

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

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

Туторный указатель

Темный интерфейс предоставляет еще одно преимущество - указатели помощи (не только кнопки) выглядят сильно ярче на его фоне, и не требуется использовать пресловутое затемнение экрана для улучшения их видимости!!! Многие разработчики сталкиваются с этой проблемой и прибегают к затемнению, поскольку, казалось бы, другого способа сделать указатели более заметными на светлом фоне без контрастов не существует. Однако, затемнение в итоге перекрывает весь интерфейс, и игроку сложно понять относительное расположение кнопок и элементов, что приводит к потере контекста происходящего.

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

Подтверждение действий.

В игре многие действия подтверждаются, и не только в месте тапа.

Например, прокачка статов сопровождается 5-ю действиями:

1. При любом тапе на экране появляется красно-оранжевый анимированный спецэффект.
2. Прожимается кнопка, хотя анимация в этом случае в Берсеркере минимальна.
3. Происходит яркая подсветка всего блока атаки с анимацией, которая появляется при нажатии и медленно стихает. Повторное нажатие, когда подсветка еще не исчезла, вызывает мигание при зажатии кнопки. Здесь разработчики действительно продумали этот момент.
4. Срабатывает эффект усиления на самом герое, который яркий, красивый и динамичный, занимая огромную площадь на экране.
5. Всплывает попап с указанием изменений параметров.

Это хорошая практика подтверждать действия игрока. Нажатие - это скорее правило, чем исключение. Качественные игры предлагают множество событий во время тапа - от 4 до 7 и даже больше.

Забота о внимании игрока и контекстные панели.

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

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

Также стоит отметить появление контекстных кнопок во время усиления параметров.

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

Такие детали показывают заботу разработчиков о комфорте и удобстве игрока.

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

https://t.me/ArtsFactory