Продолжаем искать решения для улучшения дизайна вашего сайта. Сегодня рассмотрим второе решение.
2. Вкладки как элементы навигации
В своей основе, навигационные вкладки это прием очень похожий на слайдеры: большой объем информации будет занимать меньше места, чем потребовалось бы без использования этого приема. Навигация со вкладками является дастоточно распространенной практикой и есть несколько различных путей для ее использования. Мы сконцентрируемся на использовании вкладок в рамках одной страницы, а не в качестве основной системы навигаа сайта. Вкладки разделяют разные блоки информации и, в то же время, объединяют их в одной зоне, которая не будет занимать много места на странице.
Примеры Вкладок
Необычный фон, крупный интерфейс, четкое разделение
В качестве первого примера посмотрим раздел “Производительность” на сайте Mac Pro: это отличный пример хорошо собранного элемента вкладок. Ярлыки вкладок отчетливо видны, имеют большую зону для нажатия (чтобы никто не промахнулся) и хорошее визуальное разделение – они выглядят именно так, как ожидают большинство пользователей. Примечательно то, что фон ярлыка открытой вкладки совпадает с фоном основного блока информации. Неактивные вкладки имеют немного затемненный фон и небольшую тень от основого информационного блока для добавления эффекта глубины и объема. Очень простой эффект, но и очень эффективный.
Четкие вкладки с разделителями кнопок/ярлыков
Пример использования вкладок для представления информации в компактном виде. При создании разметки у Atebits не было много свободного места для нескольких секций с информацией. Поэтому они поместили три раздела в виде вкладок, чтобы страница оставалась аккуратной и организованной. Как и в прошлом примере, фон ярлыка открытой вкладки совпадает с фоном основной зоны с информацией. Неактивные вкладки выглядет более темно и в серых тонах. Также примечательны хорошие разделители между вкладками, для лучшего разнраничения каждой кнопки.
Четкое отделение всего набора вкладок
На сайте Fontcase можно увидеть хорошо продуманные вкладки, которые выглядят и чувствуются очень современно. Хотя неотркытые вкладки не имеют разделителей, открытая заметно отделена. Также четко просматривается граница всего набора вкладок сверху и снизу. Во вклдаках используется изображения и белое пространство для поддрежки текста и упрощения использования самих вкладок.
Скрипты вкладок
Все эти примеры и многое другое вы можете использовать для вашей работы используя следующие бесплатные скрипты, руководства и ресурсы (на английском):
- Create a Slick Tabbed Content Area using CSS & jQuery
- JavaScript tabifier
- Yetii – A JavaScript Tab Interface
- Tabbed Page Interface
- Updated JQuery Nested Tab Set
- Scriptaculous Tabs
- Accordian Tabs
Продолжение следует…
Об авторе
Мэт Кронин (Matt Cronin) – алчный графический дизайнер, веб-дизайнер/разработчик. В данный момент работает над запуском проекта VAEOU, который скоро принесет нам новые сервисы. Follow Matt on Twitter
Источник: 8 Layout Solutions To Improve Your Designs
Оставляйте свои мнения и пожелания в комментариях ниже. Также подписывайтесь на RSS-поток для удобного получения свежих статей.
Может Вас заинтересовать:
- 8 решений для улучшения дизайна сайта. Решение первое
- Is Twitter Under Attack from Russia?
- Поиск и удаление повторяющихся файлов с жесткого диска
- Создай текстовое облако для своего сайта/блога
- 53 свежие темы для WordPress. Весна 2009
