Перейти к руководству
Micro-Interaction Specавтор Owl-Listener

Micro-Interaction Spec Skill.

Дайте разработке описание поведения небольшого взаимодействия, а не только ссылку на анимацию.

  • Дизайн взаимодействий
  • Передача UI-макетов
Обзор источника · Micro-Interaction SpecSKILL.md
Задача Дизайн взаимодействий Результат • Спецификация триггера и правил для одного взаимодействия. • Последовательность обратной связи с заметками о тайминге и easing. • Поведение при повторе, первом использовании и требования доступности. Перед началом Конкретная библиотека анимации не требуется; тестирование на целевом устройстве всё же необходимо.
Редакционное резюме · источник просмотрен 2026-10-07 · не сгенерированный пример

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

Полностью опишите одно взаимодействие

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

Процесс на основе источникаНе тест выполнения

Принцип работы

Micro-Interaction Spec описывает одно небольшое взаимодействие как цельную поведенческую единицу. Триггер запускает его, правила определяют, что происходит дальше, обратная связь сообщает результат, а циклы или режимы объясняют повторение и изменения со временем. Структура подходит для переключателя, действия «в избранное», pull-to-refresh, подсказки валидации или долгого нажатия.

Анимация — лишь часть результата. Визуальные изменения, звук и haptic-отклик — возможные каналы обратной связи, но не гарантированные возможности каждой платформы. Источник требует указывать длительность, easing и вопросы доступности вместе с логикой, чтобы отполированная анимация не скрывала неопределённое состояние ошибки или повтора.

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

  • Спецификация триггера и правил для одного взаимодействия.
  • Последовательность обратной связи с заметками о тайминге и easing.
  • Поведение при повторе, первом использовании и требования доступности.
Смотреть пример задания

От задания до проверки

  1. 01
    Определите триггер

    Укажите, начинается ли взаимодействие с жеста, системного события или условия.

  2. 02
    Напишите правила

    Опишите последовательность, условия и ветвления до выбора формы обратной связи.

  3. 03
    Опишите восприятие и повтор

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

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

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

Конкретная библиотека анимации не требуется; тестирование на целевом устройстве всё же необходимо.

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

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

Ограничения

  • Одно взаимодействие за разКомпоненту со множеством взаимозависимых состояний нужна более широкая модель state-machine.
  • Нет гарантии для устройствHaptic- или звуковая обратная связь должна поддерживаться и проверяться на целевой платформе.

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

  • Действие и контекстОпределите конкретный элемент управления, жест или событие.
  • Логика и условияОпишите поведение при успехе, отказе и повторном действии.
  • Ограничения платформыУкажите настройки анимации, поддерживаемые каналы обратной связи и ограничения производительности.

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

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

  1. Циклы описаны явно

    На повторные действия может требоваться иной отклик, чем при первом использовании, вместо повторения одной и той же обратной связи.

  2. Логика важнее easing

    Спецификация остаётся полезной, даже если анимацию убрать ради доступности.

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

Попробуйте узкое задание

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

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

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

Исходный файл
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/micro-interaction-spec/SKILL.md

Конкретная библиотека анимации не требуется; тестирование на целевом устройстве всё же необходимо.

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

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

Пример задания
Используйте micro-interaction-spec для сохранения статьи в список для чтения. Определите триггер клика, правила ожидания и неудачного сохранения, визуальное подтверждение, поведение при повторном клике и альтернативу для reduced motion. Ограничьтесь этим взаимодействием и не предполагайте поддержку haptic в вебе.

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

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

  • Триггер и итоговое состояние однозначны.
  • Для повторной активации определён результат.
  • Важная обратная связь сохраняется при reduced motion.

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

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

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

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

Владелец источника
Owl-Listener
Репозиторий
Owl-Listener/designer-skills
Лицензия
MIT
Просмотренная версия
2026-10-07 · 9a6930cf84a8
Редакционное резюме источника
Узкий формат передачи взаимодействия, построенный на триггерах, правилах, обратной связи и циклах или режимах.

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

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

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

Это только для анимации?

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

Чем это отличается от конечного автомата?

Он описывает пользовательский опыт одного узкого взаимодействия. Конечный автомат исчерпывающе моделирует более широкий набор состояний и допустимых переходов.

Нужно ли в каждом взаимодействии использовать звук или вибрацию?

Нет. Источник перечисляет каналы, которые стоит рассмотреть; уместные каналы определяют контекст продукта и платформа.

OpenDesign

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

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

Исходный файл
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/micro-interaction-spec/SKILL.md