Исходный размер 1059x1486

UI-исследование DBH, BRC, LoU2 и CoS*

PROTECT STATUS: not protected

*Исследование интерфейса для разработки видеоигры через деконструкцию игр Detroit: Become Human, Bomb Rush Cyberfunk, The Last of Us Part II и Chants of Sennaar.

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

Постановка гейм-дизайнерской задачи

Идея

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

Проблема

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

Вопросы

1. Какие UI-решения используются для обучения в играх-референсах? 2. Какие UI-решения лучше выбрать для оформления игровых экранов обучения в моей видеоигре?

Ключевые понятия и метрики

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

Методы сбора

Найти, сыграть в игры-референсы или посмотреть их прохождения.

Методы анализа

Деконструировать UI решения в играх-референсах. Сравнить готовые решения, с тем, что мне бы хотелось сделать в моей игре.

Обзор источников

Detroit: Become Human

Detroit: Become Human [1] — интерактивного кино, поднимающий вопрос сосуществования людей и искусственного интеллекта. В качестве референса используется сюжетная линия Маркуса: для поиска убежища девиантов (Иерихона) игроку необходимо распознавать символические знаки в уличных граффити. Эта механика имеет смежные черты с моей: здесь игроку предстоит искать скрытые шифры на стенах, которые проявляются только при воздействии ультрафиолетового света.

Bomb Rush Cyberfunk

Bomb Rush Cyberfunk [2] — экшен игра в стиле сэл-шейдинг, действие которого разворачивается в футуристическом городе, контролируемом бандами. Ключевой механикой является нанесение граффити для повышения репутации. В качестве референса использована система локализованных точек для рисования: аналогично, в моем проекте предусмотрены специальные места, где скрыты граффити с шифрами.

The Last of Us Part II

The Last of Us Part II [3] — приключенческий экшен, продолжающий историю Элли в зомбиапокалипсисе. Игра выделяется глубокой системой стелса, которая стала референсом для моего проекта. В моей игре реализованы аналогичные механики скрытного прохождения: бесшумное передвижение, использование отвлекающих маневров (броски предметов) и укрытие за объектами окружения.

Chants of Sennaar

Chants of Sennaar [4] — головоломка, посвященная лингвистическому анализу и расшифровке древних языков через наблюдение за окружением и взаимодействием с NPC. Эта игра выбрана в качестве референса, так как процесс дешифровки является ключевой механикой и в моем проекте.

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

Визуальный анализ

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

План анализа:


Элементы UI для туториала игры
1. Текстовые подсказки
2. Инфографика
3. ДиалогиЭлементы UI для игровых экранов
1. Инвентарь
2. Телефон
3. Карты
4. Книга

Элементы UI для туториала игры

Текстовые подсказки

Референсом послужила Detroit: Become Human [1], где подсказки состоят из одного предложения с выделением ключевых слов, например рисунок 1: «оптимального уровня стресса». Это позволяет игроку мгновенно понять цель действия. Для еще большей наглядности применяется частичная инфографика, встроенная в текст подсказки как на рисунке 2.

Исходный размер 1280x720

Рисунок 1. Текстовые подсказки — Detroit: Become Human [1] (Quantic Dream, 2018)

Исходный размер 1280x720

Рисунок 2. Текстовые подсказки — Detroit: Become Human [1] (Quantic Dream, 2018)

Для обеспечения эффективности подсказок критически важны читаемость и достаточный размер шрифта. В Detroit: Become Human [1] этот принцип реализован через контрастное сочетание белого текста на крупной черной плашке. Такой подход минимизирует зрительную нагрузку, позволяя игроку считывать информацию за доли секунды и не отвлекаться от геймплея. Следовательно, при разработке интерфейса необходимо стремиться к максимальной простоте и читаемости текста, чтобы сократить время на его восприятие и осмысление.

Инфографика

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

Исходный размер 1920x1080

Рисунок 3. Обучение с инфографикой — Detroit: Become Human [1] (Quantic Dream, 2018)

Исходный размер 1920x1080

Рисунок 4. Обучение с инфографикой — The Last of Us Part II [3] (Naughty Dog, 2020)

Инфографика чаще всего служит визуальным дополнением к тексту, хотя в некоторых случаях может использоваться автономно. В играх-референсах преобладает комбинированный формат «текст + графика». Выбор способа подачи зависит от сложности информации: для простых и привычных действий (например, передвижение в Detroit: Become Human [1]) используются краткие всплывающие подсказки, не отвлекающие от геймплея. Для более сложных механик применяется модальный экран, блокирующий игру, что дает игроку возможность изучать инструкцию в собственном темпе (см. Рисунок 4).

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

UI-исследование DBH, BRC, LoU2 и CoS*
Проект создан 27.05.2026