Этот обзор описывает распространённые UI-элементы и жесты, используемые в разработке мобильных и веб-приложений.
UI-элементы
Основные элементы:
- Флеш-скрин: Заставка, отображаемая при загрузке приложения.
- Лоадеры: Индикаторы загрузки, часто представляющие собой анимацию.
- Заглушка: Элемент, отображаемый при отсутствии контента (например, ошибка сети, отсутствие результатов поиска).
- WebView: Компонент для отображения веб-страниц внутри приложения.
- Поп-ап: Всплывающее окно, появляющееся внезапно, без запроса пользователя. Отличается от диалогового окна.
- Push-уведомления: Отдельный механизм уведомлений.
- Экшен-меню: Кнопка (часто три точки), открывающая меню с дополнительными действиями. Варианты отображения: гамбургер-меню (три горизонтальные полоски), баг-меню (три вертикальные точки). Другие варианты (мид-боллс, альт-бургер, дёнер, бент) встречаются реже и не являются стандартными.
- Табы: Вкладки для переключения между разделами. Переключение осуществляется тапом или свайпом.
- Тост: Кратковременное всплывающее уведомление.
- Прогресс-бар: Индикатор выполнения действия.
- Таб-бар: Панель вкладок внизу экрана (на Android — App Bar, на iOS — Nav Bar).
- App Bar/Nav Bar: Панель инструментов вверху экрана.
- Alert: Оповещение с важной информацией, часто запрашивающее подтверждение.
- Toggles (тумблеры): Переключатели «вкл/выкл».
- Боттом-шит: Информационная панель, появляющаяся снизу экрана.
- Bubble: Овальный элемент выбора параметра (часто в фильтрах).
- Строка поиска: Поле для ввода поискового запроса.
- Placeholder: Текстовая заглушка в поле ввода.
- Page Controls: Элементы управления, отображающие текущую страницу (например, точки).
- Counter: Точка или число, указывающее количество непрочитанных уведомлений.
- Overlay: Перекрывающий слой, изменяющий прозрачность элемента.
- Tool-тип: Всплывающее сообщение-подсказка.
- Онбординг: Обучающая функциональность приложения при первом запуске.
- Саджест-лист: Выпадающий список подсказок при вводе текста.
- Чекбокс: Элемент выбора одного или нескольких вариантов.
- Статус-бар: Строка состояния с информацией об устройстве.
- Слайдер: Горизонтальная шкала для управления значением.
- Шиммеры: Мерцающие блоки, отображаемые во время загрузки данных.
- Аккордеоны: Разделы контента, которые можно раскрывать и сворачивать.
- Хлебные крошки (Breadcrumbs): Навигационная цепочка, показывающая путь к текущей странице.
- Карточки: Небольшие прямоугольные или квадратные модули с информацией.
- Карусель: Набор контента (например, изображений), просматриваемый прокруткой.
- Дропдаун: Выпадающий список.
- Лента: Поток контента (часто в социальных сетях).
- Пагинация: Разбиение контента на страницы.
- Пикер: Элемент выбора даты или времени.
- Степпер: Элемент управления с шаговым изменением значения.
- Теги: Метки для классификации контента.
- Радио-кнопка: Элемент выбора одного варианта из списка.
Жесты
- Тап: Короткое касание экрана.
- Дабл-тап: Двойное короткое касание.
- Мультитап: Три и более касаний.
- Лонг-тап: Длительное нажатие.
- Скролл: Прокрутка контента.
- Свайп: Быстрое смахивание пальцем.
- Пулл-ту-рефреш: Обновление контента прокруткой вниз.
- Драг-энд-дроп: Перетаскивание элементов.
- Пинч: Изменение масштаба (сжатие/разъединение пальцев).
Этот обзор охватывает многие распространённые UI-элементы и жесты. Знание их названий и функциональности способствует эффективной разработке и описанию приложений, улучшая коммуникацию между участниками проекта.