10 особенностей пользовательского интерфейса в играх ( 11 фото )
- 25.03.2020
- 2 760
UI, он же «пользовательский интерфейс», не получает достаточного признания от публики.
Каждый раз, когда вы слышите, как кто-то комментирует невероятную графику игры, скорее всего, они имеют в виду модели персонажей, или окружение, или даже эффекты. Но вы можете ли вы себе представить, как кто-нибудь, разглядывая скриншоты очередной Resident Evil, восклицает: «Вау! Посмотри на этот счетчик патронов!»
В том-то и дело, что большинство геймеров, даже те из них, кто провел за играми всю свою сознательную жизнь, не понимают, какие элементы на экране относятся к пользовательскому интерфейсу.
В их представлении UI-дизайнеры отвечают лишь за меню паузы и шкалу здоровья, и все! На самом деле, зона их ответственности куда шире. Почему пользовательский интерфейс нельзя игнорировать? В статье вы найдете ответ на этот вопрос, а также узнаете о некоторых хитростях и особенностях UI в видеоиграх.
Игра заставляет вас «считывать экран»
Одна из первых вещей, с которой начинается знакомство с UI-дизайном, это довольно нелепый термин «экранная недвижимость», который по сути означает доступное пользователю экранное пространство. Но он также подразумевает приоритет и порядок считывания информации с экрана, каждая часть которого имеет свою степень важности.
В большинстве стран принято читать слева направо, на этом и основывается установление приоритета для выдаваемых пользователю порций информации. Приоритет снижается от центра экрана к его краям. Самый центр является наиболее важной областью, далее идет верхний левый угол, а нижний правый угол имеет наименьший приоритет.
Это означает, что наиважнейшие элементы пользовательского интерфейса должны всегда находиться в центре, все остальные – в соответствии со списком приоритетов. Если у персонажа есть важный ресурс, который нужно контролировать каждую секунду, информацию о нем категорически нельзя помещать в нижний правый угол!
Интересный момент: в файтингах у второго игрока зеркальный пользовательский интерфейс – мы инстинктивно ожидаем, что информация будет прочитана в обратном порядке (и большинство из нас может сделать это без каких-либо проблем), и именно поэтому в подобных играх полоски здоровья убывают к центру!
Шкала здоровья не так проста
Шкала здоровья – неотъемлемая часть пользовательского интерфейса, и при разработке этого элемента дизайнеры прибегают к одной хитрости.
Во время игры вы наверняка ведете себя гораздо смелее, если имеете 100% здоровья. Но вы когда-нибудь замечали, что, находясь на последнем издыхании, вы, как правило, изо всех сил стараетесь держаться до конца, цепляясь за этот последний процент?
Ощущение, что вы можете умереть в любой момент, которое длится чуть дольше, чем вы ожидаете, создается специально. И, напротив, верхняя часть шкалы здоровья иногда истощается немного быстрее, чем средняя, зато вы сразу осознаете, что ваш персонаж получил повреждения.
В следующий раз, когда вы посмотрите на панель здоровья, подумайте о следующих числах (они приблизительные, конечно же): от 100% до 90% исчезают в мгновение ока, от 89% до 2% истощаются с нормальной скоростью, и остается вот этот последний один процент, который на самом деле может быть равноценен 10-20 процентам.
Лучший трюк, бесспорно.
Красная виньетка, предрекающая смерть персонажа, почти что в каждой игре
Помните, когда вы получаете слишком много повреждений в игре, экран выглядит так, будто вы тонете в громадной банке с вареньем? Это наиболее впечатляющее использование виньеток, обрамляющих экран, но они также используются для других целей, о некоторых из которых вы, возможно, не знаете.
Поклонникам VR будет интересно узнать, что полноэкранные темные виньетки используются для ограничения поля зрения, дабы игроков не выворачивало наизнанку. Подобный эффект также используется в стандартных шутерах от первого лица, чтобы слегка сузить ваше поле зрения, поместив фокус в центр экрана, или в гоночных играх для придания ощущения скорости. В Overwatch, например, помимо текстового всплывающего окна, почти для каждого эффекта статуса используется уникальная виньетка.
В следующий раз, когда вы запустите современную игру, обратите внимание, сколько экранных виньеток вам попадется и для каких целей они используются. Вы можете быть удивлены – они нужны не только для того, чтобы изображать жидкий кетчуп.
Почему древо навыков ВЕЗДЕ одно и то же
Обидно, когда вы только начинаете игру и совершенно не представляете, что вам нужно делать или куда идти. Хотите верьте, хотите нет, но одной из задач UI-дизайнера и есть разгребание этого беспорядка (если точнее, UI/UX-дизайнера).
Но как объяснить игрокам, куда они должны идти или что им делать, причем так, чтобы не говорить об этом прямо в лоб? Ну, вы можете дать им подсказку… с помощью «путей развития».
Вы можете заметить, что древо навыков состоит из ветвей или, точнее, путей, и благодаря этим путям игрок подсознательно представляет свое место в игре. И графическое представление всех способностей, потенциально доступных для разблокировки, дает игрокам подсказку о том, как им справиться с начатой игрой.
Например, вы в перспективе можете открыть навык, который позволит вашему герою взбираться на покрытые виноградной лозой стены. И вы понимаете: «О, значит, виноградные лозы не просто для красивой картинки». А потом, уже при наличии навыка, будете думать: «Ну, наверное, все, что происходит за этими покрытыми виноградной лозой областями, должно быть действительно важно – и это станет моей целью».
И вуаля – внезапно, просто изучая путь развития и древо навыков, игрок постепенно начинает вникать в повествование.
Каким должно быть хорошее меню для видеоигры
Вы когда-нибудь задумывались о меню, а именно о том, сколько сил уходит на их создание?
Одна из вещей, которыми любят побаловаться команды UX-дизайнеров, это блок-схемы. Учитывая, насколько это низкотехнологичный и простой процесс, вы удивитесь, как часто блок-схемы используются для отображения практически всех аспектов пользовательского опыта.
Это происходит потому, что даже простое на вид меню может иметь вплоть до десятков или даже сотен различных пунктов – как вы выделите каждую опцию? Изменится ли курсор, когда вы выберете нужный вариант? Изменится ли экран? Вам нужно держать кнопку или просто нажать ее?
Вся эта информация быстро начинает выходить из-под контроля, и это еще до того, как вы даже подумаете о добавлении графики. Вот почему скромная блок-схема становится вашим лучшим другом, и вскоре структура многоуровневого меню «Пуск» начинает иметь немного больше смысла.
И все благодаря банальным прямоугольникам и стрелкам!
Почему меню в Dead Space такое особенное
Скорее всего, если вы представляете себе HUD, то думаете о недиегетическом пользовательском интерфейсе. Это пользовательский интерфейс, который существует «вне» игровой вселенной, то есть его элементы видны только в мире игрока, на HUD, а не в мире персонажей.
Возьмем, например, шкалы здоровья в Street Fighter 2 Turbo: вы же не думали, что Рю и Дальсим могут задрать наверх головы и увидеть два огромных зависших над ними цилиндра с индикацией здоровья, не так ли?
Но что если HUD может существовать в мире игры, и персонажи знают об этом? Такие вещи, как всплывающий дисплей, используемый в Dead Space (с этой крайне изящной полосой здоровья вдоль позвоночника на костюме Айзека), или вся жизненно важная информация Артема, отображаемая на его часах в Metro: Exodus – эти элементы существуют в их мире, и поэтому информация идет в оба мира (игры и игрока).
В зависимости от контекста и жанра игры, специалист по пользовательскому интерфейсу должен определить, какой из этих двух вариантов наиболее подходит, так как они оба имеют свои плюсы и минусы.
Например, диегетический может быть лучше для погружения, однако может возникнуть проблема с информативностью (например, пользовательский интерфейс, отображаемый на часах будет показываться игроку только по запросу – не лучшее решение, если вам нужно внимательно следить за своим здоровьем).
Шрифты, локализация и удобочитаемость
Это самая сложная часть для реализации, и этому есть целый ряд причин. Во-первых, дизайнер, потративший несколько недель на разработку аккуратного, разборчивого текстового поля, будет очень расстроен, если потом туда придется впихивать Папируса или Санса с их личными шрифтами.
Во-вторых, в обязанность специалиста по пользовательскому интерфейсу входят размышления о такой сверхважной вещи, как локализация, ведь разные страны используют разные алфавиты.
Нужно проверить, например, все ли символы в выбранном наборе шрифтов поддерживаются на кириллице. Или учтен ли увеличенный размер символов хираганы или кандзи, ведь если составленные предложения могут поместиться в текстовое поле в латинском алфавите, это не значит, что они также удачно расположатся, когда символы будут вдвое шире.
О, и это само собой разумеется, но стоит напомнить еще раз: Comic Sans годится только для 1997 года и мемов про миньонов.
Базовые принципы изображения иконок лута и разблокировки
Обратная связь с игроком – это один из аспектов UX, который кажется простым, но может оказаться чрезвычайно сложно сделать его правильно. Вы по капле подкармливаете своих игроков множеством великолепных первоклассных кусочков наградного добра, или вы придерживаете его и выдаете одну огромную, взрывную, гигантскую награду?
Как бы вы это ни делали, награды должны быть стоящими. И неудивительно, что одним из самых простых способов обозначения высокой ценности является использование образов, которые у игрока ассоциируются с богатством.
Вы, вероятно, не думали о том, как часто вами манипулируют с помощью цветовых кодов. «Важные» предметы всегда имеют фиолетовый (царственный) цвет, а «лучшие» – золотой (это, понятно, цвет денег).
Значки прогресса и победы почти всегда являются розеттами, монетами или трофеями (и даже другие, менее очевидные вещи, такие как звезды, конечно, всегда сделаны из золота) – черт побери, PlayStation отображает ваш персональный уровень в виде ряда трофеев, в то время как Xbox имеет свою собственную валюту (обозначаемую как G или Gamerscore).
Вы можете думать, что приобретаете новую особую силу, или секретную атаку, или даже просто много XP, но в следующий раз, когда экран опять начнет мерцать, обратите внимание, сколько все стоит на самом деле.
Сначала – читаемость, эстетичность – потом
Считается, что графический дизайн и проектирование пользовательского интерфейса абсолютно совпадают в одном ключевом моменте – читаемость должна всегда стоять на первом месте.
Вроде бы это звучит так просто, но плохой пользовательский интерфейс довольно часто бывает плохим, только потому, что его создатели забыли об этом фундаментальном принципе. Игрок должен быть способен бегло считывать информацию пользовательского интерфейса. Если он хоть на секунду останавливается, чтобы понять, единица тут нарисована или семерка, то дизайнер пользовательского интерфейса потерпел неудачу.
Вы когда-нибудь пытались пройти игру с вырвиглазным UI?
Может быть, это была готическая игра, где на HUD располагались красиво нарисованные горгульи, и вы не могли перестать глазеть на их фантастически нарисованные когти, даже когда ваш персонаж оказывался близок к смерти? Или эти существа были просто возмутительно большими или безвкусными?
Любой пользовательский интерфейс предназначен для помощи игроку, а хороший пользовательский интерфейс не должен быть невидимым, он просто должен таким ощущаться.
В этом отношении UI должен быть графически легким, практичным и элегантным, и если вы сможете разобрать его до важнейших составляющих, то вероятность того, что у вас будет читаемый, понятный и эффективный пользовательский интерфейс, будет куда выше.
Пространственный интерфейс
Еще один тип пользовательского интерфейса, который стал незаменимым в последние годы – это пространственный пользовательский интерфейс.
В отличие от типов HUD (диегетического и недиегетического), пространственный пользовательский интерфейс существует в игровом мире для информирования игрока, но для внутриигровых персонажей его нет.
Пространственный пользовательский интерфейс, как правило, встречается в играх с открытым миром – тут может быть все, что угодно, от больших светящихся стрелок, указывающих вам на вашу следующую цель, до иконок над сундуками с сокровищами.
Однако же в наши дни находится все больше недовольных пространственным UI. Среди игроков найдется немало личностей, которые не могут играть в условную Assassin’s Creed, потому что там «экран выглядит как месиво из иконок». Но как иначе, по их мнению, сделать одну из этих проклятых миссий а-ля «следуйте за важным парнем через рынок, так, чтоб он вас не заметил» без маркера миссии? И без маркеров, обозначающих поле зрения? И без больших красных стрелок, предупреждающих, что туда не надо идти, иначе миссия будет провалена?
Конечно, мало кому нравятся миссии сопровождения или преследования, но если вам вдруг нужно выполнить одну из них, то лучше прибегнуть к помощи замечательного пространственного UI.
Каждый раз, когда вы слышите, как кто-то комментирует невероятную графику игры, скорее всего, они имеют в виду модели персонажей, или окружение, или даже эффекты. Но вы можете ли вы себе представить, как кто-нибудь, разглядывая скриншоты очередной Resident Evil, восклицает: «Вау! Посмотри на этот счетчик патронов!»
В том-то и дело, что большинство геймеров, даже те из них, кто провел за играми всю свою сознательную жизнь, не понимают, какие элементы на экране относятся к пользовательскому интерфейсу.
В их представлении UI-дизайнеры отвечают лишь за меню паузы и шкалу здоровья, и все! На самом деле, зона их ответственности куда шире. Почему пользовательский интерфейс нельзя игнорировать? В статье вы найдете ответ на этот вопрос, а также узнаете о некоторых хитростях и особенностях UI в видеоиграх.
Игра заставляет вас «считывать экран»
Одна из первых вещей, с которой начинается знакомство с UI-дизайном, это довольно нелепый термин «экранная недвижимость», который по сути означает доступное пользователю экранное пространство. Но он также подразумевает приоритет и порядок считывания информации с экрана, каждая часть которого имеет свою степень важности.
В большинстве стран принято читать слева направо, на этом и основывается установление приоритета для выдаваемых пользователю порций информации. Приоритет снижается от центра экрана к его краям. Самый центр является наиболее важной областью, далее идет верхний левый угол, а нижний правый угол имеет наименьший приоритет.
Это означает, что наиважнейшие элементы пользовательского интерфейса должны всегда находиться в центре, все остальные – в соответствии со списком приоритетов. Если у персонажа есть важный ресурс, который нужно контролировать каждую секунду, информацию о нем категорически нельзя помещать в нижний правый угол!
Интересный момент: в файтингах у второго игрока зеркальный пользовательский интерфейс – мы инстинктивно ожидаем, что информация будет прочитана в обратном порядке (и большинство из нас может сделать это без каких-либо проблем), и именно поэтому в подобных играх полоски здоровья убывают к центру!
Шкала здоровья не так проста
Шкала здоровья – неотъемлемая часть пользовательского интерфейса, и при разработке этого элемента дизайнеры прибегают к одной хитрости.
Во время игры вы наверняка ведете себя гораздо смелее, если имеете 100% здоровья. Но вы когда-нибудь замечали, что, находясь на последнем издыхании, вы, как правило, изо всех сил стараетесь держаться до конца, цепляясь за этот последний процент?
Ощущение, что вы можете умереть в любой момент, которое длится чуть дольше, чем вы ожидаете, создается специально. И, напротив, верхняя часть шкалы здоровья иногда истощается немного быстрее, чем средняя, зато вы сразу осознаете, что ваш персонаж получил повреждения.
В следующий раз, когда вы посмотрите на панель здоровья, подумайте о следующих числах (они приблизительные, конечно же): от 100% до 90% исчезают в мгновение ока, от 89% до 2% истощаются с нормальной скоростью, и остается вот этот последний один процент, который на самом деле может быть равноценен 10-20 процентам.
Лучший трюк, бесспорно.
Красная виньетка, предрекающая смерть персонажа, почти что в каждой игре
Помните, когда вы получаете слишком много повреждений в игре, экран выглядит так, будто вы тонете в громадной банке с вареньем? Это наиболее впечатляющее использование виньеток, обрамляющих экран, но они также используются для других целей, о некоторых из которых вы, возможно, не знаете.
Поклонникам VR будет интересно узнать, что полноэкранные темные виньетки используются для ограничения поля зрения, дабы игроков не выворачивало наизнанку. Подобный эффект также используется в стандартных шутерах от первого лица, чтобы слегка сузить ваше поле зрения, поместив фокус в центр экрана, или в гоночных играх для придания ощущения скорости. В Overwatch, например, помимо текстового всплывающего окна, почти для каждого эффекта статуса используется уникальная виньетка.
В следующий раз, когда вы запустите современную игру, обратите внимание, сколько экранных виньеток вам попадется и для каких целей они используются. Вы можете быть удивлены – они нужны не только для того, чтобы изображать жидкий кетчуп.
Почему древо навыков ВЕЗДЕ одно и то же
Обидно, когда вы только начинаете игру и совершенно не представляете, что вам нужно делать или куда идти. Хотите верьте, хотите нет, но одной из задач UI-дизайнера и есть разгребание этого беспорядка (если точнее, UI/UX-дизайнера).
Но как объяснить игрокам, куда они должны идти или что им делать, причем так, чтобы не говорить об этом прямо в лоб? Ну, вы можете дать им подсказку… с помощью «путей развития».
Вы можете заметить, что древо навыков состоит из ветвей или, точнее, путей, и благодаря этим путям игрок подсознательно представляет свое место в игре. И графическое представление всех способностей, потенциально доступных для разблокировки, дает игрокам подсказку о том, как им справиться с начатой игрой.
Например, вы в перспективе можете открыть навык, который позволит вашему герою взбираться на покрытые виноградной лозой стены. И вы понимаете: «О, значит, виноградные лозы не просто для красивой картинки». А потом, уже при наличии навыка, будете думать: «Ну, наверное, все, что происходит за этими покрытыми виноградной лозой областями, должно быть действительно важно – и это станет моей целью».
И вуаля – внезапно, просто изучая путь развития и древо навыков, игрок постепенно начинает вникать в повествование.
Каким должно быть хорошее меню для видеоигры
Вы когда-нибудь задумывались о меню, а именно о том, сколько сил уходит на их создание?
Одна из вещей, которыми любят побаловаться команды UX-дизайнеров, это блок-схемы. Учитывая, насколько это низкотехнологичный и простой процесс, вы удивитесь, как часто блок-схемы используются для отображения практически всех аспектов пользовательского опыта.
Это происходит потому, что даже простое на вид меню может иметь вплоть до десятков или даже сотен различных пунктов – как вы выделите каждую опцию? Изменится ли курсор, когда вы выберете нужный вариант? Изменится ли экран? Вам нужно держать кнопку или просто нажать ее?
Вся эта информация быстро начинает выходить из-под контроля, и это еще до того, как вы даже подумаете о добавлении графики. Вот почему скромная блок-схема становится вашим лучшим другом, и вскоре структура многоуровневого меню «Пуск» начинает иметь немного больше смысла.
И все благодаря банальным прямоугольникам и стрелкам!
Почему меню в Dead Space такое особенное
Скорее всего, если вы представляете себе HUD, то думаете о недиегетическом пользовательском интерфейсе. Это пользовательский интерфейс, который существует «вне» игровой вселенной, то есть его элементы видны только в мире игрока, на HUD, а не в мире персонажей.
Возьмем, например, шкалы здоровья в Street Fighter 2 Turbo: вы же не думали, что Рю и Дальсим могут задрать наверх головы и увидеть два огромных зависших над ними цилиндра с индикацией здоровья, не так ли?
Но что если HUD может существовать в мире игры, и персонажи знают об этом? Такие вещи, как всплывающий дисплей, используемый в Dead Space (с этой крайне изящной полосой здоровья вдоль позвоночника на костюме Айзека), или вся жизненно важная информация Артема, отображаемая на его часах в Metro: Exodus – эти элементы существуют в их мире, и поэтому информация идет в оба мира (игры и игрока).
В зависимости от контекста и жанра игры, специалист по пользовательскому интерфейсу должен определить, какой из этих двух вариантов наиболее подходит, так как они оба имеют свои плюсы и минусы.
Например, диегетический может быть лучше для погружения, однако может возникнуть проблема с информативностью (например, пользовательский интерфейс, отображаемый на часах будет показываться игроку только по запросу – не лучшее решение, если вам нужно внимательно следить за своим здоровьем).
Шрифты, локализация и удобочитаемость
Это самая сложная часть для реализации, и этому есть целый ряд причин. Во-первых, дизайнер, потративший несколько недель на разработку аккуратного, разборчивого текстового поля, будет очень расстроен, если потом туда придется впихивать Папируса или Санса с их личными шрифтами.
Во-вторых, в обязанность специалиста по пользовательскому интерфейсу входят размышления о такой сверхважной вещи, как локализация, ведь разные страны используют разные алфавиты.
Нужно проверить, например, все ли символы в выбранном наборе шрифтов поддерживаются на кириллице. Или учтен ли увеличенный размер символов хираганы или кандзи, ведь если составленные предложения могут поместиться в текстовое поле в латинском алфавите, это не значит, что они также удачно расположатся, когда символы будут вдвое шире.
О, и это само собой разумеется, но стоит напомнить еще раз: Comic Sans годится только для 1997 года и мемов про миньонов.
Базовые принципы изображения иконок лута и разблокировки
Обратная связь с игроком – это один из аспектов UX, который кажется простым, но может оказаться чрезвычайно сложно сделать его правильно. Вы по капле подкармливаете своих игроков множеством великолепных первоклассных кусочков наградного добра, или вы придерживаете его и выдаете одну огромную, взрывную, гигантскую награду?
Как бы вы это ни делали, награды должны быть стоящими. И неудивительно, что одним из самых простых способов обозначения высокой ценности является использование образов, которые у игрока ассоциируются с богатством.
Вы, вероятно, не думали о том, как часто вами манипулируют с помощью цветовых кодов. «Важные» предметы всегда имеют фиолетовый (царственный) цвет, а «лучшие» – золотой (это, понятно, цвет денег).
Значки прогресса и победы почти всегда являются розеттами, монетами или трофеями (и даже другие, менее очевидные вещи, такие как звезды, конечно, всегда сделаны из золота) – черт побери, PlayStation отображает ваш персональный уровень в виде ряда трофеев, в то время как Xbox имеет свою собственную валюту (обозначаемую как G или Gamerscore).
Вы можете думать, что приобретаете новую особую силу, или секретную атаку, или даже просто много XP, но в следующий раз, когда экран опять начнет мерцать, обратите внимание, сколько все стоит на самом деле.
Сначала – читаемость, эстетичность – потом
Считается, что графический дизайн и проектирование пользовательского интерфейса абсолютно совпадают в одном ключевом моменте – читаемость должна всегда стоять на первом месте.
Вроде бы это звучит так просто, но плохой пользовательский интерфейс довольно часто бывает плохим, только потому, что его создатели забыли об этом фундаментальном принципе. Игрок должен быть способен бегло считывать информацию пользовательского интерфейса. Если он хоть на секунду останавливается, чтобы понять, единица тут нарисована или семерка, то дизайнер пользовательского интерфейса потерпел неудачу.
Вы когда-нибудь пытались пройти игру с вырвиглазным UI?
Может быть, это была готическая игра, где на HUD располагались красиво нарисованные горгульи, и вы не могли перестать глазеть на их фантастически нарисованные когти, даже когда ваш персонаж оказывался близок к смерти? Или эти существа были просто возмутительно большими или безвкусными?
Любой пользовательский интерфейс предназначен для помощи игроку, а хороший пользовательский интерфейс не должен быть невидимым, он просто должен таким ощущаться.
В этом отношении UI должен быть графически легким, практичным и элегантным, и если вы сможете разобрать его до важнейших составляющих, то вероятность того, что у вас будет читаемый, понятный и эффективный пользовательский интерфейс, будет куда выше.
Пространственный интерфейс
Еще один тип пользовательского интерфейса, который стал незаменимым в последние годы – это пространственный пользовательский интерфейс.
В отличие от типов HUD (диегетического и недиегетического), пространственный пользовательский интерфейс существует в игровом мире для информирования игрока, но для внутриигровых персонажей его нет.
Пространственный пользовательский интерфейс, как правило, встречается в играх с открытым миром – тут может быть все, что угодно, от больших светящихся стрелок, указывающих вам на вашу следующую цель, до иконок над сундуками с сокровищами.
Однако же в наши дни находится все больше недовольных пространственным UI. Среди игроков найдется немало личностей, которые не могут играть в условную Assassin’s Creed, потому что там «экран выглядит как месиво из иконок». Но как иначе, по их мнению, сделать одну из этих проклятых миссий а-ля «следуйте за важным парнем через рынок, так, чтоб он вас не заметил» без маркера миссии? И без маркеров, обозначающих поле зрения? И без больших красных стрелок, предупреждающих, что туда не надо идти, иначе миссия будет провалена?
Конечно, мало кому нравятся миссии сопровождения или преследования, но если вам вдруг нужно выполнить одну из них, то лучше прибегнуть к помощи замечательного пространственного UI.
Материал взят: Тут