Дизайн Саша Море
6 642

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

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

В закладки

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

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

Примерно год назад мы начали выполнять значительную часть работ по проектированию и дизайну 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. Спасибо Дане Кейлсонейт и Никите Сафонову за помощь в написании статьи.

#дизайн

{ "author_name": "Саша Море", "author_type": "editor", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 9, "likes": 30, "favorites": 48, "is_advertisement": false, "subsite_label": "design", "id": 30813, "is_wide": false, "is_ugc": false, "date": "Mon, 18 Dec 2017 11:28:00 +0300" }
{ "id": 30813, "author_id": 81289, "diff_limit": 1000, "urls": {"diff":"\/comments\/30813\/get","add":"\/comments\/30813\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/30813"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

9 комментариев 9 комм.

Популярные

По порядку

Написать комментарий...
5

Трогательный рассказ о том что, в мегафоне узнали про UI ))
Надеюсь доберутся и до корпоративного интерфейса, там еще 90е

Ответить

2

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

Ответить
2

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

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

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

Ответить

0

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

Ответить
0

Достойно

Ответить
0

Класс

Ответить
0

Дизайн-система #тренд2017.

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }