Material Design на русском. Часть 24 — Анимированные Иконки

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Использование

Анимация отражает действие, которое выполняет иконка.

Анимация каждой иконки согласуется как с визуальным дизайном, так и с действием, которое они выполняют.

Переходы

Переходы демонструют анимацию иконок между 2 состояниями. Переход между 2 иконками означает то, что они связаны, и нажатие на одну иконку проявит другую.

Переходы показывают связь между двумя иконками

Переходы используются для переключения, например между состояниями включения и выключения

Акценты

Анимированные переходы иконок могут использовать как простую, так и сложную анимацию в зависимости от желаемого уровня акцента.

Иконки, которые не являются важными, используют простую анимацию
Иконки, которые являются важной частью приложения, можно акцентировать сложной анимацией

Слева простая анимация переходов, а справа сложные анимации

Слева простая анимация переходов, а справа сложные анимации.

Слева простые переходы используются тогда, когда функциональность важнее эстетики. Имеющиеся иконки просто исчезают, а новые иконки появляются, слегка увеличиваясь в размерах. В правом примере детальные переходы иконок используются на важных элементах интерфейса, таких как элементы управления в музыкой в приложении.

Длительность

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

Простая анимация значков: 100 мс
Средняя по сложности анимация значков: 200 мс
Детальная анимация значков: 500 мс