Оформление и расположение пользовательского интерфейса.

Добавлен , опубликован

Цикл статей о пользовательском интерфейсе

Содержание:
В предыдущей статье мы (надеюсь) получили какие-то знания о том, каким может быть пользовательский интерфейс. Как там было сказано, что отсутствие какой-либо информации о том, что происходит в игре, вредно сказывается на её восприятии.
Важность элементов интерфейса, конечно же, зависит от жанра игры. Вам, скорее всего не понадобится показатель всего оружия, которое есть у Вашего персонажа, если Вы играете в РПГ, но этот элемент достаточно важен, если жанром игры является экшен. Поэтому вам придется решать, какие элементы включать в игру, а какие нет.
В этой статье будут разобраны желательные условия расположения основных элементов графического интерфейса. Отдельные элементы – инвентари из РПГ, деревья умений и шкалы построения зданий будут затронуты, но пока не описаны.
Вопрос первый: Куда мы смотрим? (правильно на грудь в глаза)
Поскольку мы смотрим не на картину и не на кадр из фильма, в игре, где все действия зависят от Вас, взгляд концентрируется на центре экрана. Как Вы понимаете, центру экрана лучше быть менее нагруженной частью из всех и что расположение на нём множества элементов усложнит восприятие игры. Важно заметить, что для некоторых видов игр не все так просто, например, в стратегиях центром концентрации внимания является курсор мыши.
На иллюстрации изображены области желательного расположения графических элементов интерфейса. Чем больше загружены «не заштрихованные» части экрана, тем сложнее воспринимается происходящее на экране. Как было сказано выше: центр внимания - центр экрана. Угловые части экрана выпадают из поля концентрации внимания, что позволяет забыть о существовании интерфейса и больше погрузиться в процесс игры.
К примеру, расположение интерфейса сильно затрагивает геймплей экшенов. Элементы интерфейса с правого и левого края экрана ограничивают обзор и приводят к постоянному вращению головой. Интерфейс, расположенный по верхнему краю экрана не сильно влияет на игру, загораживая происходящее у Вас над головой, а как красиво бы там не было – красота Вас не убьет (если, конечно же, это не задумка игры). Если же загородить нижнюю часть экрана, то у игрока исчезнет возможность наблюдать за шикарно раскрашенной землей, но это он переживет намного легче летящих с обеих сторон пуль и вялящихся с неба вертолетов. Хоть многие разработчики утверждали, что у них будут не только горизонтальные, но и вертикальные сражения в играх, человеку намного важнее горизонтальный угол обзора.
К тому же игрок – скорее всего, является пользователем компьютера. Эта банальность ведет нас к интересному наблюдению – игроки лучше воспринимают элементы, расположенные в углах экрана. Это обусловлено тем, что в операционных системах часто используемые (привлекающие внимание) элементы (кнопка меню пуск, кнопка быстрого закрытия программы, кнопка вызова меню «файл» и индикатор времени) расположены именно там.
Не смотря на то, что весь предыдущий параграф утверждал, что середина экрана должна содержать не больше прицела, есть игры, которые умудряются вместить туда большее и не ухудшить восприятие происходящего в игре. Примером тому служит Half-Life 2.
Прицел слева и права обогнут тонкими показателями здоровья и патронов. Этот гениальный элемент показывает, что нет правил, есть только пожелания к созданию интерфейса.
Теперь мы имеем предположение о желательных областях расположения графического интерфейса, но какие именно элементы интерфейса нам лучше туда поставить?
Для этого мы должны знать: Какая информация будет необходима игроку на всём протяжении игры?
Именно на всем протяжении игры. Это те элементы, которые помогут игроку узнать, что происходит в игре и от которых зависит успешное прохождение игры. Поскольку жанров игр много, а тем более целей, которых игроки должны достичь в них, трудно выделить конкретные элементы, которые должны обязательно присутствовать на экране.
В игре с возможностью прокачки способностей главного героя нужно чтобы был, видим набранный опыт? Смотрим на серию игр Batman и видим, показатель наборного уровня появляется только при его пополнении или в отдельном меню. В стратегиях необходима информация о возможных вариантах зданий, которые Вы можете построить? Конечно! Но будет куда рациональней выделить для нее отдельное меню, чем вывести полный список на экран. Это также касается инвентарей и деревьев развития умений в РПГ, потому что их постоянное присутствие на экране не является необходимостью.
Некоторые интерфейсы имеют исчезающие элементы, которые видны только при определенных событиях в игре. Интерфейс позволяет игроку забыть некоторые показатели, а как только игра (разработчик) сочтет нужным вернуть игроку возможность более детального анализа ситуации, скрытые элементы появляются. Такими особенностями обладают интерфейсы Counter-Strike: Global Offensive и Tomb Raider.
В Counter-Strike исчезающий элемент это инвентарь вашего снаряжения, который появляется при переключении с одного оружия на другое и при прибавлении нового оружия. При этом отражается все снаряжение, в отличие от предыдущих игр серии. Этот элемент держится видимым некоторое время после его использования, обеспечивая игрока возможностью заметить все находящееся у него снаряжение. В случае же с Tomb Raider исчезают все показатели – если учесть что, показатель здоровья персонажа изначально интегрирован в игру, то счетчик патронов будет отражаться на экране, только когда Вы находитесь в бою.
Когда создаете графический интерфейс, Вы решаете, какие элементы будут отражены на нём, а какие нет. Но отсутствие важной информации очень вероятно испортит игру, а перенасыщенный элементами интерфейс будет только раздражать. Чем больше Вы дадите игроку информации о происходящем в игре, тем больше у него будет возможностей для планирования его дальнейших действий.
Как разместить больше информации на экране?
Разработчик должен понимать, что при всём его желании вывести всю нужную информацию на экран, он не должен перегружать интерфейс. Погоня за увеличением количества информации на экране часто приводит к тому, что интерфейс уменьшается в размерах и вместо словесных обозначений занимают значки и символы.
В случае уменьшения элементов интерфейса можно наблюдать повышение сложности его восприятия. Примером тому служит игра Infinite Crisis.
Понимаю, что у многих жителей Земли есть мониторы диагональю 20’ и выше и если находиться близко к такому экрану, весь текст Вы с легкостью прочтете, но для восприятия всей «картины» игры, Вы должны находиться на удалении от экрана, что превращает все числовые показатели и текст в подобие волнистых полос. Информация, написанная маленьким шрифтом, в этой игре не несет в себе крайней важности, но это неприятно и неудобно, когда вам на десерт предлагают яблоко, выпиленное из гранита.
Выбор многих разработчиков падает на замену названий значками и символами. Здесь сталкиваемся с ситуацией, когда нужно выбрать символ, который будет отражать слово, которое он заменяет и одновременно должен быть понятен игроку. Здесь берутся многим знакомые символы, например: сердце – знак здоровья, шит – знак зашиты, монета или слиток – знак денег. Также используются уникальные символы, к которым приписаны названия в одном из многочисленных меню игры.
Наравне с использованием символов используют замену числовых значений на полосы и шкалы. Это используется не только для сокращения места, которое занимает интерфейс, но и, в некоторых случаях, для упрощения получения информации игроком. Как уже приводился пример, в файтингах используются шкалы жизни, а не цифровые показатели. Это связано с высокой скоростью происходящего на экране, требующей постоянной концентрации от игрока.
Стоит заметить, что уменьшение полос в сторону левого и правого края экрана (то есть от центра), заставляет искать их значение глазами и отрываться от происходящего в игре. Глаз замечает рамку (если она есть) полосы, которая находится ближе к центру и если не находит её наполнения, то ему приходится делать второе движение в сторону от центра экрана, где если не забыли, происходит самое интересное, в поисках значения. Скорее всего, Вы даже не заметите это «второе движение», но оно собьет Вашу концентрацию. Поэтому такие элементы желательно располагать либо ближе к центру экрана (Diablo 3), либо предусмотреть, чтобы уменьшение их показателей не шло в ближайшую к краю экрана сторону.
И еще одна важная сторона использования полос вместо цифровых значений – если количество число возможных изменений не велико, то лучше использовать числовые показатели или же разделенную полосу (несколько коротких связанных в цепочку полосок). Если конкретно, то речь идет о ситуации, где, к примеру, обойма пистолета, вмещающая 7 патронов, обозначается сплошной полосой. Сплошные полосы, уменьшающиеся скачками, плохо отражают информацию, так как их резкое изменение привлекает излишнее внимание.
Не забывайте, что вы можете совмещать все возможности наполнить экран более детальной информацией. Одновременное использование всех вышеприведенных приемов можно наблюдать в Borderlands 2.
Интеграция графических элементов интерфейса в игру также увеличивает количество информации, вмещаемое экраном, и не сильно отвлекает от игры. Примером тому служит распространенная замена показателей жизни индикатором ранений (всплески крови по краям экрана), покраснением или обесцвечиванием экрана. Эти приемы не требуют отдельного места на экране, оставляя больший угол обзора. Также примером служит достаточно распространенный элемент в стратегиях – разрушающаяся модель зданий.
И здесь разработчик сталкивается с усложнением восприятия созданного им интерфейса. Сокращения и аббревиатуры требуют расшифровки, символы должны быть понятными, а полосы и шкалы, если не обозначены, могут отражать только изменение каких-то параметров.
Как сделать интерфейс понятным?
Возможность первая: использовать всеми понятные символьные обозначения (сложный вариант). Возможность вторая: создать отдельное меню, описывающее весь Ваш, отраженный на экране, интерфейс (неразумный вариант). Возможность третья: раскрасить Ваш интерфейс разными цветами – её и рассмотрим.
В играх можно заметить тенденцию к моноколоризации интерфейса. Assassin’s Creed, Counter Strike: Global Offensive, Splinter Cell (Conviction), The Elder Scrolls: Skyrim, Tomb Raider, Wolfenstein the New Order – далеко не весь список игры поддавшихся этой тенденции. Несомненно, это является заслугой дизайнеров – создание понятного интерфейса, используя в основном один цвет, но они используют также и другие методы отзывчивости, о которых прочтете немного позже.
Сейчас же вернемся к цветам. Если выстроить логическую цепочку, почему в играх показатель жизни обозначается красным, мы получим примерно вот что: Символ жизни сердце – сердце бьется за счет крови, кровь имеет красный цвет – красный цвет является цветом жизни. То есть, проводя примерно такие цепочки, Вы можете раскрасить все элементы Вашего интерфейса в цвета, легче воспринимаемые игроками. Для этого стоит обратиться к традициям использования цветов, не только игровым (синий цвет – цвет манны), но и реальным (багровый цвет – цвет аристократии) и к стереотипам (черный цвет – цвет смерти).
Во многих жанрах уже сложились традиции использования некоторых цветов, чтобы обозначать отдельные состояния. Красным цветом выделяют показатели, количество которых считается низким, по сравнению с максимальным, не только в стратегиях, но и во многих шутерах. Также красным цветом выделяют символ/надпись невозможности чего-либо сделать или элементы на карте, обозначающие врагов. Все потому что красный цвет вызывает чувство тревоги и сильно привлекает внимание.
Еще пару слов о моноколоризации интерфейсов – в случае если вы решили использовать лишь один цвет в оформлении интерфейса Вашей игры, избегайте цвета, которые вероятно сольются с происходящим в игре (если это не является задумкой). Здесь пример будет, с одной стороны, искусственно созданный, но наглядный.
Насколько хорошо Вам заметно количество патронов? В опциях меню Counter Strike есть возможность включить затемнение за цифрами, исключающее такую ситуацию, но если такой опции нет, игроки столкнутся с недостатком информации, а игра с волнами ненависти из-за непродуманного интерфейса.
От этого разработчика может спасти вставка за показателями фона или дополнительных деталей. С добавлением фона все просто, а вот про дополнительные детали придется задуматься. Прежде всего, желательно не разрывать стили интерфейса – если весь текст написан древней прописью, а дополнительные детали выдержанны в стиле Hi-Tech, это будет выглядеть (в большинстве случаев) неслаженно. Примером такого способа оформления является интерфейс игры Deus Ex: Human Revolution. Все текстовые элементы интерфейса игры выделены рамками, не допускающими исчезновения интерфейса в деталях уровней игры.
И не стоит сразу бежать от блеклых тонов и бросаться в объятия к пестрым цветам (лучше бросится в объятья к пышногрудой красавице или накачанному парню – это уже от Вас зависит). Пестрый текст не только сложно читать, но он еще и отвлекает от всего происходящего за ним, и раздражает, и утомляет – не используйте пестрые оттенки, если они не являются основоположными для темы игры (Wolf Among Us).
У Вас есть еще одна возможность (четвертая). Если Вы решили создать интерфейс, не превращая его в радугу, то Вам важно знать, как еще можно привлечь внимание игрока к тому, что игре нужно.
Любое движение привлекает взгляд человека. Если в нужный момент элементы интерфейса будут, например, увеличиваться/уменьшаться, то игрок может перевести внимание на этот элемент. Причем чем более резкое изменение размера, тем более вероятно привлечение внимания к объекту. Изменение формы элементов и их перемещение по экрану, привлекает внимание игрока к информации, которую игре нужно показать ему.
Большое разнообразие изменяющих размер элементов уже используются в играх. Причем изменение размера может являться едва заметной вибрацией элемента как, например, было сделано в Splinter Cell: Conviction со счетчиком патронов. При использовании патронов показатель не изменяет размер, при перезарядке показатель увеличивается, и становиться прежним при завершении анимации, а при попытке перезарядится при полной обойме, показатель вибрирует. Другое использование изменения размера можно наблюдать в Devil May Cry – в счетчике комбо, когда число набранных очков сменяется следующим. Новое число имеет больший размер, но за несколько десятков миллисекунд размер сравнивается с предыдущими числами.
Можно сказать, что интерфейс Watchdogs, со всеми выплывающими окнами заданий и подсказок, сделан скорее для дизайнерской составляющей, но выплывающие с краёв экрана окна привлекают внимание больше, чем внезапно появившееся аналог. В Watchdogs очень много движущихся, появляющихся и изменяющихся в размере элементов, что дает игроку множество информации, но иногда рассевает внимание. Причем основное количество информации игра предоставляет игроку после ожесточенных битв, что уменьшает вероятность заслонения угла обзора.
Отличный пример перемещения элементов интерфейса можно найти и в игре Borderlands 2. Если персонаж далеко от цели, то её местонахождение отражается на карте, но при приближении вейпоинт перемещается с карты к нужному миссии объекту, позволяя одновременно не отрывать глаз от происходящего в игре и знать, где игроку требуется быть.
Изменение формы и местоположения тоже не последняя возможность привлечения внимания.
Добавление свечения элементу имеет такой же эффект, как и изменение его размера. Создание такого эффекта (изменением текстуры или шейдера разумеется) выделяет элемент на фоне других. Пример – Half-life 2, где моноколоризированный интерфейс помогал игроку ориентироваться в списке оружия, именно создавая иллюзию подсвечивания выбранного элемента.
«Подсветка» также очень полезна, если в игре присутствует возможность настроить расположение некоторых элементов интерфейса. В основном речь идет о РПГ и их быстрых меню способностей. Перетаскивая значок способности с одного места на другое во многих играх именно «подсветкой» обозначается то, что значок способности будет закреплен в выбранном месте.
Кроме увеличения яркости элементов интерфейса в играх также присутствует и уменьшение яркости. Оно используется для обозначения не возможности использования определенных функций, которые были доступны. Отводя определенный, не несущий пользы, элемент на второй план, игрок концентрируется на доступных ему возможностях.
Чтобы интерфейс не занимал много места и был понятен и информативен, лучше использовать сразу несколько методов выведения информации на экран.
В некоторых играх могут быть недопустимы некоторые из приведенных методов из-за специфики дизайна. Также в некоторых играх жанр диктует обязательное использование некоторых из приведенных методов. Интеграция интерфейса в игру сокращает занимаемое им место. Отдаление от игрового мира обеспечивает полное и легкое восприятие информации. Анимированные элементы привлекают внимание игрока к нужной информации, но их множество рассевает его внимание и отвлекает его от игры.
Это балансировка между легко и сложно воспринимаемым интерфейсом. Одни методы компенсируют недостатки других (текст маленького шрифта увеличивается при наведении на него), но использование некоторых усугубляет уже сложную ситуацию (пестрый движущийся текст очень сложен для восприятия).
Как уже было сказано, нет правил создания интерфейса, есть только желательные условия. Остальное остается за разработчиком – за Вами.

Содержание
`
ОЖИДАНИЕ РЕКЛАМЫ...
0
29
10 лет назад
0
Мб стоит тогда объекденить статьи? Эти сделать как подстатьи и прекрепить к вступительной статье?
Как тут сделано xgm.guru/p/gamedev/udk-level
0
30
10 лет назад
0
обширно, подробно, и на этот раз с примера из реальных игр...
но показалось, что шуточка про пышногрудую девицу была излишня...
а так, неплохо...

читая интерфейс, почему-то сразу вспомнился neverhood, где обошлись без него..)
0
26
10 лет назад
0
Андреич, если там вообще нет интерфейса, значит, нет инфы, которую надо стабильно показывать. В квестах вообще нужны только иконки в стиле "Журнал", "Инвентарь", "Опции", и соответственные окна.
Кстати, можно было бы упомянуть интерфейс Dead Space, который интегрирован в игровой мир - здоровье на спине, патроны на оружии. Впрочем, в Dead Space это не очень хорошо реализовано - враг за спиной может прикрыть показатель здоровья собой.
Похожее касается некоторых других игр. Если не ошибаюсь, интерфейс Split/Second тоже показывается впритул к машине, прямо у нее под бампером, а счетчик времени круга нарисован в некоторых местах на стенах возле трассы. Он большой, поэтому бросается в глаза, и игроку не нужно отвлекаться от дороги.
0
14
10 лет назад
0
lentinant, я собираюсь написать отдельно (подробно) про интеграцию интерфейсов и там обязательно использую Dead Space, а про Split/Second я забыл (спасибо), так что посмотрю.
3
29
10 лет назад
3
Кстати, можно было бы упомянуть интерфейс Dead Space, который интегрирован в игровой мир - здоровье на спине, патроны на оружии. Впрочем, в Dead Space это не очень хорошо реализовано - враг за спиной может прикрыть показатель здоровья собой.
Это часть замысла была. На самом деле там очень классно сделан интерфейс
Чтобы оставить комментарий, пожалуйста, войдите на сайт.