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

Длительностей четыре: 150, 300, 600 и изредка 900 мс. Все они кратны 150 — других значений в интерфейсе нет. Этот ряд мы называем «золотой дюжиной».

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

150 мс — быстрая анимация, с неё и начинаем. Интерфейс не заставляет ждать, но движение всё ещё видно: между двумя состояниями есть переход, а не скачок.

Убирать анимацию ради скорости не нужно. Бенджи Тейлор в эссе Family Values замечает, что продуманное движение добавляет ясности и ощущается таким же быстрым, как мгновенная смена.

Чем больше поверхность и чем дальше она едет, тем больше ей нужно времени. Шторка поднимается на треть экрана — ей хватает 150 мс. Та же шторка раскрывается на весь экран — и за 150 мс она промелькнёт: человек не успеет понять, что произошло. Здесь берём больше — 300 или 600 мс.

Значение из ряда выбираем по тому, что сделал человек и что мы хотим ему показать. Ответ на касание нужен сразу. А когда меняется весь экран, за движением должно быть можно уследить.

• 150 мс — отклик на нажатие, смена иконки или подписи, подъём шторки;
• 300 мс — поверхность заметно меняет размер: шторка раскрывается на весь экран, панель вырастает из кнопки;
• 600 мс — движется экран целиком;
• 900 мс — изредка, для самых крупных сцен.