UI/UX · Гид
Что такое дизайн-система
Библиотека компонентов — не дизайн-система. Разбираем, из чего она состоит на самом деле, когда её стоит заводить и почему большинство систем умирает через год.
Дизайн-системы
Библиотека решений вместо библиотеки макетов
Дизайн-системы: токены, компоненты, документация, версионирование и передача в разработку. Как система живёт после запуска и почему чаще всего умирает.
Библиотека решений вместо библиотеки макетов
Дизайн-система — это не файл в редакторе макетов, а набор из четырёх частей: принципы, токены, компоненты и процесс. Чаще всего в проектах есть только компоненты, и именно поэтому они не работают: непонятно, как принимать решения, когда нужного компонента нет.
Основная ценность системы не в экономии времени на отрисовку, а в том, что решения принимаются один раз и остаются согласованными между командами и продуктами.
Когда система окупается
Дизайн-система — накладной расход. Она оправдана при определённом масштабе и не оправдана ниже него.
Почему системы умирают
Основная причина — отсутствие владельца и процесса: систему собирают на энтузиазме, после чего продукт уходит вперёд, а система остаётся в прошлой версии. Вторая — избыточность на старте: команда пытается описать всё сразу и выкатывает систему, которая уже не соответствует продукту.
Рабочий подход к запуску — начать с токенов и пяти самых частых компонентов, выпустить и дальше добавлять только то, что понадобилось дважды. Система должна догонять продукт, а не опережать его.
Что читать в этой теме
Материалы разбирают состав системы, именование токенов, полный набор состояний компонентов, базовую доступность, документацию, иконки и микровзаимодействия.
Главный материал темы
Все материалы темы
Токены дизайн-системы
Именование определяет живучесть системы. Разбираем схемы наименования, уровни абстракции и типичные ошибки, из-за которых токены становятся бесполезными.
Состояния компонентов
Загрузка, ошибка, пустота, отключено, фокус с клавиатуры. Разбираем полный набор состояний и то, почему интерфейс разваливается именно на них.
Доступность интерфейса
Контраст, размеры целей, клавиатурная навигация, альтернативный текст. Разбираем базовые требования и то, как проверить их без специальных знаний.
Документация системы
Большая часть документации дизайн-систем не читается. Разбираем, какие разделы действительно нужны и как оформлять правила, чтобы им следовали.
Иконки в интерфейсе
Как строить иконки на единой сетке, какую толщину линии выбрать, когда нужны подписи и почему универсальных иконок почти не бывает.
Микровзаимодействия
Длительность, кривые ускорения и обратная связь. Разбираем, почему одни интерфейсы кажутся отзывчивыми, а другие вялыми при одинаковой скорости работы.