Дизайн-система «Мегафона»: процессы и инструменты

Время чтения: 7 минут

Небольшая предыстория

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

Сейчас команда состоит из нескольких дизайнеров, которые занимаются ключевыми продуктами «Мегафона» — сайтом, интернет-магазином и «Личным кабинетом» (веб- и мобильное приложение), а также отвечают за digital-гайды «Мегафона».

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

Зачем дизайн-система и что мы под этим понимаем

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

Сокращать время на создание дизайн-макетов и прототипов.
Делать интерфейсы консистентными и узнаваемыми, а пользовательский опыт предсказуемым.
Ускорять тестирование — чем меньше разнородных интерфейсных паттернов, тем лучше.

Наша дизайн-система состоит из трёх основных частей:

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

Визуальный язык

Визуальный язык — это способ средствами графики и композиции передать связь с брендом. «Мегафон» недавно обновил позиционирование и фирменный стиль. Совместно с агентствами Interbrand и ONY мы обновляли константы digital-языка — цвета и правила их использования, шрифты, стиль иконок, сетку, лэйаут.

Новый бренд намного более яркий, живой и дружелюбный. Некоторые изменения уже можно увидеть в digital-продуктах. Например, новые цвета, переработанный стиль иконок, обновлённая стилистика фотографий.

UI-библиотека

UI-библиотека — это набор интерфейсных компонентов, которые хранятся и поддерживаются на двух ресурсах:

UI Kit (Sketch) — библиотека для дизайна, делается в Sketch.
Ui.megafon.ru — библиотека компонентов в коде, превью компонентов и документация к ним.

Немного истории. Создание первого набора UI-инструментов

Первый набор UI-инструментов мы создавали для веб-приложения «Личного кабинета». На старте работ было множество макетов в .ai, дизайн в которых, как это обычно бывает, значительно отличался от того, что разработали в итоге.

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

Работа проходила в несколько простых по смыслу, но трудоёмких этапов:

Инвентаризация интерфейса.
Унификация компонентов.
Создание базы стилей.
Отрисовка компонентов.

Инвентаризация

Скриншотим все компоненты в интерфейсе (кнопки, формы, таблицы, тексты и так далее). Группируем их и на выходе получаем файл с категоризированным набором компонентов.

Унификация

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

Создание базы стилей

Мы нашли все цвета, которые использовались в «Личном кабинете», и текстовые стили, а также отрисовали сетку. На этом этапе цвета и стили тоже могут быть унифицированы. В данном случае не повезло оттенкам серого. Их количество уменьшилось втрое.

Отрисовка компонентов

Отрисовываем всё, что осталось после унификации. Для компонентов используется база стилей, которая была создана на предыдущем этапе.

В результате получился Sketch-файл, в котором структурированы все компоненты для построения интерфейса. Структура кита универсальна, её можно применять практически к любому проекту с незначительными изменениями.

Структура набора UI-инструментов

Набор UI-инструментов хранится в одном мастер-файле (если быть точным, то в мастер-библиотеке, так как мы используем Sketch libraries) и состоит из трёх блоков.

Первый: Style — здесь находятся стилеобразующие элементы.

Typography.
Colors.
Icons.
Logotype.

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

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

Второй: Components — элементы нашего «конструктора».

Alert.
Button.
Checkbox.
…
Top bar.

Компоненты делятся на базовые и уникальные. Базовые — компоненты, которые используются практически во всех проектах. Сюда входят как довольно простые (кнопки, элементы форм, аккордеоны), так и более сложные — меню, футер, плитки. Уникальные компоненты — это элементы, которые используются только в конкретном сервисе.

Третий: Layout — каркас вёрстки и правила построения.

Baseline grid.
Layout grid.

Базовая сетка (baseline) представляет собой классический вариант с микромодулем в 4px. Интерлиньяж, высота элементов и отступов кратны четырём. Layout grid — вертикальная сетка, внутри которой создаются блоки интерфейса.

Подключение библиотеки

Для того, чтобы использовать библиотеку компонентов из набора UI-инструментов в проекте, нужно подключить её через Sketch Libraries. Этот сервис мы стали использовать недавно, до этого просто хранили последнюю версию мастер-файла в облаке.

С увеличением количества людей, использующих библиотеку, мы стали искать способ сделать так, чтобы изменения в библиотеке транслировались одновременно всем. Sketch Libraries отлично для этого подошёл.

Для обозначения версии мастер-файла мы используем аналог semver, но для наших дизайнерских нужд есть три цифры 1.0.0:

Major — кардинальное изменение элементов.
Minor — добавление или удаление новых элементов.
Patch — исправление багов или каких-то мелочей (например, цвет рамки поля).

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

Библиотека в коде

Параллельно с созданием набора UI-инструментов мы вместе с разработчиками прорабатывали возможность сделать так, чтобы компоненты в нашем наборе стали компонентами в коде и их можно было использовать снова.

На технологическом уровне была выбрана JavaScript-библиотека React. Подробно описывать, почему именно React, нужно в отдельном материале. Вот основные причины:

Разработка и поддержка от Facebook, которая используют React на своих проектах.
Множество библиотек.
Хорошая документация.
Огромное сообщество.
Минимальные затраты на обновление до новой версии.
У наших разработчиков уже был опыт разработки на React.

При публикации новой minor-версии UI Kit происходит синхронизация компонентов между набором и библиотекой React.

Будущее

Процесс развития и внедрения дизайн-системы — долгосрочная история. Пока готов набор базовых компонентов, на которых мы собрали первый сервис на сайте. Релиз должен выйти в течение месяца. Из того, что нам предстоит сделать:

Продолжить наполнение библиотеки более сложными компонентами.
Добавить разделы по бренду, иллюстрациям и анимации в интерфейсе.
Добавить аннотации про то, в каком контексте и как следует использовать компоненты, а также описать высокоуровневые принципы дизайна.
Распространить подход на другие продукты компании.
Открыть доступ к ui.megafon.ru во внешний мир.

Авторы: MegaFon UX/UI Team

Источник