Разработка дизайн-системы на основе «атомного дизайна» в General Electric11.11.2016 14:08

Наша первая дизайн-система, разработанная в 2012 году, была очень похожа на современные. Система была создана для привлечения и поддержки широкой аудитории GE и вмещала в себя большой выбор общих шаблонов (я буду использовать этот термин как для элементов интерфейса, так и для элементов взаимодействия с пользователем), сгруппированных по функциям, которые они выполняют. Это было сделано для того, чтобы команда из 10 дизайнеров сработалась с 40 тысячами разработчиков со всего мира, создавая соответствующее программное обеспечение.

Система имела успех внутри компании, корректно работала с кнопками и тестовыми полями, но росла с трудом. Она не справлялась с работой с более сложными моделями — такими как визуализация и отображение данных. Необходимость постоянно улучшать и расширять дизайн-шаблоны мешала основной цели системы, что вылилось в непоследовательность действий и потраченные усилия.

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

«Дизайн-система не должна быть просто хранилищем компонентов пользовательских интерфейсов наряду с теорией».

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

Цель такой системы — своевременная реакция разработчиков продукта на меняющиеся потребности пользователя и передача этого опыта всей компании.

Начало с «атомным дизайном»

По определению Брэда Фроста, под методикой «атомного дизайна» имеется в виду способ иерархического формирования шаблонов. На базовом уровне находятся атомы — простые шаблоны вроде текстовых полей, кнопок или значков. А, например, форма полей email представляет собой совокупность текстовых полей, значков и кнопок и является более сложным шаблоном — «молекулой».

Каждый последующий элемент в иерархической структуре — совокупность более мелких (простых) элементов низшего порядка. Это дает двойное преимущество. Во-первых, когда дизайнер описывает форму полей email, ему не нужно повторно описывать особенности работы кнопок, текстовых полей. Во-вторых, форма email позволяет рассмотреть их практическое применение. Атомный дизайн упрощает изучение шаблонов в системе дизайна, в то же время упрощая их создание.

Атомный дизайн в GE

Predix Design System — первая платформа, которая использует структуру дизайн-системы, разработанную не только для одного продукта. Например, GE Healthcare использует подобную структуру для создания своей дизайн-системы для внутреннего использования.

Мы не стали ставить под сомнение работу Брэда Фроста в этом направлении и просто применили это в своей компании. Мы хотели перенять лучший опыт, который можно найти в описательных документах и на видео, и донести до коллег преимущества этой системы.

В процессе работы с «атомным дизайном» мы столкнулись с двумя моментами: систематикой и масштабируемостью для нашего конкретного случая. Мы сделали выводы скорее не из интуиции наших дизайнеров, а из практической работы и результата многих итераций.

Проблемы с систематикой «атомного дизайна»

Система, использующая «атомный дизайн», привела наших коллег в замешательство. Им было непонятно, почему сайт, содержащий информацию о дизайн-софте, пестрит терминами из химии, которые они в последний раз слышали в школе. Эта метафора не смогла ни вдохновить, ни воодушевить наших пользователей. Мы поняли, что систематику сложно донести и описать и систему надо сделать понятнее.

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

Масштабируемость концепции «атомного дизайна»

Создание иерархии

Брэд Фрост открыл «атомный дизайн», который начинается с уровня «атомов». В то же время он описал, как «атомы» соединяются и создают «молекулы». Он начал с абстрактных вещей, а закончил максимально конкретно — созданием полноценной веб-страницы.

Генератор сайтов Pattern Lab в описании процесса придерживается такой же последовательности. Представив «атомный дизайн» таким образом, вам будет проще обучить людей процессу создания крупных элементов, состоящих из мелких. Однако мы поняли, что это не всегда так.

Важный момент в нашей дизайн-системе — возможность обучения. Мы хотим, чтобы дизайнеры обращались к системе не только для изучения доступных шаблонов, но и за способами правильного и уместного их применения. Для этого дизайнеру необходима среда (окружение), в которой находится пользователь. Тогда он поймет, какая задача перед ним стоит и как помочь пользователю ее решить с помощью наших шаблонов.

Такая среда существует только на самых конкретизированных уровнях «атомного дизайна», где есть готовое описание полностью сформированных страниц и приложений. Именно на таких уровнях мы предлагаем дизайнерам применить систему на практике.

Расширяя систему

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

Эти фундаментальные шаблоны должны использоваться дизайнерами при создании новых шаблонов. Оба этих элемента будут детально описаны ниже.

Структура новой дизайн-системы

Приложения

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

Предметы

«Предметы» — это элементы интерфейса, которые помогают пользователю решить задачу. Это совокупность возможностей, которые ценны для пользователя, и они не обязательно должны быть сверхпривлекательными. Предмет управления аккаунтами и правами никогда не всплывет в заголовках статей, но он невероятно важен для корпоративных приложений. Также он должен быть общим для использования в различных предложениях компании.

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

Шаблоны

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

Исключая организмы

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

Мы выяснили, что разграничение на «шаблоны», «организмы» и «молекулы» усложняет понимание системы для потребителей. Дизайнерам и разработчикам эти слова казались ничего не значащими, потому что в ней есть уже готовые шаблоны. Простейшие элементы, такие как кнопки и текстовые блоки, определены как «атомы». А более сложные элементы, такие как графики временных интервалов, противоречивы и требуют детального рассмотрения.

В то же время необходимо четкое понимание того, был тот или иной шаблон комбинацией «атомов» и «молекул» или нет. Мы решили, что будет проще удалить уровень «организмов» и разделить его содержание на два примыкающих уровня. Элементы, у которых имеется четкая структура (хэдер, футер) стали уровнем «шаблонов», а элементы со сложным взаимодействием с пользователем (визуализация данных) остались на уровне «молекул» (хотя они сами могут состоять из «молекул»).

Компоненты

Компонентом мы называем то, что в «атомном дизайне» зовется «молекулами». Компоненты являют собой более сложную часть интерфейса. Это, например, шаблоны поисковых полей, таблиц с данными и диапазоны данных. Компонент — наиболее популярный термин для большинства дизайн-систем. Забегая вперед: мы понимаем, что этот уровень будут больше всего использовать как дизайнеры, так и разработчики. Поэтому мы и выбрали наиболее знакомый термин для обеих групп.

Основы

Основы, в «атомном дизайне» известные как «атомы», содержат шаблоны низшего порядка, самые простые элементы. Здесь можно найти кнопки, чекбоксы и ссылки. Как и в «атомном дизайне», «основы» — элементы наименьшего порядка в структуре. Их нельзя поделить на меньшие части. Они почти идентичны уровню «атомов», за исключением того, что мы решили исключить элементы более теоретического характера и поместить их в «принципы».

Принципы

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

Практика

В дизайн-системе Predix есть созданные шаблоны и описание их использования. Работа многих команд позволила нам выстроить четкую и понятную иерархию дизайн-системы. Команда разработчиков платформы открыла фундаментальные элементы «принципов», «основ», «компонентов» и «шаблонов» в системе. Команда, ответственная за продукт, создала шаблоны дизайна для наиболее востребованных уровней дизайн-системы.

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