6 примеров UI дизайна, на которые должен обратить внимание каждый гейм-девелопер

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

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

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

1) Clash Royale - Поверхность и прокрутка

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

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

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

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

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

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

2) Half Life 2 - Динамичная и акустическая

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

«Один из моих самых любимых HUD», - говорит Кэндленд. «Монохроматическая янтарная палитра имела особый вид, который отличал HUD и сделал его частью уникальной индивидуальности игры. Это выглядело простым, чистым, не мешало прекрасным боевым условиям».

Candland подчеркивает, как HUD Half Life 2 может сбрасывать элементы, которые не настолько необходимы, как, например, походное оружие. «Конкретность в фрагментах данных и их выбор по требованию не создавали когнитивной нагрузки. - говорит он. - Когда они появились, анимация была быстрой и оперативной».

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

TAKEAWAY: Half Life 2 показывает нам, что HUD - не всегда бывают запоздалыми и портят искусство игры. Вместо этого, они могут служить хорошим дополнением (и даже красивым). Им также не нужно полагаться исключительно на визуальные элементы для передачи информации.

3) Hearthstone - Тактильная и понятная

Как и Clash Royale, Hearthstone - это игра, которая отличается простотой, проработанной формулой и качественным исполнением с хорошим вкусом. Большая часть этого стиля - это доступность информации. HUD выделяет и показывает важную информацию именно тогда, когда игроки нуждаются в ней, и делает это все в легко усваиваемой форме. Станислав Костюк, разработчик игр в Ubisoft, выделяет тактильную презентацию карточной игры и разборчивость своего HUD как основные факторы, благодаря которым он пользуется успехом.

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

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

4) Overwatch - компактная и центрированная

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

Оливер Яношек, старший художник UI в Massive Entertainment, выделяет HUD Зари как особенно эффективный. Он дает важную информацию игрокам, сохраняя их в действии.

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

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

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

5) Assassin’s Creed - Меньше значит больше

Иногда самым лучшим решением для создания отличного HUD является его полное устранение, по словам Станислава Костяка, разработчика игр в Ubisoft (но который не работает с Assassin's Creed).

«Я хочу сказать о первом Assassin's Creed. Игра выглядит на много лучше с выключенным HUD. Он не был задуман изначально и опыт был абсолютно другим."

Исключение HUD из такой игры, как Assassin's Creed, с ее open world убийствами и массивными, визуализированными средами, обеспечивает высокий уровень погружения, который невозможен с постоянными напоминаниями о том, что вы играете в симуляцию. Отсутствие HUD позволяет игрокам напрямую соединятся с персонажами.

«Когда вам говорят в Убежище Ассасинов, что вы можете найти информацию на рынке около еврейского квартала, вы не просто идете к иконке, выполняете небольшую миссию, и все», - говорит он. «Вы идете по крышам домов, смотрите вокруг, видите Звезду Давида на воротах - и это означает вы в еврейском квартале! И потом, когда вы уже добрались до него, вы ищете этот рынок, возможно пользуетесь Eagle Vision для поиска информаторов, теневых людей, разговаривающих друг с другом, или, может быть, вы слышите вестника, который говорит о вашей цели. Весь поток исследований превращается в процесс, в ходе которого вы узнаете город, понимаете как сложить визуальные или звуковые несоответствия в паттерны, которые помогут найти вашу цель. Полученный опыт гораздо более привлекателен и приятен, чем тот, который создается иконкой на мини-карте, но также требует конкретного подхода к окружающей среде, дизайну миссии и написанию диалога».

TAKEAWAY: Иногда признаком сильной философии дизайна является то, как хорошо игра работает без HUD.

6) Dead Space - Интегрированная и привлекательная

В то время как полное исключение HUD - хороший вариант для игры, подобной Assassin's Creed, другое дело - встроить его прямо в вашу игру. Для таких игр, как Dead Space, где HUD является почти обязательным. Этот вариант позволяет разработчикам сохранять погружение пользователей в игру без ущерба функциональности.

Джим Браун, старший дизайнер Epic Games, восхваляет подход Dead Space за его способность сделать HUD подходящим как персонажам игры, так и реальным игрокам.

«Dead Space - очень часто «хороший пример» креативных HUD, - говорит Браун. «Показатели здоровья отображается на спине, а накладная карта сделана в виде проекции, которая отображается на земле и направляет вас к следующей цели. В то время как этот подход действительно новаторский и полностью переворачивает на голову традиционное понятие HUD, его часто упускают из виду за еще большее влияние, которое он оказал на сам игровой процесс. Dead Space - смесь жанра шутера и Survival-хоррора, HUD очень хорошо справлялся с хоррор аспектами игры: помог игроку сосредоточиться на данном моменте игры, вместо того, чтобы тащить его на 2D-оверлей, отвлекая от геймплея ".

Разделение внимания - одна проблем, с которыми сталкиваются разработчики при разработке HUD / UI, говорит Браун, но EA Redwood Shores решил ее уникальным способом.

«Нealth bar на одежде часто служит для того, чтобы другой игрок мог увидеть вас, иногда является единственным источником света в темной комнате, влияет на общее настроение и напряженность, которые игрок чувствует во время стресса или исследования. Проецируемые линии были отличным способом вести игроков в сложных уровнях, но они также иногда замедляли игрока и блокировали его при проверке цели. Игроку приходилось прекращать движение, оставшись в уязвимом состоянии. В то же время, это помогало создать напряженность в игре, делая ее уже не просто интересной UI презентацией».

TAKEAWAY: Dead Space учит нас, что дизайн следующего уровня может быть успешно интегрирован в то, что другие игры часто считают банальным и второстепенным. Очень круто, что HUD перестает быть HUD и становится неотъемлемой частью игрового мира.

От переводчика

Оригинал статьи на английском находится тут.

Больше полезных материалов для разработчиков игр в группе Perfect Game Development.

А в Telegram-канале UI/UX Designer — переводы и интересные статьи про пользовательский опыт и интерфейс.