Десктопное приложение

Дизайн приключенческой игры на острове

Исследуйте Harbor Skirmish: небольшой приморский остров с маршрутами по крышам, тремя слотами оружия и игривым интерфейсом от первого лица.

OpenDesignДизайн и продакшен
Официальный
Интерфейс браузерной игры4 экранов
Дизайн приключенческой игры на острове: обзор острова и стартовый экран
GPT 6 Astra · Пример оценкиСкриншот 1 из 4

LLM Arena, сентябрь 2026

Заметки к кейсу
Модель
GPT 6 Astra
Задача дизайна
Создать Harbor Skirmish — доступное для игры островное приключение с перемещением и сражениями против волн противников.
Результат
Десктопное приложение

Для каких задач

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

Ключевые особенности

  • Остров до начала бояСтартовый вид знакомит с улицами, крышами и окружающим остров морем.
  • HUD со свободным центромСтатусные элементы расположены по краям, поэтому прицел остаётся видимым.
  • Игривое состояние паузыНаклонённая карточка превращает паузу в часть визуального образа.

Дизайн приключенческой игры на острове со стартовым экраном у моря

Harbor Skirmish сначала показывает место действия сверху, а затем переносит игрока на улицу. Заголовок занимает левую часть стартового экрана, а остров — правую. Цветные крыши, часовая башня и набережная видны одновременно. Так игрок получает представление о локации до того, как камера от первого лица уберёт этот общий план.

Кремовый, жёлтый и тёмно-зелёный интерфейс больше напоминает печатный курортный плакат, чем военную приборную панель. Краткая завязка повествует о нашествии буйных кроликов, после чего заметная кнопка Let’s Play предлагает одно очевидное следующее действие. На стартовом экране показаны базовые подсказки по перемещению и прицеливанию, а дальнейшие инструкции отделены от основного призыва начать игру.

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

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

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

Одно заметное стартовое действие

В Let’s Play используется тот же жёлтый цвет, которым позднее отмечается выбранное оружие. Наклонённая форма и смещённая рамка выделяют кнопку на фоне более спокойного моря. Сопроводительный текст достаточно краток, поэтому кнопке не приходится конкурировать с полным руководством по управлению.

Последовательный графический язык

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

Организация HUD от первого лица вокруг вида на остров

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

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

Полный вид от первого лица сохраняет улицу видимой между выровненными по краям группами статусов и элементов управления.
Полный вид от первого лица сохраняет улицу видимой между выровненными по краям группами статусов и элементов управления.
Три разных вида обратной связи в игровом процессе
ИндикаторЧто он сообщаетПочему это различие важно
Счёт и волнаПрогресс в рамках текущего локального прохожденияСчёт за сеанс не является оценкой модели или сохранённым результатом.
Здоровье и готовность рывкаСостояние выживания и доступное действие перемещенияПодпись рывка сообщает о доступности действия, а не о достижении.
Название оружия и боеприпасыВыбранный инструмент и отображаемое количество боеприпасовПри смене активного слота должно меняться название, а не только его выделение.

Смена оружия и возвращение из паузы

Три пронумерованных слота постоянно отображаются как Ink Rifle, Scattergun и Paper Blade. При выборе 2 активный слот и название оружия меняются на Scattergun. Такая двойная обратная связь информативнее, чем одно лишь изменение рамки: выбранное оружие обозначается и у клавиши быстрого доступа, и рядом с индикатором боеприпасов.

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

    Подсказки WASD, раскачивания, прыжка и скольжения расположены у нижней границы активной сцены. Отдельная подсказка Hold E to Grapple находится ближе к центру. Такое разделение оставляет общие элементы управления доступными, а механику перемещения сопровождает более локальной подсказкой, хотя несколько одновременных инструкций всё ещё могут конкурировать с самой сценой.

  2. Ставьте игру на паузу, не теряя связь с местом действия

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

  3. Отделяйте продолжение игры от выхода

    Back to It — крупное жёлтое действие, а Back to the island — меньшая подчёркнутая альтернатива. Из-за схожих формулировок разницу между ними стоит проверять особенно внимательно: визуальная иерархия помогает распознать продолжение игры, но более буквальные подписи уменьшили бы неоднозначность для человека, незнакомого с этим интерфейсом.

Что демонстрирует этот локальный пример игры

Предоставленный экспорт содержит локальную однопользовательскую игру и визуализированное 3D-окружение. Были проверены запуск, смена выбранного оружия и открытие состояния паузы. Галерея не является тестом производительности, демонстрацией полного прохождения или доказательством того, что каждая механика перемещения работает на всех устройствах. Наличие сетевого многопользовательского режима, сервиса учётных записей или сохраняемой таблицы лидеров не проверялось. Обозначение модели сохранено из имени предоставленного файла.

Как создать дизайн приключенческой игры на острове в OpenDesign

  1. Скачайте и установите OpenDesign

    Скачайте десктопное приложение, установите его и завершите настройку. Создайте проект для своего дизайна.

    Скачать OpenDesign
  2. Проектируйте стартовый и игровой экраны вместе

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

    Рекомендуемый промпт

    Создайте дизайн приключенческой игры на острове для вымышленной браузерной игры Harbor Skirmish. На стартовом экране покажите сверху красочный приморский остров, разместив слева крупный заголовок и одну жёлтую кнопку «Играть». Используйте кремовые поверхности, тёмно-зелёные подписи, смещённые рамки и карточки с небольшим наклоном. Перейдите к уличной сцене от первого лица: счёт и сведения о волне расположите вверху, здоровье и состояние рывка — внизу слева, а оружие и боеприпасы — внизу справа. Сохраните три пронумерованных слота для чернильной винтовки, дробовика и бумажного клинка. Добавьте карточку паузы с текущим счётом, основным действием для продолжения игры и отдельным действием для возврата на стартовый экран. Используйте только локальное состояние сеанса; не создавайте впечатления наличия многопользовательского режима, сохранённых результатов или подключения учётной записи. Сделайте управление с клавиатуры видимым и не загромождайте центр сцены.

  3. Отслеживайте один выбор во всём HUD

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

  4. Проверяйте контраст не только на фоне неба

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

  5. Экспортируйте дизайн и получите ссылку для публикации

    Экспортируйте готовый дизайн, затем воспользуйтесь функцией Share в OpenDesign, чтобы получить ссылку. Откройте ссылку в отдельном окне браузера и убедитесь, что нужная версия со всеми ресурсами доступна, прежде чем отправлять её.

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows