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

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