навигация в интерфейсе
Шесть элементов, которые отвечают юзеру на два вопроса: где я и как отсюда уйти. Верхняя панель, боковая панель, вкладки, хлебные крошки, пагинация и меню. Разбираю анатомию, состояния и границы применения каждого – это статья серии по список элементов интерфейса UI Kit
→ App Bar (верхняя панель)
Полоса наверху экрана, где могут лежать логотип, название раздела, кнопка «назад», поиск и главные действия. Юзер смотрит туда первым делом, когда не понимает, куда попал
Из чего состоит
- Leading-зона слева (Left Side) – логотип, стрелка «назад» или иконка гамбургера, которая открывает боковую панель
- Заголовок – название текущего экрана (опционально), а не название продукта на каждой странице. Юзеру нужно знать, где он сейчас
- Trailing-зона справа (Right Side) – поиск, уведомления, аватар, главные действия
- Контейнер – высота, фон, тень или граница снизу. Именно он отделяет панель от контента при скролле
Состояния и поведение
Главный вопрос – панель прилипает при скролле или уезжает вверх вместе с контентом. Дальше варианты по высоте: обычная, увеличенная с крупным заголовком или свернутая
Частая ошибка
Сложить в панель все подряд. Пять иконок справа выглядят как набор равнозначных кнопок, и непонятно, какая главная. Оставь одно-два действия видимыми, остальное убери под «⋯» или бургер
→ Sidebar (боковая панель)
Боковая навигация по разделам продукта. На десктопе обычно стоит на экране постоянно, на мобильном выезжает по гамбургеру и накрывает контент затемнением
Из чего состоит
- Контейнер – ширина в развернутом и свернутом виде, фон, граница или тень
- Шапка – логотип, переключатель аккаунта или проекта
- Пункты меню – иконка, текст, опционально счетчик или бейдж справа
- Группы и разделители – если разделов больше пяти-семи, то их пора группировать
- Подвал – настройки, профиль, выход
Состояния пункта
Default, hover, selected (текущий раздел), disabled
Выбранный пункт – самое важное состояние: без него юзер теряет, где находится в продукте. Обычно это заливка, полоска слева и более жирное начертание, а не только смена цвета текста
Какие бывают
- Постоянная – всегда на экране, контент сдвинут (десктопные админки и рабочие инструменты)
- Сворачиваемая – схлопывается до иконок (экономит место, но иконки без подписи должны читаться однозначно, иначе нужен тултип)
- Модальная – выезжает поверх контента с бэкдропом, закрывается по клику мимо (мобилки и планшеты)
Частая ошибка
Два уровня вложенности внутри пунктов и еще один раскрывающийся аккордеон внутри. Юзер перестает понимать, где находится, а ты получаешь компонент, который сложно поддерживать
→ Tabs (вкладки)
Переключение между группами контента, которые лежат на одном уровне иерархии. Юзер остается на том же экране, меняется только содержимое области под вкладками
Из чего состоит
- Контейнер – полоса с вкладками, часто с границей снизу
- Вкладка – текст, опционально иконка или счетчик
- Индикатор – подчеркивание, заливка или капсула, которая показывает выбранную вкладку
Состояния
Default, hover, focused, active/selected, disabled. Индикатор выбранной вкладки не должен быть единственным маркером, лучше добавить смену цвета текста, иначе на маленьких экранах разница теряется
Какие бывают
- Fixed – все вкладки делят ширину поровну. Работает, когда их две-четыре и подписи короткие
- Scrollable – вкладки идут в строку и уезжают за край. Нужен визуальный намек, что справа есть еще: обрезанная вкладка или градиент
- Horizontal/Vertical – вертикальное или горизонтальное расположение в интерфейсе
Частая ошибка
Использовать вкладки вместо разделов (если говорим про сайт). Если под вкладками лежит контент разного смысла со своими адресами, то юзеру нужны нормальные страницы, а не переключатель. Вкладки хороши для однородного контента
→ Breadcrumbs (хлебные крошки)
Цепочка ссылок от главной до текущей страницы. Показывает не путь юзера по кликам, а место страницы в структуре продукта
Из чего состоит
- Пункты – ссылки на верхние уровни
- Разделители – стрелка или слеш между пунктами
- Текущая страница – последний пункт, обычный текст, не ссылка
- Схлопывание – если уровней много, средние прячутся под «⋯»
Состояния
Ссылка default и hover, текущий пункт неактивный. Отдельно продумай, что происходит с длинным названием: обрезается многоточием или переносится на следующую строку
Частая ошибка
Показывать в крошках историю переходов вместо структуры приложения. Юзер пришел из поиска, а ты рисуешь ему «Главная → Поиск → Страница». Крошки отвечают на вопрос «где эта страница лежит», а не «как я сюда пришла»
→ Pagination (пагинация)
Разбивка длинного списка на страницы. Юзер видит, сколько всего материала, и может прыгнуть в нужное место
Из чего состоит
- Номера страниц с выделенной текущей
- Стрелки вперед и назад, часто плюс «в начало» и «в конец»
- Схлопывание – при большом количестве страниц средние прячутся под многоточие
- Опционально – выбор количества элементов на странице и подпись «показано 1–20 из 340»
Состояния
Default, hover, focused, active/selected (текущая страница), disabled для стрелки, когда дальше двигаться некуда. Текущая страница не должна кликаться – это частая недоработка, которую замечают уже в проде
Чем заменить
- Кнопка «Показать еще» – когда юзер листает ленту и хочет догрузить, не теряя позицию
- Бесконечный скролл – соцсети и ленты. С ним теряется подвал сайта и возможность вернуться на то же место
Частая ошибка
Когда зона клика равна размеру цифры. Цифра 7 шириной восемь пикселей не равна кнопке: контейнер должен быть заметно больше того, что видно, особенно на телефоне
→ Dropdown / Menu (выпадающее меню)
Меню прячет варианты, чтобы не захламлять экран, и показывает их по клику. Это не универсальная замена всем контролам. Иногда дропдаун худший выбор из возможных
Из чего состоит
- Триггер – то, по чему кликают: селект, кнопка «⋯», пункт
- Контейнер меню – всплывающая панель со своей тенью и максимальной высотой
- Пункты списка – каждый со своими состояниями, иногда с иконкой слева
- Скролл, если пунктов много, и разделители, если пункты разного смысла
Какие бывают сценарии
- Обычный дропдаун – выбор одного значения из списка
- С поиском – когда опций много и проще ввести первые буквы
- Контекстное меню – вызывается по «⋯» или правому клику, содержит действия: «Редактировать», «Удалить»
- Мультивыбор – чекбоксы внутри списка, когда нужно выбрать сразу несколько пунктов
- Навигационное меню – дропдауны в боковой панели, где пункты ведут на отдельные страницы, а не выбирают значение
Частая ошибка
Меню, которое вылезает за край экрана. Продумай, куда оно раскрывается, если триггер стоит внизу справа: вверх, влево или прижимается к краю
→ Как выбрать элемент навигации?
Все шесть куда-то ведут, поэтому их легко перепутать. Я развожу их по вопросу, на который отвечает элемент
- Куда я могу пойти в продукте? Sidebar и App Bar (это верхний уровень, он одинаковый на всех экранах)
- Где я сейчас нахожусь? Breadcrumbs и активный пункт в Sidebar
- Что еще есть на этом же экране? Tabs. Уровень не меняется, меняется содержимое
- Как посмотреть остальные элементы списка/таблицы? Pagination
- Какие есть варианты и действия? Dropdown и контекстное меню
У навигации есть свойство, которого нет у кнопок и полей: она работает одинаково на всех экранах продукта. Юзер запоминает, где лежит меню и как вернуться назад, и любое исключение читается как поломка
Поэтому навигацию собирают один раз как компоненты с состояниями на токенах и дальше просто ставят на макеты
Соседние статьи серии: кнопки и действия в интерфейсе и общий список – список элементов интерфейса UI Kit, а про переменные я писала в что такое токены в дизайне
На модуле 2. UI Kit я подробно разбираю сборку элементов и их использование в интерфейсе
31.08.2026
от хаоса к системе
если не можешь выбрать модуль, пройди короткий тест