Идеальный HUD: шесть примеров удачного пользовательского интерфейса

Чему можно научиться у выдающихся игр.

Автор портала Gamasutra Алан Бредли (Alan Bradley) написал заметку, в которой перечислил примеры игровых интерфейсов, удачных с точки зрения геймдизайна и попросил разработчиков их прокомментировать.

DTF публикует перевод статьи.

Идеальный HUD: шесть примеров удачного пользовательского интерфейса

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

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

Clash Royale — доступность и «свайпы»

Clash Royale
Clash Royale

У Clash Royale можно многому научиться. Самое привлекательное в ней — простая, но отполированная до блеска концепция (соревновательная tower defense, в которой игроки защищают своего короля и две башни, нанимая атакующих юнитов).

Ом Тэндон (Om Tandon), UX-директор DIGIT Game Studios, хвалит Clash Royale за то, что она избежала грубых ошибок, которые совершают многие мобильные игры, старающиеся привлечь «мидкор» (mid-core) пользователей, аудиторию, не относящуюся к «казуальным» геймерам или «хардкорщикам».

Clash Royale
Clash Royale

Ом Тэндон говорит: «Посмотрев на большинство «средних» игр, вы увидите одинаковое, сделанное как под копирку основное меню. Обычно это главный экран, с которого можно попасть к другим разделам меню: битвам, магазину, общению и так далее».

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

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

В Clash Royale эту проблему решает HUD. Элементы управления выведены на основной экран, а не спрятаны на нижних слоях громоздких меню. Также в Clash Royale быстрый интерфейс, позволяющий пролистывать вкладки «свайпами», не продираясь через различные разделы.

Тэндон поясняет: «Вместо необходимости переходить на другие экраны для получения вторичной информации, мы просто размещаем её внутри вкладок основной секции. При этом контент в них выводится моментально, без бесполезных загрузок».

Что перенять: Лёгкое и доступное расположение информации. И отказ от ненужных меню – загрузки очень раздражают.

Half-Life 2 — динамика и звуки

Half-Life 2
Half-Life 2

У Valve получается аккуратный и проработанный HUD, дополняющий стиль их игр. Half-Life 2 — яркий пример такого подхода. Дэвид Кэндленд (David Candland), начальник отдела разработки пользовательского интерфейса Bungie, считает, что Valve удалось успешно воплотить в жизнь несколько идей, которые до выхода проекта нигде не применялись.

«Один из моих любимых HUD, — говорит Кэндленд. Выделяющаяся монохромная гамма в янтарном цвете стала неотъемлемой частью Half-Life. Интерфейс был простым, аккуратным и не мешал игроку. А самое потрясающее — его минималистичность.

Half-Life 2
Half-Life 2

Кэндленд подчёркивает, что HUD игры не показывал то, что не нужно в конкретный момент (вроде убранного оружия). Он говорит: «Демонстрируя только необходимые элементы, разработчики не загружали внимание игроков. А анимация их появления была быстрой и отзывчивой».

«Звуковое сопровождение сыграло не менее важную роль, — добавляет Кэндленд. — Кто сможет забыть эти звуки? В разгар боя игроки часто не смотрят по сторонам. Эффекты были отчётливыми и доступными. Даже во время самых жарких баталий пользователь сразу понимал, что подобрал патроны, наступил в химикаты или восполнил здоровье. Не существует идеальных HUD, но интерфейс Half-Life 2 – отличный пример экономичности и удобства. Он меня вдохновлял».

Half-Life 2
Half-Life 2

Что перенять: Half-Life 2 показывает, что HUD — не вынужденная необходимость, которую следует продумывать в последнюю очередь. Интерфейс может быть привлекательным, даже прекрасным. Передавать информацию можно не только её прямым визуальным отображением.

Hearthstone — тактильность и аккуратность

Hearthstone
Hearthstone

Как и Clash Royale, Hearthstone — пример того, как простая формула при должном исполнении становится выдающейся игрой. Её HUD выделяет и показывает игроку необходимую информацию в правильный момент. Станислав Костюк (Stanislav Costiuc), геймдизайнер из Ubisoft, называет «тактильность» и удобство интерфейса главными причинами успеха игры.

Hearthstone
Hearthstone

Он говорит: «Ключевая информация всегда доступна: кто может атаковать, кто нанесёт смертельный урон, что увеличивает урон от заклинаний. Hearthstone даёт визуальный и звуковой отклик на каждый клик или действие в игре. Это нечто — от самих карточных битв до подвижных элементов меню. Приятно даже просто перемещать карту по экрану».

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

Overwatch — компактность и сгруппированность

Overwatch
Overwatch

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

Оливер Яносчек (Oliver Janoschek), главный художник пользовательского интерфейса в Massive Entertainment, приводит в пример HUD Зари (Zarya), эффективный, но не отвлекающий игроков.

Overwatch
Overwatch

Яносчек объясняет: «Интерфейс должен выводить необходимую игрокам информацию максимально удобно и практично».

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

Что перенять: Чем больше информации получится уместить в небольшом пространстве, не потеряв в удобстве, тем лучше.

Assassin's Creed: меньше — лучше

Assassin's Creed
Assassin's Creed

Иногда идеальный HUD – это его отсутствие. Так считает Станислав Костюк, геймдизайнер Ubisoft (не работающий над серией AC).

«Хочу отметить первый Assassin's Creed, не из-за HUD, а потому что игра отлично обходится и без него. Её будто разрабатывали без всякого интерфейса, и она ощущается совершенно по-своему».

Решение убрать HUD из проекта с убийствами в открытом мире и проработанным окружением погружает в атмосферу игры. Пользователь забывает, что это симуляция (в этом конкретном случае — симуляция симуляции). «Чистота» геймплея сильнее связывает игрока с персонажами, они становятся чем-то большим, чем набор нолей и единиц.

Assassin's Creed
Assassin's Creed

Станислав продолжает: «Когда Гильдия Ассасинов сообщает, что нужную информацию можно узнать на рынке рядом с еврейским кварталом, игрок не просто двигается к значку на карте и выполняет небольшое задание. Вместо этого он лезет на крыши, оглядывается, видит вдалеке звезду Давида на воротах и отправляется туда. На месте пользователь ищет рынок, использует «орлиное зрение», чтобы найти информатора, выискивает подозрительных людей, или слышит, как глашатай рассказывает о его цели.

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

Что перенять: Иногда признак дизайна высокого уровня это то, как игра обходится без HUD.

Dead Space — интегрированность и привлекательность

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

Джим Браун (Jim Brown), старший дизайнер Epic Games, хвалит Dead Space за то, что её HUD используется и игроком и персонажем.

Dead Space
Dead Space

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

Dead Space — смесь шутера и survival horror, и HUD отлично справился с элементами хоррора: пользователи концентрировались на игре, не отвлекаясь на обычную карту».

Браун уточняет, что переключение внимания игроков – это одна из самых больших проблем для разработчиков при работе над интерфейсом. Но команда EA Redwood Shores нашла свой способ её преодолеть.

Dead Space
Dead Space

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

Что перенять: Dead Space показывает — продвинутый дизайн может спасти даже банальные и второстепенные элементы. Если всё сделать правильно, HUD станет неотъемлемой частью игрового мира.

5959
45 комментариев

Вот про Dead Space полностью согласен! Я был просто в восторге от решения шкалы жизни, карты (особенно) и прочего. Вроде как и нет лишних раздражающих элементов на экране, но, в то же время, всю необходимую инфу ты видишь практически постоянно. Респект и уважуха, как говорится.

24
Ответить

Да, такой интересный подход к стандартным индикаторам здоровья, заряда стазиса, количеству патронов усилил погружение в атмосферу мёртвого и пугающего космоса.
Самое неожиданное заключается в том, что игра не останавливается при открытии инвентаря, карты или магазина. Однажды во время покупок в местном автомате, Я услышал пугающие шорохи за спиной. Пришлось отложить несколько кирпичей и повременить с покупками :)

3
Ответить

кст, на сколько помню в Метро 2033, подошли с такой же идей, к интерфейсу игры. Там вроде бы его в целом и нет. Потому что, он так же как в Dead Space он был интегрирован в саму игру.

4
Ответить

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

1
Ответить

Простите, но с овервотча в голос. Такого перегруженного интерфейса я не видел, наверное, вообще нигде. Самый большой и бросающийся в глаза элемент — гигантская кнопка-индикатор, которую ты используешь раз 5-10 за весь матч. Гениально А в одном из апдейтов они ещё и значки в килфиде сделали больше раза в полтора, нагрузили их ненужной информацией и позволили стакаться до 6, что с увеличением размера ещё сильнее захламляет экран.

И при этом ни одного упоминания Unreal Tournament, которая обладала простым и информативным интерфейсом уже 18 лет назад, и кроме того, позволяла его КАСТОМИЗИРОВАТЬ. Да что там, тут вообще про возможность настройки интерфейса игроком нет ни слова. Хреновый из Алана Брэдли аналитик, одним словом.

38
Ответить

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

9
Ответить

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

Ответить