Дизайн игровой механики Heist: полный UX/UI кейс | Проектирование интерфейсов для мобильной игры

Показываю полный процесс проектирования интерфейса для механики ограблений (heist) в мобильной игре «12 Друзей Пингвина». Спроектировать полный пользовательский цикл механики налётов:

• Экран выбора и покупки усилений (бустеров)
• Система уведомлений и журнал событий
• Empty states, состояния загрузки и ожидания
• Визуальную дифференциацию успешных и провальных событий

---

🎯 ЦЕЛИ ПРОЕКТА:

1. Конверсия — увеличить покупку бустеров через грамотный UX

2. Удержание — снизить отток игроков после провалов через обучение

3. Монетизация — внедрить психологические триггеры (Loss Aversion, срочность)

4. Системность — создать масштабируемую дизайн-систему, а не разовые экраны

🔨 ЧТО СДЕЛАНО:

1. Исследование и анализ:

• Проанализировал текущий интерфейс (сухой бухгалтерский отчёт)
• Выявил ключевые проблемы: отсутствие эмоциональной связи, слабая причинно-следственная связь, низкая конверсия
• Определил 3 ключевых сценария: Успех, Провал, Критический провал

2. Проектирование системы состояний: Экран выбора бустеров:

• Состояние 0/6 (ничего не выбрано) с двумя кнопками разной иерархии
• Состояние 3/6 (частичный выбор) с динамической ценой и блоком выгоды
• Состояние 6/6 (все выбраны) с визуальным выделением и экономией 10%
• Уникальные иконки для каждого из 6 бустеров (Страховка, Турбоплавник, x2 Добыча, Автоотправка, Мегарюкзак, Медвежатник)
• Двойная система цен (кристаллы и специальная валюта персонажа)

Экран логов (журнал событий):

• 3 типа карточек событий с цветовым кодированием:

🟢 Успех: зелёная точка, акцент на полученных ресурсах

🟠 Провал: оранжевая точка, CTA «Взять за 1⭐» для конверсии

🔴 Крит: красная точка, срочное предложение страховки

• Группировка событий по налётам (#47, #46)
• Разделение на «новые» (с кнопками) и «просмотренные» (приглушённые)
• Loss Aversion: показ упущенной выгоды («0 💎, могли бы получить +8»)

Empty States:

• «Тишина перед бурей» — экран до начала налёта с персонажем в лобби
• «Пингвин в пути» — экран с таймером и системным уведомлением об отправке
• Блок «СОВЕТ» для нативного обучения механике

3. Дизайн-система:

• Консистентные компоненты (карточки, кнопки, табы, иконки)
• Цветовая палитра: зелёный (#4CD964), оранжевый (#FF9500), красный (#FF3B30), жёлтый CTA (#FFD60A)
• Сетка 8px, скругление 12px, единая типографика
• Active/Inactive/Empty/Viewed состояния для всех интерактивных элементов

4. Визуальные решения:

• Персонаж «Актер» меняет образ: расслабленный (коктейль) → бандит (мешок, очки)
• Розовый фон для активных бустеров (мгновенное считывание за 0.5 сек)
• Жёлтая рамка когда все 6 выбраны (визуальный якорь)
• Динамические кнопки с обновлением цены в реальном времени

5. Психологические триггеры:

• Loss Aversion — показываем «могли бы получить» рядом с «0»
• Срочность — таймер обратного отсчёта
• Выгода — блок «Экономия ⭐1» и «Скидка Актера»
• Обучение через боль — после провала предлагаем конкретный бустер

📊 РЕЗУЛЬТАТЫ:

✅ 8 полноценных экранов с полным пользовательским циклом

✅ Полная система состояний (Active/Inactive/Empty/Viewed/Success/Fail/Critical)

✅ Дизайн-система с консистентными компонентами

✅ Фокус на метриках: конверсия в покупку бустеров, удержание после провалов, обучение механике

✅ Оценка: 9.25/10 (системность 9.5, работа с вниманием 9.5, визуал 9, аргументация 9)

ЭКРАНЫ

КОМПОНЕНТЫ

#1 ЭКРАН ЛОГОВ / НЕТ СОБЫТИЙ — Empty State

Что сделали: Спроектировали пустое состояние «Тишина перед бурей» с персонажем в расслабленной позе (коктейль). Добавили поэтичное название и четкий призыв к действию.

Результат:

– Персонаж создает настроение «в лобби»

– Одна главная кнопка «ОТПРАВИТЬ В НАЛЁТ» — нет паралича выбора

– Empty state не выглядит как ошибка, а мотивирует к действию

– Табы показывают навигацию, но не перегружают

#2 ЭКРАН ВЫБОРА УСИЛЕНИЙ FULL — Бустеры 0/6

Что сделали: Разработали полный список из 6 бустеров с уникальными иконками. Внедрили двойную систему цен (23 кристалла и 1 звезда для персонажа «Актер»). Добавили две кнопки с явной иерархией.

Результат:

– 6 уникальных иконок бустеров (Страховка, Турбоплавник, x2 Добыча и др.)

– Специальная цена для Актера (1) визуально выделена

– Кнопка «Выбрать все со скидкой 10%» для быстрой конверсии

– Предупреждение «Без усилений шанс провала 70%» — мягкий прессинг

– Пунктирные рамки показывают неактивное состояние

#3 ЭКРАН ВЫБОРА УСИЛЕНИЙ SMALL — Альтернативный вид

Что сделали: Создали компактную версию экрана выбора с уменьшенными карточками для демонстрации масштабируемости системы.

Результат:

– Та же логика и консистентность на меньшей площади

– Доказательство системности решения

– Гибкость интерфейса под разные разрешения экрана

#4 БУСТЕРЫ 3/6 — Частичный выбор

Что сделали: Спроектировали состояние с частичным выбором (3 из 6). Добавили розовый фон для активных карточек с галочками. Внедрили динамический блок «ВЫГОДА!» с перечислением бонусов.

Результат:

– Счетчик «УСИЛЕНИЯ 3/6» обновляется динамически

– Розовый фон активных карточек считывается за 0.5 секунды

– Кнопка изменила цену на 3 (сумма выбранных)

– Блок «ВЫГОДА!» показывает конкретные преимущества: гарантия возвращения, -5 часов ожидания, x2 к добыче

– Появилась кнопка «ОТМЕНИТЬ ВЫБОР» для быстрого сброса

#5 БУСТЕРЫ 6/6 — Все выбраны

Что сделали: Разработали состояние максимального выбора с желтой рамкой вокруг всех карточек. Добавили блок «ВЫГОДА+УСПЕХ!» с экономией и перечислением всех бонусов.

Результат:

– Желтая рамка мгновенно показывает «всё выбрано»

– Счетчик «УСИЛЕНИЯ 6/6» с визуальным акцентом

– Итоговая цена 5 (экономия 1 благодаря скидке 10%)

– Все 6 уникальных иконок сохранены в активном состоянии

– Кнопка «ОТМЕНИТЬ ВЫБОР» для быстрого сброса

– Максимальная конверсия через демонстрацию выгоды

#6 ЭКРАН ЛОГОВ / НАЧАЛО НАЛЁТА — В процессе

Что сделали: Создали состояние «Пингвин в пути» с персонажем-бандитом (мешок, кубик, очки). Добавили системное уведомление об отправке и блок «СОВЕТ» для нативного обучения.

Результат:

– Персонаж сменил образ с «расслабленного» на «бандита» — мгновенная обратная связь

– Таймер «6:41:02» крупно, оранжевый акцент на времени

– Системное уведомление «АРТИСТ ОТПРАВЛЕН В НАЛЁТ» с иконкой персонажа

– Совет «Медвежатник повышает шанс на редкий сейф на 40%» обучает механике

– Кнопка «Понятно» закрывает блок совета

– Tab «УСИЛЕНИЯ 3/6» показывает активные бустеры (read-only)

#7 ЭКРАН ЛОГОВ / СПИСОК СОБЫТИЙ — Полный журнал

Что сделали: Разработали систему из 3 типов событий (Успех/Провал/Крит) с цветовым кодированием. Добавили группировку по налётам (#47, #46) и разделение на «новые» и «просмотренные».

Результат:

– Зеленая точка = успех (добыл 40 кристаллов)

– Оранжевая точка = провал (сработала сигнализация)

– Красная точка = критический провал (пингвин пойман)

– Кнопки «ВЗЯТЬ ЗА  1» только на свежих провалах (конверсия!)

– Группировка «НАЛЁТ #47» и «НАЛЁТ #46» для структуры

– Просмотренные события (#46) приглушены — понятно что «старые»

– Loss Aversion: показываем «0» рядом с «могли бы получить +8»

– Иконки бустеров консистентны с экраном выбора

– CTA исчезают после просмотра (не спамим)

Видео