Главная   →   Блог   →   Советы для создания анимаций в материальном дизайне

Советы для создания анимаций в материальном дизайне

На первый взгляд кажется, что это просто новый графический способ передачи с более насыщенными цветами и добавлением теней. Но на самом деле, это новый подход к виду программного обеспечения и его функциональности. Дизайн основан на новом способе взаимодействия пользователя с программными элементами. Все началось с информационных карточек сервиса Google now. Разработчики пришли к выводу, что они должны обладать физическими свойствами - иметь толщину, отбрасывать тень, менять скорость движения. Команда хотела добиться эффекта взаимодействия с реальными осязаемыми объектами. За основу материала взята бумага. К ее физическим свойствам добавили яркие цвета, эффектную анимацию, минимализм и получили на выходе материальный дизайн.

У материала нет названия, потому что он обладает не только физическими качествами, присущими всем объектам. Он может менять размер, цвет, делиться на части или сливаться в сплошной лист. Анимация - очень важная часть дизайна. В ней учтены физические свойства объектов, их ускорение и замедление, инерция. Движение объектов плавное и удобно для визуального восприятия. Однако использовать ее нужно только там, где она будет органично смотреться и не перегружать контент. Благодаря этому, дизайн не возвращается к сложному скевоморфизму, и в то же время не настолько прост как плоский дизайн.

Главные принципы анимации в интерфейсе:

  1. Ускорение и замедление объектов плавное, максимально приближенное к реальности.
  2. Все объекты реагируют анимацией на касание. От точки касания идет волна в виде увеличивающегося круга.
  3. В материальном дизайне используется анимация иконок - довольно новое, но очень перспективное направление дизайна. Пользователи не обращают внимание на эти детали, но общее восприятие приложения становится легче.
  4. Имеет значение и продолжительность нажатия, в зависимости от нее меняется и анимация.
  5. В интерфейсе все должно быть логично. Всплывающие окна появляются из кнопки, на которую нажимает пользователь, а не посреди экрана.
  6. Когда элементы разделены, выбранный объект приподнимается.
  7. Переходы между слайдами плавные и в них содержатся общие элементы, чтобы пользователь не терялся и сразу понимал куда он попал.
  8. Перед созданием перехода важно понять какую информацию выделить в первую очередь, как связать ее визуально с предыдущим слайдом без резкого скачка, добавит ли движение ясности.
  9. При анимации последовательности элементов следует использовать правильный тайминг. Не стоит анимировать объекты одновременно, лучше если они будут появляться один за другим, так взгляд пользователя будет двигаться по объектам постепенно и не будет чувства разобщенности элементов.
  10. Все двигающиеся элементы должны перемещаться скоординированно, в общем направлении. Хаотическое движение недопустимо, так как оно отвлекает пользователя и усложняет процесс восприятия информации.

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

Спасибо за внимание. Обратите внимание на наши профили в социальных/профессиональных сетях и следите за обновлениями:
Dribbble: https://dribbble.com/agilie
Behance: https://www.behance.net/agilie
Facebook: https://www.facebook.com/pages/Agilie

comments powered by Disqus
ЧИТАЙТЕ ТАКЖЕ...
21133090b2f1534e3060e6b345652be1b65929d9 5 прогнозов веб-дизайна на 2016-2017 годы
Тенденции, с которыми столкнется веб дизайн в 2016-2017 годах.
4f18524be9133e2d7da1b722821b916299b206ea Волшебные истории от Agilie на Behance
Привет всем! Думаем, что вы уже слышали о таком явлении, как Behance, тем не менее, давайте вкратце вспомним о чем идет речь. Являясь одним из лидеров узкопрофильных соцсетей для дизайнеров, фотографов, людей других творческих профессий и всех, кому интер
2db98b65e3f4008861d764c131e362367d6926bc Ресурсы для совместной работы дизайнеров
Работая над разнообразными проектами, мы пришли к выводу, что иногда в командной работе дизайнеры сталкиваются со сложностями в совместной разработке одного проекта.
Dd23792dfcb0683cc7b0f395189d9c72765e856d Роль дизайна в разработке мобильных приложений
Дизайн мобильных приложений — это не только картинки, этот процесс состоит из как минимум двух основных вещей – user experience и user interface (UI/UX).