UI и дизайн-система ·
Собрать библиотеку компонентов
Создать переиспользуемые элементы с понятным API, состояниями и правилами композиции.
Быстро понять за 2 минуты
Создать переиспользуемые элементы с понятным API, состояниями и правилами композиции. Результат работы — Component Library.
Контекст
Урок относится к этапу «UI и дизайн-система». Создать последовательный визуальный язык и устойчивые компоненты для всех состояний. Задачу выполняют до реализации или согласования зависимого решения, чтобы команда опиралась на проверенные факты и однозначные договоренности.
Что это дает
Правильно выполненная работа снижает стоимость переделок, делает решение проверяемым и дает участникам единый источник информации. Практический результат фиксируется в артефакте «Component Library».
Как выполнить
- Выберите компоненты по частоте и риску
- Опишите variants и properties
- Добавьте content guidelines
Критерии приемки
- Покрыты interactive states
- Компоненты сопоставлены коду
- Есть do and dont
Типичные ошибки
- Делать библиотеку скриншотов
- Создавать монолитные компоненты
Инструменты
Рабочий артефакт
Рабочий артефакт
Component Library
На рабочем проекте специалист начинает с шага «Выберите компоненты по частоте и риску», фиксирует выводы в артефакте «Component Library» и передает его владельцам решения. Пункт закрывается после проверки: «Покрыты interactive states».
- Компоненты
- Состояния
- Токены
- WCAG
Контроль качества
UI Specification
Покрыты interactive states
После релизов, изменения требований, обновления целей и появления новых рисков.
Контекст, проблему, доказательство, владельца, срок и критерий приемки.
Перед отметкой выполнено: Покрыты interactive states
Как применять
Начинайте с влияния на пользователя, продукт и команду. Затем проверьте реализуемость, критерии качества и формат доказательства результата. Хороший пункт чеклиста объясняет, какую проблему закрываем, как выполняем работу и по каким признакам считаем ее завершенной.
Режим обучения
Тест по теме
Проверка понимания
Ответьте на вопросы по материалу и получите итоговый отчет: что понято хорошо, а что стоит перечитать.