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

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

В закладки

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

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

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

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

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

Clash Royale

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

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

Clash Royale

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

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

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

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

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

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

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

Half-Life 2

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

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

Half-Life 2

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

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

Half-Life 2

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

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

Hearthstone

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

Hearthstone

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

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

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

Overwatch

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

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

Overwatch

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

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

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

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

Assassin's Creed

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

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

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

Assassin's Creed

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

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

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

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

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

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

Dead Space

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

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

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

Dead Space

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

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

#геймдизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Александр Котенко", "author_type": "self", "tags": ["\u0433\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 45, "likes": 83, "favorites": 23, "is_advertisement": false, "subsite_label": "gamedev", "id": 4910, "is_wide": false, "is_ugc": true, "date": "Wed, 08 Mar 2017 13:50:15 +0300" }
{ "id": 4910, "author_id": 5297, "diff_limit": 1000, "urls": {"diff":"\/comments\/4910\/get","add":"\/comments\/4910\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/4910"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954 }

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

Популярные

По порядку

Написать комментарий...
24

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

Ответить
3

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

Ответить
3

А в Dead Space 2 они ещё сильнее поработали над эффектом погружения и убрали экраны загрузки между уровнями. Игровые ощущения стали более цельными и непрерывными.

Ответить
0

Отсутствие прерывающих загрузок - вот чего реально не хватает серии Half-Life.

Ответить

Комментарий удален

4

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

Ответить
1

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

Ответить
26

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

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

Ответить
4

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

Ответить
7

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

Короче, эта статья на уровне "10 лучших анимэшных смертей" или типа того.

Ответить
0

Все так, но вспомнить получается только звуки из HL.

Ответить
0

Wolfenstein 3D изначально имел разные звуки для лута и урона

Ответить
0

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

Ответить
0

В первых версиях Half-Life 2 индикатора урона не было, ты лишь видел, как быстро у тебя уменьшаются цифры здоровья : )

Ответить
7

Пфф. Интегрированный HUD за 10 лет до Dead space

Ответить
0

честности ради стоит отметить компас. Но в целом - да, авторы venom активно использовали оружие и руку.

Ответить
6

Моды, конечно, но welp

Ответить
0

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

Ответить
1

Не баланс а рестор. Баланс - сова. Много там не надо.

Ответить
0

Хилом быть всегда непросто =)

Ответить
6

Overwatch реально слишком перегружен. В пример легко взять Team Fortess 2, где всё гораздо удобнее и понятнее.

Ответить
6

Astroneer — всё что в "сундуках", сразу видно на экране. Спина астронавта, содержание построек и транспорта, ресурсы на планете, энергия. Нативно едрить-колотить.

Ответить
5

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

И настолько же сильно он бесил в Скайриме, с этими своими прокручиваемыми списками и нечитаемой локальной картой. Хотя списки - это беда, присущая также современным Fallout и Dragon Age.
Консолизация, чтоб её...

Ответить
1

Надо сказать, что в Морре был неидеальный инвентарь (100500 одинаковых на вид бутылочек и столько же свитков). Зато hud подходил к игре по стилистике, чего о Скайриме уже не скажешь.

Ответить
5

В The Divivsion очень понравился интерфейс. Достаточно информативен, красив и необычен. Так же еще можно кастомизировать под себя и если для кого то он покажется загруженным, то облегчить.

Ответить
5

Никакой худ не сравнится с худами для gta sa

Ответить
4

К интерфейсу Dead Space проникся уважением с того момента, когда, копаясь в инвентаре, впервые случайно двинул камеру и увидел эту голограмму с обратной стороны. Только потом до меня дошло, что в игре вообще нет наэкранного HUD. А озвучку интерфейса Half-Life вообще невозможно забыть при всем желании.

Ответить
3

В Mirrors Edge практически полное отсутствие HUDа. Только точка прицела и подсветка целей

Ответить
0

Если говорить про Valve, например у Portal 1-2 нету тоже HUD

Ответить
3

лучше бы вспомнили 2-й фар край, где весь интерфейс был также в игре, никаких доп меню для карты или работы на компьтере, никаких виртуальных появлений в машине, все работало на атмосферу игры

Ответить
0

Боюсь показаться занудой, но первый скриншот Half-Life 2 взят не из оригинальной игры, а из HL2: Episode 2.

Ответить
12

В эпизодах сильно менялся интерфейс?)

Ответить

Комментарий удален

2

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

Ответить
2

По отображению здоровья, были уже две игры на PS One. Это Crash и Spyro, в третьей части точно. В каждой из этих игр есть спутник: в Crash - была подбираемая маска. И всё это отображалось визуально понятно для игрока. Обычный цвет маски - +1 хитпоинт, жёлтый цвет - +2 хитпоинта, а с третьей маски - она надевалась на Крэша, делая неуязвивым на время. Это круто. В Спайро у дракончика был Спарк, стрекоза жёлтого цвета. И чем больше били Спайро, тем более болезненного цвета становилась стрекоза. По мне это самое информативное интегрирование интерфейса в игру.

Ответить
0

Жизни были еще в Марио, а HUD был встроен в Oddworld.

Ответить
1

Ожидал увидеть V.A.T.S из фоллыча, но не судьба(

Ответить
0

Это из третьего и четвёртого? Это тот, в котором постоянно нужно переключаться между всей менюшек и списков? Ну ну.

Ответить
1

The Forest. Интерфейс по типу второго фаркрая. Рюкзак\сундук - простынка на земле, компас в руке, книга с рецептами тоже в руках. Апдейт оружия.брони так же. Но не дожали: полоски хп, брони, голова и жажды как отдельный худ.

Ответить
–2

Всем примерам пример - World of warcraft.
Интерфейс можно переделать под себя вообще как угодно, любой элемент интерфейса заменить/переделать/уменьшить/убрать и так далее.

Это ли не самый удобный для юзера интерфейс? Максимальная кастомизация под себя.

Ответить
0

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

Ответить
0

Угу, выше интересный скрин этого удобного интерфейса

Ответить
0

Если кто то рукожоп, это разве проблема конструктора?

Ответить
0

Ещё ча модно экранный интерфейс поворачивать немного вместе с камерой, будто стекло болтается перед камерой.

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Невероятно! Skyrim портировали на...
Подписаться на push-уведомления