АНИМАЦИЯ В ВЕБ-ДИЗАЙНЕ
Что такое анимация? На первый взгляд движущиеся картинки и гифки - ничего серьезного, баловство.
ОТ СЛОВА “ДУША”
Слово “анимация” происходит от латинского “анима”, то есть “душа”. Проще говоря, анимация поможет вдохнуть душу в страницы вашего сайта, сделать его более живым и понятным для пользователя. Пару десятков лет назад, на заре веб-анимации, простейшие гифки, мигающие изображения и танцующие человечки использовались в декоративных целях - чтобы развлечь пользователя да и просто отличиться от конкурентов. Сейчас анимационные эффекты приносят пользу - а именно улучшают юзабилити сайта. Совсем недавно мыписали про UX/UI дизайн, который направлен на то, чтобы пользователю было удобно и приятно. Анимация - часть этого дизайна. Чем же она полезна?
1.Привлекает внимание посетителя к важным деталям. Например, анимацией можно выделить главную информацию, в интернет-магазине - привлечь внимание к товарам, которые нужно продать в первую очередь. Или отделить категории товаров в меню, чтобы пользователь не запутался.
2.Обеспечивает навигацию. Куда интереснее бродить по сайту в сопровождении анимированных подсказок, чем разбираться в навигации в гордом одиночестве. Веселые изображения помогают разобраться в структуре сайта - подсказывают, куда идти и что где находится.
3.Выражает эмоции. Хороша анимация и для оценки действий пользователя. Например, при регистрации на сайте посетитель все сделал правильно - появляется анимация, имитирующая крепкое рукопожатие. Где-то ошибся - получите эффект тряски, который обозначает отрицательное покачивание головой.
4.Вызывает эмоции. Качественная анимация заставляет человека улыбнуться, рассмеяться, способна вызвать чувство удовлетворения или, наоборот, сожаления (например, если товара нет в наличии).
|
|
5.Отражает характеристики предмета. В нашем случае - сайта или отдельного товара. Google даже ввел понятие “материальный дизайн”, который дает понятие природы объекта и рассказывает, какой он: большой или маленький, легкий или тяжелый.
6.Мотивирует на совершение целевых действий и повышает конверсию. Допустим, человек регистрируется на сайте. Процесс регистрации составляет 3 шага. Когда первый шаг пройден, появляется анимация, которая подбодряет и заставляет идти дальше, до конца. Когда и второй шаг позади - анимация меняется, словно говоря: осталось совсем немного! Конечно, и без анимации пользователь сам способен пройти регистрацию, но многие пользователи бросают начатое и уходят с сайта. Вот им-то анимация и сможет помочь.
ВИДЫАНИМАЦИИ
Анимированные объекты
Самый простой вариант, который вы наверняка встречали на разных сайтах. Это отдельные изображения и объекты, которые показываются пользователю. Например, движущийся курсор, плавающая кнопка “вверх”, кнопки призыва к действию, меняющие цвет, и так далее. Раньше было модно использовать кричащие кислотные цвета - видимо, для того, чтобы бить прямо в глаза посетителям. Сейчас тенденции меняются - в моде простой лаконичный дизайн, сдержанные натуральные цвета, четкие большие шрифты.
Анимированные изображения
Самый простой пример - анимированные рекламные баннеры на сайте. Они могут вести на карточки товаров, внутренние страницы, блог или перенаправлять посетителя на другой сайт - который заказал у вас рекламу.
|
|
Еще пример - слайд-шоу из фотографий. Обычно используется на сайтах, где одним из продающих элементов являются фотографии. Например, женская одежда, украшения, виды заморской природы и достопримечательностей, которые предлагает туристическое агентство. Современные возможности анимации позволяют сделать самые различные слайдеры: во весь экран, с 3D-эффектами, адаптивные (которые просматриваются с любых мобильных устройств) и другие.
Анимированный текст
Чаще всего используется в виде бегущей строки на новостных сайтах. Возможно также применение на обычных сайтах товаров и услуг: например, в виде анимированных заголовков или отдельных строчек текста. Принцип все тот же: на что нужно в первую очередь обратить внимание посетителя - то и выделяем.
Все эти виды анимаций могут быть разные по оформлению и действию. Вот основные приемы анимации:
·мигание;
·фокусировка;
·изменение цвета;
·вращение;
·вспышка, пульсация;
·покачивание;
·скольжение;
·комбинированные варианты и другие.
СТРАТЕГИИ АНИМАЦИИ
С видами разобрались, теперь поговорим о том, для чего служит анимация, какие ее стратегии можно применить.
Анимация ожидания
Подходит для действий, которые занимают определенное количество времени. Например, процесс регистрации, скачивание с сайта PDF- или Eksel-документа, совершение оплаты. Если не показывать пользователю, что действие выполняется, он может запаниковать и нажимать на все кнопки подряд. Анимация же словно говорит: спокойно, ребята, все идет по плану, осталось подождать еще немного.
|
|
Как это выразить? С помощью анимированных песочных часов, вращающегося циферблата, файлов, которые перемещаются из одной папки в другую, как при стандартном копировании. Словом - любым способом показать движение и дать понять, что процесс идет успешно.
Анимация повествования
Сторителлинг - прекрасный инструмент маркетинга. Это когда вместо обычной рекламы придумываешь историю, связанную с вашей компанией, товарами, покупателями. Людям интереснее читать жизненные ситуации, нежели смотреть стандартные фото товаров и призывы купить.
Не обошел сторителлинг стороной и анимацию. С ее помощью тоже можно рассказать историю - только не текстом, а картинками, гифками, короткими мультфильмами. Происходит это так: человек заходит на сайт, прокручивает курсором страницу вниз и запускает анимацию, которая повествует об истории создания компании, вариантах использования товаров и услуг, преимуществах вашего бизнеса. Воистину, лучше один раз увидеть, чем десять раз прочитать текстовое объяснение.
Анимация подтверждения
Самый простой вариант, который не несет продающей цели, лишь вызывает необходимые эмоции. Например, зашли вы на сайт интернет-магазина. Побродили по главной странице, решили остаться, открыли одну из категорий товара - появляется анимация, которая поздравит вас (“Ммм, ножи и вилки - отличный выбор!”). Добавили товар в корзину - еще одна анимация (“Поздравляем, теперь этот товар у вас в корзине!”) и так далее. То есть анимация как бы подтверждает каждое действие, фиксируя его в памяти посетителя и вызывая положительные эмоции.