Интерфейс как важный художественный элемент на примере Persona 5
«Теперь нам очевидно, что красота не может проистекать из функции, она должна стать таким же исходным требованием, как функция, так как тоже является функцией»
Макс Билль
▸ Концепция ▸ Разработка игры ▸ Анализ интерфейса ▸ Заключение ▸ Источники
Промо-арт
Persona 5 — японская ролевая видеоигра, выпущенная в 2016 году и созданная студией P-Studio, входящей в состав компании Atlus. Это шестая часть серии игр Persona и часть франшизы Megami Tensei.
Игры не связаны одной сюжетной линией, каждую часть можно считать законченной самостоятельной историей, однако то, что выделяет и объединяет последние три части среди других — это схожий пользовательский интерфейс (UI), наиболее примечательный и запоминающийся в последней части. В это понятие входит визуальная составляющая функциональных частей игры, например, меню, индикаторы здоровья, инвентарь и т. д.
Многие считают, что пользовательский интерфейс не является ключевым в разработке игр, выделяя этому аспекту меньшее количество времени и ресурсов. Однако взаимодействие игроков с миром игры во многом зависит от качественного и удобного пользовательского интерфейса. Он служит точкой взаимодействия между человеком и игрой.
Основная цель UI — обеспечить эффективное выполнение задач продукта, преподнести информацию просто и понятно, а также упростить взаимодействие игрока с функционалом игры.
Современные игры чаще всего прибегают к минималистичным интерфейсам для поддержания удобства использования. Хотя функциональность интерфейса всегда остается на первом месте, возникают вопросы: не является ли эстетическая составляющая интерфейса также важной частью его функциональности? Можно ли найти баланс между обеспечением функциональности и созданием эмоциональной связи с пользователем через привлекательный визуал? Как еще интерфейс может влиять на восприятие игры?
Данное исследование попытается ответить на эти вопросы и способствовать решению проблем, с которыми сталкиваются гейм-дизайнеры в наше время.
Повествование исследования поделено на смысловые блоки. Во-первых, исследование затронет тему игры, ее основной сюжет и процесс разработки для более глубоко понимания проблемы и задач, поставленных перед командой разработки. Во-вторых, сосредоточимся на элементах интерфейса, проанализируем как UI влияет на раскрытие тем и сюжета игры, какие функции выполняет и какие уроки можно извлечь из этого опыта для будущих проектов в области гейм-дизайна.
Чтобы предоставить всестороннее представление об особенностях интерфейса Persona 5, анализ будет основан на официальных материалах разработчиков, интервью с создателями игры, отзывах игроков и критиков, научных статьях о гейм и веб-интерфейсах, а также видео-контенте, демонстрирующем интерфейс в действии. Текст подготовлен в качестве собственного анализа описываемых источников, тематических статей.
Целью данного исследования является выявление и детальный анализ интерфейса как важного художественного элемента в видеоигре Persona 5.
Исследование стремится показать, как интерфейс не только выполняет утилитарные функции, но и способствует формированию уникальной эстетики и атмосферы игры, влияя на восприятие сюжета и взаимодействие с игровым миром.
Начало работы над историей: плутовской роман
Исходным замыслом было создание сюжетной линии, отличающейся от привычных тем Persona 3 и 4, где акцент был на «самопознании» и «путешествии» соответственно.
Создание игры было вдохновлено изменениями в современном японском обществе. Основной темой стала свобода и то, как герои добиваются ее. Разработчики хотели сделать игру более доступной для новичков серии и западных игроков, делая упор на эмоциональной составляющей сюжета, которая должна надолго запомниться игрокам и вдохновить их на решения собственных проблем в жизни.
Команда разработчиков вдохновилась тремя основными историями: китайским романом «Речные заводи», японским криминальным фильмом «Слепое пятно» и испанским романом «Ласарильо с Тормеса», сравнивая обстановку и стиль с плутовским романом, историей о похождениях плута, жулика, авантюриста.
Промо-арт с главными героями
О сюжете и символике
История описывает группу японских подростков, сражающихся с порочным обществом равнодушных взрослых в современном Токио. Они используют «Персоны» — проявления своих скрытых сил и личностей, чтобы изменить сердца коррумпированных людей, известных как Палачи, и заставить их измениться. Главный герой, Джокер, и его друзья сталкиваются с моральными дилеммами, раскрывают тайны и борются за справедливость.
В Persona 5 символика играет значительную роль. Примером этому служат маски, которые имеют важное значение в сюжете. Общество заставляет людей носить эти маски в переносном смысле, чтобы скрывать свои слабости и не выделяться из толпы. Главные герои раскрывают свой потенциал и находят силу для борьбы с несправедливостью, буквально срывая с себя эти маски, таким образом, принимая свою скрытую личность.
Пробуждение Персоны
Persona 5 — история о свободе и борьбе с системой, о выходе за рамки навязанных обществом стереотипов, о дружбе и ответственности за свои поступки, о преодолении страхов и росте личности через сложности жизни.
Смена имиджа: разработка UI дизайна
Поскольку предыдущие игры Persona были хорошими, но не приносили коммерческого успеха, команда решила изменить маркетинговую стратегию и обновить образ игры. В первую очередь, было принято решение пересмотреть пользовательский интерфейс с целью привлечь более широкую аудиторию. Художественным руководителем стал Масаёси Суто, известный своей работой над ранними играми, включая дизайн пользовательского интерфейса.
Художественный дизайн должен был отражать плутовскую тему, к которой стремилась остальная часть команды. Старый UI был удобным и информативным, но обезличенным, задача нового интерфейса — сохранять функциональность, но также вписываться в тематику и символику игры.
Интерфейс Persona 2
Семиотика цвета
В отличие от синего и желтого цветов, присущих Persona 3 и 4, Persona 5 выбрала основным красный цвет для передачи бунтарской энергии игры. Вместо разнообразия дополнительных цветов, характерных для предыдущих частей, пользовательский интерфейс Persona 5 ограничился черным и белым. Эти акцентные цвета символизируют персонажей «заключенными» в ловушке собственных жизней и обстоятельств.
В целом, насыщенные и контрастные цвета привлекают внимание игрока и перекликаются с темой игры: восстание против социальной несправедливости.
Конференция «CEDEC + KYUSHU 2017» в Университете Кюсю Сангё в префектуре Фукуока «Креативный метод пользовательского интерфейса в серии Persona» от разработчиков Atlus
Persona 5, 4 и 3
«Больше всего сил я приложил к цвету меню, чтобы он соответствовал основной цветовой схеме игры. Например, основной цвет для Persona 3 был зеленовато-голубой, Persona 4 же использовала ярко-жёлтый, поэтому мне надо было что-то придумать. Основная цветовая схема Persona 5 тёмно-красная, я долго думал, перебрал разные варианты. Наконец, когда я попробовал чёрно-белый текст, всё стало на свои места»
Масаёси Суто, арт-директор
Журнал Weekly Famitsu #1449. Интервью с арт-директором Масаёси Суто
Графический стиль
Стиль проистекает из тематики игры — противостояние несправедливому обществу, серой массе. Из этого рождается желание выделиться, разрушить, то, что сковывает.
Иллюстрации, цветовая гамма и стиль шрифта, напоминающий панк, создают ассоциации одновременно с любительскими журналами панк-движения 1980-х и супергеройскими комиксами.
Индивидуализм и хаос — главная метафора визуального стиля Persona 5
Меню экипировки: обзор и комплектация
Зины панков в 1980-х
«Обычно пользовательский интерфейс рассматривается как нечто утилитарное — они, как правило, сосредоточены на предоставлении удобных функций аккуратной организации информации, например, картотеки. Но игры серии Persona противостоят этой тенденции своим освежающим, привлекательным чувством стиля»
Масахиро Сакураи, геймдизайнер, создатель серий игр Kirby и Super Smash Bros
Главное меню
На первый взгляд, дизайн меню кажется перегруженным. Слева показан текущий игровой процесс, выделенный красным цветом, а справа изображен главный герой. Такое разграничивание полей помогает игроку легче ориентироваться. Когда фон плавно меняется, красный цвет притягивает взгляд. Пространство, где информация имеет высокий приоритет, имеет яркий акцент, а пространство, где информация не так важна, имеет темный цвет.
В анимации главный герой буквально «втыкает» меню в центр экрана, что указывает игроку, куда стоит обратить внимание и помогает ближе познакомиться с персонажем, подчеркивая его решительный и уверенный характер.
Меню также визуально отражает выбранный раздел. Например, при переходе в раздел «Экипировка», игра показывает анимацию главного героя в боевой стойке с оружием.
Главное меню и разделы
Кроме того, разделы меню оживляются пульсациями, напоминающими биение сердца, благодаря использованию полутоновых силуэтов и абстрактных форм, что соотносится с одним из главных символов игры — сердцем.
Загрузка и сохранение
Второстепенное меню и экран загрузки
В Persona 5 разработчики используют множество угловатых абстрактных форм в дизайне графического интерфейса, чтобы создать ощущение неровной текстуры и ассоциацию с вырезанными из бумаги элементами.
Даже на экране загрузки неправильные формы хорошо сочетаются с общей историей и атмосферой игры. Все главные персонажи игры, называемые «Ворами», представлены как воры со сверхспособностями, отличные от нормальных личностей, что отражается в странных и необычных формах, использованных в их дизайне.
Анимация смены дня
Начало нового дня в Persona 5 представлено в необычной манере: новый день отмечается с помощью броска ножа, а в качестве фона выступает меняющийся Токио. В игре существует строгий крайний срок для выполнения миссии, и игрок должен эффективно использовать каждый день, чтобы разгадать способы выполнения задачи. Поэтому такая длинная анимация перехода имеет смысл, чтобы позволить игрокам обратить внимание на счет времени.
Диалоги
Диалог: реплики персонажа и главного героя
Диалоговое окно с динамической прямоугольной формой и жирным белым контуром хорошо выделяет текст на фоне окружающих действий. Мелкие анимации бабла придают диалогам дополнительную эмоциональную окраску.
Выбор ответа главного героя выделяется своим расположением, отводя внимание к себе и затемняя остальной фон, словно останавливая время для размышлений. В одном из интервью разработчик отмечал, что Джокер не склонен к многословности, предпочитая внутренние раздумья.
Внутриигровая местность
В игровых интерпретациях реальных мест Токио, каждый аспект жизни пропитан японской молодежной культурой. Гуляя по улицам, вы слышите и видите текстовые баблы, похожие на те, что изображаются в японских комиксах — манге, которые передают шепот толпы, обсуждающей последние события. Эти визуальные тонкости искусно погружают в атмосферу повседневного визуального мира Японии.
Диегетический интерфейс
Телефон и календарь
В игре также есть диегетический UI. Через мессенджер в вашем виртуальном телефоне вы можете общаться с друзьями, получать приглашения на различные мероприятия или проверять прогноз погоды.
Кроме того, на определенные дни в игре происходят специальные события, которые можно отслеживать через календарь. Например, по воскресеньям у продавца сока на станции Сибуя появляется особый предмет, повышающий характеристики.
При этом, они оформлены так, чтобы не нарушать общий стиль игры и гармонично вписываться в повествование.
Боевая система
HUD. Меню действий в двух состояниях: обычное и прицеливание
Дизайн меню в сцене битвы продуман до мелочей. Каждая кнопка выполнена в форме длинного треугольника, указывающего на активного персонажа, что помогает игрокам ориентироваться. Фигуры создают визуальную перспективу, добавляя глубину и объем.
Размещение персонажа слева экрана и врага справа позволяет игрокам следить за действием на экране, не отвлекаясь на меню.
Переключение камеры между режимами стрельбы с вращающейся как барабан пистолета анимацией отлично придает движения сцене, вкупе с поворотом камеры.
Меню выбора предмета и навыка
Стоит отметить, что Persona 5 — это пошаговая стратегия, где игрок много времени проводит среди различных меню навыков, кастомизации, инвентаря и т. д. Обычно в таких играх геймплей может быть монотонным и повторяющимся, что замедляет темп и делает игру скучной.
Однако в случае с Persona 5 этот недостаток умело компенсируется через динамичный и насыщенный визуальный интерфейс стандартных экранов. Этот подход не дает игроку устать от бесконечных элементов пользовательского интерфейса и помогает поддерживать интерес к игре.
С помощью типографики визуально усилен эффект, который уведомляет игрока о нападении «Засада»
Анимация результата после боя
Экран статистики после боя представляет собой визуальное решение, отличающееся от большинства игр, где вся информация отображается на одном экране. Сначала показывается, как персонажи празднуют победу, затем это плавно переходит в анимацию, где Джокер бежит, параллельно ему шаг за шагом высвечиваются полученные очки опыта и другие ресурсы. Анимация быстрая и детализированная, числа изменяются и текст перемещается, создавая ощущение динамичности во время пошаговых сражений.
Итак, можно сделать вывод о том, что интерфейс Persona 5 играет одну из ключевых ролей в формировании художественного опыта игры. Persona 5 иллюстрирует, как стилизованный интерфейс может гармонично сочетаться с общим визуальным стилем игры, углубляя погружение игрока.
Также игра демонстрирует, что пользовательский интерфейс может быть важной частью повествования, активно усиливая общие темы игры. Решения в области дизайна интерфейса могут служить не только функциональной цели, но также средством передачи эстетических настроений, способствуя формированию цельного и запоминающегося игрового опыта. UI является частью повествования, и в этом примере дизайнеры — это рассказчики, которые используют любую возможность, чтобы подчеркнуть главные темы игры — будь то цвет, типографика или меню.
Урок, который можно извлечь из этого опыта, заключается в том, что стиль и удобство использования не должны исключать друг друга. Удобный не означает скучный или наоборот, что-то стильное не является непригодным для использования.
Игровой интерфейс, как объект исследования // cyberleninka URL: https://clck.ru/3AiiKQ (дата обращения: 18.05.2024)
Panel on the Concept and Development Behind Persona 5’s UI // URL: https://personacentral.com/persona-5-panel-concept-development-ui/ (дата обращения: 17.05.2024)
Аффордансы и визуальное восприятие // hsedesign URL: https://deziiign.com/project/2fc267fb461d409689d5883205de6fbc (дата обращения: 20.05.2024)
The UI and UX of Persona 5 // Medium URL: https://ridwankhan.com/the-ui-and-ux-of-persona-5-183180eb7cce (дата обращения: 18.05.2024)
Wikipedia URL: https://ru.wikipedia.org/wiki/Persona_5 (дата обращения: 18.05.2024)
Persona 5’s UI a Hit or a Miss? // bootcamp.uxdesign URL: https://bootcamp.uxdesign.cc/is-persona-5s-ui-a-hit-or-a-miss-077c8dd94d431 (дата обращения: 15.05.2024)
Persona 5’s Interaction Design is the best! // Medium URL: https://ousiadroid.medium.com/what-you-can-learn-from-persona-5s-ui-design-4a4a646245b1 (дата обращения: 15.05.2024)
Interview with Masahiro Sakurai // URL: https://www.youtube.com/watch?v=E7q81s5RyOM (дата обращения: 15.05.2024)
https://www.gameuidatabase.com/gameData.php?id=72 (дата обращения: 18.05.2024)
http://www.megaten.ru/news/persona-5-intervyu-razrabotchikov-o-dizajne-interfejsa-zvuke-i-muzyke.html (дата обращения: 18.05.2024)
https://garystormsongs.com/punk-and-new-music-fanzines-late-1970s-to-early-1980s/ (дата обращения: 18.05.2024)
https://www.deepsilver.com/en/games/persona-5/ (дата обращения: 18.05.2024)
