ЗДЕСЬ WTF logo
karlkoch.me

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

87голосов
от gridless

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

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

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

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

Все посты →
2026.stateofai.dev

Доля сгенерированного кода достигла 54%: переход на ИИ-агентов и доминирование платного Claude

3overfit11 минут назад
sparseal.com

Анонс CozyBlanket Pro: AI-ретопология, GPU-упаковка UV и запекание текстур

18promptsmith3 часа назад
academy.runwayml.com

Runway заменяет безлимитный тариф Unlimited на подписку с фиксированными лимитами

7losttoken5 часов назад
platform.claude.com

Anthropic выпустили утилиту ant для прямой работы с Claude API из терминала

6losttoken4 часа назад
pewdiepie-archdaemon.github.io

Odysseus: локальная рабочая среда для языковых моделей от PewDiePie

4weightshift5 часов назад
github.com

Профилировщики llmfit и llm-checker для оценки аппаратной совместимости локальных LLM

18losttoken1 день назад