Loading Statesавтор Owl-Listener

Loading States Skill.

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

Дизайн взаимодействия
UX загрузки

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Loading StatesSKILL.md

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

Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

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

Сделайте состояния ожидания понятными

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

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

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

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

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

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

Решение о паттерне загрузки для каждой операции с задержкой.
Заметки о переходах с учётом зарезервированного места и сохранения прокрутки.
Поведение при долгом ожидании, отмене и сбое оптимистичного обновления.

Смотреть пример задания

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

01
Классифицируйте ожидание
Определите ожидаемую длительность, известную структуру контента, измеримость прогресса и возможность отмены операции.
02
Выберите честную обратную связь
Используйте скелетоны для предсказуемых форм, а индикаторы прогресса — только когда прогресс известен. Определите откат до применения оптимистичной обратной связи.
03
Проверьте поступление и сбой
Проверьте медленные соединения, замену контента, стабильность макета и настройки движения.

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

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

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

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

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

Ограничения

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

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

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

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

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

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

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

Попробуйте целевое задание

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

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

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

Исходный файл в репозитории

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/loading-states/SKILL.md

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

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

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

Используйте loading-states для панели проекта с первоначальной загрузкой данных, миниатюрами изображений и встроенным редактированием заголовков. Выберите паттерн для каждой операции, зарезервируйте итоговый макет и опишите неудачные оптимистичные правки, поведение при медленной сети и альтернативы для режима уменьшенного движения. Не выдумывайте проценты прогресса.

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

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

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

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

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

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

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

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

Владелец источника: Owl-Listener
Репозиторий: Owl-Listener/designer-skills
Файл навыка: interaction-design/skills/loading-states/SKILL.md
Лицензия: MIT
Проверенный снимок: 2026-10-07 · 9a6930cf84a8

Редакционное резюме источника

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

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

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

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

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

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

Когда полезен скелетон?

Когда поступающий контент имеет известную структуру, которую можно показать, не создавая впечатления, что контент уже доступен.

Означает ли режим уменьшенного движения пустой экран загрузки?

Нет. Информативная обратная связь должна сохраняться; мерцание и другое декоративное движение можно уменьшить или убрать.

OpenDesign

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

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

Скачать OpenDesign Смотреть навыки дизайна