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