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

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

На первый взгляд кажется, что это просто новый графический способ передачи с более насыщенными цветами и добавлением теней. Но на самом деле, это новый подход к виду программного обеспечения и его функциональности. Дизайн основан на новом способе взаимодействия пользователя с программными элементами. Все началось с информационных карточек сервиса 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

Next Posts
Db1d32add05375300e70a721ffbcdc11d1853514 Волшебные истории от Agilie на Behance
Привет всем! Думаем, что вы уже слышали о таком явлении, как Behance, тем не менее, давайте вкратце вспомним о чем идет речь. Являясь одним из лидеров узкопрофильных соцсетей для дизайнеров, фотографов, людей других творческих профессий и всех, кому интер
4f776792867d50c265e3bb7a702f20b63a27c01b Применение веб-сайтов с адаптивным дизайном
Сегодня все больше и больше людей выходят в интернет с мобильных устройств. Дайте им возможность делать покупки на вашем сайте, предоставив корректное отображение сайта на разных устройствах.