Как дизайн системы помогают строить «хрущевки» и варить суп

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

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

Дизайн система — это одновременно и набор файлов и методика работы, как система тренировок у спортсменов. Чтобы было проще понять как все работает, разделим понятие на блоки.
Итак дизайн система состоит из:

• Компонентов, стилей и токенов, которые создают и используют дизайнеры. Понятие UI-кит это отсюда
• Компонентов, которые создают и используют разработчики
• Описания компонентов и всех правил работы с ними.

Пока звучит не слишком просто, но сейчас станет понятнее. Разберем все по порядку:

Есть очень точная аналогия из реального мира, которую все вы видели или видите каждый день. Это панельные дома. По своей сути они что-то вроде архитектурной дизайн-системы восточной европы и СНГ. Все эти дома собирались из стандартных панелей и блоков сделанных на заводе. Стандартными были и мелкие детали — межкомнатные двери и почтовые ящики, двери лифтов и метод окраски подъездов.

Для интерфейсов делают такой же набор стандартизированных элементов, которые называются компонентами.

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

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

Теперь немного о более тонких материях. Помимо компонентов в файлах UI кита создаются токены и стили.

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

Очень просто это понять на примере размеров. Чтобы дизайн интерфейса выглядел единообразно и не казался собранным из разных лоскутов, очень важно чтобы расстояния между объектами были подчинены какой-то системе. Поэтому можно заранее придумать набор расстояний в пикселях для отступов. Например, набора размеров в 4/8/12/16/20 пикселей будет вполне достаточно, чтобы собрать несложный мобильный интерфейс.

Но для того чтобы не вбивать эти цифры каждый раз руками, можно задать каждому размеру название, например xs/s/m/l/xl по аналогии с одеждой. Если создать в юай ките переменные с названиями и значениями размеров, то все дальнейшее проектирование будет похоже скорее на настройку. И процесс пойдет ощутимо быстрее.

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

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

И токены и стили хранятся вместе с компонентами в юай ките. И хотя это все и кажется чем-то большим и сложным, юай кит еще нельзя назвать полноценной дизайн системой.

Следующая составляющая дизайн системы — это компоненты разработчиков. Чтобы совсем не усложнять, здесь не будем вдаваться в подробности. По факту, у разработчиков должны быть все те же компоненты, стили и токены, как в UI-ките, но реализованные с помощью кода. Помимо визуального отображения в эти компоненты могут быть заложены и механизмы работы, связи с другими компонентами и с базами данных на бекэнде. Но на уровне смысла все также — из компонентов собирать готовый продукт гораздо проще и быстрее. Дополнительным плюсом наличия компонентов разработки является то, что это снижает количество возникающих несоответствий верстки и макетов. Если у дизайнеров на все компоненты можно посмотреть в юай ките, то разработчики собирают специальный сайт — витрину компонентов. Примеры таких витрин есть в клубе отечественных дизайн систем

В отличие от статичных UI-китов в витринах часто можно взаимодействовать с компонентами — понажимать на кнопочки и пощелкать переключателями.

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

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

Возьмем для примера один из самых частых компонентов — кнопку. Во-первых в дизайн системе она должна быть во всех своих состояниях — обычном, нажатом, неактивном. Для веб и десктопных интерфейсов также добавляется состояние «hover» — при наведении мышки. А еще есть фокусное состояние – когда вы выделяете обьекты нажатием кнопи tab. Если при переходе между состояниями есть анимация, она должна быть описана.

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

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

Иногда описывают правила по которым расширять цветовую палитру. Например есть метод в котором новые цвета добавляются через изменения на на 10% по шкале lightness из модели HSL.

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

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