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

Материал от команды проектирования и дизайна интерфейсов оператора. Авторы: Надежда Терехова, Артём Володин, Станислав Петров. Небольшая предыстория Примерно год назад мы начали выполнять значительную часть работ по проектированию и дизайну 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 во внешний мир. P. S. Спасибо Dana Keylsonate и Nikita Safonov за помощь в написании статьи. #дизайн via @VCRU