Scott
Используйте вкладки, когда человеку нужно переключаться между связанными представлениями одного объекта, не теряя контекст. Оставляйте подписи видимыми, ясно выделяйте выбранную вкладку и сохраняйте незавершённую работу при переходе в другую. Вкладки плохо подходят для разделов, которые нужно сравнивать одновременно или проходить в обязательной последовательности.
Рассмотрим рабочее пространство проекта с тремя вкладками: «Обзор», «Задачи» и «Активность». Все они относятся к одному проекту, но отвечают на разные вопросы. Это локальное решение внутри общей системы навигации продукта: проект остаётся тем же, меняется его содержимое.
Начните со связи между разделами
В нашем примере «Обзор» объясняет цель проекта и его текущий статус. «Задачи» содержат работу, которую предстоит выполнить. «Активность» показывает изменения и обсуждения. Человек может сразу открыть любую вкладку: читать обзор перед переходом к задачам не требуется. Именно эта независимость делает группировку полезной.
Не добавляйте в тот же ряд «Создать», «Проверить» и «Опубликовать». Это действия или этапы, а не альтернативные представления. Если публикация возможна только после проверки, интерфейс должен показывать последовательность. Ряд вкладок создаст впечатление, что этапы взаимозаменяемы, и может скрыть причину, по которой нельзя продолжить.
Общую информацию о проекте размещайте над вкладками: название, настройки доступа и короткий статус. Действия отдельного раздела оставляйте внутри его панели. Кнопка «Добавить задачу» относится к вкладке «Задачи»; рядом с названием проекта она будет выглядеть доступной и в «Обзоре», и в «Активности». Такое разделение сохраняет понятное назначение вкладок и не смешивает навигацию с командами.
У вкладок есть и обратная сторона: часть информации скрыта. Если менеджеру нужно сопоставлять общий срок проекта с датами отдельных задач, покажите срок рядом со списком задач или добавьте краткую сводку. Постоянно переключаться между «Обзором» и «Задачами», чтобы запомнить дату, неудобно.
Сначала выделите выбранную вкладку, затем добавляйте оформление
Подписи должны помогать предсказать содержимое. «Задачи» понятнее, чем «Управление»: управление может относиться к участникам, оплате или настройкам. Сохраняйте одинаковую грамматическую форму и уровень конкретности. «Обзор», «Задачи» и «Активность» сочетаются друг с другом; «Обзор», «Управлять задачами» и «Всё остальное» — нет.
Выбранная вкладка должна восприниматься как часть открытой панели. Эту связь можно обозначить подчёркиванием, заливкой или контрастной рамкой. Используйте устойчивый признак, который не исчезает при наведении и не зависит только от едва заметной разницы цветов. Остальные подписи тоже должны хорошо читаться: невыбранная вкладка не означает недоступную.
Если рядом с «Задачами» есть счётчик, определите, что он означает. Число «12» может обозначать все задачи, открытые задачи или задачи текущего пользователя. В этом рабочем пространстве оставим вкладку без счётчика, а внутри панели напишем «12 открытых задач». Добавлять число к вкладке стоит, если оно помогает решить, какой раздел открыть. Не ставьте счётчики везде только ради визуального равновесия.
Разделяйте выбранную вкладку и фокус клавиатуры
В паттерне вкладок W3C на английском перемещение фокуса отделено от открытия панели. В горизонтальном ряду стрелки влево и вправо перемещают фокус между вкладками. При ручной активации Enter или пробел открывает вкладку в фокусе. Автоматическое открытие уместно, если панели появляются без заметной задержки; иначе перемещение по ряду замедляется. Выбранной вкладке задают aria-selected="true". Вкладка связывается со своей панелью через aria-controls, а подпись вкладки служит именем панели. Эти отношения нужно реализовать в компоненте, а не только показать на макете.
Для нашего пространства выберем ручную активацию: «Активности» может понадобиться загрузить дополнительные данные. Представьте, что открыты «Задачи», а фокус переместился на «Активность». «Задачи» должны сохранить признак выбора и своё содержимое. На «Активности» появляется отдельная рамка фокуса. Панель меняется только после активации. Если оба состояния обозначены одинаковой фиолетовой линией, невозможно понять, что уже открыто, а что только готово к открытию.
Покажите это сочетание явно: выбраны «Задачи», фокус находится на «Активности». Затем покажите состояние после активации, когда «Активность» и выбрана, и находится в фокусе. Одного варианта компонента «активная вкладка» недостаточно для объяснения обеих ситуаций. Если продукт поддерживает светлую и тёмную темы, проверьте различимость состояний на обоих фонах, не меняя логику поведения.
Показывайте загрузку и ошибку внутри выбранного раздела
После активации сразу выделите «Активность» и покажите загрузку внутри её панели. Если под выбранной «Активностью» остаётся таблица задач, подпись и содержимое противоречат друг другу. Во время запроса сохраняйте доступ к заголовку проекта и другим вкладкам, чтобы человек мог перейти в другой раздел.
Область загрузки должна занимать примерно столько же места, сколько заменяемое содержимое. Маленький индикатор может схлопнуть рабочую область и сдвинуть элементы управления; слишком большой скелетон — обещать строки, которые так и не появятся. В нашем примере достаточно простого заполнителя и короткого сообщения «Загрузка активности».
Если запрос завершился ошибкой, объясните её в «Активности» и предложите повторить попытку там же. «Пока нет событий» — не сообщение об ошибке: оно означает, что запрос выполнился и ничего не нашёл. Ограничение прав доступа тоже требует отдельного объяснения. Не блокируйте весь ряд вкладок из-за недоступности одной панели.
| Ситуация | Что показывать в панели | Что остаётся доступным |
|---|---|---|
| Активность загружается | Состояние загрузки под выбранной вкладкой «Активность» | Заголовок проекта и другие вкладки |
| Запрос активности завершился ошибкой | Короткое объяснение и повторная попытка | «Обзор» и «Задачи» с сохранённым состоянием |
| В проекте ещё нет событий | Пустое состояние с объяснением, что здесь появится | Обычная навигация и доступные действия проекта |
| Задача не дописана | Черновик при возвращении к «Задачам» | Понятный способ сохранить или удалить черновик |
Переключайте представление, не теряя работу
Допустим, человек начал добавлять задачу, а затем открыл «Обзор», чтобы уточнить срок. Вернувшись в «Задачи», он должен увидеть незавершённое название и выбранную дату. Смена вкладки не означает просьбу удалить введённое. То же относится к полезному фильтру или позиции в длинном списке.
Определите, какое состояние относится только к текущему проекту, а какое сохраняется шире. Черновик задачи принадлежит этому проекту. Предпочитаемая плотность списка может быть общей для разных проектов. Если случайно перенести специфический фильтр в другой проект, часть работы покажется исчезнувшей. Запишите эти границы рядом с описанием взаимодействия, а не заменяйте их общей фразой «запоминать всё».
Если сохранить ввод нельзя, сообщите об ограничении до потери данных. В подтверждении нужно назвать последствие, например «Удалить незавершённую задачу?», и отдельно предложить продолжить редактирование или удалить черновик. Не показывайте предупреждение при каждом переключении. Когда оно появляется без несохранённой работы, человек привыкает закрывать именно то сообщение, которое однажды окажется важным.
Если представления проекта можно отправлять по ссылке, согласуйте с разработчиками прямой URL выбранной вкладки и поведение кнопки «Назад» в браузере. Ссылка на «Активность» должна открывать её, а не заставлять получателя искать нужное в «Обзоре». Добавлять ли каждое переключение в историю браузера — отдельное решение. Не превращайте возврат назад в неожиданное путешествие по длинной цепочке случайных переключений.
Сохраните удобство на узком экране
Сначала проверьте три подписи на реальной ширине мобильного экрана и с увеличенным текстом. Прежде чем сокращать содержательные названия, уберите декоративные значки или лишние отступы. Не уменьшайте шрифт до тех пор, пока всё не поместится: полный ряд бесполезен, если подписи трудно читать или нажимать.
Один горизонтально прокручиваемый ряд позволяет сохранить вкладки, когда длинные переводы не помещаются. Покажите, что ряд продолжается, оставляйте выбранную вкладку в видимой области и не заставляйте точно рассчитывать свайп ради последнего пункта. Проверяйте самые длинные подписи, а не считайте короткий английский вариант образцом для всех языков.
Если разделов слишком много для удобного ряда, пересмотрите группировку. На небольшом экране лучше может сработать явно подписанный переключатель представлений, если варианты образуют единый набор. Текущий выбор должен оставаться видимым, а переход — сохранять то же состояние проекта, что и на компьютере. Перенос вкладок на несколько строк обычно ослабляет визуальную связь между выбранной подписью и её панелью.
Спроектируйте рабочее пространство целиком в Pixso
Соберите в Pixso «Обзор», «Задачи» и «Активность» как три представления одного учебного проекта. Сохраняйте общий заголовок на месте и меняйте только нужную панель и выбранное состояние. Рядом с открытыми «Задачами» покажите «Активность» в фокусе, но без выбора, чтобы участникам обсуждения не приходилось догадываться о различиях по эффекту наведения.
Дайте участнику конкретную задачу: начать добавлять задачу, уточнить срок проекта в «Обзоре», вернуться и закончить черновик. Затем попросите открыть «Активность» при медленном соединении. Такие маршруты лучше выявляют потерю ввода, непонятный выбор и сдвиги макета, чем просмотр одного ряда вкладок. Макет показывает ожидаемое поведение; работу клавиатуры и связи между вкладками и панелями нужно проверить и в готовом интерфейсе.
При передаче в разработку сосредоточьтесь на решениях, влияющих на этот путь: что содержит каждая вкладка, когда меняется выбор, что сохраняется при переходе и как перестраивается ряд. Хорошие вкладки создают ощущение одного рабочего пространства с несколькими полезными представлениями, а не набора страниц, которые постоянно забывают, где был пользователь.
