Skip to main content

Design Principles

Базовые принципы дизайна для Telegram Mini App (TMA).

Ограничения платформы​

Размер экрана​

КонтекстОграничения
Viewport~360×640px (типичный мобильный)
Safe area-20px сверху (Telegram header)
Touch targetМинимум 44×44px (Apple HIG)

Производительность​

  • TMA работает в WebView — ресурсы ограничены
  • Избегать тяжёлых анимаций и много градиентов
  • Lazy loading для списков > 20 элементов

Принципы​

1. Информационная плотность​

Проблема: Много информации на маленьком экране.

Решение:

  • Приоритизировать: что критично vs что nice-to-have
  • Использовать progressive disclosure (показывать детали по тапу)
  • Визуальная иерархия через размер и цвет
Правило большого пальца

Если на одном экране > 3 типов информации — пользователь теряется.

2. Цветовое кодирование​

Принцип: Цвет = семантика, но не единственный индикатор.

ЦветСемантикаПодкрепление
ФиолетовыйМифический тир+ текст "Мифический"
СинийЭпический тир+ текст "Эпический"
ЗелёныйУспех+ иконка ✓
КрасныйОшибка+ текст ошибки

Почему: Не все пользователи различают цвета одинаково. Текст/иконка — fallback.

3. Touch Targets​

Правило: Интерактивные элементы ≥ 44×44px.

❌ Плохо: иконка 24×24px без padding
✅ Хорошо: иконка 24×24px + padding → touch area 44×44px

Исключение: Плотные списки (таблицы) — допустимо 32px высота строки.

4. Консистентность размеров​

Проблема: Длинные названия (3 слова) vs короткие (1 слово).

Решение:

  • Не уменьшать шрифт для длинных названий → везде станет мелко
  • Перенос строки для длинных названий
  • Ellipsis только если перенос невозможен
Anti-pattern

Динамический размер шрифта (font-size: clamp(10px, 3vw, 14px)) создаёт визуальный разнобой.

5. Баланс углов​

Принцип: Противоположные углы компонента должны быть визуально сбалансированы.

┌─────────────────────┐
│ [Actions]    [Info] │  ← Визуальный вес ~ равен
│                     │
└─────────────────────┘

Как проверить:

  1. Показать дизайн двум людям
  2. Спросить "что тут лишнее/чего не хватает?"
  3. Если один говорит "слишком много слева", другой "слишком мало слева" → баланс найден

6. Редкие vs частые элементы​

Принцип: Элементы, которые появляются редко, могут быть заметнее.

ЧастотаПримерДопустимая заметность
ВсегдаКоличество, названиеУмеренная
ЧастоТир, тип предметаУмеренная
РедкоБейдж "Сезон"Высокая
Очень редкоАнимация победыМаксимальная

Почему: Редкий элемент не создаёт постоянного визуального шума.

7. Screen Layout (Smart Spacing)​

Проблема: Контент разной высоты на разных экранах создаёт несогласованный layout.

Решение: Унифицированная структура с вертикальным центрированием:

┌──────────────────────────────┐
│ ═══════════════════════════  │  ← Пустое место (авто)
│  ┌────────────────────────┐  │
│  │   Centered Content     │  │  ← justify-center
│  └────────────────────────┘  │
│ ═══════════════════════════  │  ← Пустое место (авто)
│ ┌────────────────────────┐   │
│ │      LiveFeed          │   │  ← Прижат к низу
│ └────────────────────────┘   │
└──────────────────────────────┘

Tailwind реализация:

<div className="flex flex-col min-h-[calc(100vh-80px)]">
  {/* Content Area - центрируется вертикально */}
  <div className="flex-1 flex flex-col justify-center p-4">
    <div className="flex flex-col items-center space-y-N">
      {/* Основной контент */}
    </div>
  </div>

  {/* Footer (LiveFeed) - всегда внизу */}
  <div className="w-full pb-4">
    <LiveFeed />
  </div>
</div>

Ключевые моменты:

  • min-h-[calc(100vh-80px)] — 80px = высота BottomNavBar
  • flex-1 + justify-center — контент центрируется в доступном пространстве
  • Пустое место распределяется равномерно сверху и снизу контента
  • LiveFeed/Footer всегда прижат к низу экрана
Применение

Используется на экранах: Cases, Daily Spins. Подходит для любых экранов с центральным контентом и footer-компонентом.

Anti-patterns​

1. Дублирование без причины​

❌ Плохо: Цвет показывает тир + большой текст + иконка тира
✅ Хорошо: Цвет + маленький текст (для onboarding)

2. Скрытые действия​

❌ Плохо: Actions только по long press (не discoverable)
✅ Хорошо: Actions видны, но компактны

3. Информационный шум​

❌ Плохо: 6 разных типов информации на карточке 60×80px
✅ Хорошо: 3-4 типа информации, остальное — по тапу

Checklist для нового компонента​

  • Touch targets ≥ 44×44px
  • Цвет не единственный индикатор семантики
  • Углы визуально сбалансированы
  • Длинные тексты обрабатываются (перенос или ellipsis)
  • Редкие элементы не создают постоянного шума
  • Тестирование на реальном устройстве (не только эмулятор)

Связанные материалы​