Что следует учитывать при использовании Parallax Scrolling в веб-дизайне

1. Что такое параллакс скроллинг?
2. Время загрузки
3. Фактор юзабилити
4. Проблема SEO

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

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

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

Что такое параллакс скроллинг?

Итак, что же такое параллакс-прокрутка?

Хотя в последнее время Parallax нашел любовь среди веб-дизайнеров, его концепция и логика довольно старые. По сути, параллакс означает, что элементам разрешено перемещаться независимо, что дает трехмерное ощущение другой плоскости. Отличным примером параллаксной прокрутки является Целевая страница Envato Elite.

Пример прокрутки параллакса: Envato Elite Homepage.

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

• Растровый параллакс , который в основном используется для создания оптической иллюзии движения.
• Повторите шаблон, который использует прокрутку отображает на повторяющемся фоне.
• Слоистый параллакс, где передний план и фоновые объекты движутся с разной скоростью.
• Или простой метод Sprite .

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

Тем не менее, при использовании параллакса на ваших веб-страницах необходимо учитывать некоторые факторы.

Время загрузки

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

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

Пример прокрутки параллакса: Oakley Airbrake MX

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

Фактор юзабилити

Это был часто обсуждаемый и все еще нерешенный вопрос: действительно ли веб-сайты параллакса пригодны для использования?

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

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

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

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

Один веб-сайт, который использует параллакс в полной мере и не жертвует юзабилити Как далеко это до Марса? Это быстро, эффективно и уникально.

Пример прокрутки параллакса: как далеко до Марса?

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

Пример прокрутки параллакса: GLP Creative

И если вы ищете идеальный пример веб-сайта с параллакс-прокруткой, полюбуйтесь IMac от Apple с сетчаткой 5K целевая страница.

IMac от Apple с сетчаткой 5K

Проблема SEO

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

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

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

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

-

Популярное изображение: mamanamsai

Похожие

Комментарии