Анимация в веб-дизайне: зачем и когда её нужно использовать
Сегодня анимация прочно укоренилась в веб-дизайне и выглядит отличным дополнением ко многим элементам веб-сайтов. Но всегда ли она оживляет дизайн или же может его разрушать? Давайте выясним, какие выгоды может принести использование анимации на вашем сайте и обозначим те случаи, когда стоит избегать её внедрения.
Как анимация появилась в веб-дизайне?
Анимация появилась в веб-дизайне очень давно. Сначала были крошечные файлы .gif, состоящие из множества картинок, которые обеспечивали своей быстрой сменой эффект движения на изображении. Это были тёмные времена, ознаменованные тоннами мигающих карт, танцующими котами и другими вещами, которые мы бы предпочли больше никогда не видеть. В те далёкие дни никто не считал анимацию средством улучшения юзабилити сайта. Она, преимущественно, использовалась в качестве украшения или просто для развлечения. Сегодня же вы можете использовать анимацию для улучшения навигации на сайте и общего уровня удобства.
Не так давно все анимированные элементы и эффекты на сайтах создавались при помощи технологии Flash. Конечно, это была революционная технология для того времени, но анимации, созданные на ней были тяжёлыми и очень сильно увеличивали время загрузки страниц.
Сегодня анимации создают при помощи более легковесного JavaScript и CSS кодирования, которое помогает добавлять движущиеся элементы на сайт, не перегружая его при этом. И, что более важно, анимации теперь используются для улучшения юзабилити сайта, а не просто для потехи. Они являются выдающимся инструментом для веб-дизайнеров, помогая делать сайты лучше и проще в использовании. Это можно увидеть на следующих примерах:
Улучшение юзабилити при помощи анимации
Во многих случаях анимационные эффекты используются для привлечения пользовательского внимания к важным деталям. Также их используют, чтобы подчеркнуть кликабельность элемента на фоне прочих вещей.
К примеру, многие сайты используют эффект дрожания кнопки для оповещения посетителя о допущенной ошибке при вводе логина или пароля. Такая анимация имитирует человеческий жест отрицания при качании головой.
Существует множество других способов использования анимации для улучшения юзабилити интерфейса. Например, она может быть включена в элементы навигации для отделения категорий от подкатегорий либо же в мульти-выбор, когда все элементы, кроме выбранного, исчезают из поля зрения.
Сайт Etechevent с анимированными элементами
Анимации могут быть использованы на сайте для направления пользователей по заданному пути, который приведёт их к желанию совершить покупку. Добавляя интерактивные элементы и привлекая их внимание с помощью анимационных эффектов, можно улучшить конверсию на коммерческих сайтах и показатели ROI.
Повествовательный сайт также может извлечь выгоду от внедрения анимации. Она поможет показать посетителям, каким должен быть следующий шаг, как выбрать что-либо или куда идти дальше на сайте.
Использование анимации в материал-дизайне
Анимация в веб-дизайне является чрезвычайно полезной вещью, если только она не используется исключительно в декоративных целях. Разработчики интерфейсов теперь часто используют анимации для улучшения рабочего пространства. Даже Google понимает важность наличия движущихся элементов для юзабилити. Собственно, так и появился гугловский «Material design». Материал-дизайн становится всё более и более модным. Сегодня его используют в различных приложениях и в дизайне веб-сайтов. Секрет его популярности кроется в повышенном внимании к тому, как будет восприниматься элемент, как движение может рассказать пользователям больше о том, что это за элемент и как его использовать.
В своём «Руководстве по материал-дизайну» Google утверждает, что движение элементов может уведомить пользователей о том, что объект является лёгким, тяжёлым, гибким или же большим/малым. Анимации должны использоваться, чтобы обеспечивать у пользователей лучшее понимание природы объектов, а также то, как это может быть и должно использоваться в структуре чего-либо. «Движение в материал-дизайне должно отображать сходство с реальным поведением физических объектов без ущерба элегантности, простоте и красоте».
Google пошёл дальше в плане развития анимаций и рекомендует использовать движущиеся элементы, которые меняют свою скорость и продолжительность движения в зависимости от цели и эффекта, который должен произвести такой объект. Таким образом, Google вводит приближающиеся и удаляющиеся элементы, которые должны привлечь внимание, а затем исчезнуть, если их присутствие более не требуется.
Советы по использованию анимации на веб-сайтах
При реализации анимационных эффектов на своём сайте вы должны тщательно рассмотреть все подводные камни, связанные с их использованием. Анимированные элементы всё ещё способны снижать производительность сайта и качество пользовательского опыта.
Во-первых, вы должны переосмыслить необходимость использования анимаций, если они замедляют скорость загрузки страниц сайта. Снижение скорости выявить очень просто. Вы можете сравнить плавность загрузки сайта с запуском тяжёлых 3D-игр. Если игра работает более быстро и плавно, чем сайт, это должно стать причиной отказа от анимации.
Используйте CSS при создании анимации для вашего сайта. jQuery является идеальным для многих случаев вариантом и используется повсеместно, но он может реально снизить производительность вашего сайта. Код CSS позволяет создавать легковесные анимации, которые будут прекрасно смотреться на любом устройстве, не перегружая дизайн и давая высокий уровень производительности сайта.
Убедитесь, что ваши анимации адаптивные. Адаптивный дизайн веб-сайта жизненно необходим, если вы желаете добиться успеха. Но, если он хорошо выглядит и работает лишь на десктопных системах, вы можете потерять пользователей, предпочитающих серфить с мобильных устройств. Существует множество инструментов для создания адаптивных анимаций вроде Adobe After Effects или Invision. Также такое можно проделывать в некоторых CMS (Webdlow или MotoCMS), частью которых является возможность создания адаптивных анимированных эффектов. Они предлагают различные типы анимаций, которые могут быть использованы на сайте для улучшения юзабилити и дизайна в целом:
Появление (слева, справа, сверху, снизу);
- Имитация удара в экран;
- Вращение;
- Скольжение;
- Вспышка и пульсация;
- Сдвиг и желеподобный эффект;
- Качание и др.
Анимации должны притягивать внимание… но не чрезмерно. Убедитесь, что движение в анимациях не затянуто по времени и не слишком долго занимает экранную область. Особенно это важно для элементов, с которыми пользователям предстоит взаимодействовать очень часто. На пару раз это может их развлечь, но далее начнёт попросту раздражать.
Сайт Laerepenger c утончённой анимацией
Начните с использования малых анимированных элементов на вашем сайте. В действительности, анимация должна служить средством достижения цели, а не быть самой целью. Не нужно использовать её везде и всюду при малейшей возможности. Её внедрение должно быть оправдано и нести смысл, приносить пользу.
Лучше включить анимацию в элементы пользовательского интерфейса или объекты, с которыми пользователи взаимодействуют наиболее часто (например, в навигационные меню и формы подписки). Также стоит подумать, прежде чем добавлять прыгающие или скользящие поля, поскольку это может не улучшить, а ухудшить пользовательский опыт. Всё должно быть в меру и обоснованно. Приносить удобство, а не выглядеть цирковым трюком.
Анимации отлично подходят для создания незабываемого дизайна сайта. Они до сих пор широко используются, несмотря на большое количество кипящих споров о снижении скорости загрузки страниц или даже зависания сайтов из-за них. Но главное из того, что нужно запомнить, собираясь начать использовать анимации, - они должны улучшать юзабилити. Вам решать, где и сколько их должно быть на вашем сайте. Просто не перебарщивайте, поступайте разумно, взвешенно.
Приведём в качестве примера несколько сайтов, очень удачно использующих анимационные эффекты:
