За счёт чего на одном экране уживаются информативность, удобство использования и стиль.
Игроки редко замечают хороший интерфейс, — ведь он не мешает геймплею, не раздражает и не бросается в глаза. При этом хороший UI также сообщает всю необходимую информацию, скрывает лишнюю, радует взгляд и улучшает обратную связь с игрой. Это целая сложная система.
Вместе со старшим UI-дизайнером студии Frontier (Elite Dangerous, Planet Coaster) Арвидасом Браздейкисом (выступает как частное лицо, не представляя позицию компании Frontier Developments) разбираемся, из чего состоит хороший интерфейс и существует ли баланс между стилем и информативностью.
Dead Space 2
Интерфейс — это не только полоска здоровья и счётчик патронов. Это ещё и карта, инвентарь, всевозможные настройки и даже главное меню игры.
UI (User Interface) иногда путают с UX (User eXperience) — другим, хоть и тесно связанным понятием. UX — это весь опыт, который может получить игрок, а также вся информация, которая в теории может быть ему доступна. А UI — это то, как эту информацию можно получить: через сообщения, иконки, звук или вибрацию. Интерфейс становится для игрока своеобразной обратной связью, которая находится в самой игре, отражает её стиль и настроение.
UI состоит из многих элементов, но условно их можно поделить на две категории — хотя названия в разных студиях могут отличаться. HUD (Heads-Up Display) — это информация, которая видна игроку непосредственно во время геймплея, то есть мини-карта, маркеры на радаре, счётчик патронов и полоска выносливости. FE (Frontend) или Menus— это экран развития персонажа, инвентарь, раскрытая на весь экран карта и прочие меню.
The Witcher 3: Wild Hunt
К HUD и FE применимо понятие Game Feel — то есть ощущения от взаимодействия с интерфейсом. Сюда входит визуальный эффект от выбора пунктов, аудиоэффект от поднятия предметов и общее художественное оформление. Но требования к разным элементам интерфейса отличаются: HUD должен быть в первую очередь легко читаемым, а FE — удобным в навигации.
В играх с ранних консолей, с той же Atari, разобраться было очень непросто — приходилось читать руководства, разбираться в неудобном управлении. Но за последние тридцать лет интерфейсы стали гораздо компактнее и понятнее, при этом — более стилизованными. Пришло понимание, что удобство использования важнее всего, поэтому UI-дизайнеры старались, чтобы интерфейс меньше привлекал к себе внимание и показывал больше информации.
Старший UI-дизайнер в Frontier
Нельзя выделить отдельные игры или разработчиков, которые радикально изменили подход к UI в целом. Но в конкретных жанрах свои представители всё же есть. Full Throttle сильно облегчила интерфейс адвенчур, убрав из него огромный список глаголов с действиями. Dune II показала, что на консолях можно создать RTS с удобным управлением, а Halo: Combat Evolved провернула то же самое с шутерами.
UI стал унифицированным, но это не всегда плохо, ведь так игрокам не нужно переучиваться под каждую новую игру. Сейчас заядлые любители шутеров, переходя от Battlefield V к Call of Duty: Black Ops Cold War, находят счётчик патронов в одном и том же месте. А мини-карта, системные кнопки и горячие клавиши в MMORPG уже давно стали стандартом — неважно, идёт ли речь о World of Warcraft или о Final Fantasy XIV.
В процессе унификации сформировались и основные типы UI:
Диегетический — интерфейс, который находится не просто на экране, а в самом мире игры. С ним могут взаимодействовать другие персонажи, он виден противникам и объясняется историей, как в Dead Space или в Tom Clancy’s The Division.
Недиегетический — обратный подход, когда UI просто накладывается на экран и существует только для игрока.
Пространственный — все элементы, которые не привязаны к экрану. В Assassin’s Creed Origins это метки с уровнем, которые висят над противниками, и маршруты персонажей, которые игрок может подсветить особым умением.
Мета — визуальные эффекты, которые всё равно несут определённую информацию. Например, кровь на экране сообщает о ранении персонажа игрока, а десатурация изображения — о том, что пора использовать уникальную способность. Так, в Xenoblade Chronicles в разгар боя картинка может стать более блеклой и окраситься в синие тона — это означает, что игроку сейчас покажут будущее.
Хорошие интерфейсы бывает трудно выделить, потому что они не бросаются в глаза — во время игры их просто не замечаешь. Чтобы добиться подобного эффекта, дизайнеры UI стараются следовать нескольким правилам.
Нельзя забывать про биологию и про то, как устроены человеческие глаза и мозг. Например, глаз человека очень чувствителен к красному цвету, поэтому с ним нужно работать осторожнее. Особенно в HUD — красные элементы перетягивают на себя внимание, но хорошо подходят для обозначения опасности: низкого здоровья, полученного урона или сообщения о скором провале миссии.
Мозг лучше всего воспринимает форму, а на обработку цвета и деталей у него уходит больше времени. Поэтому иконки на экране лучше делать разной формы, чтобы их было проще считывать. Также мозг привыкает продолжать линии и объединять элементы в знакомые формы. Интерфейс это должен учитывать и размещать отдельные показатели и шкалы так, чтобы те складывались, например, в прямоугольник, а самая важная информация была ближе к центру экрана.
Factorio
Чтобы игроку было проще считывать информацию, HUD нужно ограничить максимум семью элементами, а разнообразные меню не делать слишком глубокими — максимум трёхуровневыми. По возможности интерфейс лучше привязывать к краям и углам экрана — это также пригодится при масштабировании UI для разных разрешений.
Если в интерфейсе появляется слишком много текста, то частично его можно попробовать заменить иконками. Они не только занимают меньше места, но и лучше считываются в разгар геймплея. К тому же иконки проще адаптировать под разные игровые условия — чтобы те одинаково хорошо воспринимались и в мирной обстановке, и под обстрелом.
Общепринятые решения нужно сочетать с уникальными приёмами, которые разработаны под конкретный проект. Грубо говоря, если в интерфейсе что-то работает и нравится игрокам — не нужно это менять, если только ты не преследуешь какую-то необычную цель.
В серии Uncharted дизайнеры интерфейса решили не экспериментировать, и поэтому оставили элементы HUD на привычных местах, а в небоевых этапах и вовсе убрали их с экрана. А в Peter Jackson’s King Kong разработчики хотели создать не просто игру по фильму, а интересный опыт, поэтому ударились в диегетику. Например, если игрок хотел проверить количество патронов в магазине, ему нужно было достать обойму из оружия — персонаж смотрел на неё и вслух говорил, сколько осталось боеприпасов.
Peter Jackson’s King Kong: The Official Game of the Movie
Наконец, любой UI нужно тестировать, причём в самых экстремальных условиях: подсветить на экране всё, что можно подсветить, и взорвать всё, что можно взорвать. Если при этом вся информация остаётся читаемой — значит дизайнеры справились с оформлением и размещением элементов.
Final Fantasy XII: The Zodiac Age
Тестирование также помогает понять, как UI воспримет разная аудитория. Например, японские игроки обожают списки внутри списков, множество растущих показателей и увеличивающихся цифр на экране, а японские разработчики стараются этим вкусам угождать. Причина — в традиционной культуре и в том, как люди привыкли читать и воспринимать информацию.
Тестировать свои решения нужно не только внутри студии, но и на игроках. Можно даже попробовать плейтестить на людях, которые в принципе не играют в игры, — это поможет понять, в правильную ли сторону ты двигаешься.
Но такая возможность бывает не всегда, поэтому нужно научиться тестировать самого себя — задать самые идиотские, наивные вопросы, представить себя на месте неопытного игрока и посмотреть на работу незамыленным взглядом.
Старший UI-дизайнер в Frontier
Источник цитаты:
Terraria
Самое страшное, что может случиться с интерфейсом — это непостоянство информации и того, как до неё добраться. Если в игре есть похожие сущности, настройки, экраны, то игрок выстроит логическую взаимосвязь: раз я зашёл в инвентарь через определённую комбинацию кнопок, то и на экран с картой перейду похожим образом.
Но если такую же взаимосвязь не выстроили дизайнеры UI, то появится непостоянство. Разные меню и подменю сложатся в нелогичную и громоздкую систему, в которой будет неудобно ориентироваться. А какая-то информация может и вовсе ускользнуть от игрока.
Например, в GTA Online есть инвентарь, в котором хранится запасная броня и еда, восстанавливающая здоровье. В напряжённой перестрелке инвентарь может спасти игрокам жизнь, но интерфейс неохотно напоминает о его существовании.
GTA Online
Также восприятию интерфейса вредит плохое форматирование текстовых элементов. Сплошные блоки текста трудно читать, поэтому дизайнеры UI должны делать разметку, выделять ключевые слова и разбивать информацию на абзацы. В отдельных случаях абзацы можно ещё и сдвигать, чтобы акцентировать важную деталь. Причём чем меньше элемент интерфейса, тем жирнее в нём должен быть шрифт, и наоборот.
Хорошо отформатированный текст можно погубить неудачным масштабом интерфейса. Так, в God of War 2018 года отдельные блоки информации было трудно читать, не приближаясь вплотную к экрану, а в Fire Emblem: Three Houses почти весь текст становился неразборчивым, если запускать игру в портативном режиме. Избежать этого помогает «правило 6 футов» — нужно следить, чтобы на расстоянии двух метров от экрана игроку было комфортно воспринимать информацию.
Иногда дизайнеры интерфейса неосознанно загоняют себя в невидимые рамки и начинают работать не с информацией, а с оформлением информации. В таких случаях получается «овердизайн» — ситуация, когда внешний облик интерфейса преобладает над информативностью, а интерактивные элементы становится сложно отличить от неинтерактивных. Подобный UI не просто затрудняет доступ к информации, но ещё и переключает внимание игрока на художественные элементы интерфейса
UI должен хорошо выглядеть, но не быть акцентом всего экрана и кричать игроку: «Эй, я — интерфейс, обрати на меня внимание!». Дизайнеры пытаются создать такой UI, чтобы он получился почти «прозрачным» — люди же играют в игру, а не в интерфейс, и UI просто должен этой игре помогать.
Ведущий графический дизайнер в DICE Los Angeles
Источник цитаты: GDC
Left 4 Dead 2
Разработка любого интерфейса начинается с идеи, и идеи эти могут быть очень разными. Дерек Сакамото, старший UI-дизайнер в Blizzard, называет идею интерфейса «зерном», потому что из неё растёт вся дальнейшая работа. Оно помогает разработчикам сконцентрироваться на одной идее и не бродить мыслью по разным вариантам. Чем быстрее команда найдёт своё зерно, тем лучше пойдёт вся работа.
Интерфейс Hearthstone изначально зародился в виде небольшого демонстрационного видео. В этом видео была коробка, которая раскрывалась и показывала игроку целый мир с заданиями и персонажами. Мы ухватились за эту коробку, а остальные идеи пришли сами.
Что может в ней лежать? Ключ — так появились ключи для арены. Коробка лежит на столе, но где этот стол находится? Возможно, в таверне. Когда мы это поняли, то ощутили такой творческий порыв, что тут же создали остальные элементы интерфейса, вплоть до начальной заставки с вывеской и дверями.
Cтарший UI-дизайнер Hearthstone
Источник цитаты: GDC
Hearthstone
В роли «зерна» может выступать культура, народное искусство, кино или даже историческая эпоха. Например, UI-дизайн дилогии Splatoon навеян современными субкультурами, в Kingdom Come: Deliverance оформление меню основано на старых чешских гравюрах. Дизайнеры интерфейса Dead Space вдохновлялись «Бегущим по лезвию», «Чужим» и «Звёздными войнами», а в серии Fallout разработчики изучали типографику первых послевоенных компьютеров и рекламы 50-х, чтобы воссоздать шрифты и цвета.
А ещё можно брать за основу работы других UI-дизайнеров. Изучать их интерфейсы, использовать как референсы, пытаться воссоздать, главное — не копировать все решения вслепую. В каждом UI-дизайне есть уникальные находки, которые подходят для конкретной игры, но малейшее отличие в механиках может сделать их бесполезными.
Если «зерно» помогает найти настроение интерфейса, то подобные референсы облегчают постановку задачи. На их основе UI-дизайнеры могут изучить устоявшиеся решения и новые тренды, понять, что работает лучше, а что — хуже. Особенно это полезно, если предстоит работать с незнакомым жанром. Изучая «чужие» интерфейсы, дизайнер уточняет для себя задачу, методы её решения и в итоге приходит к балансу между своими идеями и привычными элементами.
Hades
Иногда UI-дизайнерам хочется вывести на экран максимум информации — показать не просто здоровье игрока, счётчик патронов, мини-карту, а ещё и метки противников, маркер задания, иконки способностей и внутриигровое время, например.
Но с количеством информации нужно обращаться осторожнее. Лишние показатели и сообщения перегружают интерфейс — хоть данных и становится больше, игроку становится труднее их воспринимать. К тому же, далеко не вся информация бывает нужна игроку сразу и в конкретный момент.
Всё зависит от того, какой опыт мы как разработчики хотим вызвать у игрока, а для этого нужно очтётливо представлять геймплейную петлю.
Например, в Dark Souls игроку нужно всегда видеть запас выносливости, чтобы понимать, хватит ли её на ещё один бой, удар или уворот. А более кинематографичный экшен Uncharted может позволить себе регулярно убирать с экрана численную информацию, чтобы дать игроку насладиться картинкой и поисследовать локацию.
Старший UI-дизайнер в Frontier
Удобство использования — тоже относительное понятие, которое зависит от особенностей жанра. Например, нельзя сказать, что бесконечные таблицы EVE Online — это плохой UI, ведь в рамках EVE Online он работает и выполняет свою задачу. Но если такой же интерфейс применить в Super Mario Odyssey, то игроку будет неудобно в нём разбираться — на экране появится слишком много не относящейся к геймплею информации.
Чтобы сделать интерфейс более компактным, но не потерять информативность, дизайнеры используют компромиссные решения. Например, заменяют мини-карту на компас, как в The Elder Scrolls IV: Oblivion.
В классическом виде мини-карта занимает целый угол экрана, а если сделать её меньше, то на ней будет трудно что-либо разглядеть. Компас же ограничивается одной полоской, но всё равно показывает основные элементы — цели задания, противников и ближайшие точки интереса.
The Elder Scrolls IV: Oblivion
Ещё один эффективный подход — комбинировать разные элементы, чтобы они воспринимались как единое целое. В UI это называется лэйаутом и встречается повсеместно.
Если выделить противника в World of Warcraft, то на экран выводятся его имя, здоровье, портрет, уровень, процент агрессии и наложенные заклятия. Но эта информация сгруппирована в одно окно, и поэтому ориентироваться в ней проще — мозг игрока хитрит и не отделяет один тип данных от другого.
World of Warcraft
Обоснованные повествованием интерфейсы, которые существуют в мире игры, появились ещё в ранних симуляторах — от Secret Weapons of the Luftwaffe до Star Wars: TIE Fighter. А вновь актуальными их сделал хоррор Dead Space, дизайнеры которого соединили диегетический UI с напряжённым геймплеем и атмосферным оформлением.
Интерфейс Dead Space был попыткой соединить мир игры и менеджмент ресурсов. Обычно когда игроки открывают инвентарь, UI выдёргивает их из геймплея и помещает в безопасное, плоское, недиегетическое чистилище, где нет никаких противников и можно спокойно перебирать предметы.
Нашей игре такое не подходило. Мы решили, что инвентарь не просто должен работать в реальном времени, но и существовать в мире игры. Это было необходимо, чтобы сохранить напряжение Dead Space во всех её аспектах.
Ведущий UI-дизайнер серии Dead Space
Источник цитаты: inventinginteractive.com
После выхода Dead Space в игровом сообществе закрепилась мысль, что диегетические интерфейсы это обязательный атрибут игр, которые делают ставку на иммерсивность, а все остальные подходы только вредят погружению. Но это с точки зрения UI-дизайна это не так, а диагетика очень часто может быть неуместной.
Dead Space
Диегетические интерфейсы подходят не всем жанрам — например, в мультиплеерных проектах игроки соревнуются не с игрой, а друг с другом, и каждое лишнее взаимодействие с UI их только отвлекает. В одиночных стратегиях и тактиках игрокам нужно держать в голове много информации и просчитывать ходы наперёд, поэтому максимально простой доступ к данным оказывается в приоритете.
Диегетический интерфейс при неосторожном обращении может даже навредить погружению. Если игра не сможет с помощью UI скрыть геймплейные условности или не объяснит их так, как хотел бы того игрок, это вырвет его из состояния потока.
Eternal Darkness: Sanity’s Requiem
К тому же, недиегетический UI тоже может быть иммерсивным. В хорроре Eternal Darkness: Sanity’s Requiem игрока пугали не только геймдизайнеры, но и дизайнеры интерфейса. В игре была механика психического состояния — когда оно опускалось ниже определённой отметки, UI разрушал четвёртую стену. В интерфейсе менялись цвета, пропадали отдельные элементы, намеренно выводились ложные данные, а с карты могли пропасть двери или появиться фальшивые.
Наконец, дизайнеры могут найти компромисс между диегетикой и недиегетикой, как в серии Metro. Многие интерфейсные решения и действия игрока обоснованы повествованием и происходят именно в мире игры. Другие — оставлены элементом на экране. Главное здесь — не воплощать в диегетическом интерфейсе те действия, которые покажутся обычному игроку неестественными. Например, каждый человек может достать планшет и посмотреть, что на нём написано, но не каждый имеет привычку пересчитывать патроны.
Metro 2033
В современном UI преобладают три типа дизайна:
Плоский или Flat Design — простые линии и фигуры, иногда с эффектами затенения или прозрачности, часто встречается в современном или фантастическом сеттинге в духе Death Stranding.
Стилизованный дизайн — это яркие элементы с богатым художественным оформлением, которые притягивают к себе внимание и создают настроение, например, ожившего комикса в Batman: Arkham Asylum.
Физический или скевоморфный дизайн — использует знакомые игрокам материалы, формы и текстуры, как пергамент и железная пряжка из журнала заданий The Elder Scrolls IV: Oblivion.
Плоский дизайн удобен в разработке и использовании. Обычно «плоские» интерфейсы используют векторную графику, а потому легко растягиваются, перемещаются по экрану, масштабируются и портируются на другие платформы. Например, текстовый элемент интерфейса в стиле Flat Design можно легко адаптировать для любого объёма информации.
А игроков плоский дизайн не отвлекает от геймплея. В The Legend of Zelda: Breath of the Wild все элементы интерфейса сведены к простым иконкам, а меню инвентаря и приготовления пищи выполнены в полупрозрачном стиле с небольшими рамками — UI остаётся видимым и читаемым, но совсем не привлекает внимание.
The Legend of Zelda: Breath of the Wild
Противоположный подход — стилизованный UI. Он, напротив, должен быть заметным — ярким, контрастным, постоянно двигающимся. Стилизованный интерфейс неизбежно перетягивает на себя часть внимания, но зато хорошо дополняет атмосферу.
Стилизованный UI может казаться очень громоздким, как в первом «Ведьмаке», а может изящно жонглировать экранами и подменю, как в Persona 5. При этом игроку всё равно будет приятно им пользоваться, если дизайнеры чётко разграничат элементы интерфейса, чтобы те не превратились единую массу. Также стилизация лучше других дизайнов UI уживается с экспериментами: необычными шрифтами, цветовым кодированием и даже добавлением отдельных моделей в интерфейс.
Стилизованный интерфейс может уместно смотреться даже в играх с реалистичной графикой. В том же Batman: Arkham Asylum чёрный «комиксовый» UI не выглядит инородным, а дизайнеры Alien: Isolation создали свой собственный вид стилизации, чтобы тот сочетался с атмосферой игры.
Мы хотели свести элементы UI к минимуму. Но на экране всё равно что-то оставалось, поэтому мы решили воссоздать тот искажённый и мягкий образ технологий из фантастики 70-х. Самым эффективным способом оказалось записать видеоряд игры на VHS-кассету, потоптаться на плёнке, проиграть её на старом переносном телевизоре, в процессе сгибая и скручивая провода, чтобы исказить изображение. Результат мы записали, загрузили обратно в игру — и он не просто выглядел аутентично, он был аутентичным.
Ведущий UI-дизайнер Alien: Isolation
Источник цитаты: youtube.com/Alien: Isolation
Alien: Isolation
Физический дизайн во многом похож на стилизованный, а главное его отличие — в знакомых игроку материалах. Так, в Kingdom Come: Deliverance меню оформлены каменными и деревянными орнаментами, а карта выглядит как средневековая картина на холсте.
Kingdom Come: Deliverance
Также физический дизайн работает на погружение, что очень пригодилось разработчикам Hearthstone. В коллекционных карточных играх можно покупать комплекты карт, чтобы создавать новые тактики и колоды.
Но если в физических аналогах, как в Magic: The Gathering, игроки получают за свои деньги настоящие бумажные карточки, которые можно подержать в руках, в видеоиграх им достаются только цифровые картинки. Физический дизайн сделал их более привлекательными для покупки: сами карты оформлены под бумагу, а комплекты с ними — под кожу и металл.
Hearthstone
У стилизованного и физического дизайна есть общая проблема — их трудно адаптировать под разные разрешения. Это особенно актуально сейчас, когда на консолях и ПК расширяется поддержка 4К. В таких интерфейсах обычно используется растровая графика, которую нужно вручную масштабировать, а для переноса на другие платформы — например, Nintendo Switch или мобильные устройства, — даже перерисовывать с нуля.