Мы привыкли считать, что навигация по сайту — это всего лишь переход от страницы к странице через какой-то глобальной навигатор, который всегда в поле зрения. Когда мы работаем с одной страницей, мы часто думаем, что прокрутка является одним и единственным способом перехода от начала в конец.

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

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

Джесси и Расс

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

Как создать навигацию, которая сохраняла бы последовательность в событиях? Конечно, есть воспоминания и другие моменты повествования, но по большей части вы рассказываете историю от начала до конца. Вы двигаетесь через рассказ по прямой линии, а навигатор просто прокручивает страницу. Больше ничего и не надо.

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

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

История вашего проекта не может быть только линейной,  хотя с большой долей вероятности так и будет. Урок от Джесси и Расса показывает как  вы должны проектировать линейную часть вебсайта, и если вы хотите, чтобы люди двигались по нем в одном направлении, прокрутка, возможно, лучший вариант. Вы также можете захотеть рассматривать одну, большую страницу, в отличие от несколько более коротких, связанных между собой.

Ballantyne

Ballantyne создает роскошные трикотажные изделия из кашемира.Сам сайт содержит различные типы информации. В начале сайта расположены стандартные разделы информации “О нас” и “Контакты”. Помимо этого есть альбомы изображений и фрагментов текста, чтобы дополнять изображения. Все это легко представить себе листая страницы каталога.

Как сайт Джесси и Расса, этот сайт полностью на одной странице, прокрутка снова является преобладающим способом навигации. Это не единственный  способ, хотя , пожалуй, более интересный.

В области раздела для домена есть ссылки “Основана в 1921″ и “Контакты”. Последний щелчок прокручивает страницу вверх, чтобы увидеть информацию “Кто мы ” раздел (Информация о “О нас” ) выше. Последний  переместит вас через все изображения и текст в нижнюю часть страницы, а также контактную информацию.

По прибытию в любой из этих целевых каталогов вы также знакомитесь с ​​ дополнительными способами навигации. Часть страницы “ Кто мы ”  содержит значок  “X” закрыть ее, хотя эта информация на самом деле не может быть открыта или закрыта — он просто  вернет вас на главный  раздел начальной страницы, которую вы также можете сделать самостоятельно.

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

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

Как и сайт Джесси и Расса, сайт Ballantyne  более приятен для просмотра, чем большинство.Здесь нам также предоставили альтернативные средства навигации в дополнение к прокрутке.Хотя все же есть несколько проблем:

• Нет  ссылки, чтобы вернуться на прежнее место.Вы должны прокрутить полосу чтобы попасть туда, или сначала перейти в раздел “Кто мы” и закрыть его. Это кажется неудобным.
• Нажимая либо “ Кто мы ” или “ Контакты” происходит не совсем плавный переход.
• Нет способа для перемещения к разделу “Кто мы ”.
• При переходе от места  “Кто мы ” к “Основана в 1921″ не понятно направление перемещения.

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

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

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

Кадиллак ATS против мира

В отличие от двух веб-сайтов выше, Cadillac — это сайт на нескольких отдельных страницах. Здесь мы будем смотреть на один раздел сайта, в частности, на одну страницу в данном разделе.Один из способов Cadillac — это продвижение ATS в качестве средства, которое может доставить вас куда угодно и всячески вас воодушевлять.

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

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

Здесь мы можем ознакомиться и изучить те или иные действия. Анимация  стрелки вниз одно из тех мест, которые мы рассмотрим. Она направляет ваши глаза вниз формы со словами “смотреть видео”. Форма и слова связаны.

Щелчок перемещает видео снизу на место. Ниже видео другая, уже знакомая, направленная вниз форма со словами “ATS против ветра”. Нажав еще раз, содержимое прокручивается снизу, на этот раз в комплекте с изменением фонового изображения и эффектом параллакса.

Каждый последующий щелчок открывает новую часть страницы. Вы можете перемещаться по всей странице, щелкая одну форму за другой, пока не дойдете до конца, где вы можете отметиться  (в Facebook, Twitter или Google) или посетить одну из трех других локаций.

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

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

Внутренняя часть этой полосы прокрутки представляет собой длинные тонкие полосочки с серией светлых и темных точек. Нажатие на любую точку приведет вас к конкретному разделу …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров