UI/UX · Гид
Что такое дизайн-система
Библиотека компонентов — не дизайн-система. Разбираем, из чего она состоит на самом деле, когда её стоит заводить и почему большинство систем умирает через год.
Дизайн-системы
Библиотека решений вместо библиотеки макетов
Дизайн-системы: токены, компоненты, документация, версионирование и передача в разработку. Как система живёт после запуска и почему чаще всего умирает.
Библиотека решений вместо библиотеки макетов
Дизайн-система — это не файл в редакторе макетов, а набор из четырёх частей: принципы, токены, компоненты и процесс. Чаще всего в проектах есть только компоненты, и именно поэтому они не работают: непонятно, как принимать решения, когда нужного компонента нет.
Основная ценность системы не в экономии времени на отрисовку, а в том, что решения принимаются один раз и остаются согласованными между командами и продуктами.
Когда система окупается
Дизайн-система — накладной расход. Она оправдана при определённом масштабе и не оправдана ниже него.
Почему системы умирают
Основная причина — отсутствие владельца и процесса: систему собирают на энтузиазме, после чего продукт уходит вперёд, а система остаётся в прошлой версии. Вторая — избыточность на старте: команда пытается описать всё сразу и выкатывает систему, которая уже не соответствует продукту.
Рабочий подход к запуску — начать с токенов и пяти самых частых компонентов, выпустить и дальше добавлять только то, что понадобилось дважды. Система должна догонять продукт, а не опережать его.
Что читать в этой теме
Материалы разбирают состав системы, именование токенов, полный набор состояний компонентов, базовую доступность, документацию, иконки и микровзаимодействия.
Коротко
- Чем дизайн-система отличается от библиотеки компонентов?
- Библиотека — это только компоненты. Система добавляет три вещи: принципы (как принимать решения, когда компонента нет), токены (именованные значения) и процесс (кто и как вносит изменения). Без процесса система устаревает за год.
- Как называть токены?
- По роли, а не по внешнему виду: «color-accent» переживёт ребрендинг, «color-blue» — нет. Схема трёхуровневая: базовые значения, семантические имена поверх них и, при необходимости, компонентные. Тёмная тема — это переопределение семантического уровня.
- Какие состояния компонентов чаще всего забывают?
- Загрузку, ошибку, пустоту, переполнение длинным контентом и фокус с клавиатуры. Макет обычно рисуется в состоянии, которое пользователь видит реже всего: данные загружены, поля заполнены, текст идеальной длины.
- Что входит в минимальную доступность?
- Контраст 4,5:1 для основного текста и 3:1 для иконок и границ, видимая обводка фокуса, цели касания от 44 пикселей и смысл, не зависящий от одного лишь цвета. Проверяется за десять минут клавишей Tab и масштабом 200%.
Главный материал темы
Все материалы темы
Токены дизайн-системы
Именование определяет живучесть системы. Разбираем схемы наименования, уровни абстракции и типичные ошибки, из-за которых токены становятся бесполезными.
Состояния компонентов
Загрузка, ошибка, пустота, отключено, фокус с клавиатуры. Разбираем полный набор состояний и то, почему интерфейс разваливается именно на них.
Доступность интерфейса
Контраст, размеры целей, клавиатурная навигация, альтернативный текст. Разбираем базовые требования и то, как проверить их без специальных знаний.
Документация системы
Большая часть документации дизайн-систем не читается. Разбираем, какие разделы действительно нужны и как оформлять правила, чтобы им следовали.
Иконки в интерфейсе
Как строить иконки на единой сетке, какую толщину линии выбрать, когда нужны подписи и почему универсальных иконок почти не бывает.
Микровзаимодействия
Длительность, кривые ускорения и обратная связь. Разбираем, почему одни интерфейсы кажутся отзывчивыми, а другие вялыми при одинаковой скорости работы.