Skip to main content

ADR: Inventory Card Layout

Архитектурное решение по дизайну карточек предметов в инвентаре TMA.

Контекст​

Карточка предмета в инвентаре имеет ограниченное пространство (~60×80px на мобильном устройстве), но должна отображать много информации:

  • Изображение предмета
  • Название (до 3 слов)
  • Тир/редкость
  • Количество
  • Тип предмета (скин, чертёж, патроны)
  • Actions (разбить, подарить)
  • Special badges (награда сезона)

Проблема: Как разместить всё это без информационного шума и когнитивной перегрузки.

Решения​

1. Пропорции углов (левый ≈ правый)​

Проблема:

  • Левый угол: Action-кнопки (разбить/подарить) — интерактивные элементы
  • Правый угол: Info-badge (количество + тип) — пассивная информация

Возникает вопрос баланса: actions важнее для UX, но info должно быть заметно.

Решение: Визуальный паритет — левый и правый угол примерно одинакового размера.

Обоснование:

  • При анализе было два противоположных мнения:
    • Внутренний взгляд: "Левые кнопки слишком большие, уменьшить?"
    • Внешний взгляд: "Левые кнопки слишком маленькие, увеличить?"
  • Два противоположных мнения сошлись → текущий баланс оптимален

Альтернативы (отклонены):

  • Увеличить actions → info станет незаметным
  • Уменьшить actions → проблемы с touch target (< 44px)

2. Текст тира + градиент​

Проблема: Редкость предмета показывается цветом градиента (фиолетовый = Мифический, синий = Эпический). Достаточно ли только цвета?

Решение: Дублировать редкость текстом ("Мифический скин") помимо цветового градиента.

Обоснование:

  • Градиент сам по себе не очевиден новым пользователям
  • Нужен период обучения — пока пользователь не запомнит цвета, текст помогает
  • После onboarding текст становится подкреплением, не основным источником информации

Альтернативы (отклонены):

  • Только цвет → плохой onboarding, пользователи не понимают систему редкости
  • Только текст → потеря визуальной дифференциации при скролле

3. Бейдж "Сезон"​

Проблема: Предметы, выигранные как награда сезона, имеют специальный бейдж. Не создаёт ли он визуальный шум?

Контекст:

  • Показывается ~10 пользователям раз в 3 месяца
  • Это награда за победу в сезонном соревновании

Решение: Выделять бейдж "Сезон" как заметный элемент.

Обоснование:

  • Это редкое событие — не создаёт постоянного шума
  • Пользователь должен понимать откуда получен предмет
  • Награда сезона — это престиж, её нужно визуально отмечать

Альтернативы (отклонены):

  • Убрать бейдж → пользователь не понимает источник предмета
  • Сделать бейдж менее заметным → теряется ценность награды

4. Иконка типа предмета (чертёж)​

Проблема: Рядом с количеством отображается иконка типа предмета (фрагмент чертежа, патроны и т.д.). Это "лишний" элемент?

Решение: Оставить иконку — она семантически важна.

Обоснование:

  • Иконка показывает ЧТО это за предмет, не просто количество
  • Различает типы: blueprint vs skin vs ammo vs fragment
  • Без иконки непонятно — это 4 одинаковых скина или 4 компонента для крафта?

Альтернативы (отклонены):

  • Убрать иконку → потеря семантики, путаница в типах предметов
  • Показывать тип в названии → название и так длинное (до 3 слов)

Итоговая структура карточки​

┌─────────────────────────┐
│ [Action1][Action2]  ×4 [type] │  ← Углы сбалансированы
│                         │
│      [  Image  ]        │  ← Центр: изображение
│                         │
│  Dragon Rocket          │  ← Название (перенос если >2 слов)
│  Launcher               │
│  Мифический скин        │  ← Тир текстом + градиент фона
└─────────────────────────┘

Статус​

Принято: Январь 2025

Участники обсуждения: Внутренняя команда + внешний UI/UX review

Связанные решения​

  • Design Principles — базовые принципы TMA дизайна
  • Tier System — система редкости предметов
  • Inventory — бизнес-логика инвентаря