Длинный скролл— тренд веб-дизайна

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

Итак, каковы критерии и как вы применяете правильные методы?

Длинный скролл фона

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

Дизайнеры считают, что могут сделать многое с помощью этой установки, а контент может легче сосредоточится вокруг рассказывания историй, этому помогает прокрутка параллакса, инициированная прокруткой анимация или методы Ajax/jQuery.

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

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

Преимущества:

Позволяет творчески преподносить контент и визуальные эффекты.
Хорошо работает с сенсорным управлением.
Способствует взаимодействию.
Бесконечная прокрутка завлекает пользователей дольше оставаться на сайте.
Открывает дверь для большого кол-ва приложений.
Средство быстрой навигации.

www.kaipoche.co

Недостатки:

Оказывает негативный эффект на SEO.
Может сбивать с толку и дезориентировать.
Сложности в возвращении к предыдущей «странице» (Этого можно избежать, используя фиксированную панель навигации в верхней или боковой части страницы.)
Для сайтов электронной коммерции, длинная прокрутка отвлекает от быстрого транзакционного опыта.
Может замедлить скорость загрузки сайта, особенно с видео-контентом или эффектами параллакса.

Взвесив все перечисленные достоинства и недостатки, можно сделать вывод, что данный стиль наиболее подходит для сайтов, которые:

Частое обновление контента. (например: контент, генерируемый пользователями сайта.)
Большой количество мобильных пользователей.
Несет в себе большой объем контента (например: сайты социальных сетей)

Лучшие методы

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

Дифференцируйте средства управления навигацией прокрутки от других призывов к действиям и ссылок.
Создайте прокрутку переднего плана против статичного фона. Если Вы прокрутите вниз до середины страницу на туристическом веб-сайте UXPin, то заметите, что, прокручивание влияет на экранный контент, но не перемещает Вас ниже по странице. Вы можете поставить много контента, не увеличивая длину страницы.
Фиксированная навигация — элементы навигации и меню остаются на прежнем уровне, пока содержимое перемещается — помогает в решении большого количеством проблем с ориентацией долгой прокрутки, как это выглядит вы можете видеть на Free Range Designs скриншот ниже.

Если Вы не проектируете одностраничный сайт, домашняя или целевая страница в формате длинного скролла должна быть с разделением на страницы с более коротким форматом прокрутки.
Очевидные средства управления прокруткой сразу показывают, как сайт работает, использование быстрых инструкций нравится пользователям. К примеру: «Листать ниже» или же более привлекательное использование — шлемы разного дизайна для навигации по страницы The Seven Types of Motorcycle Rider скриншот ниже.

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

А теперь давайте более подробно поговорим о том, что дает длинная прокрутка дизайнерам.

Параллакс скроллинг

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

Эта техники создает трехмерный эффект для улучшения двухмерной графики.

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

Нетипичное направление

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

Если вы собираетесь идти в этом направление, сначала убедитесь, что оно соответствует характеру контента.

www.spaceneedle.com

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

Экраны как страницы

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

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

Инфографика

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

На Thirteen Reasons Why Your Brain Craves Infographics каждый пункт получает свой собственный экран, но быстро темп скролла придает странице постоянно меняющийся единый вид.

Анимация

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