20 лучших бесплатных подарков для начинающих дизайнеров UX Motion
Дизайнеры интерфейсов больше интересуются дизайном UX с анимированными макетами, которые имитируют действия пользователя. Эти макеты UX полагаться на движение с анимированными эффектами для определения как интерфейс должен реагировать на ввод пользователя.
Большинство UX-дизайнеров учатся использовать программное обеспечение для создания этих анимаций. Два самых популярных варианта - Adobe After Effects и Principle (только для OS X). Вы можете макеты интерфейса дизайна в такой программе, как Photoshop, и переместите пользовательские интерфейсы в эти программы для анимации.
Если вы заинтересованы в изучении UX-анимации, то бесплатное использование будет огромным преимуществом. Вы можете изучить работу других и поиграть с их дизайнами, чтобы увидеть, как все это работает.
Ниже вы найдете лучшие бесплатные подарки для пользователей Принципа и АЕ. попасть в UX Motion Design. Они обязательно помогут вам понять как работает UX анимация, и как построить свой.
1. Удалить действие
Swiping это очень распространенное действие в мобильных приложениях для различных целей. Действие смахивания iOS по умолчанию используется для отображать альтернативные опции для редактирования / удаления элементов, и это именно то, что вы получаете в этой халяве, созданной Рамилем Дерогонгуном.
Вы можете скачать бесплатный файл AEP для After Effects и попробовать его самостоятельно. Пользовательский интерфейс следует очень простая каркасная схема с пользовательским вводом отображается в виде синей точки. Эти типы поведения пользователей лучше всего показывать через анимацию потому что это дает разработчикам возможность увидеть как должен работать интерфейс.
2. Виджет Проведите
Вот еще один анимированный макет смахивания, который фокусируется на корзину товаров в слайд-шоу. Эта бесплатная анимация, разработанная Леоном Ву, поставляется с файлом PRD, созданным по принципу.
Анимация очень проста и демонстрирует, как элементы должны двигаться на экране. когда давление приложено. Вы также почувствуете ослабляющий эффект всякий раз, когда действие удара проведено.
3. Dualshock UI
Вот невероятно динамичный UX-анимационный эффект, которым поделился Александр Бойченко. Этот макет основан на контроллере PlayStation для пользовательского интерфейса мобильного приложения. Он включает в себя файл Sketch and Principle, который вы можете скачать бесплатно.
Эта халява показывает, как создавать переходы, которые проведите между экранами. Но вы также можете увидеть, как элементы страницы анимируются по всему экрану. в разных направлениях.
4. Гамбургер Меню Анимация
Иконки гамбургеров все еще в моде на мобильных интерфейсах. Этот значок меню показывает, как анимировать трехбалочную иконку в иконку "X".
Это повторяющаяся анимация, таким образом, «X» также оживляет обратно в значок меню гамбургера. Это отличная халява для изучения векторные манипуляции для элементов пользовательского интерфейса.
5. Snapster
Этот бесплатный макет для мобильного приложения под названием Snapster. Фокусируется на экране приветствия / регистрации где пользователи могут увидеть демонстрации приложения и узнать, как оно на самом деле функционирует.
Это файл PRD, и, к сожалению, с After Effects это не очень хорошо, так что только пользователи Принципа могут извлечь из этого пользу..
6. Загрузка спиннеров
Вот бесплатная AEP After Effects для мобильные погрузчики. Эти типы анимированных GIF-файлов стали очень популярными, когда Ajax вошел в массовую веб-разработку..
Теперь эти мобильные погрузчики стоят десять центов, и они даже могут быть сильно настроены соответствовать определенным интерфейсам. Эта бесплатная поставляется с файлом AEP и файлом Sketch для редактирования векторов, если вы хотите изменить их.
7. Play / Pause Transition
Эффекты перехода часто кажутся очень простыми, но на самом деле требуют большого объема работы. Эта анимация воспроизведения / паузы, созданная Алексом Пронским, является отличным примером..
С помощью этой бесплатной вы можете изучить, как анимировать различные иконки тонких линий в формы и символы. Как только вы изучите программу, делать такие вещи станет намного проще, так что это поможет вам иметь в своем распоряжении халяву для исследований..
8. Макет iPhone
Хотя эта халява напрямую не содержит анимацию, она предназначена для использования для производственной работы над приложениями для iPhone. Это бесплатный файл iPhone 5S AEP для использования в After Effects в качестве шаблона для iPhone..
Просто импортируйте макет интерфейса и создайте анимацию в After Effects. Затем вы можете подключить его к этому макету iPhone, чтобы поделиться с вашей командой.
9. Шаблон iPhone
Это другое пользовательский шаблон After Effects с более современный дизайн iPhone. Халява доступна на этой странице в UX в движении.
Все в шаблоне супер легко настроить. На странице загрузки вы также найдете раздел «Видеоинструкции», где вы можете узнать, как анимировать приложение..
10. Микро Анимация
Даже самая маленькая анимация приложения может оказать большое влияние на пользовательский опыт. Эта халява отображает "Нравится" микро анимация всякий раз, когда пользователю «нравится» сообщение.
Значок сердца имеет свою анимацию с фотографией профиля пользователя, добавленной в стек лайков. Эта халява только для принципа, и у вас также есть .мов файл для скачивания, если хотите.
11. Приложение кошелька
Цифровые кошельки становятся все более популярными, и эта халява облегчает их создание. Вы получаете файл Sketch со всеми необработанными векторными элементами, а также бесплатный файл PRD для анимации принципа..
Эта халява была задумана Сергеем Быковым как забавный побочный проект. Но это может быть очень познавательно, если вы разберете его и пошагово поработаете с анимацией.
12. Переключатель iOS
С iOS 7 от Apple мир получил новый дизайн для включения / выключения ярлыков. Это привело ко многим различным эффектам, включая бесплатную анимацию, которая имитирует родной выключатель.
В этом файле вы получите очень простой анимационный эффект с базовым ослаблением. Переключатель перемещается, и фон становится зеленым, а затем возвращается в исходное положение, когда переключатель выключен.
13. Приложение Ritter
Вот еще одна отличная халява, выпущенная Сергеем Быковым для приложения, которое он называет Ritter. Это включает в себя бесплатный файл Sketch для векторного интерфейса, а также бесплатный файл PRD для анимации принципа..
Ты получишь много разных анимаций в этой халяве, так что я думаю, что это было бы более полезным для дизайнера среднего и продвинутого уровня. Новички тоже могут многому научиться, но у них может быть крутая кривая обучения..
14. Пригласить друзей
Мы все знаем и любим всплывающее меню со значком плюса в Google. Ну, Джардсон Алмейда создал меню «Пригласить друзей», основанное на простой концепции дизайна материалов..
Все было разработано в Sketch и импортировано в Principle для анимации. Вы получаете оба файла в качестве бесплатной загрузки и играете с.
15. Размах карты
Вот еще одна общая халява, сделанная только для пользователей Принципа. Это интерфейс считывания карт созданные для слайд-шоу общего назначения или собственных интерфейсов приложений.
Я думаю, что это идеальный вариант для новичка, который только начинает изучать Принцип. Это не так сложно, что ты чувствуешь себя потерянным, но это не так просто, что ты будешь чувствовать себя банально.
16. Чат на карте
Многие дизайнеры по-прежнему используют Photoshop для интерфейсов, и это также относится к халяве этого чата на карте. Вы можете скачать PSD-файл для интерфейса и PRD-файл для анимации Принципа..
Это удивительно ручная анимация для стиля, но она по-прежнему выглядит великолепно и работает точно так, как вы ожидаете в простом приложении карты / геолокации.
17. Загрузка приложения
Мобильные приложения часто используют загрузочные экраны рассказать посетителям, что что-то происходит в бэкэнде. Одна из моих любимых халяв в этой коллекции - это анимация загрузки, созданная Романом Вагнером..
Загружает отдельные элементы один за другим как только экран загрузки закончится. Эта анимация очень плавная и заслуживает доверия в области дизайна мобильных приложений..
18. Бортовые карты
Регистрация пользователя это важный шаг для каждого нового мобильного приложения. На этом этапе всегда приятно включать некоторые анимации, поэтому эти анимации встроенных карт могут быть очень полезны для разработчиков приложений..
Это было создано Остином Бэйрдом и выпущено бесплатно для использования в любом проекте UI / UX.
19. Принцип Демо
Если вы углубитесь в Принцип, вы узнаете много продвинутых методов рабочего процесса. Одна из лучших халяв в этом направлении, созданная для творческой команды Yalantis.
Это совершенно бесплатный ресурс для пользователей Принципов, с которым можно скачать и поиграть. В нем рассказывается о нескольких приемах, показывающих, как стать профессионалом в анимации Принципов..
20. Выпадающие меню
В раскрывающихся меню часто используются сумасшедшие анимации, чтобы привлечь наше внимание. Это After Effects халява использует анимация выпадающих лестниц в меню для отдельных элементов, чтобы они падали как лестницы.
Это может быть не полезно для всех, но это, безусловно, отличный способ узнать об анимации интерфейса After Effects.
Заключительные слова
Все эти ресурсы абсолютно бесплатны для загрузки и игры в ваших собственных проектах. Если вы новичок в UX-анимации, я гарантирую, что вы многому научитесь, изучая эти бесплатные возможности. Если вы знаете какие-либо другие замечательные ресурсы, не стесняйтесь оставлять ссылки в комментариях.
