03/04 Анимация. 8 популярных техник

Мы разобьём области веб-анимации на восемь участков и объясним лучшие практики для каждого из них.

1. Анимация загрузки.

Одним из первых методов использования веб-анимации является отвлечение пользователя от времени загрузки.
В лучшем случае анимация таким образом влияет на восприятие пользователя и заставляет его думать, что ваш продукт лучше, чем он есть на самом деле. В худшем случае у пользователей будет возможность посмотреть что-нибудь интересное во время ожидания загрузки сайта.
Даже если время загрузки не очень большое, такая анимация всё равно добавляет немного утончённости или во всяком случае элемент развлечения в период ожидания. Именно этим загрузочная анимация завоевала свою популярность в плоском дизайне (flat design), минимализме, портфолио и одностраничных сайтах (landing page) – во всём, что является простым по своей сути и может способствовать росту в стимулировании.

Например, на сайте Tom Cole Architecture, пользователь попадает на чёрный экран, и тут же несколько белых линий начинают двигаться и «вырисовывать» логотип и название. Ещё через мгновение в поле зрения появляется фоновое изображение и пользователь может свободно начинать навигацию по сайту. Сам по себе сайт простой и не особо нуждается в загрузочной анимации, тем не менее, этот быстрый момент эстетически радует пользователя в качестве первого впечатления и заманивает его дальше пользоваться сайтом. Помните о том, что лучшая загрузочная анимация должна быть проста. Посторонние эффекты, как звук, например, вовсе не обязательны. Анимация должна соответствовать индивидуальности самого сайта, будь он минимальным, красочным, элегантным или же ещё каким-то.

2. Навигация и меню (не прокручивающиеся).

Для того, чтобы сэкономить место на экране, можно использовать недавний тренд — скрытое навигационное меню, которое раскрывается при нажатии на иконку-гамбургер. Анимация имеет важное значение, чтобы установить связь между этими двумя действиями и предотвратить резкий переход.

Если нажать на кнопку стрелочки в круге на сайте Brian Hoff Design, то крупногабаритный блок с меню выскочит с правой стороны. «Всплывающая» анимация делает меню таким, словно оно скользит как бы с закадровой стороны и делает работу всего взаимодействия гладкой.

Так называемая «Гамбургер» анимация – не единственный вариант, креативные дизайнеры применяют при создании сайта такие навигационные элементы как слайдеры и клеящиеся блоки, чтобы установить их отдельно.

Анимации могут точно так же указывать на изменение. Состояние наведения на самом деле является одним из наиболее популярным анимационным шаблоном при разработке сайта, чтобы показать изменение в объекте интерфейса.

Кнопка или изображение могут появиться в одном виде во время загрузки сайта, но также могут выглядеть совсем иначе во время взаимодействия пользователя с ним, например в момент наведения мышки на тот или иной элемент. Это почти неуловимое изменение помогает пользователям лучше понять, как использовать веб-сайт, совершая какие то похожие действия, без необходимости занимать дополнительное пространство.

3. Наведение

Чтобы показать, что элемент интерактивен, эффекты наведения являются одними из наиболее прагматичных методов использования анимации при создании сайта. В большинстве случаев это является единственным знаком того, что кнопка или фрагмент текста кликабельны. Когда пользователь сомневается по поводу функции какой-либо возможности, он в любом случае наведет курсор на элемент интуитивно. Пример эффекта анимации при наведении можно увидеть на примере дизайна сайта — http://www.alectia.com/en/.

Эффект наведения на примере сайта - Alectia

Источник: http://www.alectia.com/en/

Рассмотрим еще один пример анимации при наведении при создании сайта или отдельного блока. Наведение курсора на любую из карточек на сайте Alectia (пример наверху) запускает анимацию внутри этой карточки. Анимация не очень большого формата – текст заголовка выдвигается и идентичный текст скользит, чтобы переместить его (то же самое происходит и со стрелкой “читать дальше”) – тем не менее этого достаточно, чтобы показать функцию карточки.

Карточный дизайн сайта на примере сайта - UXPin2

Источник: UXPin

Как видно на примере раздела сайта Free eBook Library наведение запускает картинку загрузки, падающую сверху, а затем текст “get it for free”, поднимающийся снизу. Это действие служит сразу нескольким функциям: оно показывает, что тебе нужно только нажать на карточку, чтобы запустить процесс загрузки, и действует как захватывающий внимание призыв к действию, а так же возникает приятное эстетическое чувство, которое создает веселое взаимодействие интерактива с элементами.

4. Галереи и слайд-шоу

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

Дизайн сайта - Bigactive

Источник: http://www.bigactive.com/

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

Еще одна тема для размышления – насколько сильно претворять в жизнь Скеоморфизм. Этот шаблон по своей сути имитирует просмотр страниц в фотоальбоме – вопрос в том, как часто вы хотите привлекать к этому внимание.

Что такое Скеоморфизм?

В UI и веб-дизайне скеоморфизм пытается создать 3-х мерный эффект в 2-х мерной плоскости. Например скеоморфическая иконка на дисплее телефона, которая символизирует функцию телефона, изображена в точности как выглядит девайс (smartphone) или трубка телефона и выглядит правдоподобно. Обычно добавляется тень, какие то отблики и выделяются какие то детали. Другой пример – Кнопка может выглядеть как бы приподнята до тех пор пока на нее не нажали, и после нажатия на нее, она опускается, что дает визуальный эффект реального нажатия на кнопку. Что касается невидимого скеоморфизма, это может включать в себя переворот страницы как в настоящей книге. Это мы можем часто видеть когда читаем например e-book (электронную книгу). Так же это может быть звук затвора цифровой камеры, когда мы фотографируем. Все это является скеоморфизмом.

5. Привлечение внимания.

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

Анимация – это великолепный метод, чтобы добавить интриги к формам, призывам к действию или даже элементам меню. Чтобы увидеть его потенциал, посмотрите на сайт John Iacoviello’s MY/STATIC/SELF.

Анимация - как лучший инструмент для привлечения внимания - Mystaticself

Источник: http://mystaticself.com/

Куб в центре тихонько подскакивает и мерцает, и точно является наиболее интересным элементом на экране оттенков серого. Каждый из слоев этого центрального элемента представляет собой ссылку на разные страницы – те же страницы четко и мягко отображаются в верхнем меню навигации. Как вы думаете, какой набор навигационных ссылок предпочтёт пользователь?

6. Скроллинг.

Здесь стоит упомянуть зависимость прокрутки от анимации. Плавный скроллинг просто не может существовать без неё. Одним из главных достоинств прокрутки является контроль, который она даёт пользователю, и для этого, анимация определяет темп, которым он может пойти. Это видно на примере дизайна сайта Forbetter.coffee

Пример дизайна сайта - ForBetterCoffee

Источник: http://forbetter.coffee/

При разработке сайта — For Better Coffee используется параллакс скроллинг, чтобы перечислить советы для приготовления лучшего кофе, одновременно развлекая пользователя интерактивным визуальным путешествием-превращением боба в кофе (в приятном плоском дизайне).

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

7. Движение страницы.

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

На сайте для Hunger Crunch каждое небольшое движение курсора двигает фоновое изображение, и в сочетании с разделением слоев создает забавный эффект, который приобретает как бы смысл игры.

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

8. Анимация фона

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

Давайте взглянем на дизайн сайта — Terna. Выбор анимированного фона призван демонстрировать городскую суету, которая является их делом, разделы в изображении двигаются с различными интервалами. Такой эффект создаёт атмосферу занятости без чрезмерного стимулирования пользователя.

Как и в других областях анимации здесь нужно обратиться к простоте. Помните, что каждое движение на экране будет привлекать внимание, поэтому слишком большое количество анимации просто напросто создаст хаос.

Теги: , , , , , , , ,