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

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

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

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

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

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

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

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

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

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

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

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

  1. Визуальный язык — стилеобразующие принципы дизайна, которые отражают связь с брендом.
  2. UI Kit в Sketch — библиотека интерфейсных компонентов для дизайнеров.
  3. 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 во внешний мир.

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

1919
7 комментариев

Комментарий недоступен

5
Ответить

ui.megafon.ru - недоступно

2
Ответить

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

тисните эту статью в комментах в гугл плэй под своими приложениями :)))

кто же ухайдакал, подобным образом, сайт мтс? вот в чём ещё тайна скрыта....

2
Ответить

С удовольствием прочитала статью. Большое спасибо.

Ответить