Вкладки (Tabs) организуют контент в несколько разделов и позволяют пользователям перемещаться между ними. В этой статье мы рассмотрим основные рекомендации по дизайну для создания идеальных вкладок.
Общие рекомендации по дизайну
Вкладки всегда содержат не менее двух элементов, и одновременно активна одна вкладка. Визуальный стиль вкладок может быть разным, но вот два наиболее распространенных стиля:
1. Контекст
Вкладки используются в контексте отдельных страниц для организации групп контента или настроек, чтобы пользователям не приходилось уходить с конкретной страницы для выполнения поставленной задачи.
При разработке интерфейса не заставляйте пользователей переключаться между несколькими вкладками, чтобы сравнить информацию. Вкладки должны содержать достаточно информации, чтобы помочь пользователям принимать взвешенные решения.
2. Текстовые метки
Используйте короткие метки вкладок, которые должны быть четкими и конкретными. Метки должны состоять из одного-двух слов, так как их легче понять. Текстовые метки должны четко сообщать пользователям, какой контент они увидят при нажатии на вкладку.
3. Состояния
Вкладка может иметь три состояния: выбранная, по умолчанию и отключенная.
- Выбранная. Одна из вкладок должна быть выбрана по умолчанию, когда пользователь загружает страницу. Обычно это первая вкладка. Когда пользователь выбирает новый элемент, предыдущая вкладка автоматически теряет выбор.
- По умолчанию. Все остальные доступные вкладки не выбраны.
- Отключенная. Элемент вкладки в отключенном состоянии означает, что элемент вкладки существует, но в данный момент недоступен для выбора. Это состояние можно использовать для сообщения о том, что вкладка может стать доступной позже.
4. Иконки на вкладках
Если значок облегчает восприятие вкладки, подумайте о том, чтобы дополнить его текстовой надписью. Старайтесь не создавать вкладки только со значками, поскольку лишь небольшое количество иконок имеет универсальное значение.
5. Вертикальные вкладки
По умолчанию вкладки располагаются горизонтально, но в условиях ограниченного горизонтального пространства можно использовать и вертикальные вкладки. Вертикальные вкладки можно использовать как ссылки на различные части страницы (т. е. ярлыки на разделы документа).
Лучшие практики оформления вкладок
1. Используйте вкладки для связанного контента
Вкладки используются для организации связанного контента. Они позволяют пользователю перемещаться между группами информации, которые появляются в одном и том же контексте.
❌ Не смешивайте элементы разной природы на вкладках.
✅ Используйте вкладки для связанного контента.
2. Не создавайте вложенные вкладки
Избегайте многоуровневых вкладок. Если нужно создать второй уровень, можно использовать аккордеон или разворачивающиеся панели.
❌ Не используйте вложенные вкладки
3. Не используйте панель вкладок для индикации прогресса
Вместо этого используйте индикатор выполнения.
❌ Не используйте вкладки в качестве индикаторов прогресса.
✅ Используйте степперы, если вам нужно сообщить о прогрессе
4. Правильно выравнивайте навигацию по вкладкам
Как правило, первая метка для вкладок выравнивается по сетке и тексту ниже.
✅ Выровняйте метки вкладок по сетке