Принципы разработки игрового интерфейса

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

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

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

Итак, есть две новости: хорошая, и плохая.

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

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

В этой статье мы не будем рассматривать художественную сторону разработки, которая о цвете, ленточках или вензельках; она субъективна - зависит от конкретного жанра, сеттинга и личных вкусов самих разработчиков.

Итак, существует ряд принципов построения игрового интерфейса, которые можно условно разделить на две группы: психологические и фундаментальные.

Это общие принципы, связанные с тем, как человеческий мозг и глаз воспринимает информацию. Они связаны с нашими привычками и годами выработанными способами обработки информации, выделения и усвоения главного.

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

В игре Dishonored 2 эта диагональ очень хорошо прослеживается. От Mission к Objectives, от портрета Антона Соколова к названию главы, Dreadful Wale.

Да, в этой статье будет много примеров из Dishonored 2, потому что я прямо забалдела от их интерфейсов. Стоит поиграть хотя бы ради того, чтобы посмотреть на чумовую анимацию UI.

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

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

На страничке героя в Dota2 можно заметить очень четкие группы элементов. Первая группа — теги героя, вторая — скиллы, далее отдельная группа — скины и новая группа — магазин скинов. Они не смешиваются и все стоят отдельно друг от друга, обособленные формой, размерами, расстоянием между ними. Кстати, здесь так же соблюдено правило «сначала картинка, а потом текст».

В любом типе интерфейсов существуют устоявшиеся и принятые человечеством аксиоматичные элементы. Это не значит, что все эти интерфейсы должны быть похожи друг на друга. Тем не менее, сталкиваясь с незнакомым и новым интерфейсом, человек будет стараться зацепиться за знакомый и понятный принцип расположения информации, или знакомый элемент. Так, например, большинство инвентарей RPG имеют похожую структуру, а обозначение звонка - это пиктограмма телефонной трубки (несмотря на то, что трубками такой формы уже давно никто не пользуется).

Для дополнительной информации можно погуглить Закон Якоба.

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

Для дополнительной информации можно погуглить Закон Хика

Интерфейс игры The Witcher 3. Слева — все квесты, затем кратко цели выбранного квеста, и только потом художественное описание. Представьте себе, если бы вся эта бодяга открывалась бы сразу под названием квеста? Ориентироваться в них было бы гораздо сложнее. И опять, сочетание с принципом «слева-направо».

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

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

Представьте себе игровое окно как предложение:

Жуткий ливень начался только что, буквально в половину седьмого вечера, на улице дикий потоп!

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

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

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

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

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

Интерфейсы из Dishonored 2. Элементы обоих окон пусть не идентичны, но имеют очень похожую визуализацию: похожие плашки, похожим образом оформлены заголовки, списки, выделение выбранного, кнопки Back и Exit, детализация информации в правой части экрана. Попав из интерфейса загрузки в интерфейс туториалов, игрок сразу поймет, что ему нужно сделать и куда посмотреть.

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

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

Везде, где это возможно, нужно избавиться от надписей на кнопках или под иконками GUI. Все что можно сделать иконками и пиктограммами - нужно делать иконками и пиктограммами. Любое чтение в момент быстрой навигации внутри окна затрудняет восприятие и делает общение между игроком и игрой мучительным. Если вы делаете кнопку, по нажатию на которую открывается карта мира - ну сделайте очень простую и понятную иконку в виде карты, и не нужно подписывать ее текстом. Всегда стоит помнить о такой вещи, как локализация, и то, что на английском будет выражено простыми тремя буквами «map», на немецком может выглядеть как «flugergehaimer».

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

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

Вы спросите: а как же тогда быть с дневниками героя или художественными текстами, сопровождающими историю? Я, наверное, вас разочарую, если скажу правду: такие тексты читает подавляющее меньшинство игроков. Тем не менее, именно эти игроки являются самыми лояльными, именно они выискивают пасхалки и секретные квесты. Но эту аудиторию можно расширить, если сделать подачу информации максимально привлекательной для игрока. Лучшее, что я пока видела на этот счет - это дневник Артура Моргана из Red Dead Redemption 2.

Также можно использовать дневник не как набор художественных записей, а зашифровывать в них подсказки по игре или советы для игрока. Так, например, сделан журнал квестов в The Witcher 3 (см. п.5 психологических принципов).

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

В общем интерфейсе Bonecharms (см. п.1) и в этом интерфейсе крафта есть украшательства: чертежи рун, портрет главной героини, чернильные плашки, неоднородный фон, пятна и прочее. Тем не менее, ни один вензелек и украшение не отвлекают от сути, интерфейс функционален и понятен.

Эта проблема появляется тогда, когда на экране нет акцентов, или когда, наоборот, их настолько много, что ничто конкретное не выделяется для глаза. Акцент - это выделение элементов интерфейса цветом, анимациями, или размером. Помните школьные конспекты, где (ну, хотя бы в самом начале года) вы выделяли зеленой ручкой важное, подчеркивали определения и писали NB! на полях? Так вот, игровому интерфейсу также необходимы свои «нотабене», чтобы сконцентрировать внимание игрока на том, что является важным в каждом отдельном интерфейсе. К тому же игра - это постоянно изменяющаяся и динамичная структура. Меняются ее правила, появляются новые возможности, исчезают старые. На все это нужно сразу обращать внимание игрока.

Выбранное меню Powers — акцент, выбранная способность — акцент, выученные способность — акцент, количество рун — акцент, описание способности — чуть более бледно, около пунктов Lore & Maps и Travel Log — пиктограммы «что-то новое». К вопросу о группировании: Обратите внимание, как разделены интерфейсы. Powers и Enhancements разделены расстоянием и цветом, ветка способности — полупрозрачной подложкой, описание — тоже. Тем не менее, описание и дерево, как более близкие друг к другу по смыслу элементы (один является продолжением другого) находятся ближе, чем дерево и сами скиллы.

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

Больше интересных статей читайте в моем блоге: