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

Материал от команды проектирования и дизайна интерфейсов оператора.

Авторы: Надежда Терехова, Артём Володин, Станислав Петров.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Набор 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 во внешний мир.

P. S. Спасибо Дане Кейлсонейт и Никите Сафонову за помощь в написании статьи.

#дизайн