20 бесплатных для начинающих дизайнеров UX Motion

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

Большинство UX-дизайнеров учатся использовать программное обеспечение для создания этих анимаций. Два самых популярных выбора Adobe After Effects а также Принцип (Только OS X). Вы можете создавать макеты интерфейса в такой программе, как Photoshop, и перемещать пользовательские интерфейсы в эти программы для анимации.

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

Ниже вы найдете лучшие бесплатные подарки для пользователей Principle и AE, которые только начинают заниматься UX motion design. Они наверняка помогут вам понять, как работает UX-анимация и как создать свою собственную.

Подробнее: 4 технологии UX-дизайна для привлечения пользователей

Удалить действие
Смахивание является очень распространенным действием в мобильных приложениях для различных целей. Действие смахивания iOS по умолчанию используется для отображения альтернативных вариантов редактирования / удаления элементов, и это именно то, что вы получаете в этой бесплатной программе, созданной Рамилем Дерогонгуном.
Вы можете скачать бесплатный файл AEP для After Effects и попробовать его самостоятельно. Пользовательский интерфейс следует очень простой каркасной схеме с пользовательским вводом, отображаемым в виде синей точки. Эти типы поведения пользователей лучше всего демонстрировать с помощью анимации, поскольку она дает разработчикам возможность увидеть, как должен работать интерфейс.
Widget Swipe
Вот еще один анимированный макет смахивания, который фокусируется на элементах корзины в слайд-шоу. Эта бесплатная анимация, созданная Леоном Ву, поставляется с файлом PRD, созданным для Principle.
Анимация чрезвычайно проста и демонстрирует, как элементы должны двигаться на экране при нажатии. Вы также почувствуете эффект ослабления при каждом срабатывании удара.
Dualshock UI
Вот невероятно динамичный UX-анимационный эффект, которым поделился Александр Бойченко. Этот макет основан на контроллере PlayStation для пользовательского интерфейса мобильного приложения. Он включает в себя файл Sketch and Principle, который вы можете скачать бесплатно.
Эта бесплатная показывает, как создавать переходы между экранами. Но вы также можете увидеть, как элементы страницы анимируются по экрану в разных направлениях.
Гамбургер Меню Анимация
Иконки гамбургеров все еще в моде на мобильных интерфейсах. Эта иконка меню freebie демонстрирует, как анимировать трехбалочную иконку в иконку «X».
Это повторяющаяся анимация, поэтому «X» также оживляет значок гамбургера. Это отличная возможность узнать о манипулировании вектором для элементов пользовательского интерфейса.
Snapster
Этот бесплатный макет для мобильного приложения под названием Snapster. Он фокусируется на экране приветствия / адаптации, где пользователи могут увидеть демонстрации приложения и узнать, как оно на самом деле функционирует.
Это файл PRD, и, к сожалению, он не очень хорошо работает с After Effects, поэтому только пользователи Принципа могут извлечь из этого пользу.
Загрузка прядильщиков
Вот бесплатная AEP After Effects для мобильных загрузчиков. Эти типы анимированных GIF-файлов стали очень популярными, когда Ajax вошел в массовую веб-разработку.
Теперь эти мобильные загрузчики стоят от десятка до десятка, и они могут даже быть сильно настроены под определенные интерфейсы. Эта бесплатная поставляется с файлом AEP и файлом Sketch для редактирования векторов, если вы хотите изменить их.

С помощью этой бесплатной вы можете изучить, как анимировать различные тонкие линии иконки в формы и символы. Как только вы изучите программу, делать такие вещи станет намного проще, так что это поможет вам иметь в своем распоряжении халяву для исследований.
Макет iPhone
Хотя эта халява не содержит непосредственно анимацию, она предназначена для использования в производственных приложениях для iPhone. Это бесплатный файл iPhone 5S AEP для использования в After Effects в качестве шаблона iPhone.
Просто импортируйте макет интерфейса и создайте анимацию в After Effects. Затем вы можете подключить его к этому макету iPhone, чтобы поделиться с вашей командой.
Шаблон iPhone
Это еще один пользовательский шаблон After Effects с более современным дизайном iPhone. Халява доступна на этой странице в UX в движении.
Все в шаблоне очень легко настроить. На странице загрузки вы также найдете раздел «Видеоинструкции», где вы можете узнать, как анимировать приложение.
Микро Анимация
Даже самая маленькая анимация приложения может оказать большое влияние на пользовательский опыт. Эта халява отображает микро анимацию «Нравится», когда пользователь «любит» публикацию.
Иконка сердца имеет собственную анимацию с добавлением фотографии профиля пользователя в стек лайков. Эта халява предназначена только для Принципов, и у вас также есть файл .mov для скачивания, если вы хотите.
Приложение кошелек
Цифровые кошельки становятся все более популярными, и эта халява облегчает их создание. Вы получаете файл Sketch со всеми необработанными векторными элементами, а также бесплатный файл PRD для анимации принципа.
Эта халява была задумана Сергеем Быковым как забавный побочный проект. Но это может быть очень познавательно, если вы разберетесь с ним и будете работать с анимацией шаг за шагом.
iOS Switch
С Apple iOS 7 в мире появился новый дизайн для включения / выключения ярлыков. Это привело ко многим различным эффектам, включая бесплатную анимацию, которая имитирует встроенный переключатель вкл / выкл.
В этом файле вы получите очень простой анимационный эффект с базовым ослаблением. Переключатель перемещается, и фон становится зеленым, а затем возвращается в исходное положение, когда переключатель выключен.
Приложение Ritter
Вот еще одна отличная халява, выпущенная Сергеем Быковым для приложения, которое он называет Ritter. Это включает в себя бесплатный файл Sketch для векторного интерфейса, а также бесплатный файл PRD для анимации Принципа.
В этой халяве вы получите много разных анимаций, поэтому я думаю, что это было бы более полезно для дизайнера среднего и продвинутого уровня. На этом новички тоже могут многому научиться, но у них может быть крутая кривая обучения.
Пригласить друзей
Мы все знаем и любим всплывающее меню со значком плюса в Google. Ну, Джардсон Алмейда создал меню «Приглашение друзей», основанное на простой концепции дизайна материалов.
Все было разработано в Sketch и импортировано в Principle для анимации. Вы получаете оба файла в качестве бесплатных для скачивания и играете с ними.
Размах карты
Вот еще одна распространенная бесплатная смахивание, сделанное только для пользователей Принципа. Это интерфейс считывания карт, созданный для слайд-шоу общего назначения или собственных интерфейсов приложений.
Я думаю, что это идеальный вариант для новичка, который только начинает изучать Принцип. Это не так сложно, что вы почувствуете себя потерянным, но это не так просто, что вы почувствуете себя банально.
Чат на карте
Многие дизайнеры по-прежнему используют Photoshop для интерфейсов, и это также относится к халяве чата на карте. Вы можете скачать PSD-файл для интерфейса и PRD-файл для анимации Принципа.
Это удивительно ручная анимация для стиля, но она все равно выглядит великолепно и функционирует точно так, как вы ожидаете от простого приложения карты / геолокации.
Загрузка приложения
Мобильные приложения часто используют экраны загрузки, чтобы сообщить посетителям, что что-то происходит в бэкэнде. Одна из моих любимых халяв в этой коллекции – это анимация загрузки, созданная Романом Вагнером.
Он загружает отдельные элементы один за другим после завершения загрузки экрана. Эта анимация очень плавная и заслуживает доверия в области дизайна мобильных приложений.
Бортовые карты
Регистрация пользователя – важный шаг для каждого нового мобильного приложения. На этом этапе всегда приятно включать некоторые анимации, поэтому эти анимации встроенных карт могут быть очень полезны для разработчиков приложений.
Он был создан Austin Baird и выпущен бесплатно для использования в любом проекте UI / UX.
Принцип Демо
Если вы углубитесь в Принцип, вы узнаете много продвинутых методов рабочего процесса. Одна из лучших халяв, чтобы пойти дальше, этот создан для творческой команды Yalantis.
Это совершенно бесплатный ресурс для пользователей Принципов, с которым можно скачать и поиграть. В нем рассказывается о нескольких приемах, показывающих, как стать профессионалом в анимации Принципов.
Выпадающие меню
В раскрывающихся меню часто используются сумасшедшие анимации, чтобы привлечь наше внимание. Эта бесплатная программа After Effects использует анимацию раскрывающихся лестниц в меню для отдельных элементов, чтобы они падали как лестницы.
Это может быть полезно не всем, но это, безусловно, отличный способ узнать об анимации интерфейса After Effects.
Заключительные слова
Все эти ресурсы абсолютно бесплатны для скачивания и игры в ваших собственных проектах. Если вы новичок в UX-анимации, я гарантирую, что вы многому научитесь, изучая эти бесплатные возможности. Если вы знаете какие-либо другие замечательные ресурсы, не стесняйтесь оставлять ссылки в комментариях.