Мы все стремимся быть гибкими, насколько это возможно в современном быстро меняющемся мире веб-дизайна, в то же время оставаясь вдумчивый конечного пользователя и тех, кого мы работаем с.
After Effects является отличным инструментом, который позволяет нам быстро визуализировать и испытать надежную анимации patterns всей веб-дизайна, поделиться тем, с командой разработчиков и клиентов, и даже вариантов тестов с пользователями, чтобы получить быстрый проверку по конструкции, прежде чем он идетв производство .
Веб-дизайн переходов и анимации, как параллакс прокрутки, скрытой навигации, проводя, потяните, чтобы обновить, преобразования или действительно any переходные интерфейс, здорово прототип в After Effects.В этой статье, мы будем царапать поверхность, как, чтобы соответствовать After Effects в ваш UX процесса, и мы разделяем детали, советы, опыт и связи, которые можно использовать как влияние и думал стартеров в вашем следующем проекте .
1 Движение в опыте Design
Мне нравится думать о движения в пользовательском интерфейсе в качестве нового типа aesthetic в дизайн — висцерального aesthetic 3 .Люди могут не знать об этом, пока они не испытывают интерфейс, что не хватает его.Такая грубая эстетические имитирует как объекты в реальной жизни на самом деле двигаться.Все это проистекает из основных принципов физики.Физика определяется | as__11 __38 | | 4__11 “естественной науки, которая включает в себя изучение материи и ее движение в пространстве и времени, наряду с соответствующими понятиями, такими как энергии и силы.. В более широком смысле, это общий анализ природы, проводится с целью понять, как ведет себя Вселенная “В нашем случае, наша Вселенная является экран .
Что такое After Effects
За последний год или около того, вы, возможно, заметили, тонны действительно прохладных UI анимации, танцующих вокруг межсетях.Вы, возможно, сказал, “Это выглядит здорово!Как они добились такие точные переходы, как, что без кода? “Ну, ответ, вероятно, After Effects.Длятех, кто не знает, After Effects является Adobe программное обеспечение, которое, с момента ее создания, была использована для создания сложных название анимации и спецэффектов для кино.Дизайнеры поняли свою силу и начали использовать его в шоу сложных взаимодействий и animation быстро и многократно .
Фото ниже может выглядеть устрашающе, со всеми этими слоями и маленьких алмазов (ключевые).Кадр в анимации точки, которые определяют начало и конец любого перехода.Точки называются кадры, потому что их положение в момент используется для измерения в рамках на полосе фильма .
5 Если вы помните Программирование флэш-памяти или “анимацию” в Flash, то это понятие должно звучать очень знакомо.Ключевые кадры обеспечивают сложные анимации с очень простой логикой.И если вы разработчик, вы можете иметь некоторые реальное удовольствие, создавая надежные ключевых кадров анимации с помощью программного обеспечения в выражение engine __25 | | 7__8 .Опять же, похоже на Flash, что позволяет пользователям с помощью ключевых кадров промежуточные кадры или написать собственный код ActionScript, через After Effects имеет встроенный JavaScript-основе двигателя, что позволяет более обтекаемой animation, не требуя, чтобы создать десятки или сотниключевые кадры вручную .
Выражение кусочек программного обеспечения — так же, как скрипт —, которое вычисляется в одно значение для одного параметра слоя на определенный момент времени.В то время как сценарии сказать заявку делать что-то, говорит, что выражение недвижимость-то и говорит, что определенный слой или свойство живой или переход в некотором роде.Выражения оказаться очень полезным, когда вы хотите, чтобы проверить частности анимация на нескольких элементов очень быстро .
Преимущества После Effects
Ускорение проекта Timeline
Объясняя сложные анимации пользовательского интерфейса для клиентов действительно трудно . Большинство из них не могут его представить.Я даже с трудом изображая анимации пользовательского интерфейса при чтении документации чужое.Когда клиенты видят пятно и прорезал стиль анимации в After Effects, они в восторге.Это дает им четкое представление о том, как конечный продукт будет выглядеть иФункция .
Этот вид исследования функциональности через прототипов может быть сделано в различных этапах процесса проектирования.Показаны клиенту некоторые основные поисковые анимации и переходов во время фазы открытия проекта может получить их в восторге от возможностей и сделать их хотят больше для их веб-сайта или приложения.Мы обычно используем After Effects как способ подтверждения функциональности и визуального дизайна выбор.Независимо от того, в какой фазе цикла проекта вы выбираете для реализации After Effects прототипов, убедитесь, что есть четкое конечную цель и знать, что эта форма прототипов предполагается rapid.Цель может быть, чтобы продемонстрировать самые сложные функциональные части и точно настроить их для разработчиков, или просто, чтобы показать клиенту что-то хоккей и сексуально.В любом случае, процесс должен быть быстрым .
Этот быстрый способ визуализации анимации также отлично подходит для тестирования различных конструкций с пользователями.На данный момент в проекте, большинство проектные решения основаны на аналитике существующих сайтов (если таковые имеются), персонами, взятых из абонентской базы и много допущений.Таким образом, этот процесс позволяет легко создавать несколько вариантов одного и того же дизайна element, показывая, как она движется, и представляя, что пользователям и просят для обратной связи в ходе обследования или с одним-на-один вопросы.Просто позволяя пользователю просмотреть анимацию на устройстве, они могут быстро определить, какой чувствует себя более естественно и является наиболее привлекательным.Вы также можете принести это в более традиционном подходе к тестированию путем включения анимации в формате GIF в интерактивные прототипа на то, что веб-платформа вы используете.Большинство быстрого прототипирования веб-инструменты поддержки GIF-в настоящее время .
Бумажные (каркасные) переходы — из меню, кнопок государств, выходные холсте контейнерах или, что еще — может показаться простым решением.Но как только вы их аннотированный для разработчика и видел их в движении, вы можете быстро изменить свое мнение и сказать, “На самом деле, меню выглядит странно скольжения с левого.Можем ли мы попробовать сдвинув его в сверху?А не могли бы элементы ссылка в списке меню входят в замедленной права друг за другом “Это превращается в возвратно-поступательный между разработчиком и дизайнером и материи проб и ошибок на обеих частях .
Избежать этого, взяв несколько элементов с вашего сайта в любой форме, будь то коробки и стрелки или визуальные привилегии, и делает несколько вариантов того, как элементы могут оживить.После завершения этого и в то время как визуальные дизайнеры делают свои горящие настроек и очистки их файлы для развития, эти различные анимации может быть разработан в быстрой prototypes в Invision 8 или сопоставимы веб-инструмент прототипирования, и они могут быть отправлены для заинтересованных сторон или реальных пользователей для тестирования.Мы могли бы принять результаты этих быстрых тестов юзабилити и настройки нашего функциональный документ, чтобы отразить наши выводы, вместе с GIF наиболее эффективного варианта меню .
Для сопровождения файл GIF, мы хотели бы добавить нашу функциональную документацию, а также кривую замедления, которая была применена и продолжительность анимации.Потому что эти атрибуты анимации, казалось, выполнять лучшим среди вариантов, мы можем начать применять их на другие функции и элементы веб-сайта, чтобы создать последовательную висцерального ощущение на протяжении опыта.Да, другие элементы будут иметь небольшие изменения в связи с их различных целей, но опять же, ответ на который приходит с проверкой .
Вводя это в вашем постного UX или гибкой процесса, обратно и вперед обсуждение анимации между развитием и проектных команд можно срубить чрезвычайно, и Команда разработчиков будет чувствовать себя более confident в направлении и будетчувствовать себя менее когнитивной нагрузки при программировании и читая документации.Если вы заинтересованы в том, как идти о переводе обычай After Effects ослабления замедления кривые в CSS3 анимации ключевых кадров для доставки более точную документацию в разработчиков, проверить эту статью Райан Браунхилл на subject __11 | 9 .
10
Easing
Как упоминалось ранее, это висцеральный эстетические имитирует как объекты движутся в реальной жизни.Объекты в реальном мире не двигаться с постоянной скоростью на протяжении всего их движения —. Они легкость в Например, если вы запустите компьютерную мышь по столу, он не будет двигаться в одном постоянной скоростью, а затем прийти кРезкое остановка.В цифровом слова, мы имитировать движение реального objects использованием функции замедления кривой .
Функция замедления, как правило, описывает значение свойства данного процентполнота.Различные структуры используют слегка различные методы, но концепция проста для понимания, как только вы получите эту идею.Это, вероятно, лучше смотреть на несколько примеров .
Ослабление функции Чит Sheet 35 13 позволяет пройти и проверить, как каждый человек ставит кривая объекты в движении, а затем захватить функцию в любомCSS, JavaScript, или SASS быть привлечено в After Effects проекта.Если вы ищете что-то немного более автоматизированной и менее нестандартного вы можете скачать Простота и Wizz __14 | 14 , отличный сценарий для After Effects, что поставляется с несколькими кривыми;когда выбраны ключевые кадры, вы можете обратиться выражение кривой на этих ключевых кадров .
Интеграция с различными Workflows
Photoshop или Illustrator, чтобы после Effects
Это, вероятно, как большинство дизайнеров в вашей команде будет превратив свои каркасы в визуальных красот.Потому что After Effects является продукт Adobe, Photoshop (PSD) и Illustrator (AI) файлы чрезвычайно compatible.Вам не нужно никаких специальных экспортеры спецификации PSD файлов.Просто сохраните файл и импортировать его.А для AI файлов, все что вам нужно сделать, это убедиться, что вы “Слои выпуску в последовательность” перед сохранением файла .
Большой аспект принятия РП в After Effects является возможность редактировать текст.Таким образом, если вы собираетесь на более высокой точности анимации тестирования и некоторые копии происходит изменение в привилегии, внесения изменений в анимационном прототипа становится очень легко .
Если вы не включили текст, всегда есть возможность обновлениями.Красота работать в Adobe программ является то, что большинство из них очень хорошо владеете друг с другом.Итак, когда вы вносите изменения в PSD или AI файла, он должен отражать в After Effects композиции.Вы, возможно, придется перезагрузить After Effects проекта, чтобы увидеть изменения, отраженные должным образом, хотя .
Постарайтесь ограничить анимации GIF-шести секунд — То есть, не весь переход, а все видео вы будете экспортировать.Хотя я иногда использую After Effects, чтобы показать более сложные потоки, которые в конечном итоге долго две-три минуты, это не идеально, потому что размер файла будет слишком большим и структура файла на-осложняется.Делая быстрее анимации микро-взаимодействия наиболее efficient и эффективным .
Представляя эти анимационные ролики для клиентов, я обнаружил, что только нажав кнопку воспроизведения не совсем понимаю реакцию я надеялась.Я недавно былдемонстрации анимации клиентам в виде GIF или оставляя их в форме видео и позволяет клиенту использовать видео скруббер, который создает взаимодействие, которое имитирует функциональность захвата прокрутки с помощью мыши и скольжения вниз по странице.Это, конечно, не работает во всех ситуациях, но это действительно эффективным при работе с страницы прокрутки анимации и эффектов параллакса или когда вам нужно, чтобы скрыть навигацию по свиток .
Эскиз к После Effects
Мы недавно начали использовать эскиз 3 на работе, и это отличный инструмент.Это говорит с носителями CSS единиц измерения, и сотни хранилищ на GitHub есть плагины для него, и это способствует сотрудничество с функциональной группой дизайна и визуальной дизайн команды, если они работают …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров