Навигация на сайте: рисуем, что хотим
Меню навигации — один из важнейших элементов почти любого сайта. Хотите оценить мастерство веб-дизайнера, посмотрите на образцы навигационных панелей в его портфолио. Даже опытному мастеру трудно совместить в одной панели красоту, заметность, удобство и понятность. Если это сделать удалось, то с остальными элементами он справится без труда.
Что важнее, навигация, контент или дизайн? В процессе аудита сайта на этот вопрос нельзя ответить однозначно. Зато однозначно можно сказать, что без меню навигации на сайте к контенту никак не попасть, тогда и дизайн не спасет. Вот почему панель навигации всегда располагают на самом видном месте.
В этой статье собраны примеры последних решений в оформлении меню навигации. Обратите внимание, речь именно об оформлении, а не о том, как правильно составлять перечень рубрик. Даже меню-произведение искусства не сможет спасти плохую рубрикацию, созданную с «китайской» логикой.
Подборка взята из онлайн-журнала SmashingMagazine.com. В нем говорится о «тенденциях», но я не очень люблю это слово: сегодня одни тенденции, а завтра — другие. Настоящие тенденции — это то, что приходит надолго. Так что лучше использовать слово «решения». Итак, поехали!
Решение № 1. 3D.
Имитация
Например, на этом сайте контент расположен на белой «бумаге», которую держат цветные навигационные «крепежи».
Голубая лента охватывает верхнюю часть поля с контентом.
На этом сайте меню расположено вертикально. Активный раздел охвачен зеленой ленточной, а при наведении мыши на остальные части меню появляется бирюзовая.
На этом сайте название активного раздела кажется вдавленным в зеленое поле меню, словно здесь присутствует кнопка. Одновременно над ним появляется «пузырь» с описанием раздела. О «пузырях» будет сказано ниже.
Еще одна ленточка.
Решение № 2. «Пузыри»
Диалоговые «пузыри» дороги сердцу каждого американского дизайнера, выросшего на комиксах. У нас комиксы не входят в пул культурных ценностей, однако «пузыри» могут украсить и русскоязычные сайты. «Пузыри» — отличный способ отказаться от банальных прямоугольников, которые господствуют в дизайне навигационных меню, и расположить ссылки в необычном порядке.
Так выглядит навигация на сайте дизайнера Алексея Абрамова.
Вариант, который называется «мыслительный пузырь». Серия овалов обозначает не речь, но мысль. А не пойти ли мне домой?
Здесь «пузыри» проистекают из речевого отверстия некоего существа, кажется пришельца.
Этот вариант — компромисс двух решений: стандартного прямоугольника и «пузыря». Не знаю, как вам, а мне здесь нравится утонченное сочетание оттенков.
То же самое, но с эффектом незавершенного наброска.
Этот дизайн примечателен сочетанием ярких «пузырей» и черного фона.
А этот тем, что «пузырный» отросток появляется только при активации раздела. Заодно меняется и цвет фона.
Решение № 3. Округлости.
Округлости в почете в современном дизайне, от автомобильного до дизайна гаджетов. Рубленные края не в моде.
Многие сайты хотят казаться простыми и дружелюбными, стараются избегать корпоративной серьезности. Самый простой способ — округлить бока там, где это возможно. Первыми на очереди навигационные кнопки.
Несмотря на классические корпоративные оттенки этот сайт кажется менее строгим благодаря мягким уголкам «менюшек».
На этом сайт кнопки еще и нажимаются, слегка смещаясь со своего места: немного игривости на серьезном сером фоне.
Дизайн и веб-стандарты. Округлости этого сайта заметны только в последних версиях современных браузеров: Safari, Firefox. Opera и Chrome. В Explorer кнопки меню выглядят обычными прямоугольниками.
Решение № 4. Иконки.
Интернет превращается в полноценную рабочую среду, поэтому иконки, к которым мы привыкли, работая на компьютере, находят свое место и в Сети. Повсеместное распространение скоростного соединения позволяет создавать более тяжелые сайты с большим количеством графики.
Иконки цепляют глаз и отличаются более высокой кликабельностью в сравнении с простым текстом. В интернете можно найти россыпь бесплатных иконок, впрочем нарисовать их не составит труда любому дизайнеру. Добро пожаловать в эпоху иконопочитания.
Выпадающее меню с иконками. Обратите внимание на углы и
Здесь иконки отмечают только активный раздел.
Нарочитый примитивизм крупных иконок в вертикальном меню.
Яблочный стиль, куда без него?
Кому-то нравится быть несерьезным.
Решение № 5. Анимация.
Не слишком практичные, зато визуально впечатляющие сайты используют JavaScript анимацию для оформления навигационного меню.
При наведении курсора полароидные снимки подскакивают. Смысла в этом немного, зато приятно поелозить мышью туда-сюда.
Здесь дизайнер использовал анимацию в практических целях. При наведении курсора всплывает подсказка: «Ну кликай же!» Белый Дом ждать не любит.
А на этот сайт дам ссылку: помотайте коровушку по полю. Бутылки надо сбивать, а на червяков не приземляться.
Решение № 6. Нестандартные формы.
«Пузыри», прямоугольники — все это те же яйца, вид сбоку. Некоторые дизайнеры экспериментируют с формами и материалами. Кстати, это несложно. Любой предмет или форма могут стать основой для навигационного меню. Те же яйца. Как вам идея пасхального сайта с панелями в виде разноцветных яиц? И почему до этого никто не додумался?
Зато есть значки.
Клейкие бумажки для заметок.
Визитки.
А можно просто намалевать нечто аморфное.
Понатыкать кружков.
Поиграть в анонимку.
Или посветить фонариком.
По моему мнению, наибольшие перспективы у иконок. Остальные решения подходят не для всех сайтов: они какие-то несерьезные и игровые и сразу задают тон всему дизайну. Согласитесь, все эти ленточки и округлости создают настроение, которому должны следовать остальные элементы дизайна. Я с трудом представляю себе сайт крупного банка или юридической конторы с лентой в шапке и симпатичными пузырями по всей физиономии.
А вот иконки могут быть разные: строгие и веселые, минималистичные и барочные, однотонные и расписные.
____________
Вы можете заказать полный или частичный анализ сайта и выяснить, как повысить его эффективность. Любой сайт можно сделать лучше. Узнайте больше об услуге Аудит сайта.
