UI дизайн и его значение в играх

Добавлен , опубликован
Раздел:
Game Design

Введение


У любой, даже самой простой игры есть интерфейс. Он может быть минималистичен, абстрактен, гармонично вписан в дизайн окружения в целом или представлен уже ставшим традиционным HUD'ом со шкалой здоровья и количеством оставшихся патронов в обойме.
Каков бы он ни был, всякий интерфейс призван служить в первую очередь одной и той же цели: чётко и быстро донести до игрока какую-то информацию.
В этой статье я попробую разобраться в сути такого явления как пользовательский интерфейс в играх и рассмотреть его значение в любом качественном проекте.

Назначение, UI и HUD

Даже когда речь не идёт об игровой индустрии, дизайн играет огромное значение в человеческой жизни: большую часть информации мы получаем из окружения через зрительное восприятие и привлекательный дизайн, гармонично подобранные цвета и сочетающиеся формы способны способствовать повышению общего качества жизни.
Более того, в мире, где информационные потоки гораздо быстрее, чем раньше, были придуманы множество способов сокращения объёмов информации: когда вы слышите звук уведомления пришедшего сообщения, видите выпадающее окошко с текстом или появившийся на вкладке в браузере красный огонёк - вы уже работаете с пользовательским интерфейсом. Вместо длительного зачитывания уведомления о получении сообщения такого-то числа от другого пользователя, вы уже сразу знаете, что вам написала подруга из института по поводу завтрашней лабораторной.
Точно также это работает интерфейс и в видеоиграх: задействуя систему визуальных, аудио а иногда даже тактильных составляющих и сигналов игра передаёт игроку какую-то информацию и улучшает игровой процесс и общие впечатления от игры.
Таким образом, пользовательский интерфейс (UI - англ. user interface), это комплекс элементов, служащий связующим звеном между пользователем (игроком) и программой (игрой).
В свою очередь весь UI можно разделить на две составляющих:
  1. HUD (англ. Heads-Up Display) - известные любому игроку показатели запасов здоровья и маны, мини-карта в углу экрана и указатель прицела в центре, дрожание экрана и даже звук сердцебиения при потере здоровья персонажа — все эти элементы интерфейса служат тому, чтобы максимально ёмко и быстро передать информацию, не открывая множество дополнительных окон и не прерывая игровой процесс.
  1. Menu/Frontend/FE - все остальные вкладки, окна, панели и другие элементы, также являющиеся интерфейсом, однако чаще убранные с экрана до момента необходимости, чтобы не закрывать игровое пространство. В отличие от HUD'а, здесь важнее удобство в навигации и возможность доступно получить интересующую информацию.

Общие принципы

Качество интерфейса обусловлено множеством параметров: цветовая палитра, расположение на экране, художественное оформление и многое другое. Будучи основной формой коммуникации между игрой и игроком, UI очень важен.
Можно выделить несколько основных общих черт, которые обычно можно наблюдать у успешных проектов:
  1. Практичность и доступность. UI может выглядеть по-разному, но с его помощью разработчик должен суметь донести до игрока важную информацию. Если это условие не выполняется, такой интерфейс может сильно подпортить впечатление от игры: лучше в очередной раз воспользоваться скучной но понятной каждому красной полоской, чем экспериментировать, отображая состояние здоровья, допустим, по цвету кристалла в наруче героя, ведь смену его оттенка можно просто не заметить в пылу боя или при нестандартном освещении. Точно также, наилучший интерфейс это тот, который будет интуитивно понятен и человеку, никогда не игравшему в игры: запас здоровья, например, логично отметить сердечком. Здесь работает инфографика, потому как это соответствует уже сложившимися в индустрии ожиданиям и смысловому значению — сколько ранений персонаж может перенести, прежде чем погибнет, однако если вместо привычной пиктограммы окажется иконка звезды или пера, это уже может ввести в заблуждение. Помимо этого, хороший интерфейс должен быть быстро читаем вне зависимости от условий и происходящего на экране игры: самые ключевые параметры отображаются так, чтобы игрок мог бросив один краткий взгляд считать информацию, например узнать количество оставшихся у него патронов в магазине оружия или же показатель сытости.
  1. Актуальность: Задача дизайнера - разработать такой интерфейс, который будет не будет навязчив и при этом передаёт всю нужную информацию. В игровой индустрии есть примеры разных подходов к этой задаче, как успешных так и не очень. Важно соблюсти баланс между информативностью и актуальностью, чтобы не перегружать игрока лишними данными но донести до него всё, что важно непосредственно в рамках вашей игры. Если вы всё же считаете необходимым допустим отобразить время на экране интерфейса, вместо больших часов можно использовать двузначные числовые значения, или же вовсе - две цифры с парой букв, отражающих время суток;
  1. Преемственность: Не смотря на то, что выше сказанное может разочаровать или заставить думать, что должно использовать лишь один узкий спектр возможных вариантов интерфейса, это далеко не так: даже в рамках одного жанра существуют примеры разного подхода к дизайну UI. Если сам интерфейс выполнен грамотно и качественно, пусть и необычно, это скорее будет преимуществом и бояться экспериментировать не нужно. Речь же шла о том, что в индустрии за прошедшие годы сложились устойчивые унифицированные элементы и принципы, чтобы игроку не нужно было каждый раз учиться заново читать именно ваш уникальный UI: например, мини-карта может как быть детализированной моделью уровня, так и схематичным и обобщённым изображением, либо вообще - заменяться более компактным компасом, но во всех трёх случаях она выполняет свою функцию помощи игроку в навигации в игровом пространстве. То же самое верно для индикаторов статусных эффектов, вроде оглушения или отравления в играх жанра ММОРПГ, либо характерные кровавые брызги на экране в шутерах, говорящие о получении ранений персонажем;
Если вы посмотрите на дизайн нескольких случайно отобранных игр, также сможете увидеть закономерности и схожие черты: в большинстве своём, составляющие HUD'а располагаются по краям экрана, хотя некоторая информация и, наоборот, сосредоточена в центре. Меню же при открытии не всегда закрывает весь экран и может оставлять часть места свободным, либо размер окна изменяется, смещается или сворачивается, открывая пространство для новых вкладок. Все эти маленькие моменты были выработаны в результате разработки многих игр прошлого и теперь используются повсеместно. Задача UI дизайнера заключается в нахождении наиболее практичного интерфейса, который будет гармонично смотреться в общей композиции и эффективно сообщать нужные данные игроку.

Типология

Теперь, когда у вас есть общее представление об интерфейсе и почему он столь важен, мне хотелось бы рассмотреть существующую классификацию UI. Теоретическая база не только поможет в будущем в самостоятельном изучении вопроса, но и позволит посмотреть на существующие проекты с точки зрения геймдизайна, оценить качество работы других разработчиков и, возможно, выяснить, какой подход ближе вам и лучше для вашего проекта.
Типы интерфейсов:
  • Диегетический: Популярный некоторое время в прошлом тип интерфейса, интегрированный в игровое пространство. Основными и главными преимуществами такого интерфейса являются возможность креативно подойти к дизайну привычных элементов HUD'а и меню, а также увеличить степень погружения в игровой процесс и мир: запас патронов может быть представлен определённым числом магазинов на поясе, а снижение здоровья отражаться в форме пулевых ранениях или алеющих порезах на теле персонажа. Недостатком же, и причиной, по которой этот подход успел утратить свою популярность, является то, что чрезмерно сложные и нестандартные формы интерфейса и отображения даже базовых параметров становились не "фишкой" игр, а дополнительным неудобством в игровом процессе, дополнительно усложняя его для пользователя.
Яркие примеры: Dead Space (индикатор здоровья на спине костюма ИКС); Alone in the Dark (инвентарь в виде разложенных внутри пиджака предметов);
  • Недиегетический: Более распространённый и "традиционный" принцип дизайна интерфейса, при котором информация об игровом процессе и отображается на экране игрока, но не существует для протагониста или остального игрового мира. Более прост в реализации и у дизайнера значительно больше примеров для изучения и адаптации. Такой интерфейс, с другой стороны, будучи сделан плохо, будет мозолить глаз и вряд ли удивит кого-то. Обычно выступает как необходимая условность, повышающая качество игрового процесса.
Яркие примеры: Doom (показатели здоровья, запаса патронов и выбранное оружие); Call of Duty Black Ops 2 (HUD и мини-карта);
  • Гибридный (или Пространственный): Смешанный вариант, пролегающий на стыке между первыми двумя. Интерфейс этого типа подразумевает присутствие непосредственно в игровом мире элементов интерфейса, например маркеров квестов или подсвеченных противников, однако в реальности игрового мира они также остаются несущественны и служат лишь нуждам игрока. Подобные элементы интерфейса способны сильнее нарушить степень погружения, но умелый дизайнер может суметь использовать их не только для внутриигровых целей, но и для укрепления сложившегося стиля игры: маркер квестов в хорроре может быть блуждающим призрачным огоньком, а в стратегии разделения поля боя на клеточки или гексы избавляет от затруднительных просчётов;
  • Мета-интерфейс: Последний тип интерфейса, куда более технического характера, это мета-интерфейс. К нему относятся камера, следующая за персонажем игрока и меняющая положение в зависимости от происходящего на экране, или звук биения сердца и брызги крови, покрывающие эту самую камеру в знак близости гибели протагониста.
В действительности, мало существует игр, использующих лишь один подход. В то время как показатель здоровья может быть уместен в классической рпг, в атмосферном хорроре этот элемент интерфейса может вообще отсутствовать, а в тайтле-слэшере отображаться в форме красного пульсирования по краям экрана.

Принципы дизайна интерфейса

Наверняка на данном этапе вы уже можете предположить, а может, припомнив свой опыт игры, и с уверенностью ответить на вопрос: какой интерфейс действительно можно назвать хорошим?
Существует ряд принципов создания UI, основанных не только на наблюдении за успехами отдельных игровых проектов, но и связанных напрямую с принципом работы человеческого мозга - немаловажным фактором. Также стоит отметить, что в разных культурах к дизайн также подходя по-разному: западная и восточная школы дизайн разительно различаются, не в последнюю очередь в силу различий запросов и ожиданий игрока.
  1. Форма быстрее считывается и осознаётся мозгом, чем оттенки цветов или детали, поэтому иконки в интерфейсе следует делать разной формы. Также имеет смысл размещать элементы интерфейса таким образом, чтобы те образовывали узнаваемые простые фигуры - лучше всего прямоугольник, линию. Самая важная информация обычно расположена ближе к центру — вы могли обращать на это внимание в некоторых шутерах, где на оружие персонажа размещены панели, ведущие счёт оставшимся боеприпасам или шкала зарядки способности находится непосредственно под прицелом.
  1. Яркие цвета замечаются быстрее, в особенности красный: этот цвет притягивает внимание очень быстро, в силу чего выбирается для отображения получаемых ранений или важных уведомлений в HUD'е. Помимо этого, разные цвета воспринимаются глазом при различном освещении не одинаково, так например красный предмет в темноте кажется почти чёрным. Хороший дизайнер изучает теорию цветов и знает, какие сочетания оттенков гармонируют, а какие, напротив - выбиваются и вызывают дискомфорт при восприятия.
  1. Если вы понимаете, что интерфейс изобилует полезным но многострочным текстом — возможно его можно заменить символами и иконками, к тому же, в соответствии с вышеописанными пунктами, такие элементы значительно проще и быстрее воспринимать вне зависимости от происходящих в игре на данный момент событий, будь то сражение, диалог с НПС или исследование мира вне боя.
  1. Переизбыток элементов интерфейса может стать проблемой, как и исключительная стилизация: даже если вы используете только HUD, но тот отличается вычурным дизайном и прогрессивными анимациями, это может помешать в нужной ситуации правильно считать информацию. Помимо этого, нередко дизайнер добавляет в угоду художественному и декоративному аспекту составляющие, не только дополняющие интерфейс, но и нагружающие его, что отвлекает внимание и вводит в заблуждение иллюзией интерактивности. Для сокращения занимаемого места можно объединять различные элементы интерфейса в один, например размещая портрет героя, шкалу здоровья и набор активных навыков в один блок, обманывая мозг образом единства отдельных элементов.
  1. Актуальность меню заключается в доступности необходимых окон: это легко решается с помощью объединённой системы меню с различными вкладками, ведущими в инвентарь, расширенную мини-карту, настройки и т.д. Однако здесь стоит быть осторожнее, особенно с играми, где пространство интерфейса ограничено, — как в Warcraft III: принцип оригинального дизайна игры заключался в избегании создания многоступенчатых меню выбора усилений героев при прокачке или выборе юнитов для найма в окне казарм, поскольку в ходе игры необходимо оперативно получить доступ к нужным пунктам меню.
  1. При создании интерфейса, особенно для продуктов, в будущем предполагаемых кроссплатформенными, следует задуматься о масштабировании вашего UI: будет ли он также хорошо выглядеть на ужатом или расширенном разрешении? Если дизайн достаточно минималистичен - перенесение его на мобильные платформы потребует значительно меньше усилий, однако нарисованные от руки спрайты могут утратить свою привлекательность или стать неприменимыми, при запуске игры на разрешении меньше.

Типология стиля исполнения:

Последним пунктом в данной статье станет рассмотрение уже не основ теории дизайна UI, но возможные три стиля его реализации на практике: комбинируя разные подходы, играя элементами и размещая их в различных местах, а также прорабатывая цветовую палитру и переходы между меню, можно добиться фантастических результатов. Когда вы задумываетесь над тем, как должна выглядеть игра, вы можете представлять себе определённый образ, уже подходящий под одну из категорий, либо совмещающую по необходимости разные составляющие. Важно лишь помнить, что не только в частном отдельно взятые элементы должны быть качественно выполнены, но весь интерфейс целиком будет восприниматься как единое целое. Чем плавнее и гармоничнее он вплетён в игру, тем приятнее будут впечатления от его использования, и даже если ваш HUD не выделяется на фоне прочих но доступно доносит информацию, это гораздо лучше, чем если он теряется, стоит начаться перестрелке.
Возможных стиля по окончанию работы над UI может быть три:
  • Простой дизайн (англ. Flat Design или "флет-дизайн"): Характерный стиль для игр, выполненных в сеттингах с более современным антуражем или футуристичным сеттингом. Эффекты затемнения, полупрозрачности и свечения могут превалировать поверх базовых форм, линий и фигур.
Примеры: Fallout New Vegas, Death Stranding, Overwatch;
  • Стилизованный дизайн: Нередко встречается в старых играх, а также многих проектах на мобильных устройствах. Выделяется яркими, запоминающимися и детализированными элементами интерфейса. Оформление такого типа призвано воссоздать какую-то тематику или поддержать тему, например жуки-скарабеи, головы сфинкса и двумерные изображения людей почти сразу навевают дух древнего Египта.
Примеры: Batman Arkham Asylum, Persona 5;
  • Физический дизайн: Этот стиль дизайна интерфейса требует не меньше работы, чем предыдущий, создавая композицию из хорошо узнаваемых объектов и материалов. Деревянная коробка, поросший мхом камень или раскрытая книга, они выполняют ту же информативную функцию, но задействуют более прямые ассоциации и ожидания игрока.
Примеры: Elder Scrolls Oblivion, The Long Dark;
Простой дизайн предпочтительнее для игр, где выводимые данные не являются ключевой составляющей, либо могли бы отвлечь от происходящего на экране, будь они слишком детализированы или анимированы. С другой стороны, грамотный и аутентичный физический дизайн способен от части удержать эффект погружения даже при переходе в меню или работе с инвентарём персонажа.

Послесловие

В окончание всех высказанных мыслей и наблюдений хочется подвести итоги: как и всякая составляющая любой игры - от музыки, до механик и технического исполнения, интерфейс - неотъемлемая часть, и если у вас есть хорошая идея, он может послужить именно тем, что позволит другим людям увидеть мир игры, который вы желаете воплотить в реальность именно так, как его видите вы в своей голове.
Делайте его столь же ярким или тёмным, абстрактным или однозначным и утверждённым, но если ваш интерфейс выдастся на славу, вы уже заложите фундамент для успеха своего проекта и возможно именно он станет флагманом новых тенденций в игровой индустрии.
Благодарю за внимание.
`
ОЖИДАНИЕ РЕКЛАМЫ...
Этот комментарий удален
5
23
2 года назад
5
А где комменты?
Автор, спасибо за работу! Очень понравились скрины и примеры. Очень полезно для новичков и не очень в геймдеве.
Ибо есть мелочи, о которых люди не задумываются :)

Жирный лаЕк :)
3
22
2 года назад
3
Очень полезная и нужная статья для будущих ращпаботчиков😃
Чтобы оставить комментарий, пожалуйста, войдите на сайт.