Позиционирование на мобильных

На мобильных устройствах пространство экрана ограничено, а взаимодействие происходит через касания, что накладывает дополнительные требования на отображение уведомлений. Библиотека Noty предоставляет гибкие механизмы позиционирования, позволяя адаптировать уведомления под разные размеры экранов и сценарии использования.

Ключевые аспекты:

  • ограниченная ширина экрана
  • наличие системных UI-элементов (статус-бар, навигация)
  • управление жестами (свайпы)
  • необходимость минимального перекрытия основного контента

Базовые позиции Noty

Noty поддерживает стандартные позиции, применимые как для десктопа, так и для мобильных устройств:

  • top
  • topLeft
  • topRight
  • topCenter
  • center
  • centerLeft
  • centerRight
  • bottom
  • bottomLeft
  • bottomRight
  • bottomCenter

На мобильных устройствах рекомендуется использовать ограниченный набор:

  • top
  • topCenter
  • bottom
  • bottomCenter

Это связано с тем, что боковые позиции (Left/Right) могут выглядеть некорректно из-за узкой ширины экрана.

Пример настройки:

new Noty({
  text: 'Уведомление',
  layout: 'topCenter'
}).show();

Адаптация под мобильные устройства

Для корректного позиционирования важно учитывать текущий тип устройства. Это можно реализовать через медиазапросы или JavaScript-детекцию.

Пример адаптивного выбора позиции:

const isMobile = window.innerWidth <= 768;

new Noty({
  text: 'Адаптивное уведомление',
  layout: isMobile ? 'bottomCenter' : 'topRight'
}).show();

На мобильных устройствах предпочтение часто отдается нижнему размещению (bottomCenter), так как:

  • уведомление не перекрывает важный контент в верхней части
  • удобно взаимодействовать большим пальцем
  • меньше конфликтов с системными элементами

Учет safe-area (вырезы и скругления)

Современные смартфоны имеют вырезы (notch) и закругленные углы. Это влияет на визуальное размещение уведомлений.

Для корректной работы рекомендуется учитывать CSS-переменные safe-area:

.noty_layout__topCenter {
  margin-top: env(safe-area-inset-top);
}

.noty_layout__bottomCenter {
  margin-bottom: env(safe-area-inset-bottom);
}

Это предотвращает наложение уведомлений на системные элементы.

Ширина уведомлений на мобильных

По умолчанию Noty задает фиксированную ширину, которая может не подходить для мобильных экранов. Необходимо переопределить стили:

@media (max-width: 768px) {
  .noty_bar {
    width: calc(100% - 20px);
    margin: 0 10px;
  }
}

Это обеспечивает:

  • отступы по краям
  • адаптацию под любую ширину экрана
  • улучшенную читаемость

Управление стеком уведомлений

На мобильных устройствах одновременное отображение большого количества уведомлений ухудшает UX.

Noty позволяет ограничивать количество видимых уведомлений:

new Noty({
  text: 'Сообщение',
  layout: 'bottomCenter',
  maxVisible: 2
}).show();

Рекомендуемые значения:

  • 1–2 уведомления для мобильных
  • автоматическое закрытие через timeout

Свайпы и взаимодействие

На мобильных устройствах критично удобство закрытия уведомлений. Noty поддерживает свайпы:

new Noty({
  text: 'Свайпни меня',
  layout: 'bottomCenter',
  closeWith: ['swipe', 'tap']
}).show();

Направление свайпа зависит от позиции:

  • top — свайп вверх
  • bottom — свайп вниз

Это делает взаимодействие интуитивным.

Анимации для мобильных

Анимации должны быть быстрыми и ненавязчивыми. Для мобильных лучше использовать простые эффекты:

new Noty({
  text: 'Анимация',
  layout: 'bottomCenter',
  animation: {
    open: 'noty_effects_slideInUp',
    close: 'noty_effects_slideOutDown'
  }
}).show();

Рекомендации:

  • избегать сложных анимаций
  • минимизировать длительность
  • учитывать производительность устройства

Избежание перекрытия интерфейса

Уведомления не должны мешать основным элементам интерфейса:

  • кнопкам навигации
  • формам ввода
  • меню

Подходы:

  1. Использование bottomCenter вместо top
  2. Увеличение отступов через CSS
  3. Условное скрытие уведомлений при активном вводе

Пример:

const isInputFocused = document.activeElement.tagName === 'INPUT';

if (!isInputFocused) {
  new Noty({
    text: 'Новое сообщение',
    layout: 'bottomCenter'
  }).show();
}

Работа с клавиатурой на мобильных

При открытии экранной клавиатуры часть интерфейса перекрывается. Уведомления внизу могут стать невидимыми.

Решение — динамическое изменение позиции:

window.addEventListener('resize', () => {
  const isKeyboardOpen = window.innerHeight < 500;

  new Noty({
    text: 'Уведомление',
    layout: isKeyboardOpen ? 'topCenter' : 'bottomCenter'
  }).show();
});

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

Частое создание уведомлений может негативно влиять на мобильные устройства.

Рекомендации:

  • избегать спама уведомлениями
  • использовать очередь
  • задавать timeout
new Noty({
  text: 'Автозакрытие',
  timeout: 2000,
  layout: 'bottomCenter'
}).show();

Кастомизация контейнера

Noty использует контейнеры для позиционирования. Их можно переопределить:

#noty_layout__bottomCenter {
  bottom: 10px;
}

Это позволяет:

  • тонко управлять отступами
  • учитывать особенности дизайна
  • интегрировать уведомления в UI

Практические рекомендации

  • использовать bottomCenter как основную позицию
  • ограничивать количество уведомлений
  • адаптировать ширину через CSS
  • учитывать safe-area
  • включать свайпы для закрытия
  • избегать перекрытия важных элементов
  • оптимизировать анимации

Грамотное позиционирование уведомлений на мобильных устройствах напрямую влияет на удобство использования интерфейса и восприятие приложения.

Оглавление