Продуманная и уместная анимация страниц сайта не только радует глаз, но и серьёзно помогает в работе. На сегодняшний день её можно без преувеличения назвать одной из основ web-дизайна – и действительно, ни один современный ресурс невозможен без неё, ведь на ней нередко основано взаимодействие с пользователем. Последнее стало возможным благодаря тому, что анимация информирует о тех или иных состояниях страницы или же направляет внимание в нужное русло. Из-за её популярности весьма распространены ситуации, когда её используют неправильно… И результаты получаются прямо противоположными ожидаемым: она вызывает раздражение, непонимание или же откровенную скуку у пользователей. Не удивительно, что многие разработчики задаются вопросом о том, как сделать анимацию на сайте, которая будет к месту и нравиться пользователям.
Виды анимации, которые используют на веб-сайтах
Удивительно, но факт: обозначение «анимация» произошло от латинского слова “anima”, которое переводится как «душа» или «жизнь». И действительно, движение на картинках оживляет и, даже возможно, в какой-то степени одухотворяет в восприятии смотрящего. Можно посмотреть на это явление и под другим углом: благодаря анимации вы можете вдохнуть жизнь в страницы Вашего сайта. Само собой, данное направление постоянно развивается, и если ранее для того, чтобы впечатлить пользователя, было достаточно самых простых GIF-изображений, то сегодня всё стало более серьёзным.
Объекты
Анимированные объекты в виде перемещающегося курсора, кнопок, которые меняют цвет или двигаются, являются самыми простыми решениями. Если ранее для их реализации использовали яркие, привлекающие внимание пользователя цвета, то сегодня – натуральные цветовые решения, чёткие крупные шрифты и лаконичный дизайн.
Текст
Чаще всего анимированный текст выглядит как бегущая строка или заголовок. Их используют для выделения ключевой информации, к которой нужно привлечь внимание пользователя. Ключевые приёмы – изменение цвета, вращение, скольжение, мигание, прочее.
Изображения
В зависимости от тематики сайта или ситуации это могут быть баннеры, расположенные на главной странице, или же slide-show или фотографий. Первые могут вести не только на внутренние страницы, но и в блог компании или же на товарные карточки. Что касается вторых, то они станут идеальным решением в тех случаях, когда именно фотографии являются продающим элементом. Это актуально для сайтов, которые торгуют обувью и/или одеждой или же предлагают туристические услуги.
Видеоролики
Их можно назвать одним из самых простых и эффективных способов придать странице динамику. С одной стороны, они могут достаточно много «весить», но с другой радуют тем, что сложность сцен, представленных на них, ничем не ограничена. Их достаточно ограниченная интерактивность с пользователем окупается тем, что использовать их можно для решения широкого спектра задач. Не стоит забывать и о том, что интегрировать их в страницу тоже не составит труда.
Секвенции
Данное обозначение произошло от английского слова “sequence”, которое переводится как «последовательность»… И действительно, особенность данного решения заключается в демонстрации комплекта отдельных изображений за определённый временной промежуток. Таким образом создаётся иллюзия движения. При этом, в отличие от видеороликов, возможность заменять отдельные кадры или удалять те из них, которые более не нужны, здесь есть. Помимо этого, дизайнер может выбирать количество кадров и их качество.
Функции, которые выполняет анимация
Давайте разберёмся с тем, для чего именно на сайте нужна анимация. Перед тем, как создавать её, нужно чётко определить для себя её назначение.
Прелоудеры, или режим ожидания
Английское обозначение “preloader” переводится как «предзагрузчик». Последний представляет собой индикатор, который информирует пользователя о том, что на данный момент страница загружается. Интересный прелоудер, оформленный в тематике сайта, не только привлекает внимание пользователя, пока тот ждёт загрузки, но и скрывает изображение страницы, пока та загружается.
Последнее тоже актуально, поскольку в разных браузерах загрузка происходит неравномерно, из-за чего изображение «плывёт». Наличие же анимации исключает риск того, что пользователь подумает, будто на сайте имеются технические проблемы, и перейдёт к конкурентам. Ещё одна функция прелоудера – демонстрация полезных рекомендаций, советов или же этапов выполнения тех или иных действий на сайте (к примеру, оформления заказа или участия в программе лояльности).
Storytelling и создание настроения
Создать анимацию в качестве приветствия на сайте – ещё одно отличное решение. При правильном подходе она создаст у пользователя определённое настроение и сделает восприятие информации более полноценным. Что касается сторителлинга, то он может дополнить информацию о компании или продемонстрировать то, как работает её продукция, куда проще и доступнее, чем просто изображения и текст.
Декоративная анимация
Что такое декоративная анимация страниц сайта? Это – самые разные решения, начиная с сообщений об ошибках и заканчивая видеовставками или оригинальными скроллами страницы.
Несмотря на название «декоративная», данная анимация необходима не только для красоты. Она привлекает и направляет внимание пользователю к тому, на чём создатели сайта делают акцент. Её цель – вызывать wow-эффект. В данном случае важно не перестараться, потому что большое её количество, наоборот, будет отвлекать от основной идеи.
Итог
Итак, какие именно выводы можно сделать из вышеизложенного? Они заключаются в том, что анимация способна:
- Привлекать внимание пользователей сайта к тем или иным деталям (категории в каталоге или ключевая информация);
- Выражать или, напротив, вызывать эмоции (к примеру, указать на ошибку или вызвать улыбку или же сожаление);
- Делает навигацию по сайту более интересной. Забавные изображения помогут разобраться в структуре сайта и обеспечить комфортный переход по его разделам;
- Мотивирует на целевые действия, повышает конверсию (особенно – в процессе регистрации, которая проходит в несколько этапов).
Способы сделать анимацию эффективной и интересной для пользователя
Многие специалисты в данной сфере советуют в первую очередь внимательно изучить принципы анимации, изложенные в книге «Иллюзия жизни: анимация Диснея», написанной американскими мультипликаторами “WaltDisneyAnimationStudios”. Они основаны на почти столетнем опыте работы аниматоров студии. Что касается других основ, то они – следующие:
- Реалистичность с правильным отображением перспектив и теней, а также плавностью движений;
- Не перегружайте страницу анимированными объектами, чтобы не отвлекать внимание пользователей от основной информации и не вызвать у них раздражения;
- В последнем случае лучше всего индивидуально подбирать скорость для тех или иных движений, используемых в анимации;
- Избегайте одновременной анимации сразу нескольких элементов, используйте вместо неё последовательную;
- Учитывайте продолжительность анимации: она не должна быть слишком длинной, особенно – если это не оправдано ожиданием завершения того или иного процесса;
- Создавая секвенцию, правильно настройте скорость показа кадров для того, чтобы их было комфортно просматривать;
- Если нужно создать несколько элементов одного назначения, лучше всего использовать один и тот же стиль, одни и те же эффекты и одну и ту же скорость;
- Задействуйте анимацию на тех элементах, с которыми пользователь взаимодействует чаще всего, но при этом сделайте её ненавязчивой и не отвлекающей, скажем, от заполнения форм;
- Обязательно протестируйте своё творение на устройствах малой мощности, через разные браузеры, а также при недостаточно хорошем интернет-соединении.
Для того, чтобы анимация действительно удалась, нужно учитывать вкусы целевой аудитории сайта. Молодёжь однозначно оценит креатив и яркость, посетители постарше примут на «ура» понятную и наглядную анимацию, а для пожилых людей лучше всего использовать такие её виды, как анимация ожидания, подсказки действий и направление к конечной цели – регистрация на сайте или оформление покупки.
Приёмы повышения производительности
Ситуации, когда сайт медленно грузится из-за анимаций на нём, – не редкость. О негативном влиянии этого явления наслышаны практически все: потеря пользователей, их переход к конкурентам… Впрочем, есть и ряд простых решений, которые позволят его избежать. Вот они:
- Не одновременный, а последовательный запуск анимаций, если их на сайте больше трёх;
- Сведение к минимуму элементов на web-странице, упрощение её разметки;
- Принудительная остановка повторного воспроизведения видеоролика, возможность самостоятельной остановки пользователем;
- Подбор оптимальных битрейтов и их числа при воспроизведении видеоролика или секвенций (не стоит их делать слишком высокими или низкими);
- Не рекомендуется использовать так называемые «слоёные» анимации, но если очень нужно, то лучше заменить их полупрозрачными изображениями;
- Создавая анимации по технологии CSS, не изменяйте никаких параметров кроме трансформации и прозрачности;
- Выведение анимаций в отдельный слой для того, чтобы при их изменении не были затронуты другие элементы;
- Отказ от функций однократного и регулярного планирования вызова для сохранения синхронизации с устройством пользователя;
- Сведение к минимуму или отказ от обращения к элементам посредством JS для исключения дополнительной нагрузки.
Другие «хитрости» от “SerpTop”, которые помогут вам справиться с созданием анимаций для сайта на «отлично»:
Задавание времени анимаций с помощью переменных в будущем позволит ускорить или замедлить их при необходимости;
- Не забывайте использовать свойство “pointer-events” в CSS для того, чтобы контролировать события, при которых анимация может оборваться, то есть стать объектом события мыши;
- Проверяйте готовую анимацию на низкой скорости для того, чтобы найти все имеющиеся в ней ошибки;
- Учитывайте и используйте новые свойства браузеров при разработке анимаций (к примеру, свойство “@supports” продемонстрирует анимацию в том виде, в котором её увидит пользователь, и поможет устранить её недочёты.
Создание профессиональной анимации для вашего сайта – одно из направлений деятельности “SerpTop”. Обращайтесь к нам – и мы ответим на любые ваши вопросы, дадим рекомендации и поможем решить задачи любой сложности, связанные с его созданием или поддержкой.