Содержание · 7
Длительность, кривые ускорения и обратная связь. Разбираем, почему одни интерфейсы кажутся отзывчивыми, а другие вялыми при одинаковой скорости работы.
Восприятие скорости
Ощущение отзывчивости определяется не реальным временем выполнения, а тем, как быстро интерфейс подтверждает, что действие принято. Отклик в пределах 100 мс воспринимается как мгновенный.
Поэтому кнопка, которая мгновенно меняет вид при нажатии и потом две секунды грузит данные, ощущается быстрее, чем кнопка без отклика, отвечающая за секунду.
Длительности
Слишком быстрая анимация не читается, слишком медленная раздражает при повторном использовании. Рабочий диапазон для интерфейсных переходов — 150–400 мс.
Правило масштаба: чем больше перемещается элемент, тем дольше анимация. Маленький переключатель — 150 мс, полноэкранная панель — 350–400 мс.
- Наведение и нажатие: 100–150 мс.
- Появление подсказки, выпадающего меню: 150–250 мс.
- Модальное окно, боковая панель: 250–400 мс.
- Переход между страницами: 300–450 мс.
Кривые
Линейное движение выглядит механически: в природе ничто не начинает и не останавливает движение мгновенно. Элемент, появляющийся на экране, должен быстро набирать скорость и мягко тормозить.
Практический набор: ease-out для появления, ease-in для исчезновения, ease-in-out для перемещения внутри экрана.
Какую кривую выбрать
Анимация должна что-то сообщать
Полезная анимация объясняет: откуда появился элемент, куда он ушёл, что связано с чем. Панель, выезжающая слева, сообщает, что она «живёт» слева и туда же вернётся.
Анимация без сообщения — это задержка. Если убрать её и ничего не изменится в понимании интерфейса, она не нужна.
Отзывчивость — это не скорость, а предсказуемость. Двести миллисекунд с понятной кривой ощущаются быстрее ста без неё.
Зачем интерфейсу отвечать на каждое действие
Микровзаимодействие — это ответ системы на действие человека: подсветка при наведении, изменение состояния кнопки, лёгкое движение при добавлении элемента. Его задача не украсить, а подтвердить, что действие принято. Интерфейс без такого подтверждения ощущается сломанным, даже когда работает: человек нажимает повторно, потому что не уверен.
Отсюда правило приоритета: сначала обратная связь на действия с последствиями — отправка, удаление, оплата, — и только потом декоративная анимация. Порядок обычно обратный, и в этом причина того, что нарядные интерфейсы бывают неудобными.
Длительности, которые ощущаются правильными
Всё, что дольше 400 миллисекунд, начинает восприниматься как ожидание. И отдельно: анимация обязана отключаться при системной настройке уменьшения движения — для части людей это не предпочтение, а условие пользоваться интерфейсом без тошноты.
Что в итоге
Отзывчивость создаётся мгновенным откликом, а не быстрой работой: подтвердите действие за 100 мс, и остальное можно грузить.
Держите переходы в 150–400 мс, используйте ease-out для появления и убирайте анимации, которые ничего не объясняют.
Коротко
- Какая длительность анимации ощущается правильной?
- Отклик на наведение 80–120 мс, смена состояния 120–200, появление панели 200–300, переход между экранами 250–400. Всё дольше 400 мс воспринимается как ожидание.
- Нужно ли отключать анимацию?
- Обязательно при системной настройке уменьшения движения: для части людей это не предпочтение, а условие пользоваться интерфейсом без тошноты.
Что такое дизайн-система
Библиотека компонентов — не дизайн-система. Разбираем, из чего она состоит на самом деле, когда её стоит заводить и почему большинство систем умирает через год.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…