В вебе путешествие должно быть таким же приятным, как и место назначения.
Приглашаю вас в мир креативных типов скроллинга, которые позволят вам регулировать темп, скорость и способ представления контента. Учитывая тот факт, что концентрация нашего внимания в интернете сократилась до 8 секунд, восхитительный и интересный процесс прокрутки способен продлить интерес пользователя.
В этой статье мы рассмотрим самые распространенные и проверенные временем 4 типа скроллинга, которые вы можете использовать на своем сайте.
Возникает вопрос: В какой ситуации использовать тот или иной тип? Мы рассмотрим примеры, варианты использования, и лучшие практики для:
- Длинный скроллинг (Long Scrolling)
- Фиксированный длинный скроллинг (Fixed Long Scrolling)
- Бесконечный скроллинг (Infinite Scrolling)
- Сделанный со вкусом параллакс-скроллиг (Tasteful Parallax Scrolling)
Давайте начнем!
1. Длинный скроллинг (Long Scrolling)
Примеры:
Основная проблема: если сайт имеет большое количество объединяющего различные направления многостраничного контента, то навигация может стать слишком сложной.
Сайт с таким типом скроллинга должен рассказывать историю плавно и линейно.
Решение: создайте одну страницу и соберите весь контент только на ней. Это прекрасно работает для социальных сетей и сайтов, где контент в основном создается пользователями.
Вот еще несколько советов:
- Используйте липкую или фиксированную навигацию (sticky). Длинная прокрутка может дезориентировать пользователя, но навигационное меню, зафиксированное сверху страницы позволит свободно перемещаться по сайту.
- Не добавляйте автовоспроизведение на видео, если они у вас есть. Это значительно снизит скорость загрузки.
- Совсем не обязательно использовать длинную прокрутку на каждой странице сайта. Хорошей практикой будет добавить ее только на домашнюю страницу, ссылки/кнопки с которой будут вести на внутренние страницы сайта, где используется традиционный способ прокрутки.
- Для разовой длинной прокрутки, используемой только на определенных секциях страницы, можете использовать Фиксированный длинный скроллинг описаный ниже.
2. Фиксированный длинный скроллинг (Fixed Long Scrolling)
Примеры: Squarespace, UXPin Tour
Основная проблема: сайт с таким типом прокрутки не может полностью отказаться от многостраничной структуры.
Решение: можно комбинировать данный тип с обычной длинной прокруткой. Эффект, получаемый в итоге, ощущается как "прокрутка внутри прокрутки".
Несколько советов:
- Принимая решение сделать секцию с фиксированной прокруткой, убедитесь, что вся информация внутри этой секции посвящена одной теме или категории. Например, каждый раздел на Squarespace - секция с фиксированным скроллом, фокусирующая на том как создать красивый сайт для разных типов онлайн-бизнеса.
- Помещайте кнопки призыва к действию (CTA) в конце секции, использующую длинную фиксированную прокрутку.
- Хорошим решением будет добавить прогресс-бар для скролла вверху страницы.
3. Бесконечный скроллинг (Infinite Scrolling)
Примеры: Tumblr, True Tube, By Kato, Imgur
Основная проблема: весь контент находится на одной странице и его может быть слишком много, чтобы загрузить все сразу.
Решение: можно загружать контент по мере необходимости.
Бесконечная прокрутка отлично подходит для медиа-галлерей или когда контент требует несколько экранов для отображения. Подходит и для социальных сетей, что позволяет пользователям просматривать контент без лишних кликов и ожидания. Отлично подходит для страниц поиска.
Может возникнуть проблема с навигацией, но она решаема с помощью липких навигационных меню.
Несколько советов:
- В добавление к фиксированной навигации можно использовать кнопки "Перейти к разделу", чтобы предотвратить дезориентацию пользователя.
- Отличным решением будет сочетание бесконечной прокрутки и пагинации (нумерации страниц), чтобы сделать поиск более организованным.
4. Сделанный со вкусом параллакс-скроллиг (Tasteful Parallax Scrolling)
Примеры: Oakley: Airbrake MX, The Boat (SBS), The Walking Dead
Основная проблема: вовлеченность пользователя меньше, чем при длительных способах прокрутки.
Решение: делать страницы длинными, состоящими из большого количества интересных разделов. Комбинируйте с обычными секциями, делая страницу разнообразной.
Параллакс поистине волшебный - слои секции (например текст и изображение) движутся с разной скоростью при прокрутке, создавая трехмерный эффект.
Советы:
- Будьте осторожны со скоростью загрузки, это может испортить все впечатление от параллакса и выглядеть будет лучше простой, но быстрый сайт.
Надеюсь статья была полезна для вас! Экспериментируйте! Удачи!