Чем меньше экран, тем дольше прокрутка.
Эта азбучная истина растолковывает популярность долгой прокрутки либо скроллинга: с того времени как мобильный дивайсы забрали вверх над настольным компьютером в 2014, популярность мелких экранов вынудила дизайнеров пересмотреть собственные взоры на данный счет.
Долгая прокрутка предоставляет большое количество новых возможностей говорить истории, для навигации, творческих зрительных эффектов, и более захватывающего опыта. В следствии, мы нашли пара стратегий и общих методов, каковые лишь начинают проявляться:
- Параллакс-графика -заимствованная из индустрии игр, эта стратегия перемещения фонов с разной скоростью формирует 3D-эффект, и стимулирует зрительные эффекты, с которыми приятнее взаимодействовать.
- Экран размером с одну страницу – один из важнейшихспособов организации информации на одной единственной странице, наряду с этим дифференцируя понятия на секции размером с экран, в также время, изменяя фон, делает сайты более взаимосвязанными.
- Закрепленное меню навигации -один из самых серьёзных недочётов долгой прокрутки, что дезориентирует пользователя, так что наличие навигационной совокупности, которая постоянно остаётся на своем месте, на экране, дает пользователям возможность руководить и не разрешает им заблудиться.
- Анимационная интерактивность –анимации, на базе прокрутки, додают толику юмора при сотрудничестве с ней. Это развлекает пользователя до таковой степени, что он пользуется прокруткой уже независимо от содержания.
- Атипичное направление -в связи с последними актуальными тенденциями долгого скроллинга, сайты смогут насладитьсяпрокрутками слева, справа либо вверх.
- Индикаторы -некоторые пользователи смогут не додуматься применять скроллинг, и исходя из этого такая инструкция, как «прокрутите вниз» либо какой-нибудь второй показатель разрешает избежать недопонимания – лишь убедитесь, что они отличаются от других ссылок либо команд.
p
Как обрисовано в статье «Тенденции в веб-дизайне 2015 и 2016 годов», это те способы, каковые сделали нижеприведенные сайты лучшими примерами с долгим скроллингом.
Один из первооткрывателей, важных за «разрушение» стереотипа, что необходимо просматривать страницу за страницей – это Twitter, что остается одним из лучших и самые признанных скроллинг сайтов на сегодня. Данный формат разрешает твиттам размешаться в хронологическом порядке, в также время, оставаясь новыми и свежими.
Для сайтов с социальным уклоном, и других сайтов с пользовательским контентом, долгая прокрутка не просто актуальный выбор, а практический. Нескончаемая загрузка нового контента из-за нескончаемой прокрутки разрешает организовать содержание, которое в противном случае было бы в хаосе.
фонд социальной помощи «Heart Kids NW»
Новозеландский фонд социальной помощи «Heart Kids» объявляет безостановочное перемещение. Сайт с долгим скроллингом сочетает в себе анимацию (кое-какие прокрутки активированы), потрясающее применение цвета, захватывающие образы, и курсорную интерактивность для распространения сообщения о спасении судьбы.
Обратите внимание на ненавязчивый значок «Scroll» (Прокрутите) и инструкцию чуть ниже на экране, и навязчивый призыв к действию, что постоянно остаётся в верхней части.
Интерактивный роман «The boat»
Один из самых творческих способов применения долгой прокрутки – это «The boat» SBS, что-то наподобие интерактивного романа. Постоянные анимации и продуманное применение углов и движений, при появлении нового содержания, затягивает пользователя / читателя в захватывающее приключение, с которыми, классические, застоявшиеся сайты с прокруткой, не смогут сравниться.
Анимационная несколько Moscow City Leicester: cемь типов мотоциклистов
Данный вторичный сайт для MCA Leicester демонстрирует ненавязчивый метод указать на прокрутку, практически не прокручивая. Шлемы серого цвета на левой стороне, сложены вертикально, показывают (наровне с заглавием) на то, что пользователь обязан всего лишь прокрутить вниз, дабы заметить больше содержания.
Еще одна уловка – это умная анимация, которая воображает любой новый экран, делая из сайта что-то наподобие навигационного гибрида долгой прокрутки либо страничного стиля предоставления информации.
Тринадцать обстоятельств, из-за чего ваш мозг жаждет инфографику
Естественный стиль долгого скроллинга, где понятия и различные разделы неразрывно объединены в постоянный поток, делает их поразительно удобными для инфографики.
Как статья «Тринадцать обстоятельств, из-за чего ваш мозг жаждет Инфографику» показывает, данный единственный формат страницы разрешает дизайнерам элегантно перевоплотить «громадные дозы» информации в маленькие, легко-усваиваемые биты.
Помимо этого, анимации на базе прокрутки, такие как глаз, что движется со скроллингом, и фоновые анимации, сводят на нет время от времени неинтересные нюансы изучаемой информации.
История Янко: как выжить в Хиросиме
Второй SBS сайт, в Истории Янко, смешивает элементы долгого скроллинга рассказа и инфографики, дабы поведать душещипательную историю выживания на протяжении взрыва в Хиросиме.
В связи с трагичностью этого события, сайт сохраняет классический формат с просто-оформленным текстом, перемежающемся с графикой. В также время, сайт сохраняет свежий и современный вид с изображениями на прокрутке, таких как железный шлем, расположенный чуть выше, и что исчезает с поля зрения в кулуарах.
Эти говорящие артефакты и фактическая инфографика о Хиросиме изображенны на дисплее – в частности, карта радиуса взрыва, – на них возможно надавить и взять более подробную данные.
Beagle
Сайт для инструментов Podio Beagle устанавливает постраничную навигацию в формате долгого скроллинга.
Любой пункт со своим полезным предложением имеет собственный личный экран / страницу, не смотря на то, что все они дешёвы через линейный скроллинг и объединены анимациями, каковые перемещают внимание пользователя от одного экрана к второму, как кусок бумаги, движущийся с одного экрана на экран, расположенный выше.
Bowhead (Tails and Whales)
Как и Beagle, о котором мы говорили выше, Bowhead имеет собственный преимущество перед долгой прокруткой и пошагово употребляется для отображения серьёзного предложения – кроме того для одного продукта. Сайт применяет анимацию, такую как скольжение и исчезновение, дабы содержание оставалось занимательным.
Пивная «The Kings Arms»
Не все сайты с долгой прокруткой должны быть шикарными. Английский паб «The Kings Arms» применяет простое фоновое разделение без каких-либо фантастических анимационных переходов между экранами.
Однако, перемещение параллакса на фоне телефонов и дополнительных анимаций курсора (не говоря уже об эстетическом размещении элементов) не разрешает сайту быть неинтересным.
Мороженое «Wall» и освежители для машин «Airpure»
В противоположность этому, промо-сайт при сотрудничестве мороженого «Wall» и освежителей для машин Airpure весьма кричащий. Не намного больше размером, чем образы культового фруктового мороженого, долгие прокрутки сайта являются занимательные анимации, засунутые между экранами, что делают его стоящим для просмотра.
Обратите внимание на прикрепленную навигацию с левой стороны сайта и индикатор процесса в нижней части (что меняет цвета).
Несколько Beatrate
Сайт с долгим скроллингом для группы Beatrate имеет пара экспериментальных возможностей для долгой прокрутки, а также автоматическое проигрывание видео и изображение горизонтального курсора.
Space Needle
Сайт Seattle Space Needle есть совершенным примером атипичного направления прокрутки. Под предлогом путешествия в космической станции (и вне ее), то имеет суть применять прокрутку вверх, а не вниз.
Дополнительные сайты
Восстановление (Лексус)
Сайт «One John St»
Заметить значит убить
Сайт «Cameo by Vimeo»
Сайт «Squarespace»
Сайт «Yep App»
Сайт «Beoplay»
Сайт «Inbox by Гугл»
Вывод
Как и обосновывают примеры сайтов, вышеприведенных, практическая польза долгой прокрутки и определяет его успешное использование, независимо от того тренд это либо нет.
Имеется большое количество нужных преимуществ долгой прокрутки: объединение хаотично расположенной информации, интерактивность, навигационная свобода, потрясающие зрительные эффекты, отображение широкой части содержания (нескончаемая прокрутка), линейный рассказ, и т.д. Но, учитывая недочёты, такие как дезориентация и время от времени время загрузки, вам не нужно легкомысленно переключаться на таковой вид прокрутки. Отыщите самые действенные способы, дабы применять их на полную катушку.
Для получения более подробных веб-дизайн советов, просмотрите бесплатную электронную книгу «Тенденции в веб-дизайне 2015-2016». Данное управление растолковывает больше способов применения долгой прокрутки, и 9 вторых новейших тенденций. К каждой главе приведен анализ 166 намерено подобранных примеров таких компаний, как Adidas, Intercom, Apple, Гугл, Versace и др.
Дабы оказать помощь ускорить процесс проектирования, тут приведен кроме этого перечень 100 бесплатных ресурсов.
Высоких конверсий!
Случайные статьи:
- Когда главную страницу сайта лучше заменить лендингом?
- Как зарабатывать больше с байесовской оценкой сплит-тестов?
7 скрытых функций Компьютерной Мыши
Подборка похожих статей:
-
Когда нужны длинные посадочные страницы?
Какой лендинг действеннее — маленький либо долгий? Так как меньше не всегда значит лучше, а также нескончаемые «портянки» время от времени дают…
-
5 Проблем использования встроенного скроллинга
Масштабное изучение разных элементов навигации вебмагазинов, совершённое Beymard Institute (НИИ, изучающий неприятности web-маркетинга)…
-
Остерегайтесь горизонтальной прокрутки и имитации управления жестами для десктопов
Резюме: кроме того на данный момент, в то время, когда все больше сайтов и целевых страниц имитируют управление жестами и горизонтальную прокрутку при…
-
Карты скроллинга для эффективного сплит-тестирования
Вы не забывайте, как последний раз брали музыкальный альбом? Ветхие хорошие дни виниловых пластинок, кассет и компакт-дисков? Времена, в то время, когда…