UI-исследование на примере The Room, Assemble with Care и Hello neighbour!

Почти каждой игре нужен интерфейс, так как они так или иначе стремятся взаимодействовать с игроком на более глубоком уровне, чем позволяет графика внутриигрового мира. Игре нужно обращаться более прямо, а для этого может подойти только недиегетический интерфейс, который не устраивается в экран, а накладываемый на него для удобства игрока. Из-за сочетания двух пространств UI-дизайн — одна из самых тонких задач по компоновке визуальных элементов в видеоиграх.

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

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

1. Какие рекомендации по композиции пространства экрана между геймплеем и интерфейсом?
2. Как выглядит наиболее удобное пропорциональное соотношение между интерфейсом и экраном?
3. По каким пунктам можно проверить, что интерфейс инвентаря не конфликтует с экраном геймплея?
4. По каким пунктам можно проверить, что инвентарь дает игроку всю необходимую информацию?
5. По каким пунктам можно проверить, что интерфейс подсказок направляет игрока?
6. По каким пунктам можно проверить, что интерфейс подсказок погружает игрока в игру?

UI-дизайн, интерфейс, композиция, соотношение, стилистическое однообразие, расположение на игровом экране, закон Паркинсона, эффект эстетики, закон близости

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

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

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

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

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

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

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

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

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

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

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

Одновременно с этим в играх-референсах можно увидеть разный подход к дизайну иконок игровых предметов: если в «The room» это переведенные в 2D-пространство трехмерные объекты, то «Hello neighbour!» использует приём стилизации и создает копирующие их визуально читаемые иллюстрации.

Несмотря на разный подход, обе игры осознанно используют так называемый эффект эстетики [4]:

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

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

Несмотря на разный подход к дизайну иконок, обе игры-референса осознанно используют эффект эстетики. Инвентарь в двух проектах имеет разный уровень детализации исходя и стилистики самих проектов: «The room» отсылает к готике в гиперреалистичной графике, отчего и в дизайне интерфейса появились текстуры, потертости, изящные золотые узоры.

«Hello neighbour!», напротив, создан в low-poly стилистике в абстрактном городском сеттинге с упорой на изогнутые и кривые линии в дизайне 3D-моделей. Эта простота и хаотичность была перенесена и на дизайн интерфейса. Таким образом, противоположные стили двух проектов привели к тому, что в UI-дизайне использовались разные визуальные приёмы с целью использовать эффект эстетики.

Инвентарь — это пример Heads Up Display (HUD) интерфейса, но существует и другой его тип, Frontend/Menus (FE), когда UI-панели появляются на экране временно с целью своевременно донести для игрока важную информацию. Так, именно к этому типу интерфейса относятся всплывающие подсказки.

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

Главное при визуализации подсказок — создать прочную связь между объектом объяснения и интерфейсом. Кроме уже упомянутых UI-законов, стоит проанализировать применение закона близости [5]:

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

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

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

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

Согласно закону Паркинсона, UI-панели по краям будут восприниматься игроком меньше, так как именно в этой зоне они «поглощают» наименьшее количество важной визуальной информации.

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

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

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

Интерфейс каждой из игр занимает не больше 10 квадратов площади из 150 (минимум — 3).

Следовательно, интерфейс должен занимать около 5% площади экрана и располагаться по краям, так как это наиболее удобный композиционный шаблон для HUD-интерфейса.

1. Сознательно минимизируйте размер интерфейса и останавливайтесь на том моменте, после которого он бы стал трудночитаемым/интуитивно непонятным.
2. Все панели Heads Up Display (HUD) интерфейса должны быть как можно сильнее «прижаты» к краям игрового экрана.
3. Меньше всего визуальной информации по краям экрана, где у игрока нет фокуса внимания: именно там стоит располагать панели интерфейса.
4. Стоит группировать связанные панели интерфейса, чтобы облегчить их восприятие как целого.
5. Создавайте панели интерфейса на основе простых геометрических форм, чтобы игроку было проще считывать их функцию.

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

1. В основе визуализации лежит интуитивно считываемая форма и/или объект (например, стрелка/рука)?
2. Соблюдается ли закон близости? Находятся ли объект и подсказка настолько быстро, чтобы между ними считывалась связь?
3. Визуализация подсказки стилистически упрощена? Не сливается ли она с фоном?
4. Можно ли подставить глагол-задачу при взгляде на подсказку? Считывается ли действие интуитивно?
5. Дают ли визуальные подсказки точное представление о действии, которое нужно выполнить?

1. Выполняются ли пункты чек-листа о направлении игрока?
2. Подсказки понятны с первого взгляда и не забирают на себя много внимания?
3. Учитывает ли визуализация подсказок эффект эстетики (однороден ли стиль подсказок и игрового экрана)?
4. Подсказка композиционно вписывается в игровой экран?
5. У подсказок и игрового экрана один визуальный ритм (толщина и длина линий, острота углов и плавность)?

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

1. Элементы гейм-дизайна. Как создавать игры, от которых невозможно оторваться / Роберт Зубек; [перевод с английского О. И. Перфильева]. — Москва: Эксмо, 2022.
2. Яблонски, Дж. Законы UX-дизайна. Понимание психологии пользователя — ключ к успеху / Дж. Яблонски; пер. с англ. А. Логунова. — СПб.: БХВ-Петербург, 2022.
3. Закон Паркинсона // ЗАКОНЫ UX URL: https://lawsofux.ru/parkinsons-law.html (дата обращения: 17.05.2026).
4. Эффект эстетики // ЗАКОНЫ UX URL: https://lawsofux.ru/aesthetic-usability-effect.html (дата обращения: 17.05.2026).
5. Закон близости // ЗАКОНЫ UX URL: https://lawsofux.ru/law-of-proximity.html (дата обращения: 17.05.2026).
6. The Room [Электронный ресурс]: компьютерная игра / Fireproof Games (разработчик и издатель). — Электрон. дан. — Гилфорд, 2012. — Режим доступа: https://store.steampowered.com/app/288160/The_Room/. — Загл. с экрана. — Дата обращения: 16.02.2026.
7. Assemble with Care [Электронный ресурс]: компьютерная игра / ustwo games (разработчик и издатель). — Электрон. дан. — Лондон, 2019. — Режим доступа: https://store.steampowered.com/app/1031420/Assemble_with_Care/. — Загл. с экрана. — Дата обращения: 16.02.2026.
8. Hello Neighbor! [Электронный ресурс]: компьютерная игра / Dynamic Pixels (разработчик); tinyBuild (издатель). — Электрон. дан. — Москва, 2017. — Режим доступа: https://store.steampowered.com/app/521890/Hello_Neighbor/. — Загл. с экрана. — Дата обращения: 16.02.2026.