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

Как сделать плоский дизайн интересным.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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