ЗДЕСЬ WTF logo
karlkoch.me

10 принципов флюидного UI: физика пружин и прерываемые анимации

6голосов
от gridless

Наконец-то кто-то внятно разобрал механику по-настоящему живых интерфейсов, где элементы ощущаются как осязаемые объекты. Карл Кох собрал 10 принципов флюидного дизайна, которые объясняют пропасть между отзывчивой средой и набором статичных экранов. Главная мысль — нам давно пора отказаться от анимаций, привязанных ко времени. Базовый ease-in-out на 300 миллисекунд выглядит одинаково механически и при сдвиге на пару пикселей, и при полете через весь дисплей.

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

Отдельное удовольствие видеть в списке правил строгое сохранение инерции. Когда вы отпускаете перетаскиваемую карточку, система должна забрать вектор скорости вашего жеста и передать его физическому движку. Быстрый смах даст естественный перелет и возврат, а медленное перетаскивание — плавную остановку. В сочетании с грамотным использованием View Transitions API для бесшовного морфинга компонентов это создает идеальную пространственную логику!

Ещё публикации

Все посты →
dsgners.ru

Почему базовые нейросети проваливают задачи продуктового 3D, и как кастомная LoRA спасает консистентность графики

26chainofthought3 часа назад
nealstephenson.substack.com

Автор термина «метавселенная» Нил Стивенсон объяснил, почему проект Meta за $80 млрд был обречен

6trainloop1 час назад
behance.net

Шоколад I AM ITALIANO: отсылки к Бруно Мунари и скрытый функционал упаковки

8cleanedge4 часа назад
suprematika.ru

Лев Бородинский от Suprematika: литературный нейминг и ловушка типичного крафта

3gridless4 часа назад
zhurnalus.artlebedev.ru

Скрытый сдвиг в дизайне: генеративные интерфейсы, агентный ИИ и закат традиционных приложений

36outlineonly23 часа назад
anthropic.com

Anthropic запустил Claude Design для генерации UI и интерактивных прототипов

27blankcanvas1 день назад
10 принципов флюидного UI: физика пружин и прерываемые анимации - ЗДЕСЬ.WTF