Взгляд на навигацию в веб-дизайне. Веб-навигация: улучшаем и совершенствуем Тренды в дизайне веб-навигации

Эффективность веб-проекта, возможность получения дохода или прибыли от сайта, прямо пропорционально зависит от системы навигации на нем. Навигация сайта входит в основу восприятия целостного веб-дизайна наряду с компоновкой сайта и его структурой. Какую бы навигацию для проекта вы не выбрали, немного любви и творчества не навредит, а скорее оставит только приятные эмоции от путешествия по сайту. Сегодня мы рассмотрим различные примеры навигации.

Наиболее популярными и все еще актуальными «путеводителями» по сайтам являются ролловеры (от англ. rollover). Они могут быть обыграны графикой, либо просто представлять собой текстовую гиперссылку. Ролловеры, как правило, помогают ответить пользователю на вопрос «Где я уже был?».

Навигация на сайте может быть вертикальная, горизонтальная и комбинированная. Вне зависимости от выбора типа навигации, если в ней присутствует основное - логика, можно побудить посетителей просматривать те страницы сайта, которые сам владелец считает приоритетными. Грамотно составленная система навигации позволяет пользователю перемещаться по сайту не задумываясь о своих действиях.

Удобная навигация это:

  • возможность попасть на наиболее важные страницы сайта всего за один клик;
  • максимум три клика, чтобы перейти от исходной до нужной страницы на сайте;
  • использование стандартных и общепринятых элементов навигации;
  • визуальное выделение и эффектность элементов навигации;
  • возможность пользователю попасть на нужную ему страницу несколькими способами (дублирование элементов навигации).

Какую бы навигацию для проекта вы не выбрали, немного любви и творчества не навредит, а скорее оставит только приятные эмоции от путешествия по сайту. Онлайн-портфолио фотографа в виде книги. Разноцветные квадратные кнопки служат переходом к страницам сайта, а листает странички вентилятор. Это один из немногих случаев, когда ждать загрузку страниц совсем не скучно.

Веб-дизайн из Украины. Наслаждаться рабочим столом с элементами навигации можно бесконечно долго.

Сайт актрисы Сары Хайленд (Sarah Hyland) является истинным отражением ее личности. Эскизы, использованные в качестве меню, подходят для этой странички идеально!

Необязательно понимать испанский язык, чтобы оценить эстетическую сторону рисованного меню этого сайта. Симпатичная «небрежность» придает проекту экстравагантности.

Креативное агентство оригинально во всем. Навигационное меню в виде шкалы измерений.

Яркий сайт бюро путешествий с не менее красочным и запоминающимся меню.

Необычный сайт человека с необычным увлечением. Веб-проект картографа-любителя.

Пункты меню вроде как нарисованы от руки, правда?

Недаром пункты меню обозначены пиктограммами, ведь этот проект как раз и посвящен иконкам для сайтов.

Интернет-проект для размещения портфолио. При клике на любой из пунктов меню картинка «утапливается».

Еще одно оригинальное представление меню.

Все гениальное - просто.

Не меню, а сплошная мозаика. Необычно и практично.

Каждая фигурка на странице что-то , да таит в себе.

Сайт готовых проектов домов и коттеджей с наглядными материалами, доступ к которым осуществляется в один клик.

Самое оригинальное hand-made ателье.

Навигация - это то, что помогает пользователю путешествовать по сайту. Это структура каталога в интернет-магазине, помогающая отыскать нужную вещь, меню информационного сайта с подразделами для разных групп контента, список тем на новостном портале и так далее.

Навигация всегда используется посетителями вне зависимости от их знаний относительно терминологии. И чем она проще, тем быстрее пользователь находит нужную ему информацию и тем лучшее впечатление остается от вашего ресурса. Запутанные пути, даже если и приводят к нужному результату, все же могут обеспечивать его постоянно. Но зачастую пользователи просто уходят с сайта в недоумении, так и не поняв, как пользоваться всем этим «богатством».

Какой должна быть навигация


Вот 8 критериев, по котором нужно оценить существующую навигацию. Если на вашем сайте все не так - изменяйте. Если же вы только создаете ресурс, ориентируйтесь на наши советы сразу, чтобы потом не пришлось переделывать. Итак, навигация на сайте должна соответствовать таким критериям:


Не забывайте, что всем этим правилам должна соответствовать не только первичная, но и вторичная навигация.

Привет, Уважаемые подписчики!

Только закончил работу над очередным проектом. В нем помимо основного меню, присутствовала так же и навигация . И я решил, что неплохо было бы показать вам, как подобные вещи делаются буквально в несколько строк кода. Причем делается это исключительно средствами html и css.

Такая навигация ставится обычно слева на сайте. Ничего сложного при ее разработке нет. Каждый пункт навигации заключаем в тег

…

. В него ставится ссылка.

PSD макет данной вещи для тренировки можно скачать .

Так же данный урок доступен в видео версии , которую можно скачать здесь:

Ну, в общем все! Давайте посмотрим на код, и все станет ясно окончательно.

О ЦЕНТРЕ

ФОТОГАЛЕРЕЯ

ПРЕЙСКУРАНТ ЦЕН

КОНТАКТЫ

Все остальное будем делать с помощью стилей.

Для класса.bar-menu назначаются стили, которые нужны исходя из расположения соседних блоков. У меня в примере ничего кроме этой навигации на странице нет, поэтому я просто задам ему ширину.

Поскольку текст располагается по центу, то проще всего его отцентрировать, задав для тега

выравнивание текста по центру.

Картинки вырезаны, принимаемся писать css код для навигации. Точнее для ссылок навигации! Остальные стили у нас уже есть.

font-family:Tahoma;

font-weight:bold;

И что ж мы увидим?

Почему так? Дело в том, что фоновая картинка расположилась в ссылке ровно на столько, сколько ей позволяет это сделать текст. То есть ширина и высота ссылки определяется лежащим в ней текстом. Это кстати явный признак строчных тегов. Давайте укажем ширину и высоту:

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-weight:bold;

width:190px;

height:27px;

По-прежнему ничего не изменилось.

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-weight:bold;

display:block;

Вроде начинает навигация принимать нужный нам вид:

Добавляем отступ снизу у каждой из ссылок. Так же добавляем padding-top для каждой из ссылок и незабываем его вычесть из высоты:

background:url(images/bg-menu-main.jpg) center center;

font-family:Tahoma;

font-size:10px; color:#056e04;

font-weight:bold;

height:21px;

margin-bottom:10px;

padding-top:6px;

Получаем то, что нужно:

Bar-menu h2 a:hover {

background:url(images/bg-menu.jpg) center center;

font-family:Tahoma;

color:#ffffff;

font-weight:bold;

margin-bottom:10px;

padding-top:6px;

text-decoration:none;

Вот и получилась наше навигационное меню:

Надеюсь, урок будет полезен. С вами был Андрей. Спасибо за внимание. До встречи в очередных уроках!

В этой статье рассмотрим интересные способы оформления навигации, которые используются сегодня. Некоторые из них используются достаточно давно, другие – новый взгляд на навигацию сайта, третьи представляют собой несколько измененные шаблоны, использующиеся для создания правильного контекста ресурса.

Это классический шаблон навигации. Представляет собой список ссылок, расположенный в верху страницы горизонтально или вертикально. Этот способ никогда не перестанет быть актуальным.

Данный вид навигации лучше всего работает на небольших сайтах, где в навигации представлено всего несколько пунктов.

Примеры:

Скрытая навигация

Часто такой вид навигации применяется в мобильных устройствах, помогая экономить пространство. Часто имеет смысл скрывать такое меню за одной кнопкой (гамбургер-меню). Некоторые дизайнеры используют такое меню для того, чтобы скрыть даже небольшое количество ссылок.

В случае, например, с Awwwards (), скрывать пункты меню действительно имеет смысл, т.к. их сайт содержит сложное меню, которое требует достаточно много места экрана.

Другие примеры:

Гибридная навигация

На крупных сайтах, и, в особенности, в мобильных приложениях, часто необходимо использовать более одной формы навигации. Например, скрывать отдельное окно навигации за значком гамбургера.

Сайты этой категории часто используют навигацию в нижней части страницы (футере). Иногда такая навигация просто копирует пункты с верхней части сайта, делая его более удобным. В других случаях, в футере размещаются вторичная навигация, полезная для ограниченного небольшого числа пользователей.

Примеры:

Системная навигация

Для примера посмотрите практически на любой новостной сайт или Pinterest. Вот, где используется такого рода навигация.

Она используется для знакомства пользователей с категоризированными постами и другими сборниками информации. Если информация на сайте распределена по темам, датам, тегам, эта способ навигации для вас.

Примеры:

Экспериментальная навигация

Это не один отдельный шаблон, а целая коллекция. Ее можно назвать «Портфолио навигации», потому что такая навигация чаще всего используется на сайтах-портфолио, где дизайнеры чувствуют полную свободу своей креативности. Такие сайты обычно отличаются отсутствием традиционного меню или рассеиванием пунктов меню по всей странице.

WWW (World Wide Web ) - это только часть услуг, которыми располагает Интернет. Помимо WWW, с помощью Интернета мож­но воспользоваться электронной почтой, FTP-сервисом, телекон­ференциями и другими услугами. На русский язык WWW переводят по-разному, от «всемирная паутина» до «ППП - Повсеместно Про­тянутая Паутина».

WWW - самый популярный сервис на базе Интернета, и в то же время самый молодой. Популярность WWW зарабатывает в основ­ном на удобстве представления информации, не сравнимой с други­ми сервисами.

WWW построена на технологии, в основу которой положен ги­пертекст, т.е. текст со ссылками. Разработка этой технологии в ос­новном проводилась в Европейской лаборатории физики элемен­тарных частиц (CERN) в Женеве. Сейчас можно говорить не о ги­пертекстовой, а о гипермедийной среде, т.е. сеть перестала быть текстовой, в ней появилось огромное количество графики, музыки и т.д. Сайты строятся по новым технологиям, напримерFlash, т.е.не содержат текста как такового.

Перемещение от сайта к сайту или от страницы к страницы осу­ществляется с помощью гиперссылок.

Для адресации в WWW используется URL. В общем виде URL записывается как

протокол://адрес сервера (host domain ):[порт]/путь/имя_файла

Рассмотрим, например, адрес: http :// www . rea . ru / new / index . htm . Здесь:

    http - определяет протокол, т.е. способ передачи документа. HTTP - это протокол, который служит для работы с гипертексто­выми документами;

    www . rea . ru - адрес сервера, где www - узел, на котором раз­мещен сайт, геа и ru - имена доменов второго и третьего уровня;

    new - каталог (путь) к искомому файлу;

    index . htm - имя файла, гдеhtm - его тип.

Номер порта в данном случае не используется, и считается, что данные расположены на стандартном порту для данного протокола.

Часто в поле ввода адреса браузера будет достаточно ввести только адрес сервера (www . rea . ru ). Протокол HTTP будет дописан по умолчанию. Также по умолчанию будет открыт файл index из корневого каталога.

Браузеры

Браузеры (browser) - это программы-обозреватели, с помощью которых можно просматривать ресурсы WWW. Также с помощью браузеров можно просматривать HTML-файлы и некоторые другие типы файлов, не будучи подключенным к сети.

Браузеры могут интерпретировать адреса (URL), маркеры языка HTML , а также понимать несколько Интернет - протоколов, таких, как HTTP, FTP.

К наиболее популярным браузерам относятся Microsoft Internet Explorer, Netscape Navigator, Opera.

2.6. Семейство программ корпорации Microsoft для работы в Интернете

Семейство программ корпорации Microsoftдля работы в Интернете было создано за достаточно короткий срок - с 1995 по 1997 г. и перво­начально уступало по популярности программам фирмы Netscape Communications. Однако после выпуска серии программ Internet Explorer , а затем и интеграции их в операционную систему Windows 98, положение резко изменилось. Особенно это относится к русскоязыч­ной части Интернета. Считается, что более 70% пользователей в на­стоящее время работают с программами Internet Explorer. Каждая про­грамма семейства предназначена для решения конкретной задачи, но их пользовательский интерфейс весьма похож, что облегчает процесс изучения. В семейство программ для работы с Интернетом входят:

    обозреватель Internet Explorer - программа просмотра доку­ментов WWW, локальной сети или интрасети;

    программа для обмена сообщениями и работы с группами но­востей OutLook Express ;

    программа NetMeeting - средство проведения конференций через Интернет или в"локальной сети с возможностями вызова, передачей голоса и видеоизображения;

    программа NetShow , позволяющая воспроизвести в Интернете мультимедийные документы;

    программа FontPage Express - редактор доку­ментов на языкеHTML.