Всем привет, я Алексей Сизиков, руководитель отдела User Experience в Yandex Cloud. В этой статье я хочу поделиться новостью: мы выпустили нашу дизайн-систему и библиотеку компонентов Gravity UI в опенсорс. 

С помощью библиотеки компонентов Gravity UI можно строить современные интерфейсы. В неё входит:

• набор базовых React-компонентов;

• библиотека-конструктор для лендингов;

• подробные гайды по использованию компонентов;

• библиотека в Figma; 

• набор готовых иконок, в составе которого почти 600 вариантов;

• ChartKit — пакет для визуализации данных;

• Yagr — высокопроизводительный рендеринг графиков, основанный на uPlot;

• I18n — пакет для локализации интерфейса

• и ещё более 25 полезных библиотек.

Под катом — рассказ, зачем мы сделали Gravity UI, как его используем, в чём особенности и преимущества нашего подхода и как мы планируем развивать его дальше. А ещё — как настроить разные цветовые схемы в своих проектах и почему у нас четыре темы вместо двух стандартных.

Зачем мы сделали Gravity UI

Изначально библиотека UIKit была внутренним продуктом для ускорения работы команды. По мере роста числа новых сервисов мы поставили цель: построить единый UX в наших продуктах. Нам было важно использовать одинаковые паттерны поведения пользователей в сервисах, чтобы пользователь ощущал всю платформу как единое целое.

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

Относительно недавно платформы и сервисы, использующие нашу дизайн-систему, начали выходить в опенсорс: YTsaurus, YDB, DataLens, Diplodoc. Многие пользователи позитивно отзывались о них и помогали улучшать код вместе с разработчиками. Вдохновившись их примером, мы пришли к идее выпустить в открытый доступ и Gravity UI, потому что видели, насколько библиотека может быть полезна многим сервисам не только внутри Яндекса.

В чём особенности Gravity UI

Основано на реальном опыте

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

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

Гибкая вариативность

Многие компоненты Gravity UI можно настроить, учитывая разные сценарии. Например, у компонента pagination есть несколько вариантов отображения: с общим числом страниц, полными подписями кнопок, возможностью перейти к конкретной странице и изменить число ответов на странице — этот вариант рассчитан на большое число страниц. А если у вас кейс, где результатов ответов немного, можно сделать компактный режим или даже скрыть цифры и показывать только стрелочки. 

Широкая область применения

При помощи Gravity UI можно сделать как простой интерфейс для администрирования, так и  сложный дашборд с графиками. Вот несколько примеров того, что можно собрать с помощью нашей дизайн-системы:

• лендинги,

• админки,

• дашборды,

• графики,

• СRM,

• аналитический сервис.

Например, наши коллеги сделали такой дашборд:

Также можно сделать простой лендинг. Например, сайт с нашими проектами в опенсорс сделан на компонентах Gravity UI. 

Более 150 контрибьюторов

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

Приведу пример. Изначально у нас было две темы — тёмная и светлая. Но мы стали получать фидбэк от команд, которые транслируют интерфейс на телевизоры для просмотра графиков или во время стендапа. Дело в том, что на телевизоре плохо видно интерфейс. Похожая проблема встречается также у пользователей со старыми или низкокачественными мониторами.

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

Кстати, теперь вы тоже можете сделать свой вклад. Для этого присылайте PR в GitHub или оставляйте комментарии в Figma.

Как работать с Gravity UI

Настройка интерфейса под свой бренд

Далее я расскажу о том, что ещё можно сделать с помощью Gravity UI. Начну с возможности настроить дизайн-систему под свой бренд. Например, когда YDB выходил в опенсорс, перед нами встала задача сохранить единую дизайн-систему, но при этом сделать её особенной для разных брендов. Для этого мы создали отдельную группу CSS-переменных. В неё входят цвета бренда, шрифты и радиусы скруглений. В коде это выглядит как небольшой блок: 

.g-root {
    --g-font-family-sans: 'Inter', sans-serif;

    --g-text-header-font-weight: 600;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 600;
    --g-text-accent-font-weight: 600;

    --g-color-base-brand: rgb(117, 155, 255);
    --g-color-base-brand-hover: rgb(99, 143, 255);
    --g-color-base-selection: rgba(82, 130, 255, 0.05);
    --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
    --g-color-line-brand: rgb(117, 155, 255);
    --g-color-text-brand: rgb(117, 155, 255);
    --g-color-text-brand-contrast: rgb(255, 255 ,255);
    --g-color-text-link: rgb(117, 155, 255);
    --g-color-text-link-hover: rgb(82, 130, 255);

    --g-border-radius-xs: 3px;
    --g-border-radius-s: 5px;
    --g-border-radius-m: 6px;
    --g-border-radius-l: 8px;
    --g-border-radius-xl: 10px;
    --g-border-radius-2xl: 16px;
}

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

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

Компоненты в Figma

Для удобства работы наша команда дизайнеров подготовила и загрузила все состояния компонентов в Figma. При желании можно сделать копию библиотеки и попробовать собрать интерфейс сразу в сервисе.

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

Все элементы библиотеки представлены на странице Overview. Тут вы можете найти нужный компонент и перейти на страницу со всеми состояниями элемента. Кроме того, у каждого компонента есть пример использования.

Почти 600 иконок

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

Чтобы сделать поиск иконок более удобным, мы использовали специальную систему нейминга. Теперь одну и ту же иконку можно найти, вводя разные названия. Например, чтобы найти такую иконку со стрелочкой, можно ввести любое слово: arrow, enter, move, login.

Гайды

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

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

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

Как воспользоваться Gravity UI

Всё, что нужно сделать, — вбить команду в консоль:

git clone git@github.com:gravity-ui/uikit-example-cra.git my-project && cd my-project
npm i 
npm run start

Более подробная инструкция есть на главной странице репозитория в GitHub.

Все компоненты Gravity UI можно посмотреть в UIkit, а подключить нужную библиотеку для ваших потребностей — в Libraries. 

Подводя итоги, хочется ещё раз отметить: Gravity UI — это дизайн-система, которая выросла из реального опыта наших пользователей, потребности разработчиков и экспертизы дизайнеров. Это позволяет ей быть практичной и эффективной. И теперь ею может бесплатно воспользоваться любой желающий.

Мы стремимся сделать проект ещё лучше, учитывая потребности и отзывы наших пользователей. Заходите к нам в GitHub, оставляйте свои PR, пишите комментарии в Figma и делитесь примерами использования.