Игровой интерфейс по примеру: курс краха в хорошем и плохом

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

Введение

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

Составной скриншот из пчелиного меда 3 матча. Левой верхней половине отображается в зелено-слепой режим ColorOracle; нижняя-правая половина является оригинальным. Примерно 1 на 100 человек Зеленый-слепой, и эта игра является почти недоступным для них.

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

Что UI и UX?

 Условия UI и UX иногда (неправильно) используются как синонимы, но они имеют конкретный смысл.

Интерфейс, или интерфейс пользователя, указывает на методы, (контроль клавиатуры, управление мышью) и интерфейсов (экран инвентаря, экран карты), через который пользователь взаимодействует с вашей игрой. UX или опыт пользователя, относится к тому, как интуитивно понятный и приятный этих взаимодействий.

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

Что делает хорошую уй делать?

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

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

Мы можем пойти дальше и свести процесс проектирования пользовательского интерфейса на шесть основных вопросов:

1. Этот интерфейс скажи мне, что мне нужно знать прямо сейчас?
2. Легко ли найти информацию я ищу, или мне придется искать его? (Меню вложенные настолько глубоко, что они скрывают информацию от игрока?)
3. Могу ли я использовать этот интерфейс без необходимости читать инструкции в другом месте?
4. Вещи, которые я могу сделать на этот очевидный экране?
5. Мне не нужно ждать интерфейс для загрузки или воспроизведения анимации?
6. Есть ли утомительно или повторяющихся задач, которые можно укоротить (с помощью горячей клавиши, например) или удалить?

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

Дело в точку

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

The Pipboy - Fallout 3 Gameplay

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

Как Я Могу Практике Проектирования УИС?

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

Примечание редактора: и всегда наша сестра Webdesigntuts сайте+...

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

Кто должен разрабатывать игры пользовательского интерфейса?

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

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

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

Игры С Плохим УИС

Прежде чем попасть в это, важно понять, что когда я говорю о БАД Исю, я делаю, что приговор основан на идеи и модели поведения, которые я приношу его как ПК геймер, который играет в игры с клавиатурой и мышью.

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

Забвение

Интерфейс Обливиона-это классический пример одной платформы пользовательского интерфейса быть несовместимы с другой. Хотя Обливион был портирован с консолей на ПК, он все еще сохранил свой контроллер-ориентированного пользовательского интерфейса. Это полная аналогия с выпуском игры на iOS или Android и позволяет игроку перемещать на экране курсор вокруг, как они используют трекпад ноутбука, вместо того, чтобы пользуясь абсолютным сенсорного позиционирования.

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

Я надеюсь, ты не против просмотра шести элементов одновременно; эти окна не регулируется. Фактическая часть меню, который передает необходимую информацию, такую как содержимое вашего инвентаря, использует только 21,7% от общей площади экрана при разрешении 1920x1080.

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

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

Забвения тоже не хватает ярлыков. Там нет кнопки на карте, чтобы вывести на карту, вы должны нажать на компас, чтобы вывести на вкладке карта. Нет быстро продать ключ или продать контекстного стека, вы должны работать на количество ползунок с помощью мыши и подтвердите выбор нажатием кнопки или клавиши Enter. Нет стандартной кнопки для выхода из окна (побег в большинстве игр), так что выход из разных окон осуществляется нажатием или Е разделе, бежать или какая-нибудь другая клавиша.

Сиквел, Скайрим, пойдет на исправить некоторые из этих проблем, но некоторые остаются или становятся хуже. На самом деле я застрял в первый раз, когда я открыл сундук в Skyrim: побег не вытащить меня из этого окна; - инвентаризацию не вам меня; пытается использовать грудь снова не понял меня.   Не было кнопки, которую вы могли бы щелкнуть, чтобы выйти, или подсказки, в которой говорилось, что делать.  Нет кнопки вы можете нажать на выход или подскажем, что вам сказал, что делать. Щелкните за пределами окна не работают. Думаю, что ключ, наконец, позвольте мне покинуть грудную клетку? Обшить/готовое оружие, конечно.

Далеко Плакать 3

 Меню далеко плакать 3 это очень неудобно для пользователей ПК.  Иногда не реагируют на нажатия, так что вам придется нажать три раза; меню может занять некоторое время, чтобы загрузить, это не очень эффективно - вы знаете, дело теперь.

Он был исправлен, так что я собираюсь сосредоточиться на состоянии ее в игре HUD, когда он был впервые выпущен. Давайте начнем с изучения HUD в своего предшественника, Far Cry 2 через.

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

 Теперь давайте посмотрим на далеком расстоянии 3-х Худ.

Далеко плакать 3-х HUD не оставит вас в покое.  Мне трудно показать это на скриншотах или видео, это просто нечто, что вы испытываете, как игрок, который постоянно рванула обратно в реальность. Это создает ощущение клаустрофобии.

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

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

Игры С Хорошей УИС

Но давайте не тратить все это время говорим о плохих УИС. Великие примеры УИС приходят из игр, которые признают ограничения и сильные стороны своей системы.

Морровинд

Большинство геймеров согласятся, что Морровинд (предшественник Обливиона) обладает одной из лучших компьютерных УИС вокруг - за исключением одного вопроса, который я буду говорить о ниже.

Давайте рассмотрим основные элементы этого экрана.

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

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

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

За гранью добра и зла

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

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

Beyond good & evil name input interface

Ну я был немного несправедлив.  Другие клавиатуры-стиль ввода текста-экраны позволяют удерживать направление и прокручивать все ключи последовательно, но они часто имеют задержку перед началом прокрутки на полной скорости, или они не выделите достаточно быстро. (Вспомним фундаментальный вопрос, "Неужели я когда-нибудь понадобится, чтобы дождаться интерфейс для загрузки или воспроизведения анимации?")

Родной

Родной сломал землю в 1999 году как первая RTS с истинно трехмерные движения. Будучи в состоянии двигаться блоки по трем осям был новый вызов дизайн, и абсолютно родной поставляются со стилем и элегантностью. Проблема: как представить 3D движение на 2D плоскости (монитора).

Решение: во-первых, имеет дело с традиционной горизонтальной плоскости, что игроки привыкли.

Затем, дело с дополнительной вертикальной плоскости.

Экране движение также дает игроку некоторые тонкие, но мощные инструменты:

• Обратите внимание на компас кольцо за пределами диапазона движения этих разведчиков. Карты мира все остальное-большие и пустые, и заголовки компас важны для ориентирования в локальном пространстве.
• Посмотрите, как легко видеть линии, которые составляют функциональную часть экрана. Некоторые игры пытаются согласовать свои элементы пользовательского интерфейса с игровым миром, делая их бледными и прозрачными, но не родной. Империя: тотальная война-хороший контр-пример здесь. Обстрел индикатор дуги выполнены из тонкой красной линией, окаймленной белым пятном, и он органично вписывается в ландшафты довольно часто. Слава Богу, для модов и модостроителей.
• Есть хороший перекрестие в центре движения кругом круг, и он всегда указывает на центр выбранного образования. Без этого, вам придется искать полоски здоровья из выбранных кораблей, чтобы выяснить, где они находятся, и здоровья может быть довольно маленьким и темным, когда корабль поврежден.
• Линии движения обеспечивает перемещение расстояние, удобное для оценки транзитного времени на карту без очевидных ориентиров.
• Посмотрите на комбайн корабль чуть впереди разведчиков. Есть линия, торчащую его, разрывая в малом круге выше. Этот круг находится на горизонтальной плоскости разведчиков (зеленый кружок). Это насколько ниже или выше этой плоскости комбайн на самом деле. С этими двумя показателями, двигаясь в направлении судно-это быстрый и точный: перемещение по горизонтали маркер самолета на диск, затем перетащите вниз до нижней линии, чтобы установить вертикальную плоскость.

 Крусейдер Кингс 2

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

Подсказка выглядит немного бестелесным, потому что указатель не запечатлен на скриншотах.

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

Вы можете посмотреть на это и сказать, "Да, подсказки были вокруг навсегда. Конечно надо высунуться, когда я парить над чем-то". Просто имейте это в виду, как легко забыть.

Долина Без Ветра

Одно место, где очень легко забыть о подсказках в переднюю меню вашей игры. Вот для подсказки в долине без меню параметров ветра.

 Вот для подсказки в Халф Лайф 2: Эпизод 2 это меню.

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

Цивилизация 5

Экран город Сив 5 является прекрасным примером сделать быстро доступной информации.

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

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

Заключение

Давай сформулировать шесть основных вопросов проектирования пользовательского интерфейса, как шесть общих принципов:

1.   Предскажите, что пользователь хочет знать, и дайте им эту информацию.
2.  Информация должна быть легко найти.
3. Пользовательский интерфейс должен быть простым в использовании и навигации. Использовать установленные шаблоны, где вы можете: все знают, что Ctrl-клик добавляет элементы на выбор, так что не сделать его элементов вместо замены.
4. Сделайте местоположения пользователя в системе меню очевидно, а очевидно, где пользователь может пойти и что они могут делать.
5. Минимизировать время загрузки и избежать анимации в меню.
6.  Ликвидировать или упростить повторяющиеся задачи.

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