Практические методы дизайна анимации

Posted on by riasevastopol

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

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

“Форма” и функция

Формы являются одним из самых ответственных элементов интерфейса пользователя на сайте. Контактная форма – вход в вашу компанию, самый подходящий метод, дабы захватить и, следовательно, взять доход. Если вы не думаете о юзабилити этого компонента, вы несправедливы по отношению к вашей компании, и к пользователю.

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

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

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

Так как форма ответственна, любой должен иметь возможность взять к ней доступ, а также скрин ридеры. В этом случае, мы должны применять или CSS либо SVG; в случае если мы используем , мы должны обеспечить в том месте управляемый контент методом включения чего-нибудь наподобие React.js, библиотека JavaScript, которая предлагает виртуальный DOM.

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

Вот нюансы, каковые необходимо разглядеть, дабы собрать эту анимацию:

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

Характерная изюминка

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

  • Какой самый стремительный метод взять эти сведенья?
  • Что бы вынудило меня чувствовать себя в своей тарелке?
  • Что есть самый захватывающим элементом, что я имел возможность бы разместить в том месте, где обратят внимание?

Мы понимаем, что мы приглашаем людей в незнакомую обстановку; обстановку, выстроенную из HTML элементов, а не строительного раствора и кирпичей, но все же с фасадом. A/B тестирование говорит о том, что внимание пользователя может переключиться за доли секунды. разработчики и Дизайнеры должны создать то, что будет максимально привлекательным, не приводя к.

Как анимация может оказать помощь в этом деле? Удерживая внимание аудитории. Анимация формирует отличительные изюминки при помощи отечественных интерфейсов. Посмотрите, как Stripe checkout иллюстрирует недействительные эти пользователя, к примеру (из данной прекрасно написанной статьи):

Изображение предоставлено Michael Villar)

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

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

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

Это как раз то, к чему пытается брендинг.

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

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

Если вы вспомните, в то время, когда в первоначальный раз плакали из-за вымышленного персонажа, он был, возможно, анимированным. В “Designing for Emotion” Aarron Walters, он обсуждает, как эмоции связаны с лимбической совокупностью: мы, вероятнее, запомним что-то, что делается частью отечественного эмоционального воспоминания. 7 глава его книги приводит цифры о том, как может возрасти окупаемость инвестиций, в случае если сосредоточить внимание на влиянии эмоциональных переживаний пользователя.

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

В случае если все будет сделано верно, потенциал хорошего сотрудничества поразит вас.

Сейчас было большое количество бесед о предполагаемом UX. Время от времени вы не имеете возможность обойти время, нужное для загрузки чего-либо (не смотря на то, что вы должны весьма попытаться). Если вы ничем не займете пользователей в данный временной отрезок, вы, вероятнее, утратите их.

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

Улучшение

Анимация должна быть независимой, как значительная часть процесса разработки. Мы можем сделать это несколькими методами:

  • У анимации должен быть дизайн, как и у как другой части страницы: с макетами, цветовой палитрой, раскадровкой с варфреймами и собственной композицией.
  • Ваш процесс дизайна обязан направляться такой же логической структуре, как ваш код.
  • Анимация должна быть информативной, призывающей к рациональным действиям и направляющей внимание пользователей.
  • Анимация обязана направляться руководящим правилам брендинга, быть частью управления по стилю, и обращаться к чувствам пользователей.
  • Нам не требуется опять изобретать колесо. Анимация существовала за пределами сети целую вечность. (Да, вы имеете возможность взглянуть Историю Игрушек в “научных” целях).

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

Хорошая анимация не думается неуместной и второстепенной.

Посмотрите демо Bubble Oleg Solomka (лучше со звуком): анимация восхитительна и удерживает ваше внимание, но исчезает, пока вы просматриваете контент. Имейте в виду, что цель этих уроков – показать конкретный способ; реализация возможно мало смягчена для опытного, но привлекательного результата.

Время – деньги

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

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

Студии, как Active Theory прекратили завлекать собственных клиентов таким методом ранее в ходе дизайна из-за собственного брендинга. “Мы делаем храбрые вещи для громадных парней”. Клиенты, каковые ищут работу Active Theory знают, что платят за блокбастер. Это не будет так 98% времени.

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

Для получения более подробной информации о том, как общаться с клиентами действенно, обратитесь к Mike Monteiro “You re my Favorite Client” либо “Design is a Job“.

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

Первое это действенное общение с отечественными клиентами. Это указывает, что необходимо растолковать вероятные пользы, уверяя их, что мы совершим A/B тестирование интерфейсов, возьмём умеренные результаты и их удовлетворим их скидками.

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

Либо значительно лучше, применяйте A/B тестирование (юзабилити-тестирование с разными вариантами), дабы доказать, что форма с анимацией – самый эффективный инструмент. Цифры неизменно лучше, чем субъективное вывод, которое может отображать тенденции, неведение, либо плохой опыт из-за нехорошей реализации.

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

  • время
  • опыт
  • бюджет производительности
  • цвет
  • состав
  • время пользователя

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

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

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

Хорошая анимация

Сейчас мы можем перейти к забавному. Любой человек имеет разные методы работы, но тут имеется пара главных моментов, каковые я нашёл.

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

Что делает походку человека такой узнаваемой?

Большая часть людей начинают с мяча, и это хорошее упражнение, частично вследствие того что простота может продемонстрировать вам темперамент, динамизм и вес. Вот два мяча подпрыгивают: вы имеете возможность додуматься, какой из них тяжелый, а какой мягкий?

Демо мяча.

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

Что еще? Ну, перемещение: один, думается, достаточно твёрдым, с другим возможно поиграть. Не смотря на то, что у них одинаковый срок времени, их физические перемещения подразумевают разные веса.

Смягчение функций передается плотностью объекта.

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

Демо мяча

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

Вот хороший пример элементарного дизайна перемещения.

Как Hans Bacher обсуждает в Dream Worlds, в то время, когда аниматоры трудились над “Чудовище и Красавица”, их привезли в Лондон и Францию, дабы взглянуть стили этих мест. У вас может не быть для того чтобы бюджета (но в случае если будет, заберите меня с собой!); к счастью интернет имеет большое количество визуальной и исторической информации, которая окажет помощь в работе.

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

Вы, вероятнее, возьметесь за проект, чей контент вам нравится.

Назад, дабы двигаться вперед

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

И разрешает трудиться в обратном направлении: нарисовать что-то, а после этого медлительно раскрыть это.

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

Дабы избежать всего этого, я призываю вас забыть о платоническом идеале раскадровки.

Я был научным иллюстратором в Field Museum of Natural History and Stanford. Я был доктором наук живописи в колледже. Могу ли я рисовать?

Еще бы. Вот как выглядят мои раскадровки:

Практические методы дизайна анимации

Стыдно ли мне? Ни какпли. Эта раскадровка заняла 45 секунд и разрешила мне осознать и редактировать фронт, на что я планировал потратить большое количество дней.

Без нее, мой рабочий процесс был бы вдвое больше. Раскадровки живут за кулисами и предназначены для личного общения. Я не говорю, что вы не имеете возможность создать прекрасную работу, как Rachel Nabors,, что вы не обязаны.

Давайте возвратимся к дискуссии сопереживания пользователя. Вы имеете возможность завершить это с раскадровкой всего сотрудничества пользователя, от начала и до конца. Просмотрите эту статью, “Story Map”. Карта истории совершит вас через целый опыт визита становления и вашего сайта клиентом от начала и до конца.

Это раскадровка, где вы видите всю картину визита и, следовательно, возможно принять целенаправленные ответы, основанные на исходе и желаемом направлении.

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

Вы также должны сделать это.

Это указывает, что вы должны израсходовать некое время в Adobe Kuler разрабатывая образцы цвета. Это займет маленькое время в начале, но сохранит его, пока вы трудитесь. Мы все знаем, что цвет ясен.

Работа с ним делается существенно проще в CSS с препроцессором переменных: применяйте их в собственных заинтересованностях.

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

И если они не были запланированы, перед тем как я начал рисовать, анимация не имела бы никакого смысла.

код и Дизайн рабочего процесса

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

Функции должны быть названы в зависимости от сцены, в которой вы находитесь: кроме того “sceneOne” подойдет. Названные схожим образом, переменные смотреться красиво и бережно, но они подставят подножку вам и вашей команде, в особенности тогда, в то время, когда анимация станет более сложной. Назвать элементы форм так, как в они изображают качества, и настроить код так, что он отражает ваш дизайн, облегчит вам задачу более конкретных разделений между переменными JavaScript и Sass.

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

Первый блин комом

Это ветхая пословица, но это правда. У вас ни при каких обстоятельствах не окажется сделать все верно с первого раза, так что расслабьтесь и сделайте пара неточностей. Не переживайте об этом. Будь вы дизайнер, разработчик, либо и то и другое, вероятнее, вы были не так хороши в начале, каким вы есть на данный момент, и у вас ушло большое количество времени, дабы стать им. Это естественно. Изучили ли вы Javascript только программирую одно сотрудничество с применением лишь одной библиотеки?

Нет. Обучились ли вы создавать дизайн лишь посредством одной композиции? Я пологаю, что нет.

Те же правила используются к изучению анимации.

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

А они вам пригодятся.

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

CSS превосходно подходит для весьма мелких сотрудничеств UI; в действительности я весьма советую его для этих случаев, по причине того, что вам не требуется загружать другие ресурсы. Однако, в случае если у вас имеется больше, чем две анимации в объекте, вам, возможно, направляться решить вопрос о переходе к GSAP. Свойство двигаться мало вперед либо сзади последней анимации – через чур замечательный инструмент, дабы не применять его, например, в то время, когда необходимо скорректировать тайминг.

С CSS вы пересчитываете все значения, в случае если что-то изменяется в анимации в начале, но GSAP не делает этого.

Это не было бы таковой значительной проблемой, в случае если тайминг не был так серьёзен. Вы когда-нибудь подмечали, как в некоторых комиксах имеется кадры, где нет действия? Они создают иллюзию паузы, и ваш мозг принимает его таковым.

Тайминг есть крайне важным для комедии, для фантазии, но и для анимации дизайна интерфейса пользователя.

Подробности анимации, каковые выглядят легко время от времени тяжелее всего создать.

Небо – предел

The Illusion of Life начинается с одной из моих самых любимых цитат Walt Disney: “Анимация может растолковать все, что ум человека может осознать”. Вы имеете возможность сделать что угодно. Вы имеете возможность создавать и уничтожать миры, восхищать либо осуждать.

Имеется большое количество чего, что возможно обдумать. Мы должны создавать дизайн анимации так, как мы делаем это с другими качествами UX.

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

Случайные статьи:

CSS анимация для самых маленьких. Анимация логотипа на миллион долларов


Подборка похожих статей:

riasevastopol

More Posts