Ноты и странности: дизайн интерфейса в Nier: Automata

Хисаёши Кидзима (Hisayoshi Kijima), дизайнер интерфейса и механизмов NieR: Automata, в блоге студии Platinum Games рассказал об основных принципах разработки интерфейса игры на примере работы, которую проделал сам.

Чем занимается дизайнер интерфейса

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

Когда Кидзима разрабатывает дизайн интерфейса, его работа строится примерно так.

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

В этом материале Кидзима описывает первые два этапа — разработка концепта и меню.

Баланс фэнтези и научной фантастики

Мир NieR: Automata во многом опирается на каноны научной фантастики, однако предыдущие части серии (NIER Replicant и Gestalt) были выполнены в эстетике фэнтези. Поэтому, разрабатывая концепт интерфейса NieR: Automata, Кидзима старался сделать так, чтобы научно-фантастические элементы были естественным продолжением фэнтезийных.

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

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

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

От плоскости к форме

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

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

Также Кидзима сделал анимации более плавными, чтобы они интереснее смотрелись на плоских экранах. Изменения были тонкими и едва заметными, но в итоге меню работает гораздо более гладко.

Тёплый бежевый цвет

Первым требованием Йоко Таро, геймдизайнера игры, было «сделать интерфейс приятного, тёплого бежевого цвета». Сказать проще, чем сделать. Как вообще совместить «тёплый бежевый цвет» с холодной цифровой эстетикой?

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

Оригинальная цветовая схема была гораздо более контрастной
Финальный вариант

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

Когда использовать цвет было необходимо, Кидзима выделял элементы грязноватым оранжевым. И в самых редких случаях — белым и бледно-зелёным.

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

Спойлер

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

Концепт-дизайн мини-игры
3D-модели, из которых состоит карта мира

Доступная функциональность

Йоко Таро дал Кидзиме мантру, которой тот руководствовался: «Управление в меню должно быть настолько простым, чтобы его мог легко освоить даже человек, который не знаком с крупными играми. Чтобы даже твоя бабушка могла им пользоваться».

Фундаментальных проблем было две.

  • ​Всеми функциями меню нужно было управлять только джойстиком и клавишами O/X.
  • Подсказок должно было быть очень мало: только объяснения трёх элементов управления из пункта выше.

В игровых меню часто используются клавиши L1 and R1 и не только. Кидзима поначалу пытался реализовать управление без них, но безуспешно: структура меню была слишком сложной. Из-за этого дизайнер часто спорил с Йоко Таро.

В итоге они сошлись на том, что люди, которые уже знакомы с играми, привыкли переключать меню не только стиком и клавишами O/X. Поэтому, хотя про дополнительные клавиши ничего не говорится в подсказках, можно пользоваться L1, R1 и кнопками с треугольником и квадратом.

Между каталогами меню и страницами с данными об оружии можно переключаться с помощью L1 и R1.

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

На карте правый стик и L2/R2 используются, чтобы быстро перейти к полноэкранному режиму.

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

Бонус: необычный интерфейс

На самой первой встрече по поводу интерфейса Йоко Таро сказал, что хотел бы добавить «нечто странное», поскольку игр с нормальным интерфейсом много, а ему хотелось сделать необычную. Однако в процессе разработки игра становилась всё более серьёзной и реалистичной, так что нечто по-настоящему странное в неё добавить было бы сложно.

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

Так выглядит интерфейс после активации функции самоуничтожения
«Ностальгические фильтры», вдохновлённые разными старыми играми

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

Нравится14
Комментарии (11)
  • 9
    Пират Глазастик
    Делайте уже 2 часть автоматы что ль. Видно же, что игра оч удачной вышла во всех смыслах этого слова и что называется куй железо, пока горячо.
  • 0
    Пират Глазастик
    техническая часть у неё не самая удачная, самая скверно работающая игра на Pro, на мой взгляд
  • 9
    Пират Глазастик
    Magnum Boy

    Ну я сейчас имею ввиду саму игру геймплейно/сюжетно/визуально и т.д. Технически вторую часть можно просто лучше вылизать и все.

    Да и про проблемы на пс 4 впервые слышу
  • 1
    Magnum Boy
    Magnum Boy написал:
    техническая часть у неё не самая удачная, самая скверно работающая игра на Pro, на мой взгляд

    Драйвера на свою Нвидиа Pro установи, на консолях то она лучше работает чем на ПК (на ПК без FAR естественно).
  • 2
    JacK_tThe_Ripper
    Пират Глазастик
    Если сейчас 2 часть сделать, то она не так накроет как первая, нужно чтобы время прошло после первой части, чтобы ощущения и чуства остыли и осели.
    И потом если выпустят 2 часть, то она взорвет еще сильней.
  • 6
    Пират Глазастик
    JacK_tThe_Ripper

    На ее разработку уйдет 1.5-2 года в любом случае, так что 2019 год вполне норм дата для выхода 2 части.
  • 0
    Abirvalgo
    Magnum Boy
    так скверно, что близко к 60 кадрам?
    верно. ведь так много игр работает на пс4 в 60 кадров
  • 0
    Tovv
    Пират Глазастик
    Не будет 2-ой части. Скорее всего, если фанаты DoD уламают Скверов, выйдет Ремаст DoD 1,3 и NieR. Хотя насчет послед не уверен. Таро говорил, все зависит от Скверол, увидят ли они в этом выгоду.
  • 0
    JacK_tThe_Ripper
    Пират Глазастик
    Согласен
  • 0
    Пират Глазастик
    это и есть вторая.

    и выглядит намного лучше в плане картинки не такие тусклые тона и без симулятора чернобелого телевизора.
  • 0
    Fate Keeper
    и никто, блин, так и не рассказал, зачем вам нужно в интерфейсе отображение звуковых волн.
B
i
u
Спойлер