Animation, как и любой другой аспект в Интернете,

must ¹ be ² designed ³ .Как веб-разработчиков, мы думаем о последствиях типографики, макет, взаимодействия и переход видовых, но при включении анимации у нас есть еще один фактор, чтобы рассмотреть: время .

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

“Форма” и Function

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

Отправить button является самой мощной частью формы.Мы обычно решить эту проблему, используя яркие цвета, чтобы привлечь к нему внимание.Но что происходит, когда что кнопка отправки активируется?Есть ли у пользователя ждать, не зная, форма работала, или они снабжены мгновенной обратной связи?Просто кнопку отправки, даже с нажимной анимации, иногда не могут достичь этой цели, в то время как кнопка с погрузчиком может держать зрителя в то время как заниматься данные загружаются в фоновом режиме.Это помогает с ожиданием части анимации, но то, что происходит, когда форма ввода фактически представлены?Вы должны стремимся предоставить клиенту обратной связи rush когда процесс будет завершен.Страница успех это хорошо, но гладкая transition во что-то, что снимки в поле зрения может дать им лучшее визуальное ответ и произвести небольшой, но восхитительные результаты .

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

Это мы рассмотрели аспекты, чтобы собрать кусочки этой одной анимации:

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

Что Character

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

• Что такое быстрый способ добраться до этой информации
• Что бы заставить меня чувствовать себя в своей тарелке
• Что такое наиболее убедительным элементом я мог разместить обратить внимание?

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

Как анимации помощь в этом сценарии?По удержания вниманияaudience.Анимация создает характер из наших интерфейсов.Наблюдайте, как это полоса заказ иллюстрирует недействительные данные пользователя, например (из этого действительно хорошо написанный article ⁹ ):

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

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

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

Влияние Google’ S Материал дизайн, на мой взгляд, заключается не столько с языком дизайна, и больше с, что это было первым крупным примером промышленность компании, который включал анимация guidelines __25 | 10 в брендинге.Впервые люди начали думать о стиль animation как функционирующей организации, которая имела голос, тот, который должен быть разработан в сплоченности и все остальное .

Если наша компания является хорошо доверять, стоически страховая компания, характер любой анимации на нашем сайте будет меньше яркий и более формальный, и мы, как правило, используют линейный облегчает, а не отскока или упругой движения.Но брендинга, это более удобный и дружественный, как Zendesk или MailChimp, форма должна следовать брендинга и, соответственно, имеют более живой анимации, в то время как до сих пор общение эффективно;что-то с очарованием loaders__2 Криса Гэннона | 11 появляются, чтобы быть простым, но захватывающим .

Если вы думаете, обратно в первый разплакала, потому что вымышленного персонажа, это был, вероятно, анимированные.В Aarron Уолтерса “ Проектирование для Emotion” ¹² он обсуждает, как эмоции связаны с лимбической системой: мы, скорее всего, что-то вспомнить, что становится частью нашей эмоциональной памяти.Глава 7 его книги переходит в жестких цифр о том, сколько возврат инвестиций (ROI) можно получить, сосредоточив внимание на влияние эмоциональных переживаний пользователя .

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

Там было много разговоров в последнее время о воспринимается пользователя experience.Иногда вы не можете обойти время, необходимое для загрузки что-то (хотя вы должны попробовать ваш лучший).Если вы не дадите пользователи нечего делать в промежутке, вы, скорее всего, потеряет их.Специальный соус Animation является то, что он может переехать с одного интерфейса на другой, и развлекать их, пока они ждут.Секунды, которые ранее чувствовали трудным и была им табуляции прочь Facebook теперь заниматься и чувствовать бесшовные.Это, вероятно, самая важная причина, чтобы использовать анимацию в UX .

Поднять This

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

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

Из анимация настолько привлекательным, это легко переборщить, но не все на экране должен быть анимированы.Вы не начинать войну с секретным оружием.Анимация может быть способ означающий конец или начало something, а также направляя свое внимание.С анимацией, что целенаправленная и планируется в соответствии с просмотра взаимодействия, исполнении бюджета и брендинга, мы можем поднять среду.Вал Главаобсуждает это очень ясно, когда она пишет о невидимым animation ¹⁴ .Хорошая анимация не кажутся неуместными, ни быть второстепенным .

Выезд __8 Олега Соломка в | Пузырь макет demo ¹⁵ (это приятно со звуком на): анимация достаточно восхитительный, чтобы держать вас занимается, как вы ориентируетесь, но получает из вашего пути, а вас’повторно читать содержание.Имейте в виду, что цель этих учебников, чтобы продемонстрировать конкретный метод;в дикой природе, реализация может быть даже немного смягчил для размещения профессиональный, но привлекательный эффект.

Time Is Money

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

Студии, как Активный Theory __22 | 16 уйти с привлечением своих клиентов с этой беседе ранее в процессе проектирования из-за их собственным брэндом.”Мы смелые вещи для больших парней.” Клиенты, которые ищут активную Theory’ ы работу знают, что они платят за блокбастера, стук-ваш-носки-офф вид веб-опыта.Это не будет случай 98% времени .

Как мы можем изменить это?Опять же, способ, которым мы обычно делаем.В условиях продавец, что означает “увеличить рентабельность инвестиций.” В условиях разработчиков это означает, повышая продукт на что-то, что полезно, что увеличивает участие, или имеет положительный experience, и тогда она не будет пустой тратой времени и денег,Для получения более подробной информации о том, как общаться с клиентами эффективно, обратитесь __30 Майка Монтейро в | “ Ты мой любимый Client” ¹⁷ или “ Дизайн Job” ¹⁸ .

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

Первый эффективного общения с нашей clients.Это не означает, железнодорожных перевозок их в придерживаясь наших убеждений.Это означает, объясняя возможные выгоды, уверяя их, мы волю / B test ¹⁹ наши интерфейсы и измеримых результатов, и их удовлетворения полпути на единовременных пособий .

Рассмотрим форму, мы работали на ранее.Показать клиентских прототипы двух формах (вы можете показать им работу других людей в качестве примера, если у вас нет времени, чтобы построить; CodePen имеет большой дизайн patterns __10 | 20 | __5 ресурса).Одной из форм будет представлять себя без обратной связи по кнопке, прогресс, или коварным успеха UX;другой будет включать все уроки, которые мы изучили здесь.Или еще лучше, использовать A / B тестирование (юзабилити-тестирование с различными вариантами), чтобы доказать, форму с анимацией, чтобы быть более эффективным инструментом. Твердые числа всегда better чем субъективное мнение, которое может быть в форме вокруг тенденций, невежества, или последние плохих переживаний из-за плохой реализации .

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

• Time
• Experience
• Производительность budget
• Color
• Composition
• Профиль time

Это может показаться слишком сложным, но вы должны быть в состоянии дать себе основные цифры приблизительные течение нескольких секунд для каждого из них, и они должны быть рассмотрены, прежде чем двигаться дальше.Вам не хватает опыта?Тогда вам нужно немного больше времени, как и большинство вещей.Вы в настоящее время есть много других тяжелых активов на странице?Вы должны быть очень осторожны загрузка до изображения, SVGs, скрипты и анимации библиотеки.Ваша сайте уже есть очень богатую палитру?Вы должны будете использовать эти цвета переменные.Есть старые браузеры рассмотрение?Тогда вы, скорее всего, придется использовать библиотеки как GreenSock __36 | 21 , которые имеют гораздо более глубокий __40 обратной совместимости кросс-браузер | чем даже родной анимация rendering __42 | 22 наSVGs, обеспечивая polyfills и fallbacks __48 | 23 для любых векторной графики .

Хорошо Stuff

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

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

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

?