106.9K+Скачать
Перейти к руководству
Interfaces That Feelавтор owl-listener

Interfaces That Feel Навык.

Свяжите тексты и движение интерфейса с эмоциональным состоянием пользователя.

  • Проектирование взаимодействий
  • Эмоциональные состояния
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · interfaces-that-feelSKILL.md
Задача Свяжите тексты и движение интерфейса с эмоциональным состоянием пользователя. Результаты Описание вероятного переживаемого состояния пользователя в выбранных моментах интерфейса. Перед началом Предоставьте реальное состояние загрузки, ошибки или завершения с текстом и таймингом. При наличии добавьте исследование аудитории, чтобы отличить предполагаемые эмоции от наблюдаемого поведения.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

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

Свяжите тексты и движение интерфейса с эмоциональным состоянием пользователя

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

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

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

Interfaces That Feel рассматривает момент работы с продуктом через состояние человека. Ожидание результата, восстановление после ошибки и завершение задачи требуют разных сигналов. Навык связывает эти моменты с конкретными решениями по тексту, таймингу, easing и поведению взаимодействий.

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

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

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

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

  1. 01
    Определите момент

    Выберите загрузку, пустое состояние, ошибку, успех или онбординг. Опишите вероятные переживания человека, отделив оценку от непосредственно наблюдённых пользовательских данных.

  2. 02
    Переведите чувство в поведение

    Найдите полезную физическую аналогию, например сопротивление или успокоение движения. Выделите нужное качество и свяжите с easing, длительностью, отступами или текстом.

  3. 03
    Измените сигнал интерфейса

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

  4. 04
    Проверьте результат

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

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

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

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

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

  • Холодные состояния обратной связиТехнически правильный экран мало откликается пользователю во время ожидания или восстановления.
  • Доработка текста и движенияКоманде нужен обоснованный подход к ошибкам, успеху или онбордингу.

Ограничения

  • Интерпретации нужен контекстЭмоциональное прочтение навыка — дизайнерская оценка, а не доказательство чувств каждого пользователя.
  • Сдержанность движенияИсточник рекомендует уменьшать движение перед добавлением и тестировать соответствующее предпочтение.
  • Рекомендации, а не доказательство эффектаБез пользовательских данных рекомендации по таймингу не доказывают рост удовлетворённости.

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

  • Выбранные состоянияПредоставьте загрузку, ошибку, успех или другие моменты для проверки.
  • Контекст пользователяОбъясните задачу, её значимость и известные исследования аудитории.
  • Текущая реализацияПредоставьте текущие тексты, тайминг и движение.

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

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

  1. Обоснованный тайминг

    Длительность и easing связаны с предполагаемым поведенческим сигналом.

  2. Полезный текст восстановления

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

  3. Сдержанное движение

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

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

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

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

Изучите исходные инструкции и настройку

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

Исходный файл в репозитории
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/interfaces-that-feel/SKILL.md

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

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

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

Пример задания
Используй interfaces-that-feel для проверки нашего процесса генерации отчёта: ожидания, сбоя и завершения. Прочитай текущие тексты и проверь фактический тайминг. Начни с вероятного эмоционального контекста пользователя и пометь допущения, не подтверждённые исследованием. Предложи лаконичные тексты и небольшое число изменений движения, объясняя смысл каждого. Сохрани скорость и ясность задачи. Сравни опыт с включённым уменьшением движения и определи сигналы, которые должны оставаться понятными без анимации. Ограничь рекомендации этими тремя состояниями.

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

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

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

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

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

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

Исходные материалы и лицензия

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

Владелец источника
owl-listener
Репозиторий
owl-listener/designer-skills
Файл навыка
SKILL.md
Лицензия
MIT
Проверенный снимок
2026-11-02 · 9a6930cf84a8
Редакционное резюме источника
Свяжите тексты и движение интерфейса с эмоциональным состоянием пользователя.

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

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

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

Навык просто добавляет анимацию?

Нет. Источник просит сначала уменьшить движение и обосновать каждую оставшуюся анимацию.

Какие слои интерфейса могут меняться?

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

Есть ли проверка уменьшенного движения?

Да. Тестирование с этим предпочтением входит в рекомендуемую практику.

OpenDesign

Храните задание и работу над дизайном вместе.

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

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