Продолжаем искать решения для улучшения дизайна вашего сайта. Сегодня рассмотрим второе решение.
2. Вкладки как элементы навигации
В своей основе, навигационные вкладки это прием очень похожий на слайдеры: большой объем информации будет занимать меньше места, чем потребовалось бы без использования этого приема. Навигация со вкладками является дастоточно распространенной практикой и есть несколько различных путей для ее использования. Мы сконцентрируемся на использовании вкладок в рамках одной страницы, а не в качестве основной системы навигаа сайта. Вкладки разделяют разные блоки информации и, в то же время, объединяют их в одной зоне, которая не будет занимать много места на странице.
Примеры Вкладок
Необычный фон, крупный интерфейс, четкое разделение
В качестве первого примера посмотрим раздел “Производительность” на сайте Mac Pro: это отличный пример хорошо собранного элемента вкладок. Ярлыки вкладок отчетливо видны, имеют большую зону для нажатия (чтобы никто не промахнулся) и хорошее визуальное разделение – они выглядят именно так, как ожидают большинство пользователей. Примечательно то, что фон ярлыка открытой вкладки совпадает с фоном основного блока информации. Неактивные вкладки имеют немного затемненный фон и небольшую тень от основого информационного блока для добавления эффекта глубины и объема. Очень простой эффект, но и очень эффективный.
Четкие вкладки с разделителями кнопок/ярлыков
Пример использования вкладок для представления информации в компактном виде. При создании разметки у Atebits не было много свободного места для нескольких секций с информацией. Поэтому они поместили три раздела в виде вкладок, чтобы страница оставалась аккуратной и организованной. Как и в прошлом примере, фон ярлыка открытой вкладки совпадает с фоном основной зоны с информацией. Неактивные вкладки выглядет более темно и в серых тонах. Также примечательны хорошие разделители между вкладками, для лучшего разнраничения каждой кнопки.
