Веб-анимация в эпоху после Flash

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

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

Рекламодатели это знают, поэтому у нас есть анимированная уличная реклама на автобусных остановках и платформах метро, ​​всплывающая видеореклама в социальных сетях и электронные билборды с полноэкранным видео. Этот метод представляет собой эффект «двойной удар», предназначенный для доставки маркетинговых сообщений. Во-первых, привлекая наше внимание, а во-вторых, используя видео и анимацию для передачи сообщения.

Если статическая картинка стоит тысячи слов, то сколько стоит анимация?

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

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

В первые дни существования Всемирной паутины все было довольно статично и скучно. Веб-страницы в основном основывались на графическом дизайне и макетах из печатного мира. Однако некоторые дизайнеры предприняли согласованные усилия, несмотря на технические проблемы и проблемы с пропускной способностью, чтобы включить ранние формы веб-анимации, чтобы сделать их более динамичными и привлекательными. Одно из первых добавлений GIF-анимации на веб-сайт было на сайте Джеффри Зельдмана « Бэтмен навсегда» в 1995 году. Посетителей приветствовал полет Бэтмена к ним, анимированный в виде последовательности изображений.

Промо-сайт Batman Forever был одним из самых популярных в то время. Это вдохновило других веб-дизайнеров и разработчиков включить веб-анимацию GIF в качестве причудливого, привлекающего внимание элемента на своих веб-сайтах.

Перенесемся на 20 лет вперед, и теперь анимированные GIF-файлы повсюду. Они есть в Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram и Facebook. GIF-файлы подходят для короткой циклической анимации, последовательностей изображений и даже коротких видеоциклов. Досадный недостаток заключается в том, что формат файла GIF не имеет переменной прозрачности и не поддерживает альфа-канал; следовательно, все пиксели либо полностью непрозрачны, либо полностью прозрачны.

GIF-анимации стали началом ренессанса в веб-дизайне, но они не были идеальными. Особенно в первые дни коммутируемого доступа и медленных скоростей Интернета GIF-файлы потребляли пропускную способность. В результате получилась пиксельная последовательность с низким разрешением. Недостатком для дизайнеров, которым приходилось сжимать GIF-файлы до минимально возможного размера, была ограниченная 8-битная палитра, что приводило к большому количеству дизеринга. Это изменилось, когда высокоскоростной Интернет стал более распространенным явлением в 21 веке, и, как следствие, веб-анимация стала лучше выглядеть с миллионами цветов и более плавной с более высокой частотой кадров.

Рассвет веб-анимации Flash

Большой бум веб-анимации произошел с появлением Flash в 1996 году, когда Macromedia объявила о своем веб-плагине и сопутствующем инструменте покадровой анимации: Macromedia Flash (после того, как они приобрели FutureSplash Animator, программу векторной анимации). Flash сыграл ведущую роль в создании новых возможностей для Интернета. От аудио и анимации до интерактивности и видео — Flash помог продвинуть Интернет вперед.

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

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

Кроме того, сложное взаимодействие во Flash стало возможным благодаря ActionScript (AS), объектно-ориентированному языку программирования, похожему на JavaScript. Первоначально ActionScript был разработан для управления простой 2D-векторной анимацией, но впоследствии превратился в сложный инструмент.

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

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

Стив Джобс

Веб-анимация сегодня

Сегодня, когда Flash устарел, у нас другие потребности в веб-анимации. Инструменты должны быть гибкими и легкими. Веб-дизайнеры должны создавать адаптивный и адаптируемый контент для различных устройств (настольных компьютеров, планшетов и мобильных устройств), принимая во внимание различные размеры экрана, браузеры, соотношения сторон, плотность пикселей и многое другое. Наши шедевры веб-анимации должны работать на 5-дюймовом мобильном телефоне с разрешением 720 пикселей, на 9,7-дюймовом планшете QXGA и на 32-дюймовом дисплее Retina 6K.

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

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

HTML5, CSS3, JavaScript и SVG (масштабируемая графика) кажутся лучшими решениями для веб-анимации. Использование этих современных веб-технологий и языков поможет решить большинство, но не все из вышеперечисленных проблем. Но всегда полезно действовать осторожно, особенно когда вы находитесь на неизведанной территории, и обширный контроль качества и тестирование являются обязательными.

Зачем использовать веб-анимацию?

Веб-анимация может привлекать и удерживать внимание людей дольше, чем статическая веб-страница, и более четко и эффективно передает идею или концепцию. Превосходная веб-анимация передает историю каждого движения. Все дело в том, чтобы оживить анимацию со смыслом и «душой» (лат. анима).

Веб-анимация должна быть плавной, осмысленной и поддерживать путешествие посетителя. Веб-дизайнер/аниматор должен знать, как анимация вписывается в пользовательский опыт, пытаться предсказать вероятные пользовательские потоки, а затем поддерживать ее осмысленным образом.

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

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

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

С логической точки зрения мы можем разделить веб-анимацию на два основных типа:

• Статическая, неинтерактивная веб-анимация, например GIF-анимация.
• Динамическая веб-анимация с взаимодействием с пользователем и интерактивностью, которая меняется в зависимости от ввода пользователя.

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

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

Плюсы и минусы веб-анимации

Вот некоторые плюсы и минусы методов веб-анимации, включая устаревшие решения, которые больше не используются.

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

Во-первых, нам нужно проверить , как анимация повлияет на взаимодействие с пользователем. Улучшит ли это UX веб-сайта? Дизайнеры должны:

• Изучите существующий дизайн сайта (если есть)
• Проверьте целевую аудиторию и аппаратные платформы, которые они используют
• Проверьте время загрузки сайта и загрузку процессора
• Изучите другие альтернативы
• Следите за удобством использования

Не рекомендуется использовать веб-анимацию на сайте, чтобы просто следовать тенденциям.

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

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

Дальнейшее чтение в блоге Toptal Design:

• Как создать собственную анимацию загрузки, чтобы снизить показатель отказов
• Создание умопомрачительных иллюстраций с помощью Sketch и Looper в кратчайшие сроки
• Пошаговое руководство по анимации пользовательского интерфейса с Principle и Sketch
• Вдохновение анимации логотипа, чтобы сделать ваш бренд более узнаваемым
• Пошаговое руководство по созданию анимированных видеороликов с пояснениями к продуктам