Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Разработка качественных корпоративных сайтов, для малого и среднего бизнеса.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
26
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

25
Битрикс24

Битрикс24

www.bitrix24.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

12
Devicerra

Devicerra

devicerra.com

11
Reader

Reader

Интернет-журнал о современных технологиях.

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

9
GIFTD

GIFTD

giftd.tech

8
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Анимация в веб-дизайне: зачем и когда её нужно использовать

3 835 5 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Слово «анимация» происходит от древнего латинского слова «anima», что переводится как «душа». Это означает, что попытки вдохнуть жизнь в неодушевлённые объекты появились тысячи лет назад, когда Пигмалион попробовал пробудить к жизни своё создание – статую Галатеи.

Сегодня анимация прочно укоренилась в веб-дизайне и выглядит отличным дополнением ко многим элементам веб-сайтов. Но всегда ли она оживляет дизайн или же может его разрушать? Давайте выясним, какие выгоды может принести использование анимации на вашем сайте и обозначим те случаи, когда стоит избегать её внедрения.

Как анимация появилась в веб-дизайне?

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

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

Сегодня анимации создают при помощи более легковесного JavaScript и CSS кодирования, которое помогает добавлять движущиеся элементы на сайт, не перегружая его при этом. И, что более важно, анимации теперь используются для улучшения юзабилити сайта, а не просто для потехи. Они являются выдающимся инструментом для веб-дизайнеров, помогая делать сайты лучше и проще в использовании. Это можно увидеть на следующих примерах:

Улучшение юзабилити при помощи анимации

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

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

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

Сайт Etechevent с анимированными элементами

blog_12_10_0.jpg

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

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

Сайт Interactive Apps

blog_12_10_1.jpg

Использование анимации в материал-дизайне

Анимация в веб-дизайне является чрезвычайно полезной вещью, если только она не используется исключительно в декоративных целях. Разработчики интерфейсов теперь часто используют анимации для улучшения рабочего пространства. Даже Google понимает важность наличия движущихся элементов для юзабилити. Собственно, так и появился гугловский «Material design». Материал-дизайн становится всё более и более модным. Сегодня его используют в различных приложениях и в дизайне веб-сайтов. Секрет его популярности кроется в повышенном внимании к тому, как будет восприниматься элемент, как движение может рассказать пользователям больше о том, что это за элемент и как его использовать.

В своём «Руководстве по материал-дизайну» Google утверждает, что движение элементов может уведомить пользователей о том, что объект является лёгким, тяжёлым, гибким или же большим/малым. Анимации должны использоваться, чтобы обеспечивать у пользователей лучшее понимание природы объектов, а также то, как это может быть и должно использоваться в структуре чего-либо. «Движение в материал-дизайне должно отображать сходство с реальным поведением физических объектов без ущерба элегантности, простоте и красоте».

Google пошёл дальше в плане развития анимаций и рекомендует использовать движущиеся элементы, которые меняют свою скорость и продолжительность движения в зависимости от цели и эффекта, который должен произвести такой объект. Таким образом, Google вводит приближающиеся и удаляющиеся элементы, которые должны привлечь внимание, а затем исчезнуть, если их присутствие более не требуется.

Советы по использованию анимации на веб-сайтах

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

Во-первых, вы должны переосмыслить необходимость использования анимаций, если они замедляют скорость загрузки страниц сайта. Снижение скорости выявить очень просто. Вы можете сравнить плавность загрузки сайта с запуском тяжёлых 3D-игр. Если игра работает более быстро и плавно, чем сайт, это должно стать причиной отказа от анимации.

Сайт The Happy Forecast

blog_12_10_2.jpg

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

Убедитесь, что ваши анимации адаптивные. Адаптивный дизайн веб-сайта жизненно необходим, если вы желаете добиться успеха. Но, если он хорошо выглядит и работает лишь на десктопных системах, вы можете потерять пользователей, предпочитающих серфить с мобильных устройств. Существует множество инструментов для создания адаптивных анимаций вроде Adobe After Effects или Invision. Также такое можно проделывать в некоторых CMS (Webdlow или MotoCMS), частью которых является возможность создания адаптивных анимированных эффектов. Они предлагают различные типы анимаций, которые могут быть использованы на сайте для улучшения юзабилити и дизайна в целом:

Появление (слева, справа, сверху, снизу);

  • Имитация удара в экран;
  • Вращение;
  • Скольжение;
  • Вспышка и пульсация;
  • Сдвиг и желеподобный эффект;
  • Качание и др.

Анимации должны притягивать внимание… но не чрезмерно. Убедитесь, что движение в анимациях не затянуто по времени и не слишком долго занимает экранную область. Особенно это важно для элементов, с которыми пользователям предстоит взаимодействовать очень часто. На пару раз это может их развлечь, но далее начнёт попросту раздражать.

Сайт Laerepenger c утончённой анимацией

blog_12_10_3.jpg

Начните с использования малых анимированных элементов на вашем сайте. В действительности, анимация должна служить средством достижения цели, а не быть самой целью. Не нужно использовать её везде и всюду при малейшей возможности. Её внедрение должно быть оправдано и нести смысл, приносить пользу.

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

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

Приведём в качестве примера несколько сайтов, очень удачно использующих анимационные эффекты:

Kikk

blog_12_10_4.jpg

JD Consulting Company

blog_12_10_6.jpg

VN Star

blog_12_10_7.jpg

Soane Capital Financial Firm

blog_12_10_8.jpg

Nodeplus Digital Agency

blog_12_10_9.jpg

Creative Cruise

blog_12_10_10.jpg

Pomade Digital Agency

blog_12_10_12.jpg

Puca Jewels

blog_12_10_13.jpg

Carioca Promo

blog_12_10_14.jpg

Ultranoir Website

blog_12_10_15.jpg

Mahno Personal

blog_12_10_16.jpg

Animated Scenery Vintage Farm

blog_12_10_17.jpg

+3
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
GreenRed brand studio
разработка логотипа за 99$
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei
Интересные примеры)
Ответить
Денис Бессонов
Отлично, приятно было прочитать. В закладках статья валялась месяца полтора.
Ответить
Дамир Фахриев
Недавно статья вышла о скорости анимации в вебе: http://valhead.com/2016/05/05/how-fast-should-your-ui-animations-be. Интересно, есть подобные материалы на русском?.. Может знает кто?
Ответить
Webest
Разработка качественных корпоративных сайтов, для малого и среднего бизнеса.
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать