102.3K+Скачать
Перейти к руководству
Animation Principlesавтор Owl-Listener

Animation Principles Skill.

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

  • UI-анимация
  • Рекомендации по дизайну
Скачать OpenDesignОткрыть руководство по использованию
Обзор источника · Animation PrinciplesSKILL.md
Задача UX Результат • Обоснование движения для одного события интерфейса • Рекомендации по плавности, длительности и последовательности • Поведение при прерывании и при уменьшенном движении Перед началом Предоставьте состояния интерфейса до и после, триггер и целевые устройства. Используйте работающий предпросмотр, чтобы проверить тайминг, прерывание и поведение при уменьшенном движении.
Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Доработка одной UI-анимации

Руководство по дизайну одного движения: плавность, длительность, хореография, прерывание и уменьшенное движение.

Рабочий процесс на основе источникаНе тест производительности выполнения

Рабочий подход

Animation Principles — это узкое руководство motion-design по одному движению в интерфейсе. Оно связывает направление плавности, длительность, поэтапность и завершающее движение с тем, что должен заметить пользователь. У появления, исчезновения, акцента, индикации загрузки и перехода разные задачи.

Источник содержит диапазоны времени и предложения по каскадной задержке (stagger), но это отправные точки, а не измеренные требования для любого интерфейса. Он также требует прерываемого поведения, поддержки уменьшенного движения и проверки на маломощных устройствах. Токены движения для всего продукта относятся к другой задаче.

Ожидаемые результаты

  • Обоснование движения для одного события интерфейса
  • Рекомендации по плавности, длительности и последовательности
  • Поведение при прерывании и при уменьшенном движении
Смотреть пример брифа

От брифа до проверки

  1. 01
    Назовите смену состояния

    Определите, что сообщает анимация и какой элемент должен привлечь внимание первым.

  2. 02
    Настройте движение

    Выберите профиль плавности и длительность, подходящие для появления, исчезновения, акцента или перехода.

  3. 03
    Проверьте альтернативы

    Проверьте отмену посреди анимации, поведение при уменьшенном движении и воспринимаемую отзывчивость на целевых устройствах.

02 Когда использовать

Когда использовать

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

Хорошо подходит

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

Ограничения для проверки

  • Это не полноценная система движенияИсточник отделяет этот навык от токенов длительности и плавности для всего продукта.
  • Диапазоны зависят от контекстаПредлагаемые значения в миллисекундах не должны заменять реальное тестирование взаимодействия.

Что подготовить

  • Триггер и состоянияПокажите состояние до, действие и итоговое состояние.
  • Цель вниманияОпишите, что зритель должен понять из движения.
  • Ограничения устройствУкажите требования к уменьшенному движению и производительности.

03 Важные решения

Важные решения

  1. Цель важнее украшения

    Движение оценивается по тому, какую смену состояния оно сообщает.

  2. Прерывание имеет значение

    Переход должен выдерживать другое действие пользователя до своего завершения.

04 Пример задания

Попробуйте сфокусированный бриф

Приведённый ниже пример брифа не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Загрузите SKILL.md этой задачи из репозитория designer-skills в поддерживаемое расположение навыков вашего агента. Универсальная команда установки во входном файле не указана.

Исходный файл в апстриме
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md

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

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом брифе.

Пример брифа
Используйте animation-principles, чтобы настроить появление панели фильтров. Объясните выбор плавности и длительности, согласуйте движение панели и содержимого и определите, что происходит, если её закрывают на полпути. Добавьте вариант для уменьшенного движения и не добавляйте декоративные циклы.

Проверьте результат

Сравните фактический результат с этими наблюдаемыми критериями.

  • Анимация сообщает о конкретном изменении.
  • Второе действие может чисто прервать её.
  • Поведение при уменьшенном движении остаётся понятным.

OpenDesign предоставляет локальное дизайнерское рабочее пространство для кодинговых агентов. Эта запись не означает, что навык включён в поставку или что его внешние инструменты, учётные данные и программные зависимости входят в комплект.

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Источник и лицензия

На этой странице описана зафиксированная версия источника по ссылке ниже. Поведение и требования апстрима могут измениться.

Владелец источника
Owl-Listener
Репозиторий
Owl-Listener/designer-skills
Файл навыка
interaction-design/skills/animation-principles/SKILL.md
Лицензия
MIT
Проверенная версия
2026-10-07 · 9a6930cf84a8
Редакционное резюме источника
Руководство по дизайну одного движения: плавность, длительность, хореография, прерывание и уменьшенное движение.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Определяет ли он все токены движения?

Нет. Заявленная область — одно движение; токены для всего продукта обрабатывает навык для систем движения.

Универсальны ли диапазоны времени?

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

Всегда ли нужно анимировать загрузку?

Источник перечисляет паттерны загрузки, но требует, чтобы движение служило цели и учитывало настройки доступности.

OpenDesign

Оставьте место для следующей итерации дизайна.

Храните бриф, исходные материалы и дизайнерскую работу вместе в локальном рабочем пространстве. Перед добавлением навыка в свой рабочий процесс проверьте его собственную настройку.

Скачать OpenDesignСмотреть дизайн-навыки
Исходный файл в апстриме
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/animation-principles/SKILL.md