Всем доброго времени суток. Давно я что-то ничего не писал, и вот созрел. Предлагаю сегодня поговорить о ui-системе. Зачем она нужна, когда она нужна, что дает, какие минусы имеет и вообще стоит ли ввязываться в это блуд.  Я часто слышу на разных конференциях, что панацея от всех болезней в бизнесе  —  это наличие дизайн-системы (ui-системы). Что, как только вы достигаете ее, то сроки сокращаются в 100500 раз. Что разработчики не хотят открутить голову дизайнерам, и, наоборот, что качество продукта возноситься до небес, и еще много всего восхитительного об этой сущности. Но так ли все это ? Или это просто розовые очки, которые застилают глаза всех причастных к созданию ui-системы в компании и побочка от постоянных нервных срывов, скандалов, поиска компромиссов и просто выгорания? В этой статье я постарался разобраться, а стоит ли игра свеч или как в анекдоте про нюансы. 

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

UI - kit — это полный набор элементов и компонентов, необходимый для сборки большого однородного продукта. Он включает различные кнопки, иконки, поля для ввода данных и т. д. и позволяет сохранять узнаваемость продукта и доверие пользователей. Так мне сказал поисковик, я спорить не стал.

UI component являются основными блоками и элементами для дизайна пользовательского интерфейса. Они предоставляют пользователям способ взаимодействия с вашим веб-сайтом или приложением. Этими компонентами могут являться интерактивный текст и графика, которые сообщат пользователю, что делать дальше.

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

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

Звучит очень заманчиво, не правда ли? Давайте теперь поподробнее разберемся, что  дает UI-система в абсолюте. То есть пока, для первого приближения, берем верхи.

Плюсы.

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

Консистентность —  все интерфейсы выглядят одинаково, имеют одинаковую сетку, одинаково себя ведут. 

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

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

Продуманность — так как UI- система никогда не делается впопыхах, а требует скрупулезной проработки, то, как правило,  вся логика проработана до мельчайших деталей. Как пример: какое сообщение и когда выводить, состояния кнопок, или как выводятся ошибки. 

Вот я пишу плюсы, и восторг меня захлестывает, я начинаю переобуваться в воздухе. НО…. К сожалению, я писал вначале черновик и поэтому знаю что будет дальше… Эх! Теперь давайте будем взрослыми людьми и поговорим о  минусах.

Минусы.

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

Многие скажут, что на создание всего уходят ресурсы. Да, но тут затраты в разы выше,  чем просто разработка и поддержка продукта. UI-система это игра в долгую, и не всегда оправданная.

Гибкость — так как это большой пласт работы, то при каких-то изменениях надо задействовать множество ресурсов, а, значит, делается это не быстро. Давайте представим что у нас ребрендинг, который по статистике происходит раз в 3-5 лет. Получение результата займет 2 человека/года, если утрировано. Так же надо понимать, что помимо изменений потребуется еще и применить их к проектам.

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

Добавление ресурсов -— если к вашему основному костяку потребуется добавить любое звено, будь то дизайнер, разраб или еще кто-то, то быстро это сделать просто физически не получится. Это связано с тем что, разрабу придется прочитать 2 “Войны  и мира” для того чтобы вникнуть в подход, а дизайнеру прочитать 5 таких книг, так как придется ознакомиться со всеми стайл-гайдами и требованиями.

Стекозависимость -— разработанная дизайн система на ангуляре не будет работать на вью или реакте, так как созданные части не будут подходить. Как следствие, вы становитесь заложниками того, на чем у вас создана система. Высока вероятность того, что вам рано или поздно придется переписывать все, даже если будут просто серьезные изменения между версиями того стека, который вы выбрали. Как пример, vue 2 и 3. Или, например, произойдет обновление версий зависимых пакетов, которые будут содержать в себе синтаксические изменения, конфигурационные или обновления собственные.

Сложность интеграции с другими системами -—  в некоторых случаях UI-системы могут быть сложно интегрированы с существующими системами или сторонними сервисами. Это может потребовать дополнительных усилий и времени.

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

Для каких проектов подходят UI системы?

По опыту могу сказать следующее: UI системы подходят только для кровавого энтерпрайза и точка. Для всех остальных — это неподъемный инструмент. Возьмем пример проекта: у вас есть один продукт, над которым работают несколько команд разработки, дизайнеров, но продукт один. Тогда создание системы оправдано. При игре “в долгую” дизайн-система себя окупит и сделает вашу жизнь проще.

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

Так же нельзя скидывать со счетов стоимость обслуживания и развития ui-системы. Да, кто-то скажет, что все стоит денег, и с этим я соглашусь. Но далеко не всем нужна дизайн-система. Большинству достаточно иметь полноценный гайдлайн, который создается в разы быстрее и поддерживается проще.