Показываю полный процесс проектирования интерфейса для механики ограблений (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)
